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!






January 23, 2010
Actionscript 3.0 Tutorial