A basic motion tween is very easy to produce. Let's create one in the following task, and then we can analyze it.
Try It Yourself: Create a Basic Motion Tween
In this task you'll make a circle animate across the screen by using the Motion Tween feature:
In a new file, draw a circle on the Stage.
Select the entire circle and choose Modify, Convert to Symbol (or press F8). Name it Circle, leave the behavior set to the default Movie Clip, and click OK.
Click Frame 30 in the Timeline and select Insert, Timeline, Keyframe (or press F6).
Click on the keyframe in Frame 1; the red current-frame marker moves to Frame 1. Position the circle where you want it to appear at the beginning in this case, to the left side of the Stage.
Click in the last keyframe (Frame 30) and notice that the red current-frame marker moves to Frame 30. Position the circle on the right side of the Stage.
Try scrubbing. The animation looks pretty abrupt. The circle stays on the left side for 29 frames and then jumps to the right side. To make the movement smoother, you can use tweening to have Flash take care of the in-between frames.
Set tweening in the beginning keyframe, in this case the first keyframe (in Frame 1). Select the keyframe in Frame 1 and then observe the Properties panel. When a frame is selected, the Properties panel contains a Tween drop-down list.
Select Motion from the Tween drop-down list. Leave all the default settings, as shown in Figure 8.1.
Figure 8.1. The Properties panel opens, with the first keyframe selected.
That's it! Notice in Figure 8.2 that Flash has drawn an arrow with a blue background to represent the interpolated frames those between two keyframes.
Figure 8.2. The Timeline includes an arrow on a blue background to indicate that Flash is tweening these frames.
Select Control, Test Movie (or press Ctrl+Enter) to see what happens.
Following the Rules of a Motion Tween
The previous task worked because the instructions carefully followed the rules of a motion tween:
Flash is very unforgiving when you don't follow these rules.
The good news is that Flash gives you several hints when you don't follow the rules for a motion tween. Sometimes you'll see an exclamation point button on the Properties panel (when you select the first frame of a tween that breaks one of these rules). When you click the exclamation point button, the message "Motion tweening will not occur on layers with ungrouped shapes or on layers with more than one group or symbol" appears. In other words, this message is saying, "You didn't follow the two rules." You don't even have to press a button to know something is wrong the exclamation point is enough. In addition to this warning appearing, the resulting Timeline will often look different. A dashed line will appear as another indication that you broke the rule (see Figure 8.3).
Figure 8.3. If you don't follow the rules for a motion tween, Flash warns that something is wrong.
Watch Out!: Motion Tweens and Groups
You probably noticed when you pressed the exclamation point button that the warning implies that you can motion tween either a symbol or a group. Unfortunately, Flash gives you a break here, but I would still recommend that you follow the rule that you only motion tween instances of symbols. If you have a grouped shape in the first keyframe and then you insert a keyframe later in the Timeline, you can use motion tweening with no apparent harm. However, Flash turns your grouped shape into a symbol, calls it Tween 1, and pretends nothing happened. It's as if Flash does the thinking for you. Personally, I would rather be in control and create symbols intentionally when I'm about to do a motion tween. Also, if you have a single drawing object in the two keyframes, Motion Tween works! But your file will be twice as big as it needs to be because you have two copies of that drawing object instead of a single symbol (that's used twice) in the Library.
Motion Tweening Techniques and Tips
You should feel proud of the circle you moved across the screen in the preceding task. Actually, Flash did the work you just established the two keyframes. As you're about to see, Flash can tween any two keyframes, no matter how different they are from one another. Plus, there are some ways to make the process even easier for you.
Tweening More Than Position
Recall from Hour 4, "Using the Library for Productivity," that you learned that each instance on the Stage can be different from all the others, even if you just have one master symbol in the Library. Instances can be positioned in different locations, scaled to different sizes, rotated differently, have their color effects set differently, and have special effects filters applied. In Flash Basic 8, there are seven ways in which instances can be varied: position, scale, rotation, skew (which is a type of rotation), brightness, tint, and alpha. Flash Professional 8 adds filters. Flash can tween changes in all these properties.
Let's try to tween more than just an instance's position. The following task is just an exercise to practice tweening it's not supposed to be subtle. We'll address the smoothness in the "Fine-Tuning a Motion Tween" section, later in this hour.
Try It Yourself: Tween Position, Scale, Rotation, and Color
In this task you'll explore other tweening properties:
In a new file, use the Text tool to create a text block that contains your name. Don't worry about the exact size, but make it big enough to see clearly.
Using the Selection tool, select the text block (not the text itself). Then select Modify, Convert to Symbol (or press F8) and name the symbol My Name. Click OK.
Click Frame 30 in the Timeline and insert a keyframe (by selecting Insert, Timeline, Keyframe or pressing F6).
Click on the keyframe in Frame 1 (the red current-frame marker moves to Frame 1) and position your name in the bottom-left corner. This is the initial position of the text.
While the first keyframe is selected, choose Motion from the Tween drop-down list in the Properties panel.
Click on the keyframe in Frame 30 so you can edit the end position. Select the Free Transform tool (or press Q) and use Scale to scale the text large enough to occupy the entire Stage. You might need to position it closer to the center.
Scrub to get an idea of how the tween looks. From this point forward, remember that you'll only be able to edit the properties for the instance in either the beginning or ending keyframe, not between that's where Flash is responsible for the tweening.
Move the red current-frame marker to Frame 30 and modify the color effect on the instance of the My Name movie clip. To do this, select the instance My Name and from the Properties panel select Tint in the Color Styles drop-down list, as shown in Figure 8.4. Pick a bright color and set the percentage to 100%. Scrub for a quick preview.
Figure 8.4. The Tint color style is applied to the instance in Frame 30.
Go to Frame 1 and use the Free Transform tool to stretch your name really tall. (You might need to adjust the position.)
While still in Frame 1, use the rotate option to rotate your name counterclockwise just a few degrees, as shown in Figure 8.5. Do a little skewing, too. When the Rotate option for the Transform tool is selected, the corner handles rotate and the middle handles skew.
Figure 8.5. You can change any property of the instance in Frame 1, and Flash will tween accordingly.
Check out your animation by scrubbing or testing the movie. You created two very different keyframes, and Flash figured out how to animate from one to the other.
Did you Know?: A Motion Tween Shortcut
Because you'll likely use motion tweens a lot, there's a great shortcut to know. Just right-click your starting keyframe (on a Macintosh, use Control+click), and then select the option Create Motion Tween from the list that pops up.
Beware of Flash's Territory
You are responsible for establishing keyframes. When you choose to tween, Flash is responsible for the frames between your keyframes. Consider this to be "no-man's-land," although Flash calls these frames interpolated frames. If you edit anything you see on the Stage while the red current-frame marker is between two keyframes, you'll insert a keyframe automatically (perhaps without even knowing it).
To illustrate, suppose you have two keyframes and no tweening. Remember that keyframes establish when something should be on the Stage and where it will remain until another keyframe comes along. If you position the red current-frame marker anywhere in the middle and grab the object onscreen, you'll be editing the contents of the previous keyframe and thus influencing every frame from the first keyframe to the next. (You'll see a visual clue of this when you click an object on the Stage: The span in the Timeline that the first keyframe influences will turn black.)
Messing with no-man's-land is different when you have a motion tween already established. If you position the red current-frame marker in the middle of a motion tween (as in Figure 8.6), it won't be apparent that you can even select the symbol on the Stage. If you click and drag it, you can move it. However, if you move a symbol in the middle of a motion tween, you add a keyframe. Flash is forfeiting control of that frame to you by giving you a keyframe. Adding a keyframe in the middle of a motion tween is sometimes useful, as you'll see later this hour. Just realize that you're taking away Flash's control of a frame when you insert a keyframe (either by using Insert Keyframe or by grabbing the symbol and moving it).
Figure 8.6. The red current-frame marker is positioned over the interpolated frames of the tween.
Knowing Where You Are
It's important to pay attention to the red current-frame marker as you edit keyframes for a motion tween. Consider any of the tasks you've done so far this hour. If you want the motion to go from the left to the right, your starting keyframe should have the symbol positioned on the left. If you accidentally leave the current-frame marker on the end frame and then move the symbol to the left, you're actually editing the end keyframe, and the object will move to the left not to the right. Always be sure the red current-frame marker is in the right place before you edit the contents on the Stage (see Figure 8.7).
Figure 8.7. The red current-frame marker indicates the frame in which you are currently editing.
Sticking to a Pattern
Hopefully you're beginning to see a pattern. To summarize, here's the basic pattern we've used so far:
Motion tween will tween only one object, and that object is a symbol. Make that object a symbol before creating the ending keyframe, or else the new keyframe will contain a shape or drawing object, not a symbol.
After you've created your beginning and ending keyframes containing one instance each, you can adjust the position, scale, rotation, skew, brightness, tint, and alpha of either the beginning or end keyframe.
Keep an eye on the current-frame marker in your Timeline to be sure it's located in the keyframe you want to edit.
You'll refine your technique over time, but you should follow these basic steps during your entire Flash career.
Did you Know?: Setting Tweens Automatically
In the tasks so far, you set up two keyframes and then returned to the first one to set tweening. Another variation can be handy. Specifically, when you set the tweening in one keyframe and then add a keyframe, the second keyframe will automatically have the same tween setting. This is not important when your animation has a total of two keyframes (because a keyframe's tween setting affects how it will get to the next frame, of which there is none). When you know you need more keyframes, this technique is useful. Just remember that the last keyframe will have an unnecessary tween setting. That's no problem unless, later upon adding more keyframes, you find tweens you didn't expect.