g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

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.

Add Flash+CS3+Motion+Tween+Slide+In+Effect to Twitter Add Flash+CS3+Motion+Tween+Slide+In+Effect to Facebook Add Flash+CS3+Motion+Tween+Slide+In+Effect to MySpace Add Flash+CS3+Motion+Tween+Slide+In+Effect to Del.icio.us Digg Flash+CS3+Motion+Tween+Slide+In+Effect Add Flash+CS3+Motion+Tween+Slide+In+Effect to Yahoo My Web Add Flash+CS3+Motion+Tween+Slide+In+Effect to Google Bookmarks Add Flash+CS3+Motion+Tween+Slide+In+Effect to Stumbleupon Add Flash+CS3+Motion+Tween+Slide+In+Effect 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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor