Create a Random Particle Explosion in Actionscript
Here’s a quick and dirty way to create a neat explosion effect. There’s alot of particles on the screen, so it can get resource-intensive if you create too many instances.
click the movie to create the animation.
Here’s the entire code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | // settings const PARTICLE_MULT = 200; const PARTICLE_MAX_SIZE = 2; const PARTICLE_SPEED = 10; // detects mouse clicks stage.addEventListener(MouseEvent.CLICK, stageClicked); function stageClicked(e:MouseEvent){ explosion(e.target.mouseX, e.target.mouseY); } // explosion function function explosion(x1:Number, y1:Number):void{ var particle_qty:Number = Math.random() * (PARTICLE_MULT/2) + (PARTICLE_MULT/2); for(var i:int=0; i<particle_qty; i++){ var pSize:Number = Math.random() * (PARTICLE_MAX_SIZE-1) + 1; var pAlpha:Number = Math.random(); // draw the particle var p:Sprite = new Sprite(); p.graphics.beginFill(0xFF0000); p.graphics.drawCircle(0,0,pSize); // create a movieclip so we can add properties to it var particle:MovieClip = new MovieClip(); particle.addChild(p); particle.x = x1; particle.y = y1; particle.alpha = pAlpha; // choose a direction and speed to send the particle var pFast:int = Math.round(Math.random() * 0.75); particle.pathX = (Math.random() * PARTICLE_SPEED - PARTICLE_SPEED/2) + pFast * (Math.random() * 10 - 5); particle.pathY = (Math.random() * PARTICLE_SPEED - PARTICLE_SPEED/2) + pFast * (Math.random() * 10 - 5); // this event gets triggered every frame particle.addEventListener(Event.ENTER_FRAME, particlePath); addChild(particle); } } // moves the particle function particlePath(e:Event):void{ e.target.x += e.target.pathX; e.target.y += e.target.pathY; e.target.alpha -= 0.005; // removes the particle from stage when its alpha reaches zero if(e.target.alpha <= 0){ e.target.removeEventListener('enterFrame', particlePath); e.target.parent.removeChild(e.target); } } |
I’ll go through the parts of the code:
1 2 3 4 5 6 7 8 9 10 | // settings const PARTICLE_MULT = 200; const PARTICLE_MAX_SIZE = 2; const PARTICLE_SPEED = 10; // detects mouse clicks stage.addEventListener(MouseEvent.CLICK, stageClicked); function stageClicked(e:MouseEvent){ explosion(e.target.mouseX, e.target.mouseY); } |
The particle quantity is decided by the constant PARTICLE_MULT. The minimum number of particles is PARTICLE_MULT / 2. The maximum is PARTICLE_MULT. So if it is set to 200, you will see anywhere from 100-200 particles per explosion. Then we add an event listener to see when the user clicks the screen. This will fire the stageClicked function, which calls the explosion function at the cursor’s click position.
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | // explosion function function explosion(x1:Number, y1:Number):void{ var particle_qty:Number = Math.random() * (PARTICLE_MULT/2) + (PARTICLE_MULT/2); for(var i:int=0; i<particle_qty; i++){ var pSize:Number = Math.random() * (PARTICLE_MAX_SIZE-1) + 1; var pAlpha:Number = Math.random(); // draw the particle var p:Sprite = new Sprite(); p.graphics.beginFill(0xFF0000); p.graphics.drawCircle(0,0,pSize); // create a movieclip so we can add properties to it var particle:MovieClip = new MovieClip(); particle.addChild(p); particle.x = x1; particle.y = y1; particle.alpha = pAlpha; // choose a direction and speed to send the particle var pFast:int = Math.round(Math.random() * 0.75); particle.pathX = (Math.random() * PARTICLE_SPEED - PARTICLE_SPEED/2) + pFast * (Math.random() * 10 - 5); particle.pathY = (Math.random() * PARTICLE_SPEED - PARTICLE_SPEED/2) + pFast * (Math.random() * 10 - 5); // this event gets triggered every frame particle.addEventListener(Event.ENTER_FRAME, particlePath); addChild(particle); } } |
This creates the explosion particles. It just calculates the quantity, then loops through and creates a particle with a random alpha and size ranging from 1 to PARTICLE_MAX_SIZE. It draws a sprite, and then adds the sprite to a MovieClip. The mc is necessary so that we can add the pathX and pathY properties to it. The pathing portion of the function is kinda gangster, so I’m not going to explain it. The pFast variable pretty much makes the explosion path look more randomized by making about 25% of the particles move faster than the others.
44 45 46 47 48 49 50 51 52 53 54 55 | // moves the particle function particlePath(e:Event):void{ e.target.x += e.target.pathX; e.target.y += e.target.pathY; e.target.alpha -= 0.005; // removes the particle from stage when its alpha reaches zero if(e.target.alpha <= 0){ e.target.removeEventListener('enterFrame', particlePath); e.target.parent.removeChild(e.target); } } |
This is pretty simple. Every frame, this event gets triggered, so your movie framerate will affect the speed of these explosions (mine is set to 30). When the particle alpha reaches 0, it is removed from the stage. Removing the event listener is important.
This is a pretty simple way of doing it. Let me know if you have any suggestions!