This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Animation
In this section, we'll look at the processes for creating three simple types of animations: frame by frame, motion tweened, and shape tweened. The techniques you'll learn here can be used to create animations on a graphic or movie clip symbol's timeline, as well as your movie's main timeline.
Planning Your Project
Processor Considerations
Hollywood has a way of distorting reality. Just as teenage girls drooled at the thought of being trapped on a sinking Titanic with Leonardo DiCaprio, anyone who regularly uses a computer has surely salivated over the speed at which they run in the movies. In Hollywood's vision of the world, every home computer is connected to the Net; you never have to boot your machine; and that desktop box contains enough power to coordinate a shuttle mission, find a cure for cancer, and crunch out the graphics for Jurassic Park—all at the same time!
Well, here's the cruel reality: Processor speed—which today can range from 400 MHz to faster than 2 GHz—is a major factor in computer performance: What takes 1 second to show up using a 2-GHz processor could take 10 seconds or longer with a slower processor (Figure 10.30).As you can imagine, this is a major factor in animation. On slow computers, your animated movie will probably end up looking fairly choppy. And you can forget about those cool motion effects. All is not lost, however: Even though you can't anticipate every possibility in creating your movie, you can take some steps to minimize the effect slower machines will have on your movie's playback. For starters, you can pay attention to the following guidelines:
)
Figure 10.30 The speed at which your presentation plays will vary, depending on the processor speed of a viewer's computer.
Avoid animating too many things at once. By too many, we mean primarily large objects that require a lot of screen space to move. Although it's tempting to animate everything at once, all you need to do is play your movie on a slow computer to realize that a little self-control is worth it—that is, if you can stay awake long enough to watch your movie play!
Animate in the smallest area possible. Not surprisingly, it takes less processing power to animate a small image than it does to animate a large one.You can usually animate several small elements simultaneously without too much display trouble. So, instead of making that monster movie element rotate, you might make it smaller and do something else creative with it. And if you do decide to animate a large movie element, avoid animating any other elements on the screen at the same time.This will maximize the system resources available to handle the large object.
Avoid tweening too many objects at once. Although tweening can be a real time-saver in developing your Flash project, it eats up substantial system resources. Use tweening all you can; just be sure not to use too much of it at once.
By following these guidelines, you can avoid overtaxing a slow processor.
Creating a Frame-by-Frame Animation
Creating frame-by-frame animations usually entails numerous keyframes, each with different content. You can use frame-by-frame animation in conjunction with other types of animation; you just need to place each on a separate layer.
To create a simple frame-by-frame animation:
Create a new Flash document by choosing File > New.
Your new Flash document will initially include a single layer with one keyframe.
Click the Text tool on the Drawing toolbar.
With the Property inspector open, choose the Static Text option, then select any available font, choose 48 as the size, and specify whatever color you wish.
Click the stage to start a text label, and type an uppercase H in the lower left corner of the stage.
Select the next placeholder frame on the timeline (it will become highlighted), then choose Insert > Keyframe.
A keyframe will be inserted on Frame 2 that initially contains the same content as Frame 1 (an uppercase H).
Click the Arrow tool on the Drawing toolbar, then select the text label (if it's not already selected).
With the H selected, hold down the Shift key and press the up-arrow key three times to move the text element upward.
Select the Text tool again, place its insertion point just after the H you just moved, and type an uppercase E.
Repeat Steps 5 through 8, selecting and moving all the letters in the new keyframe, until you have completed the word HELLO (Figure 10.31).
Figure 10.31 The entire sequence of our frame-by-frame text animation.
)
Figure 10.31You can then move the playhead on the timeline to see your animation spring to life.
Obviously, this is a simple animation that merely demonstrates the frame-by-frame process. Some frame-by-frame animations consist of many layers with numerous elements requiring movement at each keyframe. The frame-by-frame video tutorial on the CD covers this same animation, with a few additional techniques thrown in.
TIP
If you want your animation to loop, place a Go To action at the end of the animation that tells it to Go To and Play Frame 1 of the same scene. For more on this action, see Chapter 12 "Getting Started with ActionScript."
Creating a Shape-Tweened Animation
Shape tweening, or morphing, describes the process of transforming one simple shape into another over a specified time interval. Flash lets you tween the shape, color, transparency, size, and location of vector graphic elements.
Flash normally attempts to tween two shapes in the most logical manner without any additional input from you. However, because each shape has unique curves and corners, Flash's calculations will not always produce the results you were looking for. When you need more control over a shape tween transformation, you can use shape hints to select common points on the beginning and ending shapes, which will correspond to each other in the shape tween.
You cannot shape-tween symbols, groups, or bitmaps—only simple shapes and text (and the latter only if you've broken it apart first; see Chapter 4, "Text"). You can, however, motion-tween symbols, groups, and text. Although you can tween more than one shape at a time on a layer, you'll get better results by using separate layers for individual tweens.
Next we'll show you how to create a simple animation of a box that tweens into the letter V. You'll learn how to tween not only shapes, but color and location as well. A little later, we'll look at how to use shape hints to gain more control over the actual tween. A video tutorial on the CD demonstrates how we put together this animation.
To create a shape-tweened animation:
Create a new Flash document by choosing File > New.
Your new Flash document initially includes a single layer with one keyframe.
Click the Rectangle tool on the Drawing toolbar.
Draw a square with no outline and a red fill color in the middle of the stage.
Select the placeholder frame on Frame 25 of the same layer on the timeline (it appears highlighted), and then choose Insert > Blank Keyframe.
A blank keyframe is inserted at Frame 25.
With the playhead on Frame 25, select the Text tool on the Drawing toolbar.
With the Property inspector open, choose a bold font (we chose Arial Black), enter 150 as the size, and choose "blue" as the color.
Click somewhere on the upper right corner of the stage to create a text label, and type a capital V.
Select the Arrow tool; the text you just typed will be automatically selected.
Choose Modify > Break Apart (perform this action twice) to turn the text into a shape (Figure 10.32).
Figure 10.32 The beginning and ending keyframes of our example
shape-tween sequence. Click on Frame 1 to automatically move the playhead back to that frame.
With the timeline at Frame 1, open the Property inspector if it isn't already open.
Choose Shape from the Tween drop-down menu, then choose from two additional options:
Blend Type. This lets you set the way the shapes' curves and corners are blended: Distributive works best for blending smooth and curvy shapes; angular works best for shapes with sharp corners and straight sides.
Easing. Easing is all about acceleration and deceleration. In real life, motion rarely occurs at a constant speed. Using Flash's easing feature, you can make a tweened animation move faster or slower at its beginning than at its end. Easing In causes the animation to move slower at the beginning of the tween, and Easing Out causes it to move faster at the beginning of the tween. If you place the Easing slider in the middle, motion speed will be constant for the duration of the tween (Figure 10.33).
Figure 10.33 The effect that different Easing settings have on a tweened animation.
Set Blend Type to Angular, and leave the Easing slider at its initial setting. The timeline will now reflect your shape tween. By moving the playhead back and forth, you can see the tweened animation you just created. Note that the actual shape, and its color and position, are all tweened.
)
Figure 10.32)
Figure 10.33TIP
After creating a tweened animation sequence, you can move the beginning or ending keyframe to lengthen or shorten the sequence, and Flash will automatically recalculate the tween sequence.
If you add a keyframe to the middle of the current tween sequence, and place a shape on the newly created keyframe, the result will be two distinct tween sequences (Figure 10.34).
)
Figure 10.34 Adding a keyframe in the
middle of an existing tween sequence creates two distinct tweens.
Even though our example shape tween appears to work adequately, Flash's shape hints settings give you even more control over the way your shapes blend onscreen.
Shape hints are small dots that are placed on beginning and ending shapes in a shape tween in order to specify that a particular point in the beginning shape should morph into a corresponding point in the end shape. For example, if you want the top-left corner of the beginning shape to morph/tween into the bottom-left corner of the ending shape, you would need to use a shape hint because Flash will otherwise automatically attempt to morph the top-left of the beginning shape to the top-left of the ending shape. You can add as many as 26 shape hints, which Flash labels a–z, per tween. Although it's not absolutely necessary, it works best to position them in counterclockwise sequence, starting from the upper-left corner of the shapes. Flash is designed to understand this order with greater accuracy.
To add shape hints to a shape tween:
Place the playhead on Frame 1.
This is where the first keyframe of our tween is located; shape hints are always added on the first keyframe of a tween.
Choose Modify > Shape > Add Shape Hint.
This places a shape hint labeled a on your initial shape (our red square).
Click and drag the shape hint to the side or corner of the shape you wish to use as a reference.
For our demonstration, move the shape hint to the upper left corner of the square.
Place the playhead on Frame 25.
This is where the last keyframe of our tween is located. The shape hint labeled a appears on the shape.
Click and drag the shape hint to the side or corner of the shape you wish to correspond with the point you marked on the first shape. For our demonstration, move the shape hint to the upper left corner of the V.
You can move the playhead any time you wish to test a shape hint's effect on a tween.
Repeat Steps 1 through 5 until shape hints appear on the beginning and ending shapes, as shown in Figure 10.35.
Figure 10.35 This graphic shows the location of shape hints on the beginning and ending keyframes of the tween sequence.
TIP
Even though it may seem like more work, you should add a shape hint to the beginning shape, set its corresponding point on the end shape, go back to the beginning shape and add another shape hint, set its corresponding point on the end shape, and so on. You'll get unpredictable results if you add several hints to the beginning shape before setting corresponding points on the ending shape.
Place your shape hints in a logical order—that is, with each new shape hint positioned as close as possible, in a clockwise position, to the one that precedes it. Careless placement can produce unpredictable results (defeating their purpose).
)
Figure 10.35To remove a shape hint:
Click and drag it off the stage.
The labels of any other shape hints used for this tween will be updated to reflect the deletion.
To remove all shape hints:
Place the playhead at the beginning keyframe of a tween sequence, and choose Modify > Shape > Remove All Hints.
Only the shape hints applied to that tween will be removed.
To display or hide shape hints:
Place the playhead at the beginning or ending keyframe of a tween sequence, and choose View > Show Shape Hints.
This option toggles the onscreen display of shape hints in a tween.
Creating a Motion-Tweened Animation
Whereas shape tweening allows you to morph simple shapes, motion tweening lets you tween symbols, groups, and text blocks. With the exception of morphing, you can accomplish pretty much the same things with motion tweening as you can with shape tweening. With motion tweening, you can tween size, skew, location, rotation, color, and transparency of symbols and groups—all of which allow you to create many of the great Flash transitions you see on the Web these days. You can also use a motion tween in conjunction with a path (line) to create an object that is not only tweened but follows the shape of the line as well (see "Motion Tweening Along a Path" later in this chapter for more information).
In the following demonstration, we'll create a simple animation of a ball whose size, location, rotation, and transparency all change. A bit later, you'll learn how to add a motion path so that the ball can appear to bounce down a street in a nonlinear fashion. The accompanying CD includes a video tutorial that demonstrates how this animation was put together.
To create a motion-tweened animation:
Create a new Flash document by choosing File > New.
Your new Flash document will initially include a single layer with one keyframe.
Click the Oval tool on the Drawing toolbar.
Draw a medium-size red circle, with no outline, in the lower left corner of the stage.
Click the Rectangle tool on the Drawing toolbar.
Within the red circle you just drew, draw a wide white rectangle with no outline (Figure 10.36).
Figure 10.36 Draw a wide white rectangle within the circle.
This will help you to later see how rotation works within a motion tween.
Select the placeholder frame on Frame 25 of the timeline, and choose Insert > Frame.
This inserts 24 regular frames after the keyframe on Frame 1, all of which initially have the same content as that keyframe.
Right-click (Windows) or Control-click (Macintosh) the keyframe on Frame 1 to bring up the Timeline menu.
From the menu that appears, choose Create Motion Tween.
Because a motion tween only works with symbol instances, groups, and text blocks, this command automatically converts content of any other type (such as simple shapes) into a symbol instance and adds a new master symbol to the library with the name Tween appended by a number. Because our red ball and white rectangle are simple shapes, Flash converted them to a symbol called Tween 1, and then placed that symbol in the library. Flash then converted what was on the stage into an instance of that symbol. The timeline now shows that a motion-tween sequence exists, but the dotted line indicates that there's a problem with the tween: The reason for this is that so far, we've only defined the beginning of the tween. Let's now define the end of it.
Move the playhead to Frame 25, which is where we want the tween to end.
With the playhead at Frame 25, click the Arrow tool on the Drawing toolbar, then select the red circle on the stage and drag it to the middle right portion of the stage.
This action automatically adds a keyframe to Frame 25, which completes the motion tween.
Move the playhead back and forth to view your animation.
Because we want our animation to spin, shrink, disappear, and speed up as it moves from left to right, we'll need to make visual edits first (size and transparency) and then edit the movement of the tween (rotation and easing).
{ActionScript } TIP
Movement similar to that produced by tweening can be achieved via ActionScript by repeatedly updating the x and/or y property values of movie clip and button instances. For more information, see Chapter 16,"Using ActionScript in Your Projects."
)
Figure 10.36To customize a motion tween:
Place the playhead at Frame 25.
Click the Arrow tool on the Drawing toolbar, and select the red ball on the stage.
Choose Modify > Transform > Scale and Rotate to bring up the Scale and Rotate dialog box (Figure 10.37).
Figure 10.37 Enter 40 as the scale percentage of our red ball, to make it 40 percent of its original size. Enter 40 in the Scale box, then click OK.
Choose Window > Properties to open the Property inspector if it isn't already open.
Choose Alpha from the drop-down menu that appears.
Enter 0 in the percentage box and press Enter/Return on the keyboard, or move the slider control all the way to the bottom.
Though the ball seems to disappear from the stage, it's actually still there—but simply transparent. If you move the playhead back and forth, you can see the effect of this edit.
Click the first keyframe of the tween sequence (which in our case is on Frame 1) and enter the following settings into the Property inspector:
Scale. Checked
Ease. Push the slider all the way to the bottom, or enter -100 in the amount box next to the slider control
Rotate. CW (clockwise)
Times. 2
Orient to path. Unchecked
Sync. Unchecked
Snap. Checked
Because these edits only affect the tween's movement properties, you have to move the playhead back and forth to see them. Two things to notice about the red ball in the tween sequence: It rotates clockwise twice between the beginning and ending keyframe, and it moves more slowly at the beginning of the tween than it does at its end. These effects are the result of the Rotate and Ease settings we selected.
Let's say that we want our red ball to be smaller in size and completely transparent at this point in the tween sequence.
)
Figure 10.37The red ball on Frame 25 will be scaled to 40 percent of its original size. To make it bigger, we could have entered a percentage greater than 100. By moving the playhead back and forth, you can see the effect of this edit. Now let's make our ball transparent on this keyframe.
Motion-tweening properties
Motion tweens have several adjustable properties, which you can access from the Property inspector (Figure 10.38):
)
Figure 10.38 The Property inspector, where you can set motion-tweening properties.
Tween. Allows you to choose the type of tweening used.
Scale. If the symbols or groups at the beginning and ending keyframes differ in size, checking this option will tween that size difference. Leaving this option unchecked will cause the group or symbol to remain the same size throughout the tween sequence.
Ease. See the "Creating a Shape-Tweened Animation" section above for an explanation of easing.
Rotate. The options on this drop-down menu let you tween a rotation of the group or symbol between the beginning and ending keyframes:
None. The group or symbol will not rotate.
Auto. If you have already manually rotated the group or symbol in one of the keyframes, this option would tween that rotation in the direction that requires the least amount of motion. For example, if the group or symbol has not been rotated in the starting frame of the tween (0-degree rotation) but by the ending frame is rotated to an angle of 270 degrees, Flash will automatically rotate it at angles (degrees) of 359, 358, 357, and so on rather than 1, 2, 3, and so on because the former require less motion to reach 270 degrees.
CW/CCW (clockwise/counterclockwise). These options let you specify whether to rotate the group or symbol instance in a clockwise or counterclockwise direction. The adjacent box indicates the number of full rotations that will be completed over the duration of the tween.
Orient to path. This option is only relevant if you are setting a motion tween along a path (see "Motion Tweening Along a Path" later in this section). It allows you to determine whether the baseline of a motion-tweened group or symbol instance remains at the same angle, relative to its path of movement, throughout the tween (Figure 10.39).
Figure 10.39 The top portion of this graphic illustrates how a motion tween follows a path with the "Orient to path" option turned off; the
bottom illustrates how it moves with the option selected. Sync. See the "Timeline Menu" section earlier in the chapter for an explanation of this option.
Snap. If you're using a motion guide with a tween sequence, you can choose whether objects on the keyframes of the tween 'snap' to the path designated on the motion-guide layer. We'll look more at this feature right now.
)
Figure 10.39Motion tweening along a path
Given a choice, you probably won't want to have every motion-tweened animation move in a straight line from Point A to Point B. Happily, with Flash's motion-guide layer feature you can make a motion-tweened animation track along any line you draw or import. You simply link the layer containing your motion-tweened animation to the motion-guide layer—which can contain a line of any length, shape, or twist you desire—and the motion-tweened animation will follow the plot of the line you drew. Using the motion-tweened ball animation we already created, we'll now add a motion path to it to make it appear as if it's bouncing.
To motion tween along a path:
Select the layer that contains our motion-tweened animation, and press the Add Motion Guide button.
Flash will insert a motion-guide layer above the tweened animation layer (Figure 10.40). The name of the layer that includes our tweened animation is indented under the name of the motion-guide layer above it, to signify that it is linked to the motion-guide layer. You can link any number of layers to a motion-guide layer.
Figure 10.40 Pressing the Add Motion Guide button adds a motion-guide layer directly above the current layer, and automatically links the layers.Click the name of the motion-guide layer to make it the current layer (if it isn't already).
On the toolbar, click the Pencil tool.
From the Pencil tool options, choose Smooth as the pencil mode.
Draw a curvy line on the stage like the one shown in Figure 10.41.
Figure 10.41 Draw a curvy line similar to the one shown here, to create the motion path the tween will follow.
If the "Snap to guide" option is checked for the tween sequence (which it should be by default), the symbol instances on the beginning and ending keyframes will snap to the closest point along the path you just drew.
Move the playhead back and forth to see the effect of adding a motion guide.
TIP
The line drawn on the motion-guide layer can be edited and reshaped like any other line on the stage. Flash will simply recalculate the tween sequence to follow the edited path.
You can redefine the beginning and ending points of a motion path, so that the tweened image only moves along a portion of the path you originally supplied.
)
Figure 10.40)
Figure 10.41To change the beginning and ending points of a motion tween along a path:
Click the Lock Layer column to lock the motion-guide layer. This makes it uneditable.
Place the playhead at Frame 1, the beginning keyframe of our tween sequence.
Click the Arrow tool on the toolbar, then select the center of the instance of the red ball on the stage and drag it to another section of the path.
The ball instance will snap into place as you drag (Figure 10.42). You can place the symbol instance anywhere along the path—if you drag the Arrow tool away from the path, the group or symbol will still snap back onto the path.
Figure 10.42 The symbol instance will snap to the path as you drag along it. Move the playhead to the end keyframe of our tween, then perform the same actions that you did in Step 3.
A motion path is never visible when the movie is exported; if you wish, you can also make it invisible within the authoring environment.
)
Figure 10.42To make a motion path invisible in the authoring environment:
On the motion-guide layer, click the Hide Layer icon.
Although the motion path is no longer visible onscreen, the linked animations will still follow it.
You can link any number of normal layers containing motion tweens to a single motion-guide layer, if you want all of the motion-tweened elements on the linked layers to share a common path.
To link additional layers to a motion-guide layer:
Click and drag the name bar of the layer you wish to link to the motion-guide layer. A dark-gray line will appear along the bottom, indicating that layer's position relative to the other layers in the stack.
Drag the name bar until the gray line showing its position appears just below the name bar of the motion-guide layer itself, then release (Figure 10.43).
Figure 10.43 Dragging a layer underneath a motion-guide layer links it to
the motion-guide layer. Thus, if the layer named Ball 2 has a motion tween on
it, it will follow the same path as the layer named Ball.
The layer is now linked to the motion guide
Click and drag the linked layer's name bar to unlink it from the motion-guide layer. A dark-gray line will appear along the bottom, indicating that layer's position relative to the other layers in the stack.
Drag the name bar until the gray line showing its position appears either above the name bar of the motion-guide layer itself or below any other normal layer, then release.
The layer is now unlinked from the motion-guide layer.
)
Figure 10.43Creative Uses for Motion Guides
Motion guides can consist of more than just squiggly lines. In fact, depending on the effect you're trying to achieve, they can be quite complex. We'll look next at some examples of motion paths you may want to use in your projects (Figure 10.44). Although Flash's drawing tools are sufficient for creating some of them, others may require the use of an external vector program (such as Macromedia FreeHand or Adobe Illustrator) that allows you to create more sophisticated shapes—which you can then import into a motion-guide layer.
)
Figure 10.44 Examples of creative motion paths.
NOTE
Samples of these motion-guide paths can be found on the accompanying CD in the Chapter 10/Assets folder.
Bounce. This motion-guide path is useful for emulating the effect of a bouncing ball: The bounce motion is higher at its beginning and then slowly tapers off.
Drop. This is a variation of the Bounce motion-guide path just discussed. It begins with a free-fall drop, which is followed by a few minor bounces to indicate forceful contact.
Sweep. This motion-guide path is useful for animating an object so that it appears to sweep, or zigzag, across an area.
Float. This motion-Guide path emulates the motion of a very light object (like a feather or leaf) floating to the ground.
Spiral. This motion-guide path can be used to emulate the motion of an object emerging from or disappearing into a vortex of some sort.
Figure-8. This motion-guide path is useful for emulating the path of a racecar or figure-skater, or any other object that you usually find following a figure-8 path.
Star or Burst. These motion-guide paths can be used to create the effect of elements moving towards and away from a central point.