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

Flash Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2008 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.

In this Flash^R 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 Photoshop^R 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.

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