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.
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.
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:
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.
*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.
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:
Discussed on this page:
motion tween to move an object across the stage, transform panel, motion tween requires symbol, start keyframe, end keyframe, guided motion tween to make an object follow a path, guided motion path, insert blank keyframe
In sheepscene.zip, password required
A password may be obtained by subscription ($20 for one month)
An access password will be emailed to the address you specify within 24 hours of receipt of payment, and will remain active for 30 days thereafter. A list of all files currently available at the site may be viewed here.
Umbrella with falling drops (on guided motion paths) by Ding Ren