Flash 3D Tunnel with ActionScript 3

January 23, 2010

Actionscript 3.0 Tutorial

Note: If you are unfamiliar with Flash 3D stuff, you should read my previous tutorials Flash 3D Boxes via ActionScript 3 and Flash 3D Boxes via ActionScript 3 – Part 2.

Setting up the environment

1. Create a new Flash document of size 400×300.

2. Draw a circle of size 30×30. I used #ff8800 for the stroke and #ffffff for the fill color.

3. Convert the circle to a movie clip. Name it “MyCircle” and set the registration point to the center. You should now have a similar looking setup.

4. Linkage the movie clip to a class named “MyCircle“.

5. Remove the circle movie clip from the stage. We will create and position all the circles with ActionScript 3.

Moving to ActionScript 3

6. Create a new layer for ActionScript and type the following.

//The maximum depth for the circles
const MAXIMUM_Z:Number = 1500;

//Create an array that will contain all the circles
var circles:Array = new Array();

//Focal length determines how much perspective is seen (you can play around
//with this value to see the effect yourself).
var focalLength:Number = 300;

//Vanishing point is the point where the objects converge.
//So when the object is really far away, it's coordinates
//are almost equal to the vanishing point.
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;

//The radius of the tunnel
var radius:Number = 120;

//The starting depth for the first circle
var startingDepth:Number = MAXIMUM_Z;

//The starting angle for the circles
var startingAngle = 0;

//Set the angle speed
var angleSpeed:Number = 0.05;

//Create a timer which is called every 0.15 seconds
var timer:Timer = new Timer(150,0);
timer.addEventListener(TimerEvent.TIMER, createCircle);
timer.start();

function createCircle(e:Event):void {

	//Create a new circle
	var circle:MyCircle = new MyCircle();

	//Assign a z value for the circle
	circle.zpos3D = MAXIMUM_Z;

	//Save the angle for this circle
	circle.currentAngle = startingAngle;

	//Set the alpha to 0 at first
	circle.alpha = 0;

	//Add the circle on to the stage at the bottom of the display list
	addChildAt(circle, 0);

	//Add ENTER_FRAME for the circle for the animation
	circle.addEventListener(Event.ENTER_FRAME, moveCircle);
}

//This function is called in each frame
function moveCircle(e:Event):void {

	//Assign the circle to a local variable
	var circle:MyCircle = (MyCircle)(e.target);

	//Decrease the depth of the circle (bring the circle closer);
	circle.zpos3D -= 5;

	//If zpos3D <= -focalLength, we end up with a negative scaleRatio (or we are dividing by zero).
	//At this point, we know that the object has already passed "us".
	//Therefore, we remove the circle.
	if (circle.zpos3D<=- focalLength) {

		//Remove the ENTER_FRAME listener (this function)
		circle.removeEventListener(Event.ENTER_FRAME, moveCircle);

		//Remove the circle from stage
		removeChild(circle);
	}

	//Update the current angle
	circle.currentAngle+=angleSpeed;

	//Calculate a new 3D x position
	circle.xpos3D=Math.cos(circle.currentAngle)*radius;

	//Calculate a new 3D y position
	circle.ypos3D=Math.sin(circle.currentAngle)*radius;

	//Calculate a scale ratio for the circle
	var scaleRatio = focalLength/(focalLength + circle.zpos3D);

	//Scale the circle according to the scale ratio
	circle.scaleX=circle.scaleY=scaleRatio;

	//Increase the alpha
	circle.alpha+=0.01;

	//Position the circle on to the stage (from 3D to 2D coordinates)
	circle.x=vanishingPointX+circle.xpos3D*scaleRatio;
	circle.y=vanishingPointY+circle.ypos3D*scaleRatio;
}

7. You are done, test your movie

, , , ,

No comments yet.

Leave a Reply