This Flash ActionScript Particle System tutorial series show how to create a broken or explode flash effect with ActionScript 3. Three different flash breaking or flash explosion effects were created. The first flash effect is simply breaking the Football object into number of smaller balls when touch the ground. While the other two flash effects will break or explode the Football into pieces against an object.
The effect is shown in the movie below:
Series One: Object Fall on Ground and Explode into Pieces Effect
This Flash explosion or broken effect is a rather simple flash actionScript particle system when compare with previous tutorials. The football object break or explode into number of smaller balls when fall on the ground.
// Use ENTER_FRAME event to fire action for every frame.
stage.addEventListener(Event.ENTER_FRAME, dropBall);
function dropBall(evt:Event):void {
// Keep track the location of the ball:
// Height of Stage = 384
// Diameter of football = 40
// Point the football touch the bottom = 384 - 20 = 364
if (ball_mc.y < 364) {
ball_mc.y += 4;
} else {
ball_mc.visible = false;
// Explode the football when touch the bottom
stage.addEventListener(Event.ENTER_FRAME, flyingOut);
}
}
//Call the dropBall function when movie starts.
//Therefore the football will start moving when movie starts.
dropBall(null);
// Declare number of small balls to born when explode
var numOfBall:uint = 30;
// Create an Array to hold the balls
var ballArray:Array = new Array();
// Creates 30 balls on the stage.
for (var i:uint = 0; i < numOfBall; i++) {
// Create a new ball
// Remember to set linkage in Movie Library
var ball:Ball = new Ball();
// Add the ball to the stage
addChild(ball);
// Assign start location of balls
// stage.stageWidth = 512
// stage.stageHeight = 384
ball.x = 256;
ball.y = 364;
// Assign random scale to balls
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 0.2 + 0 = 0.2
// Maximum value = 0.2 + 0.4 = 0.6
// Summary:
// Assign random scale between 0.2 and 0.6
ball.scaleX = 0.2 + Math.random() * 0.4;
ball.scaleY = ball.scaleX;
// We don't want to see the balls when newly added to the stage
ball.visible = false;
// Assign random velocity (y-axis) to the Ball
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 0 - 5 = -5
// Maximum value = 10 - 5 = +5
// Summary:
// Math.random returns value between -5 to 5
ball.yVelocity = Math.random() * 10 - 5;
ball.xVelocity = Math.random() * 10 - 5;
// Put ball into starArray Array to be used later for animation
ballArray.push(ball);
}
function flyingOut(evt:Event):void {
// Animate the balls one by one that hold in the Array
for (var i = 0; i < ballArray.length; i++) {
var ballParticles = ballArray[i];
// Set the balls visible again
ballParticles.visible = true;
// Balls moving out (flying out) from the center
ballParticles.y += ballParticles.yVelocity;
ballParticles.x += ballParticles.xVelocity;
// If the balls move out the stage
if ( (ballParticles.x > 550) || (ballParticles.x < -40) || (ballParticles.y > 420) || (ballParticles.y < -40) ) {
// Stop the balls
ballParticles.xVelocity = 0;
ballParticles.yVelocity = 0;
}
}
} Series Two: Object Explosion with Gravity Flash Effect
This Flash ActionScript Particle System tutorial is almost the same as the first series except that the football object explode or break into pieces when fall on a square object.
This flash actionscript particle system tutorial is quite similar to the first series. In this flash explosion effect tutorial the football object explode or break into number of smaller balls when fall on the square block. Gravity is added to the broken smaller ball objects so that they will fall down when their energy is used up.
// Use ENTER_FRAME event to fire action for every frame.
stage.addEventListener(Event.ENTER_FRAME, dropBall);
function dropBall(evt:Event):void {
// Keep track the location of the ball:
// y-Position of Block = 280
// Height of Block = 20
// y-position of Block's surface = 270
// Dia of Football = 40
// Radius of Football = 20
// Point the football touch the Block = 270 - 20 = 250
if (ball_mc.y < 250) {
ball_mc.y += 4;
} else {
ball_mc.visible = false;
block_mc.visible = false;
// Explode the football when touch the square block
stage.addEventListener(Event.ENTER_FRAME, ballBreaking);
}
}
//Call the dropBall function when movie starts.
//Therefore the football will start moving when movie starts.
dropBall(null);
// Declare number of small balls to born when explode
var numOfBall:uint = 30;
// Create an Array to hold the balls
var ballArray:Array = new Array();
// Creates 30 balls on the stage.
for (var i:uint = 0; i < numOfBall; i++) {
// Create a new Football
// Remember to set linkage in Movie Library
var ball:Ball = new Ball();
// Add the Football to the stage
addChild(ball);
// Assign start location of Ball
// Align with the surface of Block
ball.x = 256;
ball.y = 260;
// Assign random scale to ball
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 0.2 + 0 = 0.2
// Maximum value = 0.2 + 0.4 = 0.6
// Summary:
// Assign random scale between 0.2 and 0.6
ball.scaleX = 0.2 + Math.random() * 0.4;
ball.scaleY = ball.scaleX;
// We don't want to see the Stars when newly added to the stage
ball.visible = false;
// Assign random velocity (y-axis) to the Ball
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 0 - 5 = -5
// Maximum value = 4 - 5 = -1
// Summary:
// yVelocity returns value between -5 to -1
ball.yVelocity = Math.random() * 4 - 5;
// xVelocity returns value between -3 to 3
ball.xVelocity = Math.random() * 6 - 3;
// Put Football into ballArray Array to be used later for animation
ballArray.push(ball);
}
function ballBreaking(evt:Event):void {
// Animate the balls one by one that hold in the Array
for (var i = 0; i < ballArray.length; i++) {
var ballParticles = ballArray[i];
// Set the Fotball visible again
ballParticles.visible = true;
// Footballs seems breaking from the Block's surface
ballParticles.y += ballParticles.yVelocity;
ballParticles.x += ballParticles.xVelocity;
// Add Gravity to balls so that they will bounce up at beginning
// then fall down when going up energy is finished.
ballParticles.yVelocity += 0.06
//trace(ballArray[1].yVelocity);
// If the Football move out the stage
if ( (ballParticles.x > 550) || (ballParticles.x < -40) || (ballParticles.y > 420) || (ballParticles.y < -40) ) {
// Stop the balls
ballParticles.xVelocity = 0;
ballParticles.yVelocity = 0;
}
}
}
Series Three: Object Explosion with Gravity and Rotation Effect
This Flash ActionScript Particle System tutorial is similar to the first two series. However gravity and rotation effect are added to the broken pieces, thus create a more realistic flash explosion effect.
// Use ENTER_FRAME event to fire action for every frame.
stage.addEventListener(Event.ENTER_FRAME, dropBall);
function dropBall(evt:Event):void {
// Keep track the location of the ball:
// y-Position of Block = 280
// Height of Block = 20
// y-position of Block's surface = 270
// Dia of Football = 40
// Radius of Football = 20
// Point the football touch the Block = 270 - 20 = 250
if (ball_mc.y < 250) {
ball_mc.y += 4;
} else {
ball_mc.visible = false;
block_mc.visible = false;
// Explode the football when touch the square block
stage.addEventListener(Event.ENTER_FRAME, ballBreaking);
}
}
//Call the dropBall function when movie starts.
//Therefore the football will start moving when movie starts.
dropBall(null);
// Declare number of small balls to born when explode
var numOfBall:uint = 30;
// Create an Array to hold the balls
var ballArray:Array = new Array();
// Creates 30 balls on the stage.
for (var i:uint = 0; i < numOfBall; i++) {
// Create a new Football
// Remember to set linkage in Movie Library
var ball:Ball = new Ball();
// Add the Football to the stage
addChild(ball);
// Assign start location of Ball
// Align with the surface of Block
ball.x = 256;
ball.y = 260;
// Assign random scale to ball
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 0.2 + 0 = 0.2
// Maximum value = 0.2 + 0.4 = 0.6
// Summary:
// Assign random scale between 0.2 and 0.6
ball.scaleX = 0.2 + Math.random() * 0.4;
ball.scaleY = ball.scaleX;
// We don't want to see the Stars when newly added to the stage
ball.visible = false;
// Assign random velocity (y-axis) to the Ball
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 0 - 5 = -5
// Maximum value = 4 - 5 = -1
// Summary:
// yVelocity returns value between -5 to -1
ball.yVelocity = Math.random() * 4 - 5;
// xVelocity returns value between -3 to 3
ball.xVelocity = Math.random() * 6 - 3;
// Put Football into ballArray Array to be used later for animation
ballArray.push(ball);
}
function ballBreaking(evt:Event):void {
// Animate the balls one by one that hold in the Array
for (var i = 0; i < ballArray.length; i++) {
var ballParticles = ballArray[i];
// Set the Fotball visible again
ballParticles.visible = true;
// Footballs seems breaking from the Block's surface
ballParticles.y += ballParticles.yVelocity;
ballParticles.x += ballParticles.xVelocity;
// Add rotation effect to the broken Footballs
ballParticles.rotation += 2;
// Add Gravity to balls so that they will bounce up at beginning
// then fall down when going up energy is finished.
ballParticles.yVelocity += 0.06
//trace(ballArray[1].yVelocity);
// If the Football move out the stage
if ( (ballParticles.x > 550) || (ballParticles.x < -40) || (ballParticles.y > 420) || (ballParticles.y < -40) ) {
// Stop the balls
ballParticles.xVelocity = 0;
ballParticles.yVelocity = 0;
}
}
}
Leave a Reply