3D Tunnel Around Text
April 8, 2009 by: smonteLearn how to create a cool 3D tunnel around text. We will use ActionScript 3 for the animation, so no timeline animation is involded. Check out the result!
Get TweenMax
We will use TweenMax for the movement and animation. Therefore, download TweenMax for AS3. TweenMax will save us a lot of time from coding the animation ourselves! Save the “gs” folder to the same location where your .fla file will be located.
Setting up the environment
1. Create a new document of size 500×100.
2. Create a static text field at the center of the stage. Make it big enough so it will cover most of the stage and type some text in it.
3. Convert the text field to a movie clip. Name it “My Text” and set the registration point to the center. You should now have a similar looking stage.
4. Give the movie clip an instance name of “myText“.
5. Next, draw a circle of size 30×30 on the stage. Convert it to a movie clip named “My Circle” and set the registration point to the center.
6. Linkage the circle to a class named “MyCircle”. Don’t worry about the class warning when you hit OK. It warns you because we haven’t created a “MyCircle” class, so Flash will create one for you.
Flash CS3: Right click the movie clip in the library and select “Linkage”
Flash CS4: Right click the movie clip in the library and select “Properties”
7. Give the circle an instance name of “myCircle“. Don’t worry about the position of the circle, since we will set its the coordinates via ActionScript 3. Here is how my stage looks now.
Moving to ActionScript 3
8. Open your actions panel and type the following.
//Import TweenMax import gs.*; /* Vanishing point for the y coordinate. So when the object is really far away, the y coordinate is almost equal to the vanishing point. */ var vanishingPointY:Number = stage.stageHeight / 2; //Focal length determines how much perspective is seen. var focalLength:Number = 300; //This array will hold all our circles and the text var itemsArray:Array = new Array(); //Add our text to the array itemsArray.push(myText); //Add our circle to the array itemsArray.push(myCircle); //Angle speed for the circle var angleSpeed:Number = 0.2; //Horizontal speed for the circle var xSpeed:Number = 4; //The y radius (height) of our "tunnel" is determined by the text height var yRadius:Number = myText.height; //The z radius (depth) is calculated from the yRadius var zRadius:Number = yRadius * 3; //Assign an initial 3D y and z coordinate myCircle.ypos3D = 0; myCircle.zpos3D = 0; //Assign a 3D z position for the text so we can animate the circle around it myText.zpos3D = 0; //Initial angle for the circle myCircle.currentAngle = 0; //Add an ENTER_FRAME listener so we can animate the circle myCircle.addEventListener(Event.ENTER_FRAME, moveCircle); /* We start a timer at the beginning of the movie. In each timer event, we will create a new trail circle. */ var timer:Timer = new Timer(20,0); timer.addEventListener(TimerEvent.TIMER, createTrail); timer.start(); //This function moves the circle ("myCircle" instance) function moveCircle(e:Event):void { //Update the circle's angle myCircle.currentAngle += angleSpeed; //Calculate the new 3D y position myCircle.ypos3D=Math.sin(myCircle.currentAngle)*yRadius; //Calculate the new 3D z position myCircle.zpos3D=Math.cos(myCircle.currentAngle)*zRadius; //Calculate a scale ratio var scaleRatio = focalLength/(focalLength + myCircle.zpos3D); //Scale the circle according to the ratio myCircle.scaleX=myCircle.scaleY=scaleRatio; //Update the x coordinate myCircle.x+=xSpeed; //Update the y coordinate myCircle.y=vanishingPointY+myCircle.ypos3D*scaleRatio; //If the circle is over the right side, move it to the left if (myCircle.x>stage.stageWidth+20) { myCircle.x=-20; } //Call the function that sorts the circles so they overlap correctly sortZ(); } //This function creates a new trail circle function createTrail(e:Event):void { //Create a new circle var newCircle:MyCircle = new MyCircle(); //Assign the same z position as the "myCircle" has newCircle.zpos3D=myCircle.zpos3D; //Assign the same coordinates newCircle.x=myCircle.x; newCircle.y=myCircle.y; //Calculate the scale ratio var scaleRatio = focalLength/(focalLength + newCircle.zpos3D); //Scale the circle according to the ratio newCircle.scaleX=newCircle.scaleY=scaleRatio; //Push the circle to the the items array itemsArray.push(newCircle); //Add the circle to the stage addChild(newCircle); //Call the sorting so the new circle overlaps correctly sortZ(); /* Use TweenMax to scale down the circle. We call the function removeCircle when the tween is finished. */ TweenMax.to(newCircle, 2, {alpha: 0, scaleX:0, scaleY:0, onComplete: removeCircle, onCompleteParams: [newCircle]}); } //This function is called when a circle tween is finished function removeCircle(circle:MyCircle):void { //Remove the circle from the array var i:uint=itemsArray.indexOf(circle); itemsArray.splice(i, 1); //Remove the circle from the stage removeChild(circle); } //This function sorts the circles so they overlap each others correctly function sortZ():void { /* Sort the array so that the circle which has the highest z position (= furthest away) is first in the array. */ itemsArray.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING); //Set new child indexes for the items for (var i:uint = 0; i < itemsArray.length; i++) { setChildIndex(itemsArray[i], i); } }
9. We are done. Go ahead and test your Flash movie, everything should run smoothly! I hope you enjoyed this Flash and ActionScript 3 tutorial and got some new ideas for your projects!
Download .fla
Related tutorials:
Comments
6 Responses to “3D Tunnel Around Text”Leave a Reply
You must be logged in to post a comment.
also same error too.
Got it , and it works. Hopefully I can use this in the near future. Thanks a lot.
Note that you also need Tweenmax for the animation. I added instructions in the first step of the tutorial. I don’t know why I’ve been so careless with this tut!
I’m so sry to hear that you have trouble. I realized it is completely my fault, since I had forgatten to add step #6. So after you have linked the movie clip to a class “MyCircle” you should be fine!
Again, sorry about this…
I am getting the same error;
1046: Type was not found or was not a compile-time constant: MyCircle
Has anyone replied to thisyet?
Not sure why I am getting this error (I’m new to this)…
but I get: 1046: Type was not found or was not a compile-time constant: MyCircle
Source: function removeCircle(circle:MyCircle):void{
Line 123
I cut and pasted the code and still got the same error…anyone know?