g
Printer Friendly Version

editor  
BellaOnline's Flash and Animation Editor
 

Moving Objects with ActionScript in Flash CS3, the Stage and Timeline

One of the first things anyone wants to do with FlashR and ActionScript is to make something move. Even though this will only take a few lines of ActionScript code, we need to become familiar with a few areas of the workspace and some terms that you will be encountering continuously as you work with ActionScript and Flash. Open Flash CS3 to a new Flash file with ActionScript 3.0 and let's get started.

The Stage

We will be using ActionScipt to animate objects over the Stage. Most animation in Flash is two dimensional. Therefore, we only need to work with the X and Y axis. Don't worry, we won't be doing any math yet. You will use the X axis for horizontal movement across the Stage and the Y axis for vertical movement.

adobe Rectangle Tool Icon
adobe Selection Tool Icon
Click on the Rectangle Tool and draw a simple square on the Stage. Now right click on the square with the Selection Tool and choose Convert to Symbol from the pop-up menu. Name the symbol anything you want and click OK. If you look closely at the square, you will notice a small plus sign at the upper left corner of the square. This is the Transformation Point. Flash uses this Transformation Point to determine the position of an object on the Stage. This position is the numeric coordinates for the object on the X and Y axis. By default, the upper left corner of the Stage is the 0,0 point and both the X and Y coordinates are zero. As you move along horizontally to the right, the number for the X coordinate increases and as you move down from the top of the Stage the Y coordinate increases. As you probably have guessed by now, you will use ActionScript to set the X and Y coordinates of an object and then change the coordinates to move the object.

The Timeline

The Flash Timeline is used in many ways. To move a simple object with ActionScript, we will mostly use the Timeline's layers feature to organize our graphics and ActionScript code. Let's double click on the first layer on the Timeline to change the default name. You placed the square on this layer so change the name to Graphics.

adobe Insert Layer Icon
Although it is not a hard and fast rule, most Flash programmers keep the Actions layer as the top layer in the Timeline. So let's add this layer above the Graphics layer. Click on the New Layer icon and change the name of the layer from Layer 2 to Actions.

By default, Flash automatically creates a blank Timeline which contains only one frame. This frame is already set as a Keyframe. If we were creating our animation along this Timeline instead of using ActionScript, we would add more frames and keyframes to the Timeline and Flash would check this Timeline for instructions for our movie. However, we want to use ActionScript to run our movie instead of the default or root Timeline. So let's just leave it alone for now.




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


BellaOnline Editor