What You’ll Do
Understand Frame and Instance Properties
Adjust Classic Tween Properties
Add and Remove Keyframes from a Classic Tween
Scale and Rotation a Classic Tween
Add Color Effects to a Classic Tween
Create a Classic Motion Guide Layer
Animate Along a Classic Motion Guide
In Flash, it’s not necessary to draw every frame of an animation. You can set the position and attributes of your art in the beginning and ending frames, and Flash will create all of the frames in between. This is called tweening. A motion tween connects two keyframes, each with different effects or characteristics applied to them and then gradually “morphs” one into the other. Tweening allows you to quickly animate objects, apply fades, and gradually alter color, alpha, scale, and any other effect that can be applied to a symbol, group, or text object.
The span between the starting frame and ending frame of a motion tween is called the tween span. The tween span consists of a group of frames in a single layer with a blue background in the Timeline in which an object changes over time. Only one object, known as the target object, on the Stage can be animated in each tween span.
Once an animation is tweened, you can continue to edit it by adding or removing frames to make it move slower or faster, adjust effects, or control the inertia with ease-in and ease-out properties, adding further complexity. Motion tweening produces smaller files than frame-by-frame animation because Flash describes the motion mathematically, incrementally transforming the object in between the two keyframes.
Classic tweening can only be applied to symbols. For editable shapes, groups, and text objects, you must convert them into symbols or Flash will automatically convert them when you apply motion tweening.
Classic tweening can only be applied to instances of symbols. When applying classic tweening to groups or text objects, Flash automatically converts them into symbols and stores them in the Library. When this happens, they appear in the Library named as Tween 1, Tween 2, etc. It is a good idea to convert them into symbols as the tweening is applied. When managing large projects with many assets it can become confusing to have assets named in this generic way. Of course you can always rename them by selecting the field in the Library and typing in a new name.
If your classic tweened animation doesn’t behave as expected, there are a few things you can check. If the object disappears when you play the animation and only re-appears on the end keyframe, you may have more than one object on the keyframe. Make sure that only one object, or instance, is on each keyframe in the tweened span. Also, make sure that both instances are of the same object. Flash cannot motion tween two different objects. To “morph” different shapes into each other you must use shape tweening.
There is a difference between frame properties and instance properties. This is a source of initial confusion when dealing with animation tweens (both motion and shape). Because the Property Inspector is context-sensitive, it displays properties for many different objects in Flash, depending on which of these objects is selected.
Classic motion (and shape) tweens are applied to keyframes in the Timeline. Color and Transform effects are applied to instances on the Stage. To view the classic tween properties for a specific frame or keyframe, you must select that frame. It is here that you activate tweening and tell Flash what you are going to tween (such as scale or rotation). This needs to be differentiated from the effects you apply to the instances in the tweened keyframes. These are accessed in the Property Inspector and the Transform panel whenever any instance is selected on the Stage. For example, if you check scale as an option in the tween properties for a keyframe, a change in size only results if the size of one of the instances is changed. Conversely, if you want to tween a change in alpha, you can’t do this by selecting either of the keyframes in a tween; you must select the instance on the Stage and apply the alpha change when the instance properties appear in the Property Inspector.
FL 3.1
You can tween position, scale, rotation and other transform effects applied to symbols, groups, and text. Additionally, you can apply classic tweening to color and alpha changes. A classic tween connects two keyframes. You should have only one object in the keyframe when you apply the tween or the results will be unpredictable. Tweened frames must reside on the same layer in the Timeline.
Create a new Flash document, and then click on the first frame of the Timeline.
Do one of the following:
• Draw a shape on the Stage with any of Flash’s drawing tools and convert into a symbol.
• Drag an instance of a symbol from the Library.
Select the first frame.
Click the Insert menu, and then click Classic Tween.
Click frame 10 in the Timeline.
Click the Insert menu, point to Timeline, and then click Frame.
Flash displays a dashed line in the framespan to indicate an incomplete or broken motion tween. It also tints the framespan a pale, bluish-purple to indicate that a motion tween has been applied.
Click and drag the object on the Stage at frame 10 to a new location.
Flash creates a second keyframe that is connected to the first with an arrow. This indicates the motion tween is complete.
Click the Control menu, and then click Test Movie to test the animation.
Flash gradually moves the object.
Did You Know?
You can add keyframes and then alter the position of the object on the Stage. Tweening can be applied to any two existing keyframes on the same layer. Select the first keyframe, click the Tweening popup in the Property Inspector, and then click Motion.
You can move keyframes around in the Timeline. Simply click to select it, and then click it again and drag it to a new location.
Classic tweens can be fine-tuned in the Property Inspector. When a tweened frame is selected, a number of options are enabled that you use to add complexity to your motion path. It is also where you remove an applied classic tween. Set the tween to deal with scale, set rotation direction and frequency, or apply inertia by easing in or out of the motion. Additionally, you can set orientation and snapping when using a motion guide. In Flash, you can customize easing in or out of a motion using the Edit button in the Property Inspector.
Click the Window menu, and then click Properties to open the Property Inspector.
Select a keyframe with motion tween applied.
Choose from the following settings:
• Scale. Check this when you are tweening scale changes.
• Rotate. Sets the direction and frequency your object rotates.
• Orient To Path. Use this when you have applied a motion guide layer. This keeps your object parallel to the guide relative to its center point.
• Sync. This synchronizes the animation contained in the symbol with the Timeline that contains it. Use this when your symbol’s Timeline is not an even number of frames.
• Snap. Check to snap the object’s registration point to a motion guide.
• Edit. This button allows you to create custom ease in and ease out transitions.
To remove a classic tween, click the Insert menu, and then click Remove Tween.
Click the Window menu, and then click Properties to open the Property Inspector.
Select a keyframe with motion tween applied.
Click the Ease field, and then select the setting to set the speed at which your object eases in or out of its motion.
A positive value eases in, a negative value eases out. A zero value evenly distributes motion across each frame.
After you fine-tune a motion tween, you can copy and paste the frames, tween, and symbol information to another object. When you paste a motion tween, you can also specify the motion tween properties you want to apply, such as X and Y position, horizontal and vertical scale, color, filters, and blend. You can also override target scale, rotation, and skew properties. If you want to use a motion tween as ActionScript 3.0 in the Actions panel or other code-specific location, you can use the Copy As ActionScript command.
Select the frames in the Timeline with the motion tween you want to copy. The frames you select need to be on the same layer. However, the selection can span a tween, empty frames, or two or more tweens.
Click the Edit menu, point to Timeline, and then click Copy Motion.
Select the symbol instance to receive the copied motion tween.
Click the Edit menu, point to Timeline, and then click Paste Motion.
The frames, tween, and symbol information are inserted to match the original copied tween.
Select the frames in the Timeline with the motion tween you want to copy.
Click the Edit menu, point to Timeline, and then click Copy Motion.
Select the symbol instance to receive the copied motion tween.
Click the Edit menu, point to Timeline, and then click Paste Motion Special.
Choose from the following settings:
• X or Y Position. Pastes how much to move in the X (horizontal) and Y (vertical) direction.
• Horizontal or Vertical Scale. Pastes the ratio between the current and the natural size in the horizontal (X) or vertical (Y) direction.
• Rotation And Skew. Pastes the rotation of the object.
• Color. Pastes the color values of the object.
• Filters. Pastes the filter properties of the object.
• Blend Mode. Pastes the blend properties of the object.
• Override Target Scale or Rotation and Skew Properties. Select to override the existing scale, or rotation and skew properties of the object. Clear to paste the properties relative to the target object.
Click OK.
Tweens in Flash are editable after they have been created. You can continue to change their properties and position in the Timeline, and Flash redraws the tweened frames. To change the length of a motion or shape tween (that is, the time it takes to complete the tween), you can add or remove frames in the framespan. Essentially you are adjusting the amount of frames Flash uses in its calculation of the tween. Adding frames means it takes longer for the transformation to happen, while deleting frames shortens the time.
Click anywhere on a motion or shape tweened framespan to place the playhead.
a. To remove multiple frames, select multiple frames in the Timeline.
Click the Edit menu, point to Timeline, and then click Remove Frames.
Did You Know?
If no layer is selected, the entire Timeline increases or decreases when you add or remove frames. To constrain this action to one target layer, lock all other layers you don’t want to affect, or simply select the frame in the tween you want to adjust.
Tweens with more frames will be smoother. The more frames you add to a tween, the smoother the animation plays, because Flash has more frames to split the motion between. However, if you add too many frames the animation may move so slowly that the illusion of movement could be hampered. It is best to experiment with the length of a motion or shape tween and the frame rate of your Flash movie until you get the results you are looking for.
The frame rate describes the amount of frames the Flash Player will play each second. The higher you set the frame rate, the smoother your animations will play. Traditional animations play at a rate of 24 frames per second, the same rate at which film plays, while NTSC video plays at 29.97 frames per second. It is important to keep your audience in mind and what the destination of the Flash movie will be. For delivery via the Web, you should consider the processor speeds of the destination computers. If you set the frame rate too high, the computer may not be powerful enough to play all of the frames. When this happens, Flash will drop frames in order to stay in sync. Try to avoid this scenario because it can make your animations play choppily. Consider where your Flash movie is going to be played and choose accordingly. Avoid frame rates over 30 fps, and, for slower computers, you can go as low as 12 fps, which is the default frame rate in Flash.
With a classic tween, use the Reverse Frames command to reverse the frames in the Timeline. You can access this action in the Modify menu and it will be applied to all selected frames. This works for animations created frame-by-frame or with motion or shape tweening applied. Flash changes the order of the frames so your animation plays backwards.
Click and drag on the range of the frame span or tween you want to reverse.
Click the Modify menu, point to Timeline, and then click Reverse Frames.
Trouble?
If the tween is not preserved when you use the reverse frames command, you might not have applied motion or shape tweening to the end keyframe in the tween. Flash only requires you to apply tweening to the starting keyframe in a tween. It is implied that it tweens into the next (or end) keyframe. To fix this, do one of the following: (1) Before you reverse frames, select the end keyframe and apply Motion (for motion tweening) or Shape (for shape tweening) to it from the Property Inspector. (2) After you reverse frames, select the beginning keyframe (which use to be the end keyframe) and apply Motion (for motion tweening) or Shape (for shape tweening) to it from the Property Inspector.
With a classic tween, you can add keyframes to a motion tween by simply dragging the object on the Stage on the frame on which you want the change (or keyframe) to be created or by using the Add Keyframe function in the Insert menu. For example, if you want the object to move to another coordinate before it reaches the end position, you can set another keyframe between them. In this way, you can animate shapes in several directions in the same motion tween. Alternately, you can clear a keyframe from the tween by selecting it and using the Clear Keyframe function in the Modify menu. In either case, the length of the tween is preserved; the frame’s status as a keyframe is removed and Flash redraws the animation, connecting the keyframes located before and after.
With a classic tween, any change made to an object on either keyframe can be tweened. Included are any changes made to the scale or rotation of objects on either keyframes in a tweened span. Simply alter the size or rotation of the instance on either frame, and Flash gradually tweens these properties. To change scale, you must select the scale option in the Property Inspector, while rotation has several options to choose from, including clockwise and counter-clockwise rotation, and frequency of rotation.
Open a document with a tweened animation or create a new one.
Select the first keyframe in the tween to open the Motion settings in the Property Inspector.
Select the Scale check box in the Property Inspector.
Change the size of the object on either keyframe with any of Flash’s transform methods including the Free Transform tool, the Transform panel or the transform options in the Modify menu.
To preview the animation, drag the playhead in the Timeline, or click the Control menu, and then click Test Movie.
Flash gradually increases or decreases the size of the object.
Open a document with a tweened animation or create a new one.
Change the rotation of the object on either keyframe with any of Flash’s transform methods including the Free Transform tool, the Transform panel or the transform options in the Modify menu.
In the Property Inspector, click the Rotation Options popup, and then select a rotation property:
• None. This is the default setting. No rotation is applied.
• Auto. Rotates the object in the direction requiring the least motion.
• CW. Rotates the object clockwise. Enter the number of times you want the object to rotate.
• CCW. Rotates the object counter-clockwise. Enter the number of times you want the object to rotate.
To preview the animation, drag the playhead in the Timeline, or click the Control menu, and then click Test Movie.
Flash gradually rotates the object in the direction indicated.
With a classic tween, any color effect that can be applied to an instance can be transformed in a motion tween. You can tween any color properties applied to either the starting or ending keyframe. For example, if the starting keyframe in a motion tween is tinted red and the ending keyframe is tinted yellow, Flash will gradually change the tint of the object from red, through shades of orange to the final tint of yellow. Use these properties to create any number of color effects in your animations. Additionally, you can tween the alpha of an object to make it appear to fade on and off the Stage.
Open a Timeline with a tweened animation or create a new one.
Select the object on the Stage on either keyframe in the tween.
Click the Color Styles popup in the Property Inspector, and then select an effect: Brightness, Tint, Alpha, or Advanced.
Drag the slider to set the percentage of the Color Styles applied or enter a value in the entry field.
Trouble?
If the Color styles don’t appear in the Property Inspector, you may have selected the keyframe in the Timeline and not the object on the Stage.
To preview the animation, drag the playhead in the Timeline, or click the Control menu, and then click Test Movie.
Flash applies the tint gradually between the two keyframes.
If you want to implement motion that is smoother, or that follows a curve or some specific path, you can create a motion guide. A motion guide has its own layer just above the layer containing the object. Flash allows you to draw a line that you want your object to follow with any of the built-in drawing tools. Because this layer is a guide, it will be invisible in the exported Flash movie.
Select the layer containing the classic motion tween.
Right-click (Win) or Control-click the layer containing the classic tween, and then click Add Classic Motion Guide.
Flash creates a new layer above the selected layer and indents the affected layer.
Timesaver
Press Control+click (Mac) or right-click (Win) the layer you want to add a motion guide to, and then click Add Motion Guide.
Click on the motion guide layer to select it.
Draw a line on the Stage with any of Flash’s drawing tools to define the path your object will follow.
Turn snapping on to easily animate along a classic motion guide. The center point of the object must be on the classic motion guide path for it to work, and snapping ensures that this happens. Once the classic motion guide is created, all you have to do is drag the object in the first and last frames of the tween to the classic motion path you drew and Flash will draw the in-between frames along this path.
Create a classic motion guide.
Click on the first keyframe of the motion tween, and then click and drag the object on the Stage onto the start of the motion path.
The object snaps to the motion path.
Trouble?
If the object doesn’t snap to the motion path, verify that the Snap setting is turned on in the Property Inspector for this frame. The objects on both the beginning and ending keyframe must be snapped to the motion guide line for the motion to follow the guide line.
Click on the last keyframe of the motion tween, and then click and drag the object on the Stage onto the end of the motion path.
The object follows the line you drew located in the motion guide layer.
See Also
See “Creating a Classic Motion Guide Layer” on page 263 for information on creating a motion guide.
When objects are tweened along a classic motion path, they remain in their native orientation regardless of the path. For certain objects, such as a circle, this is ok. For more complex objects, you must rotate the object so that it follows the path in a more naturalistic way. A good example of this sort of orientation in motion is in the path a car takes while driving down a road-the car must rotate gradually as the road curves to remain parallel with the road, and so, avoid disaster. Flash can do this work for you when you set the Orient To Path option in the motion tween settings.
Animate an object along a classic motion guide.
Click on the first keyframe of the motion tween to select it.
Select the Orient To Path check box in the Property Inspector.
The object will automatically rotate to remain parallel with the motion guide.
See Also
See “Animating Along a Classic Motion Guide” on page ??? for information on creating animation using a motion guide.
With a classic tween, you can customize easing in or out of a motion tween using the Edit button in the Property Inspector. The ease in and out of a motion tween is the rate at which the change of location is applied to an object. You can make an object move back and forth on the Stage within a single tween or create more complex tweens. Flash displays a graph representing the degree of motion in frames over time. The percentage of change is the vertical axis and the number of frames is the horizontal axis. The rate of change of the object is indicated by the slope of the graph’s curve.
Click the Window menu, and then click Properties to open the Property Inspector.
Select a keyframe with motion tween applied.
Click the Edit button in the Property Inspector.
Select or clear the Use One Setting For All Properties check box. Select it (default) to customize one curve, clear it to customize a curve for each curve property (Position, Rotation, Scale, Color, and Filters).
If cleared, use the Property popup to select a curve.
Click a point on the ease line to add a control point, and then drag the control point to change ease in and out. You can add and change multiple points.
Drag a tangent point (hollow circles on the sides of a control point to further change ease in and out.
Click the Play or Stop buttons to try the customized ease settings.
To reset setting to the default, click Reset.
Click OK.