Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flying Out Particle System Flash ActionScript Tutorial

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.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

Althought 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. The Flash Movie of this Flash ActionScript Particle System tutorial is shown as above.

Flash ActionScript Codes:

// 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;

}
}

}

Remarks:

This Flash ActionScript Fly Out Particle System tutorial shows how to resize particles and add rotation animation to particles..