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
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.

    stop();

    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


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
Drop Zones and Transitions in Motion 5

Craft Product Template - Background Layer

Craft Product Template Layers

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