Flash Animation Learning Guide (Part I)

Flash Basic 8 and Flash Professional 8 offer several ways to include animation and special effects in your document. For example, you can create tweened animations using the Timeline and Flash workspace, automated Timeline effects (by making selections in a dialog box), or ActionScript code.

To create tweened animations, you create starting and ending frames and let Flash create the animation for the frames in between. Flash varies the object's size, rotation, color, or other attributes between the starting and ending keyframes to create the appearance of movement. You can also create animation by changing the contents of successive frames in the Timeline. You can make an object move across the Stage, increase or decrease its size, change its color or shape, rotate it, and even fade in or out. Changes can occur independently of, or in concert with, other changes. For example, you can make an object rotate and fade in as it moves across the Stage. In frame-by-frame animation, you create the image in every frame.

You have several options when creating tweened animations. You can create traditional frame-by-frame animations (see the section, Creating Frame-by-Frame Animations, http://macromedia.com/devnet/flash/articles/animation_guide_09.html), motion tweens (see Creating Motion Tweens, http://macromedia.com/devnet/flash/articles/animation_guide_05.html), or shape tweens (see Creating Shape Tweens, http://macromedia.com/devnet/flash/articles/animation_guide_07.html).

Timeline effects include animated vector effects such as blur, expand, and explode. This feature makes it easy to animate an object: you can simply select the object and then select an effect and specify its parameters. With Timeline effects, you can accomplish in a few easy steps a previously time-consuming task that required more advanced knowledge of animation.

You can also create an animation by writing ActionScript code, which is sometimes called scripted animation. There are different ways you can script animation: you can write ActionScript to handle all aspects of the animation or you can use prebuilt classes and simpler code to create an animation. Using prebuilt classes makes animating with code quite easy.

Using code to create animations and effects often reduces the file size of your finished application, and can also improve the performance and consistency of the animation itself. At times, ActionScript-based animations might even reduce your workload: code can be faster to write, and it's easy to apply to many instances at once or reuse in other applications. The following sections introduce you to scripted animation fundamentals, animation using the Tween and TransitionManager classes, and integrating animation with both the Drawing API and filter classes.

Note: For more information on filter effects, see the Flash Graphic Effects Learning Guide (http://macromedia.com/devnet/flash/articles/graphic_effects_guide.html).

Requirements
To make this most of this tutorial, you need to install the following software and files: Macromedia Flash Basic 8 or Macromedia Flash Professional 8

Prerequisite Knowledge
A basic knowledge of the Flash user interface.

About Frame Rate and Animation
The frame rate, the speed at which an animation is played, is measured in number of frames per second. A frame rate that's too slow causes the animation to appear jerky; a frame rate that's too fast might negatively affect the animation or use too much of the user's computer processing power. The complexity of the animation and the speed of the computer on which the animation is being played affect the smoothness of the playback. Test your animations on a variety of machines to determine optimum frame rates.

You need to think about frame rate when working with animations because it can affect the performance of your SWF file and the computer that plays it. Setting a frame rate too high can lead to processor problems, especially when you use many assets or use ActionScript to create your animation. However, you also need to consider the frame rate setting because it affects how smoothly your animation plays.

For example, an animation set to 12 frames per second (fps) in the Property inspector plays 12 frames each second. If the document's frame rate is set to 24 fps, the animation appears to animate more smoothly than if it ran at 12 fps. However, your animation at 24 fps also plays much faster than it does at 12 fps, so the total duration (in seconds) is shorter. Therefore, if you need to make a five-second animation using a higher frame rate, it means you need to insert additional frames to fill those five seconds than at a lower frame rate‹which raises the total file size of your animation. A five-second animation at 24 fps typically has a higher file size than a five-second animation at 12 fps, depending on your assets and how you are animating the content.

Tip: Because you specify only one frame rate for the entire Flash document, it's a good idea to set this rate before you begin creating the animation.

Note: When you use an onEnterFrame event handler to create scripted animations, the animation runs at the document's frame rate, as if you created a motion tween on a timeline. An alternative to the onEnterFrame event handler is setInterval. Instead of depending on the frame rate, you call functions at a specified interval. Like onEnterFrame, the more frequently you use setInterval to call a function, the more resource-intensive the animation is on your processor.

Use the lowest possible frame rate that makes your animation appear to play smoothly at runtime because it will help reduce the strain on the end-user's processor. Try not to use a frame rate that's more than 30­40 fps; high frame rates put a lot of stress on processors. Also, do not change the appearance of the animation much, or at all, at runtime.

Finally, especially if you're working with Timeline-based animations, select a frame rate for your animation as early as possible in the development process. When you test the SWF file, check the duration and the SWF file size of your animation. The frame rate greatly affects the speed of the animation.

Creating Keyframes for Animations
A keyframe is a frame in which you define changes in the animation. When you create a frame-by-frame animation, most frames are keyframes. In a tweened animation, you define keyframes at significant points in the animation and let Flash create the contents of the frames in between. Flash displays the interpolated frames of a tweened animation as light blue or light green and with an arrow drawn between keyframes. Because Flash documents save the shapes in each keyframe, you should create keyframes only at those points in the artwork where something changes.

Keyframes are indicated in the Timeline: A keyframe with content on it is represented by a solid circle; an empty keyframe is represented by an empty circle within the frame. Subsequent frames that you add to the same layer have the same content as the keyframe.

To create a keyframe, do one of the following:

• Select a frame in the Timeline and select Insert > Timeline > Keyframe
• Right-click (Windows) or Control-click (Macintosh) a frame in the Timeline and select Insert Keyframe

Tweens are placed on the Timeline. You can also place code that animates instances on the Timeline. The appearance of your animation can differ, depending on the techniques you use to create your animation.

Motion tweens are indicated by a black dot at the beginning keyframe; intermediate tweened frames have a black arrow with a light blue background.

Shape tweens are indicated by a black dot at the beginning keyframe; intermediate frames have a black arrow with a light green background.

A dashed line indicates that the tween is broken or incomplete, such as when the final keyframe is missing.

A single keyframe is indicated by a black dot. Light gray frames after a single keyframe contain the same content with no changes and show a black line with a hollow rectangle at the last frame of the span.

A small a indicates that the frame has frame scripts assigned to it with the Actions panel.

A series of keyframes with a light gray background might indicate a frame-by-frame animation.

A hollow circle represents a blank keyframe, and white frames represent frames with no content. This frame begins a section with no content on the layer. For example, if you have an instance that blinks on a layer, you might insert blank keyframes where you do not want the instance to appear.

Creating Tweened Animations
Flash can create two types of tweened animation: motion tweening and shape tweening.

In motion tweening, you define properties such as position, size, and rotation for an instance, group, or text block at one point in time, and then change those properties at another point in time. After you do so, you can apply the motion tween between those two frames. Flash automatically creates the movement between the first and second point in time. You can also apply a motion tween and assign a path for it to follow. For more information on motion tweens, see the next section, Creating Motion Tweens.

In shape tweening, you draw a shape at one point in time, and then change that shape or draw another shape at another point in time. Flash interpolates the values or shapes for the frames in between, thus creating the animation. The shape morphs from the first shape into the second shape. For more information on shape tweens, see the later section, Creating Shape Tweens.

Note: To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart (Modify > Break Apart). To apply shape tweening to text, you must break the text apart twice to convert the text to objects.

Tweened animation is an effective way to create movement and changes over time while minimizing file size and development time. In tweened animation, Flash stores only the values for the changes between frames. To quickly prepare elements in a document for tweened animation, distribute objects to layers (Modify > Timeline > Distribute to Layers).

Creating Motion Tweens
To tween the changes in properties of instances, groups, and type, you use motion tweening. Flash can tween position, size, rotation, and skew of instances, groups, and type. Additionally, Flash can tween the color of instances and type, creating gradual color shifts or making an instance fade in or out. To tween the color of groups or type, you must make them into symbols.

If you apply a motion tween and then change the number of frames between the two keyframes, or move the group or symbol in either keyframe, Flash automatically tweens the frames again.

You can create a motion tween using one of two methods:

• Create the starting and ending keyframes for the animation and use the Motion Tweening option in the Property inspector.
• Create the first keyframe for the animation, insert the number of frames you want in the Timeline, select Insert > Timeline > Create Motion Tween, and move the object to the new location on the Stage. Flash automatically creates the ending keyframe.

The animation has several layers. All of the assets of the bee are within a movie clip. Therefore, you can animate the instance on the main Timeline. Inside the instance, some elements (such as the wings) are movie clip instances with nested animations. The wings contain frame-by-frame animations.

When tweening a position, you can make the object move along a nonlinear path. To create a motion tween using the Motion Tweening option:

1. Create a new file and call it motiontween.fla.
2. Select Frame 1 of Layer 1. This is where the animation will start.
3. Create a graphic with the Pen, Oval, Rectangle, Pencil, or Brush tool. Select it and then choose Modify > Convert to Symbol.
4. In the Convert to Symbol dialog box, make sure the Movie Clip option is selected and then click OK. Now the graphic you created is an instance on the Stage (with a symbol in the Library).
5. Select Frame 10 on Layer 1 and then press F6 to create a second keyframe. This is where the animation will end.
6. Select your instance on the Stage at Frame 10. Do any of the following to modify the instance:

• Move it to a new position on the Stage.
• Modify the item's size, rotation, or skew using the Free Transform tool.

7. Click any frame in the tween's frame span (for example, select Frame 5 of Layer 1) and select Motion from the Tween pop-up menu in the Property inspector (Window > Properties > Properties).
8. With the frame still selected, drag the arrow next to the Easing value in the Property inspector (Window > Properties > Properties) or type in a value to adjust the rate of change between tweened frames. Note: By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.
9. To rotate the selected item while tweening, select an option from the Rotate menu:

• Select None (the default setting) to prevent rotation
• Select Auto to rotate the object once in the direction requiring the least motion
• Select Clockwise (CW) or Counterclockwise (CCW) to rotate the object as indicated, and then enter a number to specify the number of rotations

Note: The rotation in Step 9 is in addition to any rotation you applied to the ending frame in Step 6.

10. Select Control > Test Movie to test the animation.

Applying Easing and Custom Ease-in and Ease-out to Motion Tweens
The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.

To produce a more realistic sense of motion, you can apply easing to the motion tween you create. Flash provides two methods by which you can apply easing to a motion tween: You can specify an easing value for each motion tween you create using the Ease slider, or you can use the Custom Ease In/Ease Out dialog box (Flash Professional only) to control the speed of the motion tween more precisely.

To apply regular easing to a motion tween:

1. Create a new file and call it motionease.fla.
2. Select Frame 1 of Layer 1. This is where the animation will start.
3. Create a graphic with the Pen, Oval, Rectangle, Pencil, or Brush tool. Select it and then choose Modify > Convert to Symbol.
4. In the Convert to Symbol dialog box, make sure the Movie Clip option is selected and then click OK. The graphic you created is an instance on the Stage (with a symbol in the Library).
5. Select Frame 10 on Layer 1 and then press F6 to create a second keyframe. This is where the animation will end.
6. Select your instance on the Stage at Frame 10. Do any of the following to modify the instance:

• Move it to a new position on the Stage.
• Modify the item's size, rotation, or skew using the Free Transform tool.

7. Click any frame in the tween's frame span (for example, select Frame 5 of Layer 1) and select Motion from the Tween pop-up menu in the Property inspector (Window > Properties > Properties).
8. With the frame still selected, drag the arrow next to the Easing value in the Property inspector (Window > Properties > Properties) or type in a value to adjust the rate of change between tweened frames:

• To begin the motion tween slowly and accelerate the tween toward the end of the animation, drag the slider up or enter a negative value between ­1 and ­100.
• To begin the motion tween rapidly and decelerate the tween toward the end of the animation, drag the slider down or enter a positive value between 1 and 100.

Note: By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.

9. Select Control > Test Movie to test the animation. The SWF file shows regular easing (the top bee) and customized easing (the bottom bee). The vertical line that animates from left to right has no easing applied.

Custom easing enables you to control these elements through an intuitive graph that provides independent control over the position, rotation, scale, color, and filters used in a motion tween. When you create a motion tween and then select it in the Timeline, you can click a button labeled Edit to customize the motion tween.

The Custom Ease In/Ease Out dialog box displays a graph representing the degree of motion over time. Frames are represented by the horizontal axis and the tween's percentage of change is represented by the vertical axis. The first keyframe is in the animation is at 0% and the last keyframe is at 100%. The rate of change of the tweened instance is shown by the slope of the graph's curve. If you create a horizontal line (no slope) on the graph, the velocity is zero; if you create a vertical line on the graph, there is an instantaneous rate of change.

To open the custom easing dialog box:

1. Create a motion tween, as described in the first example in this section.
2. Click any frame in the tween's frame span and select Motion from the Tween pop-up menu in the Property inspector (Window > Properties).
3. Click the Edit button (next to Ease) in the Property inspector to open the Custom Ease In/Ease Out dialog box.

The dialog box provides the following additional controls:

• Use One Setting for All Properties check box: The default value for this is selected, which means that the displayed curve is used for all properties and the Properties pop-up menu is disabled. When the check box is not selected, the Properties pop-up menu is enabled and each property has a separate curve defining the velocity of that property.
• Property pop-up menu: This menu is enabled only when the Use One Setting for All Properties check box is not selected. When enabled, a separate curve is maintained for each of the five properties appearing in the menu. Selecting a property in the menu displays the curve for that property. The properties are as follows:
• Position: Specifies custom ease settings for the position of an animated object on the Stage.
• Rotation: Specifies custom ease settings for the rotation of an animated object. For example, you can fine-tune how quickly or slowly an animated character turns around to face the user on the Stage.
• Scale: Specifies custom ease settings for the scale of an animated object. For example, you can customize the scale of an object more easily so it appears to be moving away from the viewer, then coming closer, and then moving away again.
• Color: Specifies custom ease settings for color transitions applied to an animated object.
• Filters: Specifies custom ease settings for filters applied to an animated object. For example, you can control the ease setting of a drop shadow that simulates a change in the direction of a light source.
• Play and Stop buttons: These buttons enable you to preview an animation on the Stage using all the current velocity curves defined in the Custom Ease In/Ease Out dialog box.
• Reset button: This button enables you to reset the velocity curve to the default, linear state.
• Position of the selected control point: In the lower-right corner of the dialog box, a numeric value displays the keyframe and position of the selected control point. If no control point is selected, no value appears.

To add a control point to the line, click the diagonal line once. This adds a new control point to the line. By dragging the positions of the control points, you can achieve a precise degree of control over the motion of an object.

Using frame indicators (represented by square handles), you click where you want an object to slow down or speed up. Clicking the handle of a control point (the square handles) selects that control point and displays the tangent points on either side of it. Tangent points are represented by hollow circles. You can drag the control point or its tangent points with the mouse or you can position them using the keyboard's arrow keys.

Tip: By default, the control points snap to a grid. You can turn off snapping by pressing the X key while dragging the control point.

Clicking an area of the curve away from any control points adds a new control point to the curve at that point without changing the shape of the curve. Clicking away from the curve and control points deselects the control point that is currently selected.

­ Part 2 is in the next issue (MXDJ 3-12)