|Flash Workshop: Shape Tweens
We've already given you a taste of how sweet Flash can be. Well, pucker up and say "tweeeeeeeen"-- because it only gets sweeter.
In our last workshop we showed you how Flash animates with motion tweens, whizzing your objects about with minimal effort from you. Now we'll teach you about shape tween, which is ten times more impressive and may have you tweening well into the night-- just because you can.
We'll take some plain old squares and have them magically turn into a name.
First off, what to tween.
Tween theory may sound dull, but understanding how a shape tween works is half the battle. I plowed into shape tweens without reading 'tween the lines (sorry), and I struggled with several projects before I sat down and just read the instructions.
First know this. You can only "shape tween" shapes. It sounds obvious, but trying to tween a group, symbol, or editable text, will only disappoint you. Fortunately, you can turn any of these objects into a shape by choosing Modify, Break Apart. Make sure you break apart your objects before you try to tween them.
Secondly, Flash may be smart, but it's not perfect. Not all shapes will tween as you intend. In fact, some tweens are so bizarre, you may feel that Flash has its own plans for your movie. Rest assured, you keep the upper hand and with a few shape hints, and a glimpse through onion skin, your tweens will look just as you wished.
Next we'll start tweening shapes.
Tween Your Shapes
Select the first frame of Layer 1 and insert a keyframe. Use the rectangle tool to draw a filled square. Select frame 15 and use the type tool to make the letter M. For this example, it might help you to make the M about the same size as the square. You can choose any colors you want. The shape tween will morph your colors as well.
With the M selected, choose Modify, Break Apart. Now delete the square from the last frame, but make sure it's still available in the first. Double click in any frame between the first and last. Choose the Tweening tab and select Shape. Choose a Blend Type. Generally, distributive will give smoother results, while you should use angular for shapes with corners and straight lines. You can play with the easing feature to modify the speed of the shapes in and out points. Click OK.
Now select the first frame and press Enter to play your movie.
The letter M can work surprisingly well, but try the same steps with the letter A, and you'll notice some funky morphing going on. Flash doesn't know what to do with the hole in the middle of the A. Instead of smoothly transforming the square into the first letter of the alphabet, it appears as though the square is turning itself inside out. Ew. Fortunately, you can control all this with shape hints (see screenshot).
Select the first frame of the tween. The square should be selected. Choose Modify, Transform, Add Shape Hint. A small, red circle with the letter "a" will appear in the center. Drag the circle to the bottom right corner of the square. Now select the last frame and the A will be selected also with a red circle a. Drag this hint to the lower right of the A. Continue this process with as many hints as you wish matching each letter hint on each shape. They should follow sequentially. If you find it difficult to get the shape hint in the exact place you want, try zooming in on the image with the magnifying glass.
Now try playing the movie again. Your A should tween more sensibly. Good enough? It gets better. You can fine tune it even more.
Fine Tune With Onion Skin
The onion skin feature in Flash lets you see all frames of the tweening process in either outline form, or as faded layers. The selected frame will appear in full color with the frames around it fading the further away they are.
At the bottom of the timeline, you will see five buttons (see screenshot). Let your mouse hover over each button for its description:
When you have chosen one of the onion skin buttons, you will notice a dark gray bar with handles appear at the top of the timeline. You can drag either handle to expose more frames in onion skin mode.
|Home||Information Page||HTML Lessons||Java Script Lessons|