Actionscript 3 Spiral


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;
	}
}

Bookmark and Share