ActionScript 3: Basic Animation

as3-basic-animation_post
In this tutorial, we will learn how to do a basic animation with a text box, and lay some groundwork for more advanced Flash programming with the use of AS3.

For this example we will create all of the content through ActionScript code, although there are several other methods that achieve the same effect.

This tutorial assumes that you are using Flash CS4 on a Windows or Mac computer. Source code can be found at the end of this article.

Part One: Setup

First, create a new Flash project. Make sure that it is using ActionScript 3 and is 60FPS. Height and width can be whatever size you like. I am going to use a 590px width and 300px height.
as3-basic-animation_post_1

Next, we will need to make the ActionScript 3 file required for this class to run (see the full tutorial about using classes here).
as3-basic-animation_post_2

Attach the FLA to the class file and then open up the ActionScript file. Place this inside the ActionScript 3 file to set-up the basic skeleton of the file including the imports and constructor:

/* 	BasicAnimation .as
//	electrokami.com
//	BasicAnimation tutorial
//	10.24.2009
*/
package com.electrokami{
		import flash.display.Sprite;
		import flash.events.Event;
		import flash.text.TextField;
		import flash.text.TextFieldAutoSize;

		public class BasicAnimation extends Sprite{

			public function BasicAnimation():void{
				trace("begin");
			}

		}// end class
}// end package

Feel free to change the heading to reflect your own details

At this point you should do a test run to make sure that you have everything correct and functional. Press CTRL+Enter (on Mac press CMD+Enter), or press the menu button Control and click “Test Movie”. The movie should be white and the trace should show up on your output tab. There should be no errors.

Part Two: The Text Field

Now we will make a new private class variable called movingText and make it a TextField object. Then, inside of the class constructor, we will instantiate the variable and align it to the left of the stage. Finally use addChild() to send this object to the stage:

/* 	BasicAnimation.as
//	electrokami.com
//	BasicAnimation tutorial
//	10.24.2009
*/
package com.electrokami{
		import flash.display.Sprite;
		import flash.events.Event;
		import flash.text.TextField;
		import flash.text.TextFieldAutoSize;

		public class BasicAnimation extends Sprite{
			private var movingText:TextField;

			public function BasicAnimation():void{
				trace("begin");
				movingText = new TextField();
				movingText.text = "Hello World";
				movingText.autoSize = TextFieldAutoSize.LEFT;
				addChild(movingText);
			}

		}// end class
}// end package

Here is the resulting Flash file – it’s not very exciting, but at least it has our text on it:

Get Adobe Flash player

Part Three: The Animation

Finally, some action! Now we will do what is necessary to make this text move across the screen based on the frames per second. At the end of the class constructor we will place in code to create an EventListener that will be called every time a new frame is rendered (which will be 60 times a second).

public function BasicAnimation():void{
				trace("begin");
				movingText = new TextField();
				movingText.text = "Hello World";
				movingText.autoSize = TextFieldAutoSize.LEFT;
				addChild(movingText);
				// add eventlistener
				addEventListener(Event.ENTER_FRAME, slideTheText);
			}
			
			public function slideTheText(e:Event):void{
				// code to animate
			}

When we add the EventListener, we tell the Flash player that we want it to run every time Event.ENTER_FRAME is called, or basically at the beginning of each frame. The second argument tells the EventListener to call the function slideTheText, which will be the power behind our animation.

Our goal for this animation is to make the text go from the top left of the movie to the bottom right. To accomplish this, we will do some simple math additions to the x and y coordinates of the TextField:

public function slideTheText(e:Event):void{
				// code to animate
				movingText.x+=10;
				movingText.y+=5;
			}

Now do another test of the movie to see what happens! The text moves alright – but it keeps going off the screen!

We have to stop it at the right spot. We will halt the movement based on the X-coordinate, although we could also use the Y-coordinate as well. I chose 500px as my desired X-coordinate and 250px as my Y-coordinate- this ensures that when we stop the text it is still visible on stage.

The nested if statement is there to make sure that both of the coordinates are reset in the case that they have been changed to something larger than the limit.

public function slideTheText(e:Event):void{
				// code to animate
				if(movingText.x < 500){
					movingText.x+=10;
					movingText.y+=5;
					if(movingText.x > 500){
						movingText.x = 500;
						movingText.y = 260;
					}
				}
			}

Okay, so now our animation will stop at the desired point when we want it to. But what about that EventListener? It’s still running each time the frame begins, sixty times a second! Yea … we should probably stop it.

Insert an else statement that prevents the EventListener from running endlessly after the animation has ceased. This is done by simply removing the listener from the movie. Notice that is has the same parameters as adding an EventListener.

public function slideTheText(e:Event):void{
				// code to animate
				if(movingText.x < 500){
					movingText.x+=10;
					movingText.y+=5;
					if(movingText.x > 500){
						movingText.x = 500;
						movingText.y = 260;
					}
				}
				else{
					removeEventListener(Event.ENTER_FRAME, slideTheText);
				}
			}

So now the text zooms smoothly across the screen from the top left to the bottom left. This smoothness is made possible by our high amount of frames per second. If we change the frames per second to one, we will get something like this:
Note: you may need to refresh the page to restart this Flash movie

Get Adobe Flash player


Also, instead of stopping the text, we could also make it start again at zero and therefore loop continuously.

public function slideTheText(e:Event):void{
				// code to animate
				movingText.x+=10;
				movingText.y+=5;
				if(movingText.x > 500){
					movingText.x = 0;
					movingText.y = 0;
				}
			}

Which produces this result:

Get Adobe Flash player


Well, that about sums up this tutorial, thank you for taking the time to read this article! Feel free to ask questions or comment on this tutorial- any and all opinions are acceptable.

And, as promised, here is the source file for this tutorial:

Download: basic_animation.zip

Related Posts
  • raghu

    thanks for explaining such a nice tutorial with good example….. it helped me a lot thanks again….