Flash Animation 2: Shape Tweening

Introduction

With this lesson, we'll pick up at the end of where we left off in Lesson 1, Motion Tweening. We ended in frame 12, after one second of animation that moved our circle from one corner of the canvas to another; now we're going to animate the circle morphing into another shape using a technique called shape tweening. Shape tweening can take two different shapes at keyframes set any number of frames apart, and mathematically calculate the frames in between to produce a smooth animation depicting the transformation between one and the other.

In order to make a shape tween, we'll have to create another shape on another keyframe. Click on step 2 to see how that's done.Extending the Length of Your Animation

Right now we should be on frame 12, where our last animation ended; let's make this one a bit longer. The last one was one second at 12 frames; let's make this one three seconds, which means that we'll need three times as many frames: 36.

Since we want our second shape to be the very end of the animation, we'll want to create it on the last frame; you should click on the frame 36 over from frame 12 in your timeline, frame 48.

As you can see, that frame is not currently a key frame, though our blue circle still appears there. We're going to make it a key frame, but this time we don't want our circle to stay there, so we're going to make it a blank keyframe.Creating a Blank Keyframe

Right-click on frame 48 and select "Convert to Blank Keyframe". The dot that marks a keyframe will appear, white now to mark a blank keyframe (you'll note the canvas is empty on frame 48). The expanse of frames between frames 12 and 48 will turn pale violet with a dashed line connecting them. This is because Flash automatically tries to extend the motion tween created in the previous lesson, but there is no object on the last panel to tween to.

In order to fix this, just drag and click to select panels 12-48 (do NOT select your keyframe on frame 12) before right-clicking and selecting "Remove Tween". This will create a static expanse from frames 12 to 47, repeating frame 12 up until the next keyframe.

Now we'll create a new shape on frame 48.

Creating a New Shape

With frame 48 selected, I'm going to pick the Rectangle Tool from the toolbar (next to the Oval Tool), and leave my stroke set to black while setting my fill to a violet shade. In about the same area where the circle was, we'll draw in a square (or rectangle, no need to try to set a perfect square). You can make yours any size, though I'm going to make mine significantly larger than my circle was. Once you've drawn your shape on this frame, the keyframe marker will instantly turn to black, indicating that there is an object on this keyframe.

Unlike motion tweens, shape tweens can only be performed on non-grouped shapes, or: shapes that have not been converted to symbols. So with your shape drawn, there's only a few more steps to go before we're ready to create the final animation.Copying a Keyframe

Just to make sure that this animation won't interfere with the previous animated frames (and to teach you this step), we're going to copy our last keyframe of the small blue circle to a new frame, directly afterwards.

To do this, click on frame 12 to select it; then right-click and select "Copy Frames". Next, click on the next frame--frame 13--and right click, before selecting "Paste Frames". This will place a copy of the keyframe on frame 12 on frame 13.

Now, to get the blue circle ready to be shape tweened, we'll have to convert the instance of it on frame 13 it from a symbol back into a shape.Converting a Symbol Back into a Shape

Making sure that you're on frame 13, click on the blue circle in your canvas to select it. Then, in the top menu, select Modify -> Break Apart. This breaks a symbol down into its individual shapes; in this case, the shapes of the circle's blue fill and the black stroke outline. You'll be able to tell that it's broken apart when the blue outline signifying a symbol is replaced by the dotted fill indicating a selected shape.

Now we're ready to apply our shape tween.Applying a Shape Tween

The last step is easy. To apply your shape tween and morph your shapes from one into the other, just click and drag to select all of the frames from your second to last keyframes (frames 13 to 48). Then, on the Properties toolbox below, click on the "Tween" dropdown and select "Shape".

If you've done it correctly, the frames affected will color a pale green on the timeline, and a thin black arrow will connect the two keyframes. (If instead a dashed line appears, change the tween option to "none" and review your steps.)Conclusion

And there you have it; a simple shape tween. You can preview it by "scrubbing" in the timeline (dragging your cursor to move the red ticker along the timeline or clicking enter on the timeline to play the sequence)--or you can preview it in your browser. You should see your circle morphing into a square of a different color.

This process can save animators a lot of time and trouble in many instances; can you imagine trying to hand-draw an animation like this, frame-by-frame? It may not seem like much with such simple shapes, but in more complex instances it can be a lifesaver.

These past two lessons have covered simple applications of motion and shape tweening; keep an eye out for the next lesson, where we'll take a look at combining the two and a few more advanced tweening techniques.