OK, let's get started. First, launch Flash. A new document window should open by
default, but if it doesn't, go ahead and open one yourself. Under Modify:Movie you can change the background
color or the dimensions of the movie at any time. For now, however, just leave the dimensions at the
default size (550 by 400 pixels).
In Flash, tweening is commonly used to move a symbol around the stage, enlarge
it, or fade it in. Tweening can also be used to make one shape morph into another. For
example, you can start with a square and tell Flash to gradually change it (morph
it) into a circle. Or, say, transform Ally McBeal into a hissing alley cat.
It may look difficult. But it isn't.
Start by renaming Layer 1 "Shape Tween 1" and inserting about 40 frames. To do this, click and drag across both layers. When 40 frames are selected, release the mouse. With the frames still selected, choose Insert:Frame and you'll see an updated time line.
Just so you know, shape tweens do not work with symbols. You need to create two shapes that are
independent of any symbols. You can, however, place a pre-existing symbol
on the stage and choose Modify:Break Apart to convert it to a plain object. Sometimes
you will have to do this more than once, especially if your symbol contains
other symbols (i.e., if you have nested symbols). In some cases, you may even need to choose Modify:Ungroup.
So, create an initial shape (either from scratch or broken out from a symbol) in the first frame. For this exercise, use a simple solid shape without outlines, like a yellow circle. Then add a keyframe where you want the tween (morph) to begin: in frame 10.
Next, insert another keyframe at frame 25 of the same layer. Either modify the original shape or delete it and draw a new shape. This will be what the first shape (the yellow circle) will morph into. Any shape will do as long as you make it different and position it in the same place as the first shape.
The Onion Skin view with Edit Multiple Frames activated allows you to see and edit across many frames simultaneously.
At this point, you can turn on onion-skinning (the top-left button above the layer names) to help you align the images. Clicking the third button (Edit Multiple Frames) at the top, will allow you to select and modify objects in all the frames that onion-skinning reveals. Turn it off when you're satisfied.
Next, double-click on the first of the two keyframes you just created and select Shape tweening from the Tweening menu. Then type play_shape in the Label field (which will be used in the next lesson). Click OK, and you're ready to go.
In
Flash 3, you can control the way your two shapes tween with shape hints. Shape hints
tell Flash where to match a particular point on one shape with a particular
point on another shape. To add a shape hint, make the first keyframe
of the shape tween active and select Modify:Transform:Add Shape Hint, or hit Command-H
(Control-H in Windows). Each time you choose that command, a red dot will appear.
Move the dot to the desired position in the first keyframe and to the corresponding
position in the second keyframe. Sometimes shape hints can help create a smoother morph, and sometimes not - you have to experiment with them to see what they do.
If you want to tween multiple shapes, it's best to create a separate layer for each tween. So say you want to add a typographic morph. Go ahead and create another layer, insert two keyframes - each with a different word - and assign the shape tween to them. Because shape tweens will not work with type objects, you'll have to choose Modify:Break Apart to convert each block of type into graphic objects.
Save the file and hit the Enter key to see what you've made. Pretty, no? Now let's create a button that the user can click to trigger the morph we've just constructed.
