Problem
You want to animate a change in location, size, opacity, or color effect.
Solution
Use a motion tween.
Discussion
With its unique combination of advantages, the motion tween is the animator's friend. Motion tweens offer numerous benefits:
Power -
You can animate
changes in position, overall color effect (brightness, tint, and alpha), and transformation (scale, distort, skew, etc.). Moreover, you can animate these in any combination at once.
Ease of use -
Flash does all the work for you, after you specify the beginning and ending states of the animation.
Flexibility -
You can customize the tween in several ways to create more compelling effects. With a motion tween, you can animate along motion guides, add acceleration and deceleration, adjust the duration of an animation, and add rotation. You can even orient animated elements to the motion path, on a motion-guided tween.
File size -
Because motion tweens use efficient symbols, they result in relatively compact .swf files.
To create a motion tween in Flash, complete the following steps:
Create or convert an existing element to a graphic, button, or movie clip symbol. If you haven't done so already, create a layer for the animation. Also, if you are starting the tween on a frame other than frame 1, you should create a keyframe at the appropriate point on the timeline. Only one element can be placed within a keyframe if you plan to add a motion tween to it. Adding more than one element to a keyframe to which you apply a motion tween will likely cause the tween to work incorrectly. Drag an instance of the symbol from the library to the stage. Ensure that you are placing the instance within the correct keyframe. Define the instance's starting state: specify its
location, color effect, transformation state (skewed, scaled, distorted, and/or rotated), and so on. Create a new keyframe later in the same layer. The instance in its starting state is copied into the new keyframe. Modify the new instance to indicate its ending state. That is, move it to a new location, transform it to a new size or degree of rotation, and/or adjust its opacity, brightness, and tint (using the Color drop-down menu in the Property inspector). When finished, you've defined the beginning and ending states of the element. To insert the motion tween, click the keyframe containing the first state (or any frame in its frame span). Select Insert  Timeline Create Motion Tween from the main menu. You can also add the motion tween by right-clicking or Command-clicking on the starting keyframe and selecting Create Motion Tween, or by selecting the starting keyframe and then selecting Motion Tween from the Tween menu in the Property inspector.
After you have defined the tween, the frame span in the timeline turns indigo, and an arrow points from the first keyframe to the ending keyframe.
If you are motion tweening a change in
location, the element animates in a straight line from the starting state to the ending state, at a constant rate. You can control both the motion path and the rate of motion in a tween. You can also cause the element to rotate in the course of the tween, or remain oriented to the path as it animates. These controls are discussed in the next several recipes.
Although motion tweens become second nature after a while, it is quite easy to make mistakes at first. These are a few common mistakes:
Accidentally forgetting to convert the elements you want to tween to a symbol before applying the motion tween, which can cause unexpected results. If you forget to convert the elements to a symbol, one of two things might occur, depending on the contexteither the elements will remain as they are, or Flash will automatically convert the elements to a graphic symbol with a name (exp 3pod.com) such as Tween 26. In either case, chances are good that the tween won't work. So make sure whatever you try to tween is already an instance of a symbol. You can tell when a tween will not work, because the horizontal line between the keyframes will be a dashed line instead of a solid line. The dashed line indicates that something seems to be amiss with the tween. If you have more than one symbol instance on the keyframe to which you are applying the motion tween, the tween will not work. This is a very common mistake. If the instance merely jumps from one state to the next state without any of the tween states, check to make sure you don't have any other instances or elements on the same keyframe. This is why it is recommended that you place each element on its own layer.
See Also
Recipe 4.2, Recipe 4.3, Recipe 4.4
|
