• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 10. Animation and Interactivity > Fading Graphics In and Out

Fading Graphics In and Out

Though the name motion tween implies that it is used to animate changes in location, it can be used for much more than that. 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.

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

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

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 are 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. Once you insert the motion tween, Flash will fade in the text.

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.

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 and then the other animation.

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

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.

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

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

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 mushroom 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 mushroom bitmap instance to a graphic symbol instance.

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

The mushroom 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.

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

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 mushroom animates from 20% to 100% opacity.

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 are creating the second half of the tween, where the image fades back out.

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

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



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint