This tutorial teaches you some cool animations that you can do just by using the ActionScript 3.0 drawing API.

Linear line

The above movie is an example of linear movement. The code behind the animation

 
var xspeed:Number = 2;
var yspeed:Number = -2;
var xpos:Number = 0;
var ypos:Number = stage.stageHeight;
 
graphics.lineStyle (2, 0xffffff);
graphics.moveTo (0, stage.stageHeight);
addEventListener (Event.ENTER_FRAME, onEnterFrame);
 
function onEnterFrame (event:Event):void {
        xpos += xspeed;
        ypos += yspeed;
        graphics.lineTo (xpos, ypos);
}

Explanation: First we set up the needed variables. For this movie, we want the x and y coordinates to increase and decrease (respectively) by 2 pixels in each frame. Then we declare the starting point variables. The line start at the bottom left corner. We set the line style by the “graphics.lineStyle” property. The line’s width is 2 pixels and color is 0xffffff (=white). Then we add the ENTER_FRAME handler. In each frame, we simply add the speeds to the new x and y positions. Then we draw a line to this new position. Not hard, eh?

Drawing a circle

Let’s try something a little harder. How would we animate the circular movement below?

The code behind the animation is,

 
var speed:Number = 0.05;
var radius:Number = 50;
var angle:Number = 0;
var xpos:Number;
var ypos:Number;
 
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
 
graphics.lineStyle (2, 0xffffff);
graphics.moveTo (centerX + radius, centerY);
addEventListener (Event.ENTER_FRAME, onEnterFrame);
 
function onEnterFrame (event:Event):void {
        xpos = centerX + Math.cos(angle) * radius;
        ypos = centerY + Math.sin(angle) * radius;
        angle += speed;
        graphics.lineTo (xpos,ypos);
}

Explanation: First we declare the speed (how fast the angle is increasing/decreasing). Then we assign a radius for the circle. We want the circle to be at the center of the stage (centerX and centerY variables). Then we set the linestyle and set the starting point to be the circle’s right side. The ENTER_FRAME function calculates the new x and y positions using cosine and sine. We increase the angle in each frame and draw a line to the new coordinate.

Drawing a wave

Let’s try to accomplish the animation seen below.

The code behind the animation is,

var speedX:Number = 1;
var speedAngle:Number = 0.1;
var range:Number = 100;
var angle:Number = 0;
var xpos:Number = 0;
var ypos:Number = 0;
var centerY:Number = stage.stageHeight / 2;
 
 
graphics.lineStyle (2, 0xffffff);
graphics.moveTo (0, centerY);
addEventListener (Event.ENTER_FRAME, onEnterFrame);
 
function onEnterFrame (event:Event):void {
        xpos += speedX;
        ypos = centerY + Math.sin(angle) * range;
        angle += speedAngle;
        graphics.lineTo (xpos,ypos);
}

Explanation: The most important variables are the speedX, speedAngle and range. SpeedX defines the horizontal speed. In other words, how fast the line is moving in the x-axis. SpeedAngle defines how fast the angle is increasing/decreasing. Range tells how high the wave is. In this example, the total wave height is 200px (100px below or above centerY = 200px). In the ENTER_FRAME handler, we use the sine function, since we want a nice wave. It could also be cosine if you wanted. Go ahead and play with this example to see how different values change the animation!

Final words

This concludes this tutorial. Remember to try something new with these basic examples! Feel free to copy the code and modify them. If you have any questions, visit the
forum. I’ll try my best to answer to your questions.

Related tutorials:

1. Animated Spiral with ActionScript 3
2. Advanced Animation with Drawing API
3. Growing Lines with ActionScript 3
4. Flash Spray Effect
5. Movie Clip Trail Effect