3D Tunnel with ActionScript 3
March 10, 2009 by: smonteLearn 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.
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! I hope you learned something new from this Flash tutorial. Post a comment if you feel like it
Related tutorials:
Comments
5 Responses to “3D Tunnel with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
yeah! this tutorial is great!
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!
Works great. THX for that great stuff!
it doesnt work properly it says
undified method MyCircle
thanks