Animating In Flash


Chapter 8, "Introducing Flash 8," introduced the idea of the timeline in Flash being an amazing storage tool for information about changes over time (frames) and the visuals that appear at a particular time on the timeline (keyframes stacked in layers). Recall that a keyframe is a storage location on the timeline, telling the playback head what content to play when it reaches that frame. A keyframe is always a point on a layer where something changes. Frames just add time for a keyframe's content to be displayed. A blank keyframe, following a frame with content, is used to indicate where something disappears from a layer.

Note

When you begin to copy and paste blocks of animation, it is helpful to have every layer in the animation be the same length. This means that all layers in your animation have the same total number of frames, even if they need to use a blank keyframe to have the content disappear before the end of the animation. This way when you copy and paste you're sure that all the content comes across without strange keyframes being added and breaking your previous arrangement.


Now you can put all that knowledge to work as you read about animation in Flash. Much of the terminology of animation has come from the original hand-drawn animation techniques. You'll see that many computer techniques borrow heavily from those early methods of creating the visual illusion of movement over time on a two-dimensional surface.

There are four types of animation in Flash: Static, Keyframe-by-Keyframe, Motion Tweening, and Shape Tweening. When you know how each functions you can start planning your own animations and choose the method that enables you to keep your file size small and reduce the amount of work you have to do.

Layers With Static Content

Much of your content in an animation simply stands still. It's basically a backdrop to the action. To achieve this on the timeline you need a filled keyframe where the content appears and then frames to the end of the animation, which you place by selecting the final frame and choosing Insert, Frame (F5). If you want the static content on a layer to disappear, choose Insert, Blank Keyframe (F7) in the correct frame of that layer. Do not place a keyframe at the end of the layer. Add a keyframe to a layer only when something changes on that layer because each keyframe adds to file size.

Keyframe-by-Keyframe Animation

Keyframe animation exactly replicates, in the computer, the methods that early animators used to combine static backgrounds with moving elements to create the illusion of movement over time. In the hand-drawn process, each cell of drawn animation is photographed and then strung together to form the full animation. In Flash each keyframe of content is created and then played by the playback head.

The process is very simple. Draw a shape on the stage. This gives you your first filled keyframe on the layer. Select a frame farther down the timeline and choose Insert, Keyframe (F6). This makes an exact copy of the preceding keyframe. After you make sure the playback head is over the new keyframe, you can make changes to the content on the stage by moving the shape or deforming it in some way. Any time you want to give a keyframe on a layer more time to play you add more frames before the next keyframe on the layer.

The real skill to develop with keyframe-by-keyframe animations involves keeping the file size small. Use symbols for the content in each keyframe whenever possible, and put content that changes independently on different layers.

For instance, in an animation of a face while talking, perhaps only the mouth and eyes change and the rest of the facial features stay still. The eyes may move independently of the mouth. So you would put the content for the eyes on one layer, the mouth on another, and the face (particularly if it's static) on a third layer. This allows you to animate each facial feature independently, with changes occurring more frequently on some layers than on others.

Keyframe animation is typically used for changes that need to move organically, such as smoke or a flower growing. It can also be used for fine control over what changes in every keyframe of your animation. Be aware that this takes more time than some of your other options and so may not always be the most efficient choice.

Motion Tweening

With motion tweening, you can have Flash create all the changes in the frames between two keyframes, each of which contains a single symbol instance. We can think of a motion tween as autoanimation for instances.

Note

The word tween comes from the traditional animation term in-between. In traditional animation a key animator is responsible for drawing each keyframe or major moment in the animation sequence. Then, in-betweeners (this is actually the name of the job) go in and create all the frames between those major keyframes. Flash uses exactly the same logic.


So, what is it that you can change about the symbol instance between one keyframe and the next? You can change the position, rotation, skew, scale, and color effect of the instance on stage for each keyframe. The difference between the symbol instances in each keyframe is what Flash is tweening for you. You can even make all these changes (transformations) at one time, although this may slow down the redraw if you have all those things happening on multiple layers at the same time.

The number of frames between the first keyframe and the second tells Flash how many steps to take for each change. If you have 20 frames, there will be 20 intermediate steps from one instance appearance to the other. To speed up or slow down the transition, remove or add frames.

Always be sure to use a single instance in each keyframe of your motion tween. This includes text fields, bitmaps, groups, shapes, and multiple objects that you want to motion tween together on the same layer. Simply select them and choose Insert, Convert to Symbol (F8). If you attempt to make a motion tween without first creating a single symbol instance, Flash silently "helps" you by automatically creating a symbol in your library. Any time you see Tween 1, Tween 2, and so on in your library, it means that you forgot to make a symbol before you created your tween. I usually rename the symbol immediately or swap it for another one.

To prepare your motion tween, begin with a single instance on a layer. Place the symbol instance on the stage, where you would like it to begin, and make any transformations needed. Then move down the timeline, select a frame where you would like the tween to end, and choose Insert, Keyframe (F6). This makes an exact duplicate of your symbol instance. Go onto the stage and make your changes to the instance's position, transformation, or effect.

Now you are ready to create the motion tween. Select the first keyframe and then choose Motion from the Tween menu of the Property inspector. Alternatively, you can (Ctrl-click) [right-click] on the first keyframe. This brings up a contextual menu from which you can choose Create Motion Tween. The keyframe and frames between the two keyframes in your motion tween now turn blue and have an arrow between them, indicating the motion tween has been created (see Figure 10.17). Try pulling the playback head back and forth to see the animation you've created.

Figure 10.17. An arrow and blue background on the timeline indicates a motion tween.


To gain more control over the changes, add additional keyframes into the middle of the tween. This gives you more instances to modify for position or transformations.

To remove a motion tween, either select the first keyframe and choose None from the Tween menu in the Property inspector, or use the frame's contextual menu and choose Remove Tween (see Figure 10.18).

Figure 10.18. Contextual menu of a frame.


Custom Easing

In Flash 8, you have more control over a feature of motion tweening called easing. The easing setting indicates to Flash how fast the changes between keyframes should occur, and whether to weight the changes to earlier in the cycle or later. Easing is one of the techniques used to create a feeling of motion or gravity as your objects move through your scene. The interface for setting easing is just below the Tween options in the Property inspector.

To ease in, starting slowly and speeding up toward the end, you would select the first keyframe in our tween and in the Property inspector choose a number from the slider below 0. To ease out, starting faster and slowing down as you approach the next keyframe, you would choose a positive number.

You can also gain more control by setting up a custom easing pattern. Select the first keyframe in your motion tween and choose the Edit button to the right of the Ease slider in the Property inspector. What appears in the Custom Ease In/Ease Out dialog box, shown in Figure 10.19, is a grid with a rubber band element. Click anywhere on the line to add a point and move it so it is positive or negative to speed or slow the transition at that point in the animation. Use the curve handles to change how the speed changes are distributed. Being able to ease in and out of the same motion tween is a very powerful addition to your animation toolbox.

Figure 10.19. Custom Ease In/Ease Out dialog box.


If you'd like to gain even more control, try deselecting the Use One Setting for All Properties check box at the top of the dialog box. Then you have a different graph for position, rotation, scale, color, and filters (if you have a movie clip instance). You can make some stunning effects with these new features.

Motion Guides

Now that you've created some linear changes to the positions of your instances, perhaps you'd like to be able to create a more organic path for them to follow. For instance, you might want to create a bumblebee and make it meander up and down and around as it crosses the stage.

To create a motion guide, follow these steps:

1.

Create a motion tween with an instance starting in one position and ending in another.

2.

After you have the motion tween created, create a new layer above it.

3.

Double-click the icon to the left of the layer's name and choose the Guide option. Rename the layer "motion guide."

4.

In the layer you first created, with the motion tween, double-click the icon to the left of its name. Choose the Guided radio button (see Figure 10.20). Press OK and you can see the icons change so that now the guide layer is linked to your motion tween layer.

Figure 10.20. Layer Properties dialog box, with Guided option selected.


5.

Select the motion guide layer so it is active. This is crucial because if you draw on your motion guide layer the effect doesn't work.

6.

Choose the Pencil tool, setting the options to Smooth in the lower toolbar, and then draw a path with loops and ups and downs (see Figure 10.21). If you don't like it, use Edit, Undo and redraw the path. The only rule is to have a single continuous path.

Figure 10.21. Guide layer with a path drawn with the Pencil tool.


7.

Now you just need to attach each instance in your motion tween to the path. Select the first keyframe in the motion guide layer and then click and drag your object by the transformation circle so that it snaps to the point on the line you want the object to start moving along the path. You can tell when it snaps because the circle indicator becomes larger. To edit the location of the transformation point of your instance, choose the Free Transform tool (Q) and move the circle. Return to the Move tool (V) and then resnap your instance to the path.

8.

Select the second keyframe and drag the second instance to snap into the end point of your drawn path.

Try dragging your playback head back and forth to see how the instance now follows the path.

You can attach other objects to the same path by making a motion tween, placing them below the motion guide layer, and changing their layer property to Guided. Then snap the objects to the guide as you did with the first.

Shape Tweening

Shape tweening uses the same principle of filling in the in-between frames as motion tweening does. However, it works only with shapes. This means that the content of each keyframe in your motion tween needs to contain only shapes. If you have a piece of text, a bitmap, a group, or a symbol in a keyframe, you cannot use this type of tweening unless you first use the Modify, Break Apart command to break those groupings back into shapes on the stage.

Begin by creating or placing a shape in your first keyframe on your layer:

1.

For this example, break apart a static text field with the text "Flash" in it. This makes it into a shape.

2.

Insert a blank keyframe down the timeline.

3.

Turn on onion skinning (first blue button below the timeline) and set the framing so you can see the text shapes.

4.

On the last frame of the tween, draw five circles that are approximately the same size as the text (see Figure 10.22).

Figure 10.22. When onion skinning is turned on, you can see the content in previous frames. They appear faded.


5.

Select the first keyframe, and in the Property inspector Tween menu, choose Shape.

6.

Now move the playback head back and forth to see the changes.

Be aware that if the vector shapes you transform are very complex, it can slow down the playback. Shape tweening of very complex shapes requires a lot of calculations.

Nested Animations

To place an animation inside a symbol nesting the animation, enter the editing mode for the master symbol and create your animation as you would on the main timeline. You can use layers, frames, and keyframes just as you learned previously.

Any time you want to have multiple types of animations happening at the same time, put some of the animation into a symbol and then use it. For instance, if you created a person walking with a keyframe-by-keyframe animation and then wanted to have that figure follow a motion guide path, you couldn't do it on the main timeline. You could put a walking animation inside a symbol, though, and then motion tween that animated symbol and then add a motion guide for that symbol. The same thing applies to animations that you would like to mask. Put the animation inside a symbol and then mask the playback of the symbol on the main timeline. You'd be amazed at how this enables you to create incredibly complex visual combinations.

Most animations that are stored inside a symbol need to be used in as many ways as possible to be efficient. To change the playback behavior of an animated graphic symbol, place the symbol instance on the stage and then give the keyframe that references the instance some frames to play on the timeline. With the instance selected, look at the Property inspector where you'll notice the menu that currently holds the Loop selection. This is the menu that controls the playback options for your graphic instance. Here you can set the graphic to play a single frame of the animation, play once, or loop continuously as long as it has frames on the timeline. This is extremely useful if you're using animated graphics for sync with sound or other timed animations where certain parts of the sequence need to freeze occasionally.

Usually you put animations into a movie clip and use them in your animations if you want them to loop independently of what is happening on the main timeline. This is helpful any time you have simultaneous movements. For instance, if you have a car driving from right to left on screen, you want the wheels to keep turning the entire time the car is driving. Stars that need to twinkle even when the main timeline is stopped is another good example.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net