Falling Bits Animation
February 6, 2009 by: smonteIn 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 300×300.
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.
Related tutorials:
Comments
2 Responses to “Falling Bits Animation”Leave a Reply
You must be logged in to post a comment.
Really nice tutorial, helped me learn quite a bit with this. Thank you.
thank you for the tutorial