How to make flash rotating spiral

February 18, 2010

Actionscript 3.0 Tutorial

Step by step tutorial shows you how to make flash rotating spiral using actionscript 3.0  with few  simple steps.

ActionScript 3.0 Code

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

The code can be easily modified to create new exiciting animations.

, , , , , ,

Subscribe

Subscribe to our e-mail newsletter to receive updates.

2 Responses to “How to make flash rotating spiral”

  1. Paul Says:

    Thanks, nice implementation!

Trackbacks/Pingbacks

  1. How to make flash rotating spiral | Flash tutorials | Flash video … at Flash Designers - February 18, 2010

    [...] original here:  How to make flash rotating spiral | Flash tutorials | Flash video … [...]

Leave a Reply