This Animate Flash Particle System tutorial series show how to create a Flying Out effect with ActionScript 3.

Flash ActionScript Particle System can create Flying out effect easily. Fly out effect is also a common Flash Particle System. We will do the Particle System step by step, from creating static star particles on the stage, scaling them and animating them.

The final Flash Particle System with Flying Out Effect is shown in the Movie below. We will explain how to do it with step by step.

Step 1: Create Random Particles on the Stage

To create Animate Flash Particle System, the first step is to create all particles (stars) on the stage in random.

Like other Animate Flash ActionScript Particle System, the first step is create all star particle on the stage. Position the star particle randomly on the stage of Flash Movie.

// Declare number of Star
var numOfStar:uint = 30;

// Creates 30 Stars on the stage.
for (var i:uint = 0; i < numOfStar; i++) {
	// Create a new Star
	// Remember to set linkage in Movie Library
	var star:Star = new Star();
	
	// Add the Star to the stage
	addChild(star);
	
	// Assign start location of Star
	// stage.stageWidth = 512
	// stage.stageHeight = 384
	// Math.random returns value between 0 - 1
	star.x = Math.random() * 512;
	star.y = Math.random() * 384;
	
	// Assign random alpha to Stars if you like
	// Math.random returns value between 0 - 1
	// i.e.
	// Minimum value = 0.4 + 0 = 0.4
	// Maximum value = 0.4 + 0.6 = 1.0
	// Summary:
	// Assign random alpha between 0.4 and 1.0
	//star.alpha = 0.4 + Math.random() * 0.6;
	
	// 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
	star.yVelocity = Math.random() * 10 - 5;
	star.xVelocity = Math.random() * 10 - 5;
	
	// We don't want Stars moving too slowly on the satge
	// Adjust the speed in this case
	if ( (star.yVelocity > -0.5) && (star.yVelocity < 0.5) ) {
		star.yVelocity = 1.0;

	}
	if ( (star.xVelocity > -0.5) && (star.xVelocity < 0.5) ) {
		star.xVelocity = 1.2;
	}
}

Step 2: Animate Particles

Now all particles (stars) were created in our Flash Particle System. Let’s animate them in this step.

The Flash ActionScript Particle System is now jammed with star particles. Don’t bother with the particle size at this moment. Let’s try to animate the particles in this step.

// Declare number of Star
var numOfStar:uint = 30;

// Create an Array to hold the Stars
var starArray:Array = new Array();

// Creates 30 Stars on the stage.
for (var i:uint = 0; i < numOfStar; i++) {
	// Create a new Star
	// Remember to set linkage in Movie Library
	var star:Star = new Star();
	
	// Add the Star to the stage
	addChild(star);
	
	// Assign start location of Star
	// stage.stageWidth = 512
	// stage.stageHeight = 384
	// Math.random returns value between 0 - 1
	star.x = Math.random() * 512;
	star.y = Math.random() * 384;
	
	// Assign random alpha to Stars if you like
	// Math.random returns value between 0 - 1
	// i.e.
	// Minimum value = 0.4 + 0 = 0.4
	// Maximum value = 0.4 + 0.6 = 1.0
	// Summary:
	// Assign random alpha between 0.4 and 1.0
	//star.alpha = 0.4 + Math.random() * 0.6;
	
	// 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
	star.yVelocity = Math.random() * 10 - 5;
	star.xVelocity = Math.random() * 10 - 5;
	
	// We don't want Stars moving too slowly on the satge
	// Adjust the speed in this case
	if ( (star.yVelocity > -0.5) && (star.yVelocity < 0.5) ) {
		star.yVelocity = 1.0;
	
	}
	if ( (star.xVelocity > -0.5) && (star.xVelocity < 0.5) ) {
		star.xVelocity = 1.2;
	
	}
	
	// Put Star into starArray Array to be used later for animation
	starArray.push(star);

}

 
// Add ENTER_FRAME Event to animate the Rain Drops
stage.addEventListener(Event.ENTER_FRAME, flyingOut);

 
function flyingOut(evt:Event):void {
	// Animate the Stars one by one that hold in the Array
	for (var i = 0; i < starArray.length; i++) {
		var starParticles = starArray[i];
		
		// Stars moving out (flying out) from the center
		starParticles.y += starParticles.yVelocity;
		starParticles.x += starParticles.xVelocity;
		
		// If the Stars move out the stage
		if ( (starParticles.x > 512) || (starParticles.x < 0) || (starParticles.y > 384) || (starParticles.y < 0) ) {
			// Locate the Stars back to the center of satge
			// NOTE:
			// stage.stageWidth and stage.stageHeight not working in rubbish IE 6.0
			starParticles.x = 256;
			starParticles.y = 192;
		
		}
	
	}
}

Step 3: Resize Particles and Add Rotation Effect

The Flash Particle System is going well up to now. However the Flying Out effect of the particles are not obvious. We have to provide a growing effect of the particles.

Although the particles in the Flash ActionScript Particle System are animated, the Flying Out Effect of the particles are not obvious. To make the particles Flying Out effect more obvious, we need to:

– resize the particles to a smaller size when they are born,
– the size of the particles need to growing up gradually.

To make the animation more interesting, we also add rotation effect to the particles.

// Declare number of Star
var numOfStar:uint = 30;

// Create an Array to hold the Stars
var starArray:Array = new Array();

// Creates 30 Stars on the stage.
for (var i:uint = 0; i < numOfStar; i++) {
	// Create a new Star
	// Remember to set linkage in Movie Library
	var star:Star = new Star();
	
	// Add the Star to the stage
	addChild(star);
	
	// Assign start location of Star
	// stage.stageWidth = 512
	// stage.stageHeight = 384
	// Math.random returns value between 0 - 1
	star.x = Math.random() * 512;
	star.y = Math.random() * 384;
	
	// Assign random alpha to Stars if you like
	// Math.random returns value between 0 - 1
	// i.e.
	// Minimum value = 0.4 + 0 = 0.4
	// Maximum value = 0.4 + 0.6 = 1.0
	// Summary:
	// Assign random alpha between 0.4 and 1.0
	//star.alpha = 0.4 + Math.random() * 0.6;
	
	// 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
	star.yVelocity = Math.random() * 10 - 5;
	star.xVelocity = Math.random() * 10 - 5;
	
	// We don't want Stars moving too slowly on the satge
	// Adjust the speed in this case
	if ( (star.yVelocity > -0.5) && (star.yVelocity < 0.5) ) {
		star.yVelocity = 1.0;
	
	}
	if ( (star.xVelocity > -0.5) && (star.xVelocity < 0.5) ) {
		star.xVelocity = 1.2;
	
	}
	
	// Put Star into starArray Array to be used later for animation
	starArray.push(star);

}

 

// Add ENTER_FRAME Event to animate the Rain Drops
stage.addEventListener(Event.ENTER_FRAME, flyingOut);

 

function flyingOut(evt:Event):void {
	// Animate the Stars one by one that hold in the Array
	for (var i = 0; i < starArray.length; i++) {
		var starParticles = starArray[i];
		
		// Stars moving out (flying out) from the center
		starParticles.y += starParticles.yVelocity;
		starParticles.x += starParticles.xVelocity;
		
		// Scale up the size of stars
		starParticles.scaleX += 0.01;
		starParticles.scaleY += 0.01;
		
		// Do some rotation effect while the Stars flying out
		starParticles.rotation += 2;
		
		// If the Stars move out the stage
		if ( (starParticles.x > 512) || (starParticles.x < 0) || (starParticles.y > 384) || (starParticles.y < 0) ) {
			// Scale down all the stars
			starParticles.scaleX = 0.0001;
			starParticles.scaleY = 0.0001;
			
			// Locate the Stars back to the center of satge
			// NOTE:
			// stage.stageWidth and stage.stageHeight not working in rubbish IE 6.0
			starParticles.x = 256;
			starParticles.y = 192;
		}
	}

}

Step 4: Finalize the Particle System

The Flash Particle System is almost finished. However we don’t like the big star particles on the stage when the Flash Movie just started.

The Flash ActionScript Fly Out Particle System is not perfect. You should noticed that there are some big star particles appear when the Flash Movie starts. The big star particles are newly created and still moving out of the stage. We can remove them by making them invisible when newly created on the stage.

// Declare number of Star
var numOfStar:uint = 30;

// Create an Array to hold the Stars
var starArray:Array = new Array();

// Creates 30 Stars on the stage.
for (var i:uint = 0; i < numOfStar; i++) {
	// Create a new Star
	// Remember to set linkage in Movie Library
	var star:Star = new Star();
	
	// Add the Star to the stage
	addChild(star);
	
	// Assign start location of Star
	// stage.stageWidth = 512
	// stage.stageHeight = 384
	// Math.random returns value between 0 - 1
	star.x = Math.random() * 512;
	star.y = Math.random() * 384;
	
	// We don't want to see the Stars when newly added to the stage
	star.visible = false;
	
	// Assign random alpha to Stars if you like
	// Math.random returns value between 0 - 1
	// i.e.
	// Minimum value = 0.4 + 0 = 0.4
	// Maximum value = 0.4 + 0.6 = 1.0
	// Summary:
	// Assign random alpha between 0.4 and 1.0
	//star.alpha = 0.4 + Math.random() * 0.6;
	
	// 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
	star.yVelocity = Math.random() * 10 - 5;
	star.xVelocity = Math.random() * 10 - 5;
	
	// We don't want Stars moving too slowly on the satge
	// Adjust the speed in this case
	if ( (star.yVelocity > -0.5) && (star.yVelocity < 0.5) ) {
		star.yVelocity = 1.0;
	
	}
	if ( (star.xVelocity > -0.5) && (star.xVelocity < 0.5) ) {
		star.xVelocity = 1.2;
	
	}
	
	// Put Star into starArray Array to be used later for animation
	starArray.push(star);

}

 
// Add ENTER_FRAME Event to animate the Rain Drops
stage.addEventListener(Event.ENTER_FRAME, flyingOut);

 
function flyingOut(evt:Event):void {
	// Animate the Stars one by one that hold in the Array
	for (var i = 0; i < starArray.length; i++) {
		var starParticles = starArray[i];
		
		// Stars moving out (flying out) from the center
		starParticles.y += starParticles.yVelocity;
		starParticles.x += starParticles.xVelocity;
		
		// Scale up the size of stars
		starParticles.scaleX += 0.01;
		starParticles.scaleY += 0.01;
		
		// Do some rotation effect while the Stars flying out
		starParticles.rotation += 2;
		
		// If the Stars move out the stage
		if ( (starParticles.x > 512) || (starParticles.x < 0) || (starParticles.y > 384) || (starParticles.y < 0) ) {
			// Scale down all the stars
			starParticles.scaleX = 0.0001;
			starParticles.scaleY = 0.0001;
			
			// Locate the Stars back to the center of satge
			// NOTE:
			// stage.stageWidth and stage.stageHeight not working in rubbish IE 6.0
			starParticles.x = 256;
			starParticles.y = 192;
			
			// Set the Stars visible again
			starParticles.visible = true;
		}
	}

}

Download Source File:

Click here to download the source code for this tutorial.