Printer Friendly Version

BellaOnline's Flash and Animation Editor

Moving an Object with Flash Motion Tween Animation

Flash makes it easy to move an object across the Stage with the built-in Motion Tween animation feature. In this tutorial, we will make a Motion Tween animation for a simple oval shape. However, the same process can be applied to other objects that have been converted to symbols in Flash.

1. Open Flash and choose Create New, Flash Document from the Start Page. We will keep the default settings for the Document properties.

2. We will only need one layer in the Timeline for this simple demonstration. Click on the default Layer 1 in the Timeline and rename this layer to Graphics.

3. adobe Oval Tool. Click on Frame 1 in the Timeline. We will draw an oval shape on the Stage. Click on the Oval Tool in the Tools Panel. Now, click and drag on the Stage to draw an oval in the place where you want the animation to begin.

Before we can add any animation to our oval, we must first convert it to a Flash symbol. This tells Flash that this is not just an inanimate object and it will be doing something that Flash needs to pay attention to.

4. adobe Selection Tool. Double click on the oval with the Selection Tool. From the Menu bar, click Modify, Convert to Symbol. In the Covert to Symbol dialog box, name the symbol "Oval" and set the Type to Movie Clip. Finally, set the Registration to center by clicking on the center square in the little grid. You should notice that a unfilled blue box appeared around the oval.

5. Instance Name. Now that we have converted the oval to a symbol, we need to give it a name. This will help Flash to identify this symbol from other symbols that we might add to our movie. Go to the Property Inspector and find Instance Name in the box just under the Instance Behavior drop-down list. Change the Instance Name to Oval.

6. You have already drawn the oval at the beginning position in Frame 1 in the Timeline. Let's make our animation ten frames long. On the Timeline, click on Frame 10 on the Graphics layer. Now, right click with your mouse and choose Insert Keyframe from the pop-up menu. By adding this keyframe, we are telling Flash to use the postion of the oval on Frame 10 for the end of our animation. We have one more thing to do before we move the oval in Frame 10 to the end position.

7. Motion Tween. Now we are ready to convert these ten frames into a Motion Tween. Right click on Frame 5 (or anywhere between Frame 1 and 10) and choose Create Motion Tween from the pop-up menu. You will notice an arrow has appear in the Timeline indicating the Motion Tween has been created. But if we tested our movie now, the oval will not move. We must tell Flash the ending position of the Motion Tween in Frame 10.

8. End Position. Click on Frame 10 in the Graphics layer of the Timeline. Using the Selection Tool, click and drag the oval to a new position on the stage.

9. Test the Movie. Click on Frame 1 to move the Timeline back to the beginning. From the Menu bar, click Control, Test Movie. When your Flash movie displays, you should see the oval move across the Stage.

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