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.

Creating Your First Flash Animation

Opening a New Movie File in Flash

In this lesson we'll cover how to create a new blank movie file, and the tools and steps involved in making your first simple animation using motion tweening.

To start with, you'll open Flash by clicking on the program icon in the directory that you've installed it in. If this is your first time loading the program, it'll ask you to choose either Designer or Developer view, and a resolution that matches your monitor settings (this isn't applicable to versions of Flash prior to MX). For our purposes in this tutorial I've chosen Designer view, and my screen is set to a resolution of 1024x768. (You can always change this later by clicking the "Window" option in the top toolbar and then selecting "Panel Sets".) Once you've finished that, you'll see a blank canvas surrounded by tool sets, like the window above.Adjusting Document Settings

The canvas is set to a default size; because I prefer to work at standard sizes and aspect ratios for web production, I'm going to change my canvas size from the default of 550 pixelswide x 400 pixels high to a smaller size of 320 x 240. I'm going to do this by clicking the button on the Properties tab--the panel just below the canvas and working area--that displays the canvas size; this will open a new pop-up window containing the document's properties. For right now you only need to worry about three things: the document size, the background color, and the frame rate.

I'm going to adjust my size to 320 x 240 by manually entering the values in the spaces provided, use the color picket to select a light blue background, and leave the frame rate set at 12 fps (frames per second). This is the default frame rate for web production; for television and other media production, it can go as high as 30 frames per second. 12 is all that you really need for Flash animation for the web; it still allows a consistent flow of motion, but avoids raising your file sizes by adding extra frames.Introduction to the Primary Toolbar and Drawing a Shape

Positioned to the left side of the window, you'll see the Tools panel, with icons giving you access to the primary functions you'll need to start drawing and animating in Flash. To start with, you can click the icon that looks like a hand, in the left-hand column about halfway down under the "View" heading. This is the (aptly and amusingly named) Hand Tool; if you click and drag your mouse in your work area with this tool selected, you can literally drag your canvas about until it's positioned where you please.

Once you've got your work space settled comfortably, let's try drawing something. Under the top section of the Tools panel, click on the button depicting a white circle outlined in black; this is the Oval Tool. You can use this to draw any circular shape. Below the rest of the tools are two color-picker windows: one for the "Stroke" (represented by a graphic of a pencil) and the other for the "Fill" (represented by a graphic of a paint bucket). The stroke is the color of the shape's outline, while the fill is the color inside the shape. I'm going to set my stroke to black and my fill to a dark blue, and then draw a small circle in the upper left corner of my canvas by clicking and then dragging until the shape is at the desired size before releasing.Viewing the Timeline

Now before we jump right into animating, let's take a look at another area of the window: the timeline, set above the work area (depicted in the image below). The timeline is divided into two columns: the Layers column, and the actual timeline itself, divided into individual frames; the sliding red line marks your current position in the timeline. The timeline is one of the most important tools in Flash MX; it allows you to keep track of your various objects and shapes and which layer they're on, as well as keeping track of your animation key frames and their timing and placement. Most of the work of your animations will be done here.

As you can see, right now we have one layer (containing the circle drawn in the previous step) with one timeline associated with that layer. The first frame of the timeline is grayed out, with a small black dot marking it; what that means is that this frame is a key frame, created automatically when you drew the circle on that frame. In order to animate using tweening, you must define key frames; without them Flash has no beginning or ending points to animate in between.Converting Your Shape to a Symbol

Before we go any further, we'll need to make some changes to our circle. Why do we need to convert the shape we've already drawn to something else? Because Flash doesn't tween ordinary shapes; if you try to apply a tween while the objects are still shapes, it won't work, so we convert them to symbols; it won't take more than a moment.

Just right-click on your circle, and select "Convert to Symbol". A popup window will appear, asking what you want to name the symbol and what Behavior to apply to it; type in a name, and select "Graphic"; the other options will be covered later, in more advanced lessons. Click "OK"; you'll see the change in your object by the blue outline surrounding it. This symbol will now appear in the Library, which you can view by pressing F11 or clicking on Window -> Library; when symbols or objects are listed in the Library, they can be re-used at any point by simply dragging them onto the canvas.

Now, let's get back to animating. On the next page, we'll create another key frame so that we can tell Flash to animate in between them.Creating a New Key Frame

Let's look a the timeline again. If you'll remember, we set the frame rate for this document to 12 frames per second; that means that twelve of the blocks in the timeline will make up one second of animation. I want my circle to move over one second, so I'm going to click on the twelfth block; the timeline is marked in increments of five, so just count two after the "10" marker. If you right-click on the 12th frame, you'll see two keyframe options: "Insert Keyframe" and "Insert Blank Keyframe". You'll want to click on "Insert Keyframe"; this automatically copies everything on the previous keyframe (including our circle) to the new keyframe.

After clicking "Insert Keyframe", you can see that now the 12th frame is grayed out and marked with a dot, just like the first; the space in between them is also grayed, with the 11th frame marked by a small white square. This indicates that there is no motion or "tween" placed on the frames in between; Flash has automatically placed a hold on these frames so that they continuously fill with a repeat of the key frame.

So now, technically, we have a one-second animation--only the animation doesn't actually visibly move. In the next step we'll move things around a little, and start to really get our animation off the ground.Moving Your Symbol on a New Frame

Now we're going to go back to our workspace; making sure that you're still on frame 12 (the red timeline marker should be over that frame), use the Arrow tool to select the circle that you drew before; you'll be able to tell that it's selected by the blue outline surrounding it again.

Click and drag on the circle to move it anywhere on your canvas; I'm going to move mine to the lower right-hand corner of my active space. (Unless you want to animate your shape moving off-screen, don't move it into the gray area surrounding the canvas; objects in the gray area do not show up on the final animation.)

If you return to your timeline and click on frame 1, pressing the "Enter" key will play all of your animation; however, it doesn't look quite right, does it? The circle remains in the original position for the first eleven frames, before suddenly snapping to the new location. In the next step, we'll take care of that by applying the motion tween.Adding a Motion Tween to Your Animation

Believe it or not, this is the easy part. In Flash, "motion tweening" is used to describe the process where the program automatically creates the frames between keyframe A of an object's timeline and keyframe B to make a smooth animation depicting the object moving from one location to another. This is different from "shape tweening" because it doesn't affect the object's shape, size, or color, but we'll cover that in the next lesson.

To apply your motion tween, simply click and drag your mouse from frame 1 to frame 12 to select them; then you can either right-click on the frames and select "Create Motion Tween", or you can click on the "Tween" dropdown in the Properties tool panel and select "Motion". (Leave the other options at their default settings.) The affected frames will turn a shade of pale violet, and an arrow will appear stretching from the first keyframe to the last; this is the sign of a successful motion tween. (If the frames turn violet but the arrow is replaced by a dashed line, right-click and select "Remove Tween" before verifying that you've completed the steps properly.)Conclusion

You have now successfully completed your first animation; to play it, just press the Enter key on the timeline, or preview by selecting File -> Preview in Browser to see what it will look like when exported. You should see your circle moving smoothly from point A to point B, with no jumps in between.

Practice drawing shapes and using motion tweens on them until you're sure you've got the hang of it; try getting creative with it, and see what you can come up with. Then, when you're ready, it's time to move on to the next lesson in our 2D Animation Tutorials: an Introduction to Shape Tweening.