In the last Flash^R tutorial, we created the first text balloon for artist Kate Mawdsley and converted it to a movie clip which we named "KateMText". Now we will build the animation for this movie clip. Our KateMText balloon movie clip is already on the stage and on its own layer in the Timeline.

By personal preference, I give the same name to a movie clip such as "KateMText" and to the layer it will be placed on in the Timeline. The layer containing the KateMText movie clip is still called Layer 1. Rename this layer to "KateMText". This layer should be directly above the artist's ecard layer. If not, drag the layer above the KateM layer.

Let's start the fade-in for the text balloon movie clip 25 frames after the ecard begins to enlarge. That will be Frame 300. Add a Keyframe to Frame 300 to "lock" the text balloon in place. We don't need the text balloon visible until Frame 300 but when we added it to the stage, it was automatically added to Frame 1. Go to Frame 1 and delete the text balloon. Return to Frame 300 and our text balloon. We are ready to create our tween. Right-click on the text balloon and choose Create Motion Tween. It will take only 15 frames to fade-in the movie clip (Frames 300 – 315). Go to Frame 315 and add a Keyframe to "lock" in the movie clip. Return to Frame 300 and reduce the opacity (Alpha) of the movie clip to 0%.

Go back to Frame 315 and our movie clip should still be at 100% opacity. We want the balloon to remain visible on the stage along with the ecard until Frame 365. (50 frames). Add another Keyframe to Frame 365. Finally the text balloon and ecard will both fade-out over 10 frames (Frames 365 – 375). Add a Keyframe to Frame 375 and reduce the opacity of the balloon to 0%. That completes the balloon animation.

For the Product Tour, I created an ecard and text balloon animation for each of our 8 aritsts. We would start the next ecard animation at the end of the previous animation (Frame 375). Let's forego these animations and move on to creating the end animation for Section One. Once the ecard animations are complete, we can end this section of the Product Tour with a five-frame fade-in of our splash screen.

Add a new layer just below the Actions layer and name it "End". Add a Keyframe to Frame 375. Open the MainFLA file and find the Splash Screen movie clip in the Library. Make a copy of this movie clip, return to the End layer of our fla file and paste the movie clip. Right-click on the movie clip and choose Create Motion Tween. Go to Frame 380, add a Keyframe to lock the opacity at 100%. Go back to Frame 375 and reduce the opacity to 0%.

One last task for this section of the Product Tour is to add a toggle button which will allow the viewer to stop/start the animation as needed.

Pamela Gladding Ecards

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.