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

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
  • Mixx

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! :)

    Log in to Reply
  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!

    Log in to Reply
  3. Andreas says:

    Works great. THX for that great stuff!

    Log in to Reply
  4. pashvshah says:

    it doesnt work properly it says
    undified method MyCircle

    Log in to Reply
  5. Annditta says:

    thanks

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.