Motion Tweens

Now that we've looked at how to change the scene by adding a keyframe, or multiple keyframes, let's move on to looking at how Flash can be used to create a smooth transition between two keyframes, so you don't have to create intermediary keyframes.

A motion tween can be used to move an object across the stage, or make it grow, shrink, rotate, fade, or change color continuously over time. You'll see examples of motion tweening in almost every Flash movie you look at online.

Motion Tweens Require a Symbol in the start and end keyframes

The one catch to motion tweening is that it can only be done to a symbol. You start with a symbol in the originating frame, and change it somehow in the ending frame. This means that whatever you want to apply a motion tween to must first be converted to a symbol. That's not hard to do -- you just have to remember to do it.

To make a symbol, you simply select all the pieces on stage that you want to include in your symbol and press F8 (or choose Modify, Convert to Symbol). Then choose either Graphic or Movieclip as the symbol type, and give your symbol a name. Now you'll see that symbol in the library (open the library with cmd-L), and a copy of the symbol on stage. The copy on stage is referred to as an instance of the symbol.

Example of a motion tween with a graphic symbol in the start and end keyframes

Let's open up the sheep scene once more and add a couple motion tweens to it. The first will be an airplane flying from one side to the other:

• Open sheepscene1.fla that you made on this page. Save it as sheepscene2.fla. Add an airplane layer. Extend the timeline for all layers out to frame 80 (click-drag to select all layers in frame 80, press F5 or right-click and choose Insert Frame).
• 1) Make the starting keyframe and put content in it.
  Click in frame 1 of the airplane layer and choose File, Import, Import to Stage and import airport.swf. Airport.swf doesn't contain any animation itself; it's a swf because I exported from Illustrator that way. Notice that the airplane is imported into the upper left corner of the stage, in several pieces, each one a grouped object (which you can see by selecting a piece and looking in the Properties panel). If you wanted to edit the airplane with the Flash drawing tools, you'd need to first convert it to a Flash shape by selecting all the pieces (click in the airplane layer in the timeline to select all of that layer's graphic content) and choose Modify Ungroup or Modify, Break Apart.

  We don't need to edit it though, so it can be left as is. Grab the pieces (click in the airplane layer in the timeline to select everything in it) and move it left offstage and use the transform tool to shrink it. Alternately, you could use the Transform panel (cmd-T, pc:ctrl-T) to shrink it some specific percentage. To make the airplane start flying in frame 13, we'll drag the keyframe in frame 1 down to frame 13. Click once in frame 1 to select the keyframe, then click-drag the frame down to frame 13.

• 2) Convert the content (airplane) to a symbol.
  Select all pieces of the airplane and choose Modify, Convert to Symbol. Choose Graphic, and name it airplane. Open the library (cmd-L) and you should the graphic symbol there.
• 3) Make an ending keyframe for the tween.
  Right-click in frame 65 of the airplane layer and choose Insert Keyframe.
• 4) Adjust the content of the ending keyframe.
  The point of a tween is to make something happen -- in this case, to move the airplane across the sky. So we need to position the content in the ending keyframe wherever we want it to end up. Select the airplane graphic in frame 65 and drag it off the right side of the stage.
• 5) Turn the tween on.
  Go back to frame 13, click it, and look in the Properties panel. In the Tween dropdown, choose Motion*. Voila! Tween finished. Do cmd-Enter to test the movie.
• Adjust the keyframes of the airplane layer (click once to select, then click-and-drag to move) to make it fly faster or slower. Move the content in the first or last keyframe if you don't like it. Once your tween is in place, you can always make tweeks to the timing or content of its endpoints.
• One more thing -- the sheep looks kind of silly with its head raised all the way to frame 80, so let's set it to drop back down after it bleats. In frame 32 of the sheep head layer, right-click and choose Insert Blank Keyframe. This clears the content out of frames 32-80. Now go back and click in frame 1 to select the original head position, press cmd-c to copy it, click in frame 32 and cmd-shift-v to paste it in place. Now the sheep goes down-up-down during the movie and looks a bit more natural. cmd-Enter to see what you think. Save the movie (sheepscene2.fla).

*A note about the motion tween: in Flash MX 2004 and earlier versions, you can set the Easing on your motion tween (its start speed relative to its end speed) by adjusting the Ease value in the box just below the Tween dropdown in the Properties panel. Starting in Flash 8, you can apply more elaborate custom tweens, using the Edit button next to the Ease box, to produce all kinds of tweens, including bouncy and elastic ones like the one shown below:

Descriptions of this and other changes in the Flash 8 IDE for designers may be found here.

Motion Tween #2: Guided Motion (bee)

Create a bee layer and following all the steps above, importing honeybee.swf, making the start keyframe frame 17, converting the bee to a graphic symbol (symbol name bee), making the end keyframe in frame 57, and positioning the bee in the ending keyframe so it is on sheep2's back, rotated a bit counterclockwise. Then go back to frame 17 and turn on tweening. Click the onion skin outlines button (shown in the picture below) to see how the motion tween will look:

Leaving the onion skin outlines on, we'll now change the tween so that the bee follows a curved path to land on the sheep instead. To get a symbol to tween along a specified path instead of in a straight line from one point to the other, you need to add a motion guide layer with the path in it. This is done by selecting the motion-tween layer (ie, make sure the "bee" layer is highlighted) and clicking the "add motion guide" button right below the frames. That causes a layer to be added above the layer with the motion tween in it, and that is where you'll draw the path. The easiest tool for drawing a path is the pencil, with the "smooth" option on (an option at the bottom of the tools panel when the pencil is selected).

Once the path is drawn in the guide layer, go back and click in the first keyframe of the bee layer, look in the Properties panel and check both Orient to Path and Snap.

As a final step, rotate the bee to point in the direction of the path, in both the start keyframe and end keyframe of the bee layer. Also make sure the white circle on the bee is over the endpoint of the path in both the start keyframe and end keyframes. This is done by grabbing the bee with the select tool, dragging it away from the path starting point and back onto it, getting the white circle to snap onto the endpoint of the path. Repeat those steps (rotating, then drag off-and-on) with the bee, going back and forth between start and end keyframes until you see the onion skin motion suddenly snap into place and the correct bee alignment along the path, as shown in the picture below (note: drag the handles above the timeline to cover the tween if they get moved):

Drag the playhead back and forth over the timeline to see the actual motion tween (or choose Control, Test Movie). A final step was done to move the keyframes in the sheep2 head, baa, and sheep2 shadow layers so that the head tilt and bleat happen after the bee lands. Also keyframes were added in the sheep2 head and shadow layers to bring the head back to its original position when the bleat ends: