Creating Fireworks with ActionScript 3
February 6, 2009 by: smonteThis tutorial teaches you how to create random fireworks via ActionScript 3.0. There is quite a bit of code here, but it’s all really simple, if you just think about it for a while. For this tutorial, we’ll also be using two external ActionScript 3.0 classes.
Setting up the environment
1. Create a new document of size 300×300.
2. Draw a ball of size 15×15 (you can choose the color as you like).
3. Convert it into a movie clip (registration point in the center).
4. Linkage the movie clip to a class called “Particle”.
5. Remove the Particle from the stage.
Moving into ActionScript 3.0
First, let’s set up the main movie. Type the following in the actions panel (in the first frame).
/* This timer runs 2000 times every 0.5 seconds. */ var myTimer:Timer = new Timer(500, 2000); myTimer.addEventListener (TimerEvent.TIMER, timerHandler); myTimer.start (); /* This function is called every 0.5 seconds. */ function timerHandler (event:TimerEvent):void { //Create a new firework var firework:Firework = new Firework(); //Set a random x position firework.x = Math.random() * stage.stageWidth; //Set it to be at the bottom of the stage. firework.y = stage.stageHeight; //Add it to the stage addChild (firework); }
Now let’s create the firework class. Create a new ActionScript 3.0 file (.as) and name it “Firework”. In the file, type the following.
package { import flash.utils.Timer; import flash.events.TimerEvent; import flash.display.MovieClip; import flash.events.*; /* This class represents one firework that starts to move upwards and then explodes. */ public class Firework extends MovieClip { //Each firework has its own speed private var speedY:Number = 0; private var timer:Timer; function Firework ():void { //Assign a random y speed speedY = (-1) * Math.random() * 2 - 2; //Draw the firework (you could also use an image or something more fancy) graphics.beginFill (0xffffff); graphics.drawCircle (0, 0, 2); graphics.endFill (); //We want the firework to immediately start moving upwards takeOff(); } //This function adds event listeners for the animation private function takeOff ():void { addEventListener (Event.ENTER_FRAME, takeOffEnterFrame); /* Add a timer so we know when to make an explosion. In this case the firework explodes after 2 seconds. */ timer = new Timer(2000,1); timer.start (); timer.addEventListener (TimerEvent.TIMER_COMPLETE, explode); } //Firework moves up... private function takeOffEnterFrame (e:Event):void { this.y += speedY; } /* This function is called when the timer is finished. That's when we want to explode the firework. */ private function explode (e:Event):void { //Remove the take off animation removeEventListener (Event.ENTER_FRAME, takeOffEnterFrame); //Create an explosion to the same position as where this firework is var explosion:Explosion = new Explosion(); explosion.x = this.x; explosion.y = this.y; //Add the explosion to stage stage.addChild (explosion); //Make the firework invisible, we don't want to show it when the explosion starts this.visible = false; } } }
We are almost done. We still need to create the Explosion class, which will be responsible for the whole explosion animation.
Create a new ActionScript file and name it “Explosion”. Type the following.
package { import flash.utils.Timer; import flash.events.TimerEvent; import flash.display.MovieClip; import flash.events.*; import fl.motion.Color; import flash.geom.ColorTransform; /* This class represents the explosion that starts from the firework. */ public class Explosion extends MovieClip { private var particlesArray:Array; private var numberOfParticles:uint = 0; function Explosion ():void { //Create a new array where to put all the exploded particles particlesArray = new Array(); //Explosions have a random number of particles (10-40 particles) numberOfParticles = Math.floor(Math.random() * 30) + 10; //Assign a random color for explosion var ct:Color = new Color(); ct.setTint (0xFFFFFF * Math.random(),1); //We use the scale to make the particles of different size var scale:Number = Math.random(); /* We want the particles to explode in circle. We calculate the angle difference between the particles. */ var angleDifference:Number = 360 / numberOfParticles; var angle = 0; for (var i = 0; i < numberOfParticles; i++) { var particle:Particle = new Particle(); //Each particle gets exploded into the direction specified by the angle particle.speedY = Math.sin(angle * Math.PI/180)*3; particle.speedX = Math.cos(angle * Math.PI/180)*3; //Assign the scale to change the particle's size particle.scaleX = scale; particle.scaleY = scale; particlesArray.push (particle); //Assign the color particle.transform.colorTransform = ct; addChild (particle); //Update the angle for the next particle angle += angleDifference; } addEventListener (Event.ENTER_FRAME, enterFrameHandler); } function enterFrameHandler (e:Event):void { for (var i = 0; i < particlesArray.length; i++) { var particle:Particle = particlesArray[i]; //Update y and x coordinates particle.y += particle.speedY; particle.x += particle.speedX; //Fade away the particle particle.alpha -= 0.02; //Remove the explosion animation when all the particles are invisible if (particle.alpha < -0.1) { removeEventListener (Event.ENTER_FRAME, enterFrameHandler); } } } } }
You’re done, test your movie! Feel free the copy this code and modify it to your own needs. You might for example change the boring white dots to something more interesting.
I hope you found this tutorial useful!
Related tutorials:
Comments
4 Responses to “Creating Fireworks with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
I’m having the same problem.
1120: Access of undefined property OxFFFFFF. for ct.setTint(OxFFFFFF * Math.random(),1);
and
1180: Call to a possibly undefined method ParticlesArray. for var particle:Particle = ParticlesArray(i);
When you publish the file flash creates class for you then it will work
Well have you done the following step.
4. Linkage the movie clip to a class called “Particle”.
Regards,
smonte
hey, i tried the tutorial and am debugging now, i keep getting an error related to the line
var particle:Particle = new Particle();
it says that the type is not a compile time constant.
i fixed this error before by placing import Firework and import Explosion, but there no particle class to import…