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!

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

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

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.

  2. m2244 says:

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

  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!

  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…

  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?

  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?

Leave a Reply

You must be logged in to post a comment.