Actionscript 3 Falling Bits
In this tutorial, I'll show you how to create bits that are falling out of the screen. All animation is done via Actionscript 3.0, so no timeline animation will be included.
Setting up the environment
1. Create a new document of size 300x300.
2. Create a dynamic text field. Type in a number, eg. 1.
3. Give it an instance name of "myText". Set the font to 15.
4. Click the Embed button and embed the numerals.
5. Convert the text field into a movieclip. Name it "numberInsideMC". Set the registration point to the top left corner.
6. Give the movie clip an instance name of "numberInside".
7. Convert the "numberInsideMC" into a movie clip (just click it and press F8). Give the new movie clip a name "myNumberMC". Set the registration point to the top left corner.
8. Linkage the "myNumberMC" to a class called "BitNumber".
Moving into Actionscript 3.0
9. In the main timeline, create a new layer for actionscript. Type the following.
//This array will contain all the numbers seen on stage
var numbers:Array = new Array();
//We want 8 rows
for (var i=0; i < 8; i++) {
//We want 21 columns
for (var j=0; j < 21; j++) {
//Create a new BitNumber
var myNumber:BitNumber = new BitNumber();
//Assign a starting position
myNumber.x = myNumber.width * j;
myNumber.y = myNumber.height * i;
//Give it a random speed (2-7 pixels per frame)
myNumber.speedY = Math.random() * 5 + 2;
//Add the number to the stage
addChild (myNumber);
//Add the number to the array
numbers.push (myNumber);
}
}
//Add ENTER_FRAME so we can animate the numbers (move them down)
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
/*
This function is repsonsible for moving the numbers down the stage.
The alpha animation is done inside of the myNumberMC movieclip.
*/
function enterFrameHandler (e:Event):void {
//Loop through the numbers
for (var i = 0; i < numbers.length; i++) {
//Update the y position
numbers[i].y += numbers[i].speedY;
//If the BitNumber is below the stage, move it up again
if (numbers[i].y > stage.stageHeight) {
numbers[i].y = 0;
}
}
}
10. We are almost done, but we still need to add some code inside of our myNumberMC movie clip. Double click the myNumberMC and create a new layer for actionscript.
11. Type the following in the actions panel.
//This variable tells us should we increase the alpha
var increaseAlpha:Boolean;
//We want the number to be invisible at the beginning
numberInside.alpha = 0;
//Calculate a random timer delay (how often we increase the alpha)
var timerDelay:Number = Math.random() * 4000 + 2000;
//Create and start a timer
var timer:Timer = new Timer(timerDelay, 0);
timer.addEventListener (TimerEvent.TIMER, timerHandler);
timer.start ();
//Add ENTER_FRAME so we can animate the alpha change
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
/*
Timer calls this function.
Timer delay defines how often this is called.
*/
function timerHandler (e:Event):void {
//Update the increaseAlpha value
increaseAlpha = true;
//Calculate a random number (0 or 1)
var newNumber:int = Math.floor(Math.random() * 2);
//If the random number is 1, we insert "1" into the text box
if (newNumber == 1) {
numberInside.myText.text = "1";
}
//Else we insert "0" into the text box
else {
numberInside.myText.text = "0";
}
}
//This function animates the alpha
function enterFrameHandler (e:Event):void {
//Increase the alpha if increaseAlpha is true
if (increaseAlpha == true) {
numberInside.alpha += 0.02;
}
//Else we want to decrease the alpha
else {
numberInside.alpha -= 0.02;
}
//We don't want the alpha to be over one, so we assign increaseAlpha to be false
if (numberInside.alpha > 1) {
increaseAlpha = false;
}
//If the alpha is negative, set it to zero
if(numberInside.alpha < 0) {
numberInside.alpha = 0;
}
}
12. Go back to your main timeline and remove the myNumberMC from the stage. Your stage should now be empty.
13. Test your movie!
I hope you enjoyed this tutorial and learned something from it. If you have any questions concerning this tutorial, please visit the forum.
