Printer Friendly Version

BellaOnline's Flash and Animation Editor

Flash CS3 Motion Tween Slide In Effect

Many fancy FlashR intros use the slide-in special effect to make an object move onto the stage from somewhere completely off of the stage. This effect requires that the image or object have a starting position off of the stage and move onto the stage with a Motion Tween. In this tutorial, we will do just that.

  1. Start a new ActionScript 3.0 project in Flash CS3. You may wish to change the default Document properties. For the example, I set the Width to 800, Height to 500 and the Background color to black.

  2. Rename Layer 1 to "Animation" or something more specific. I am moving a parchment graphic. So I decided to rename the layer to "Parchment".

  3. Now we are ready to import or draw the object that we will animate. From the Menu Bar, click File Import Import to Stage. By default, the image will be placed at the upper left corner and you can see that it has also been added to the Library as a bitmap.

  4. We need to drag the image to the position where we want it to remain on the stage after the animation stops. This will be the end position for the Tween. I choose to center my parchment on the stage.

  5. Before we can control the image, we need to convert it to a Movie Clip. If the image is not selected, select it with the Selection tool. From the Menu Bar, click Modify Convert to Symbol. In the Convert to Symbol dialog box, give the symbol a name and set the Type to Movie Clip. You will notice that a new Movie Clip has been added to the Library.

  6. Our slide-in animation will be about 20 frames long. Click on Frame 20 in the Timeline and add a Keyframe (Insert Timeline Keyframe).

  7. At the start of the animation, we do not want the image on the stage. In the example, the image will move onto the stage from below. Go back to Frame 1 and drag the image to just under the stage. If you want the image to slide-in from the top, left or right, you will want to place the image as needed.

  8. Let's create the Tween. Right click on any frame between 1 and 20 and choose Create Motion Tween from the pop-up menu. Test your movie (Control Test Movie).

    What happens! The animation loops continuously because we did not tell it to stop. Click on Frame 20 and open the Actions panel (Window Actions). Add the stop code and close the panel.


    Test again and our animation will play only once. Now let's add some interest to the animation. We can add some easing to the animation and make the parchment rotate during the slide-in.

  9. Go back to Frame 1 and select the Movie Clip. In the Property Inspector, set the Ease slider to about 70. Using a positive number for the Ease will cause the animation to slow down at the end. A negative number will cause the animation to start out slow and speed up.

  10. Also in the Property Inspector, you will find the Rotate control drop-down menu. Set this to CW for a clockwise rotation and CCW for counterclockwise. To the right of this, set the Times to the number of times that you wish your object to rotate 360 degrees as it slides in. My image is somewhat large, so I only set it to rotate once. You will want to experiment to see what looks best for your animation.

  11. Test your final movie clip.
This technique can be used for any imported graphic or object drawn in Flash. You can also use it for text. Try animating each letter of a word individually or just the word itself.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

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

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

BellaOnline Editor