logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Product Tour Text Balloon Animation


In the last FlashR 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

Join us in the Flash forum.





Add Product+Tour+Text+Balloon+Animation to Twitter Add Product+Tour+Text+Balloon+Animation to Facebook Add Product+Tour+Text+Balloon+Animation to MySpace Add Product+Tour+Text+Balloon+Animation to Del.icio.us Digg Product+Tour+Text+Balloon+Animation Add Product+Tour+Text+Balloon+Animation to Yahoo My Web Add Product+Tour+Text+Balloon+Animation to Google Bookmarks Add Product+Tour+Text+Balloon+Animation to Stumbleupon Add Product+Tour+Text+Balloon+Animation to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Particle System - Emitter Shape Parameters

Motion Particle Systems - Introduction

Particle Fog in Motion 5 - Scene Graphics

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor