Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Animating Elements

In this task, you'll turn to animation. Flash has several animation tools, but before you learn and start using them you should understand the three primary methods of creating animations in Flash. Each method has its own advantages and disadvantages, so using them correctly can save you a lot of time in the long run.

The three primary methods of creating animation in Flash are as follows:

Frame-by-frame animation: Similar to the traditional form of animation used before the days of computers, frame-by-frame animation simulates motion by changing the contents of the stage in every frame, using a succession of keyframes. In fact, you've already created this type of animation; as you saw in the previous task, the succession of screens you see when you test the movie is an animation of sorts. Frame-by-frame animation is best suited for complex animations, such as facial motion. It's the most labor-intensive animation to create and maintain, and it also yields the largest file size; it should be avoided when possible.

Tweens: Tweens are an animation technique in which developers specify a starting and an ending point of an animation (using a keyframe for each point), and Flash creates a series of incremental changes to that graphic in the intervening static frames. Flash has two different types of tweens. Motion tweens are performed with instances, and are used to change attributes of an instance automatically over time, including location, alpha transparency, size, rotation, and so on. Shape tweens are performed with vector art (not instances), and are typically used to morph shapes.

Scripted animation: You can use ActionScript to control the location, existence, quantity, size, rotation, direction, opacity, and other features of screen elements. This technique is often used in video games, where the animation of screen elements is not predetermined but rather is determined by the user as she or he interacts with the game.

Earlier in the lesson, we mentioned that you want one element to fly across the stage, and another element to fade in and out. Knowing the animations we want, can you guess which of these types would be the best way to achieve the effects?

If you guessed motion tween, you're correct. Because all you're animating is a change of an object's attribute over timeits location and its opacitya motion tween is the most efficient way to create it. You could create the effect using a frame-by-frame animation, but it would take a lot more effort and would not improve the animation in any way. You could also script these animations, but such an approach would be overkill in this case because you're not trying to give control over each animation to the user.

In this task, you'll create an animation by motion tweening the text elements "Organic Farming" and "What is it?" on the first screen.

This step converts the text box to a graphic symbol. Motion tweens work only with symbol instances, so you'll have to convert the text to a symbol. You can motion tween any kind of instance, whether it's a graphic, button, or movie clip instance. Because you don't need any of the additional functionality of the latter two symbol types, you should choose graphic.

You can see this Graphic symbol in the Library. In addition, the text on the stage is now changed to an instance of the graphic symbol. If you click the instance of this graphic symbol, you'll see in the Property inspector that its Behavior is set to Graphic, and you'll see a description that the selected object is an instance of the symbol named TextOrganicFarming.

Remember, to create a keyframe, first click the static frame you want to convert, and then choose Modify > Timeline > Convert to Keyframes.

[View full size image]

With keyframes in Frames 1 and 32, you now have begin and end points defined for the animation. But until you return to Frame 1 and move the instance up and to the left, both keyframes are the same so there's no animation. After you move the instance in Frame 1, there's an animation in the sense that the text appears in one location for the first 31 frames and then suddenly jerks to a new position in Frame 32 (choose Control > Play to see this in action, if you like).

Of course, you don't want it to jerk into place all at once; you want the text to fly into place over a series of frames. You'll create a motion tween to produce that effect.

This applies a motion tween to this frame segment.

A change in the timeline provides visual feedback regarding the change. A tweened frame segment is colored blue and has an arrow running through it.

[View full size image]

This process is called scrubbing the timeline. As you scrub the timeline, you'll see the text animate across the screen, from the starting to the ending point. Of course, you can also test this animation using either Control > Play or Control > Test Movie.

As you can see, it's quick and easy to create animations using motion tweens.