Macromedia Studio 8 [Electronic resources] : Training from the Source

Jeffrey Bardzell, Shaowen Bardzell

نسخه متنی -صفحه : 240/ 110
نمايش فراداده

Fading Graphics In and Out

Although the name "motion tween" implies that it's used to animate changes in location, a motion tween can be used for much more. More precisely, as mentioned earlier, motion tweens can be used to animate a change in one or more instance attributes, including location, size, rotation, and visibility. In this task, you'll learn how to fade instances in and out using motion tweens.

1.

Place the frame indicator in Frame 1 and select the text box What is it?. Convert to it a graphic symbol. Name this symbol

TextWhatIsIt and select Graphic as the symbol Type .

[View full size image]

The new graphic symbol now resides in the Library, and the text box on the stage is changed to an instance of this new graphic symbol.

2.

Insert a new keyframe in Frame 24 of the text What is it layer. Select Frame 1 of the text What is it layer. Click the instance and choose Alpha from the Color drop-down menu in the Property inspector. Set the Alpha amount to 0% .

In this step, you're creating an end state for the animation by inserting a keyframe in Frame 24. You then redefine the beginning state of the animation by returning to Frame 1 and making the text instance there invisible. After you insert the motion tween, Flash will fade in the text.

[View full size image]

3.

Right-click (Windows) or Control-click (Macintosh) any frame between 1 and 23 of the text What is it layer, and choose Create Motion Tween. Scrub the timeline to preview the tween .

Remember, to scrub the timeline, drag the frame indicator across the desired frames.

The right-click/Control-click shortcut is the same as selecting Frame 1 of the text What is it layer and choosing Insert > Timeline > Create Motion Tween.

[View full size image]

Notice as you scrub that the two items of text catch your eye at the same time, competing with each other. A more effective way to animate these items might be to stagger the animations slightly so the eye first perceives one animation and then the other.

4.

Click Frame 1 of the text What is it layer. Next, drag this layer over to Frame 5 .

[View full size image]

The first keyframe in the layer is now blank, and the text doesn't begin to fade until Frame 5, nearly half a second after the Organic Farming text begins animating.

[View full size image]

You can scrub the timeline or test the movie to preview the animation, if you like.

Next, you'll make the mushrooms photo fade in and out.

5.

Click Frame 1 of the photos layer. Convert the mushrooms photo to a graphic symbol, and call it

mushrooms .

Remember, to convert something to a symbol, select it and choose Insert > Convert to Symbol.

Even though the mushrooms image is an instance of a bitmap in the Library, it is not properly a symbol. And motion tweens should only be applied to symbol instances. The solution is to convert the mushrooms bitmap instance to a Graphic symbol instance.

6.

Insert new keyframes in Frames 25 and 46 of the photos layer .

The mushrooms photo needs to fade in and out, which will require two tweens: one to fade in and one to fade out. The keyframe in Frame 25 will mark the end point of the fade-in and simultaneously the start point of the fade-out. Frames 1 and 46 will both have the mushrooms photo at low opacity.

At this point, all three keyframes still have the exact same content: one instance each of the mushrooms graphic symbol at full opacity.

[View full size image]

7.

Select Frame 1. Select the mushrooms instance and use the Property inspector to apply Alpha color at 20%. Apply a motion tween to the frame segment .

Scrub the timeline to verify that the mushrooms photo animates from 20% to 100% opacity.

[View full size image]

8.

Select Frame 46 of the photos layer. Select the mushrooms graphic instance on the stage. In the Property inspector, apply 20% Alpha to the mushrooms instance. Insert a motion tween into this frame segment as well .

You're creating the second half of the tween, where the image fades back out.

[View full size image]

9.

Choose Control > Test Movie to test the movie. When you're finished previewing the movie, close the SWF to return to the authoring environment. Save the file .

When you test the movie, you'll see the effects of the three animations. The intro sequence looks pretty good. The problem now is that the Next and Restart buttons don't work and the movie plays back without stopping.