Spiral with ActionScript 3 | FlashMyMind - Flash and ActionScript 3 Tutorials

Animated Spiral with ActionScript 3

February 6, 2009 by: smonte

Learn how to create a rotating spiral with Actionscrtip 3

Intro

This tutorial teaches you how to use the drawing API to create an animating spiral. It’s not as hard as you may think. The code can be easily modified
to create new exiciting animations.

Moving into ActionScript 3.0

I’m just going to give you the code straight away, the comments should be informative enough to let you know what we’re doing in each step.

var speed:Number = 0.3;
var radius:Number = 0;
var angle:Number = 0;
var xpos:Number;
var ypos:Number;
 
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
 
//We are going to add all our graphics onto a container
var container:Sprite = new Sprite();
 
//Add the container to the center of the stage
container.x = centerX;
container.y = centerY;
addChild (container);
 
//Set the container's graphics line style to be 4 pixels and white
container.graphics.lineStyle (4, 0xffffff);
 
//Starting point will be in the center of the stage (the container's top left corner)
container.graphics.moveTo (0, 0);
 
addEventListener (Event.ENTER_FRAME, onEnterFrame);
 
function onEnterFrame (event:Event):void {
 
        /* We'll stop the drawing after the radius is over 100 pixels. We still continue to rotate the container. */
        if (radius > 100) {
                speed = 0;
                container.rotation += 10;
        }
        else {
                //Increase the radius in each frame
                radius += 0.5;
 
                //New x and y coordinates
                xpos = Math.cos(angle) * radius;
                ypos = Math.sin(angle) * radius;
 
                //Draw to the new coorninates
                container.graphics.lineTo (xpos,ypos);
 
                //Rotate the container
                container.rotation += 10;
 
                //The greater the speed, the faster we draw circles
                angle += speed;
        }
}

That was really simple, eh? Try this code with different values and customize it to your needs! For example, how would you reverse the process? Well, here is the answer.

var speed:Number = 0.3;
var radius:Number = 100;
var angle:Number = 0;
var xpos:Number;
var ypos:Number;
 
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
 
//We are going to add all our graphics onto a container
var container:Sprite = new Sprite();
 
//Add the container to the center of the stage
container.x = centerX;
container.y = centerY;
addChild (container);
 
//Set the container's graphics line style to be 4 pixels and white
container.graphics.lineStyle (4, 0xffffff);
 
//Starting point
container.graphics.moveTo (100, 0);
 
addEventListener (Event.ENTER_FRAME, onEnterFrame);
 
function onEnterFrame (event:Event):void {
 
        /* We'll stop the drawing after the radius is under 0 We still continue to rotate the container. */
        if (radius < 0) {
                speed = 0;
                container.rotation += 10;
        }
        else {
                //Decrease the radius in each frame
                radius -= 0.5;
 
                //New x and y coordinates
                xpos = Math.cos(angle) * radius;
                ypos = Math.sin(angle) * radius;
 
                //Draw to the new coorninates
                container.graphics.lineTo (xpos,ypos);
 
                //Rotate the container
                container.rotation += 10;
 
                //The greater the speed, the faster we draw circles
                angle += speed;
        }
}