3D Tunnel Around Text

April 8, 2009 by: smonte
Flash 3D Tunnel Around Text

Flash 3D Tunnel Around Text

Learn 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.

Flash stage with Text

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.

Flash stage ready

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

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

Related tutorials:

  1. 3D Tunnel with ActionScript 3
  2. Random Boxes Text Effect with ActionScript 3
  3. Glowing Text Effect with ActionScript 3
  4. Vertical 3D Carousel with ActionScript 3
  5. 3D Boxes via ActionScript 3 – Part 1



Filed under: ActionScript 3 Advanced
Tags:

Comments

6 Responses to “3D Tunnel Around Text”
  1. Chris says:

    also same error too.

    Log in to Reply
  2. m2244 says:

    Got it , and it works. Hopefully I can use this in the near future. Thanks a lot.

    Log in to Reply
  3. smonte says:

    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!

    Log in to Reply
  4. smonte says:

    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…

    Log in to Reply
  5. m2244 says:

    I am getting the same error;

    1046: Type was not found or was not a compile-time constant: MyCircle

    Has anyone replied to thisyet?

    Log in to Reply
  6. JR says:

    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?

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.