g
Printer Friendly Version

editor  
BellaOnline's Flash and Animation Editor
 

Slide-in Motion Tween in Flash CS4

We will continue to work on our animated square ad button in FlashR CS4.

  1. Right-click on the WebDesign graphic and choose Convert to Symbol. In the dialog box, set the Name to "WebDesign" and the Type to Movie Clip. In the Properties panel, give this Movie Clip an Instance Name of "WebDesign1". Right-click again and choose Create Motion Tween. This will automatically add 24 frames to the WebDesign layer. Place your mouse over the right end of the frame span and drag it to Frame 50.

  2. Go to Frame 50 and drag the Movie Clip onto the stage. This will give you a new Keyframe on Frame 50 and create a Motion Tween.

    We will do this several more times which will make our animation have a total of 300 frames.

  3. On the Background layer, right-click on Frame 300 and add a frame to extend this layer to the end of our animation. Repeat for the WebDesign layer. Lock these layers.

  4. Add a new layer to the Timeline and name it "ArtFire". We will now add the second graphic, named ArtFire, to the animation. We need the first 50 frames of this new ArtFire layer to be blank and to start this part of the animation on Frame 51. On Frame 51, add a Keyframe. This will set the first 50 frames to blank and the ArtFire graphic will first be seen on Frame 51.

    Now, drag the ArtFire graphic next to the right side of the stage. This will be the first frame of this slide-in effect. Repeat the previous step to create another Motion Tween. Name the Movie Clip "ArtFire". Give the Movie Clip an Instance Name of "ArtFire1". Right-click again and create a Motion Tween. Drag the Tween span to Frame 100 (50 x 2). Drag the ArtFire1 symbol onto the stage. Extend this layer to Frame 300 and lock the layer.

  5. Repeat these steps for the next three graphics.

    ----Layer Name--------Movie Clip--------Instance Name----Start Frame---End Frame
    BackgroundBackground1300
    WebDesignWebDesignWebDesign1150
    ArtFireArtFireArtFire151100
    TwitterTwitterTwitter1101150
    FlashFlashFlash1151200
    dCipolloDesigns dCipolloDesignsdCipolloDesigns1201250


  6. Now, we will publish our 125 x 125 square SWF. Click File, Publish Settings to open the dialog box. Set the folder location for Flash to place your files and give your animation a name. Keep the other default settings for the SWF and HTML files and click the Publish button.

← Back

Join us in the Flash forum.




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 © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor