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
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Create a Simple Motion Tween Animation within a Movie Clip in Flash CS3


In this FlashR CS3 tutorial, we will create a simple Motion Tween animation with a graphic that we will import as a Movie Clip. Because we want this animation to play continuously, we will place the Movie Clip on Frame 1 on the Timeline for our main movie. The sample website that I am using for this tutorial is my personal website that I am updating. Although you will not be working on the same project as my website, these steps can be applied to any project that needs a simple Motion Tween animation applied to a Movie Clip symbol.

I started with a "Wizzy Room" graphic that I placed on the bottom layer of the main Timeline which I renamed "background". Because this Wizzy Room graphic is so full of images, it would be difficult for the visitor to know which areas of the website are clickable without a little help. The purpose of the Motion Tween animation that we will be creating is to draw attention to a clickable area that will work as an email link to open an email message window. We will create the clickable button area in the next tutorial. For now, we will be creating the underlining Tween animation.

For this Motion Tween animation, we need a small graphic that looks like an envelope. I used the Custom Shape tool (Shape Envelope 1) in PhotoshopR to create the envelope on a transparent layer. We will maintain the transparent layer as we import this small graphic into our Flash movie. Then we will be ready to animate it to appear as a screensaver animation for the computer on the desk in the Wizzy Room.

  1. We will import our envelope as a Movie Clip. I still have only one frame in the Timeline for the main movie of my website. From the Menubar, click File, Import, Import to Stage.

  2. In the left box of the Import to Stage dialog box, click on Layer 1 and rename it to "email". You should now see the options for this layer to the right. We will be animating this graphic, so we will import the layer as a Movie Clip. First, click the radio button next to Bitmap image with editable layer styles. Next, give this Movie Clip an Instance name of "my_email". Keep the other default settings and click OK.

  3. You will find the small envelope graphic at the top left of the Stage. Use the Selection tool to drag the envelope to a position on top of the computer screen. As you do this, the Properties Inspector will display the settings for this Movie Clip. You can see that it is a Movie Clip symbol with an instance name of "my_email". Also, you will see that you have a new layer, named "email", in the main Timeline.
Next →




Add Create+a+Simple+Motion+Tween+Animation+within+a+Movie+Clip+in+Flash+CS3 to Twitter Add Create+a+Simple+Motion+Tween+Animation+within+a+Movie+Clip+in+Flash+CS3 to Facebook Add Create+a+Simple+Motion+Tween+Animation+within+a+Movie+Clip+in+Flash+CS3 to MySpace Add Create+a+Simple+Motion+Tween+Animation+within+a+Movie+Clip+in+Flash+CS3 to Del.icio.us Digg Create+a+Simple+Motion+Tween+Animation+within+a+Movie+Clip+in+Flash+CS3 Add Create+a+Simple+Motion+Tween+Animation+within+a+Movie+Clip+in+Flash+CS3 to Yahoo My Web Add Create+a+Simple+Motion+Tween+Animation+within+a+Movie+Clip+in+Flash+CS3 to Google Bookmarks Add Create+a+Simple+Motion+Tween+Animation+within+a+Movie+Clip+in+Flash+CS3 to Stumbleupon Add Create+a+Simple+Motion+Tween+Animation+within+a+Movie+Clip+in+Flash+CS3 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 - Line Emitter

Animating Color of Text in Motion 5

Animating Color of Shapes in Motion 5

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