3D Tunnel with ActionScript 3

March 10, 2009 by: smonte

Learn how to create a cool 3D tunnel with ActionScript 3. Play around with the values to see how they change the look of the tunnel!

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.

Flash 3D Tunnel

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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.

Flash Circle Movie Clip

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! I hope you learned something new from this Flash tutorial. Post a comment if you feel like it ;)

  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

Related tutorials:

  1. 3D Tunnel Around Text
  2. 3D Boxes via ActionScript 3 – Part 2
  3. 3D Boxes via ActionScript 3 – Part 1
  4. Random Mask Circles on Image
  5. Modern Preloader with ActionScript 3



Filed under: ActionScript 3 Advanced
Tags:

Comments

5 Responses to “3D Tunnel with ActionScript 3”
  1. cctan says:

    yeah! this tutorial is great! :)

  2. Dora says:

    Wow! I’m completely new to Flash.. I just created my first bouncing ball yesterday.

    The only problem I had with this tunnel tutorial was that I closed the window for the Movie Clip symbol too soon.. I didn’t realize that that was where I would perform the next step of linking the movie clip to a class. (No, I didn’t read any of your previous tutorials — so that’s what happens to people who just “jump in”!) Anyways, after I made the class and went on to cutting and pasting your code for ActionScript — it works!!

    What’s great about your tutorial it is very well written, and Flash doesn’t seem as overwhelming now to a newbie like myself, now that I see how using a pre-written ActionScript works.

    Thank you – this is very fun.. AND it will save me a lot of time!

  3. Andreas says:

    Works great. THX for that great stuff!

  4. pashvshah says:

    it doesnt work properly it says
    undified method MyCircle

Leave a Reply

You must be logged in to post a comment.