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

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.

[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.

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]

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.

[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.

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.

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]

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

[View full size image]

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

[View full size image]

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.