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






January 23, 2010
Actionscript 3.0 Tutorial