Flash 3D Tunnel Around Text

January 23, 2010

Actionscript 3.0 Tutorial

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 Flash-3D-tunnel-around-text

, , , ,

Subscribe

Subscribe to our e-mail newsletter to receive updates.

No comments yet.

Leave a Reply