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

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

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.

Add Moving+Objects+with+ActionScript+in+Flash+CS3%2C+the+Stage+and+Timeline to Twitter Add Moving+Objects+with+ActionScript+in+Flash+CS3%2C+the+Stage+and+Timeline to Facebook Add Moving+Objects+with+ActionScript+in+Flash+CS3%2C+the+Stage+and+Timeline to MySpace Add Moving+Objects+with+ActionScript+in+Flash+CS3%2C+the+Stage+and+Timeline to Del.icio.us Digg Moving+Objects+with+ActionScript+in+Flash+CS3%2C+the+Stage+and+Timeline Add Moving+Objects+with+ActionScript+in+Flash+CS3%2C+the+Stage+and+Timeline to Yahoo My Web Add Moving+Objects+with+ActionScript+in+Flash+CS3%2C+the+Stage+and+Timeline to Google Bookmarks Add Moving+Objects+with+ActionScript+in+Flash+CS3%2C+the+Stage+and+Timeline to Stumbleupon Add Moving+Objects+with+ActionScript+in+Flash+CS3%2C+the+Stage+and+Timeline 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