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

Starry Night Flash ActionScript Particle System

Part 5: Add Comets Falling Across the Sky Effect

The Starry Night Particle System is not perfect without the comet effect. Let's add comet effects travelling across the sky randomly.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

This is the final step to create a starry night Flash ActionScript Particle System. Sometimes we can see comet travelling across the sky if we are "lucky" enough. The scenery is really beautiful. I did not see such beautiful scenery since I moved to the city. Therefore I would like to add comet effect to the Flash Movie.

The Flash Movie of this Flash ActionScript Particle System tutorial is shown as above.

Flash ActionScript Codes:

// Declare number of star
var numOfStars:uint = 60;

// Creates 60 stars randomly on the stage.
for (var i:uint = 0; i < numOfStars; 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.stageHeight and stage.stageWidth do not work in rubbish IE 6.0
//star.x = Math.random() * stage.stageWidth;
//star.y = Math.random() * stage.stageHeight;
star.y = Math.random() * 384;
star.x = Math.random() * 512;

// Assign random alpha to star
// 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 scale to star
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 0.2 + 0 = 0.2
// Maximum value = 0.2 + 0.5 = 0.7
// Summary:
// Assign random scale between 0.2 and 0.7
star.scaleX = 0.2 + Math.random() * 0.5;
star.scaleY = star.scaleX;

// Assign random speed (x-axis) to the star
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 0.1 + 0 = 0.1
// Maximum value = 0.1 + 0.4 = 0.5
// Summary:
// Math.random returns value between 0.1 - 0.5
star.xVelocity = 0.1 + Math.random() * 0.4;

/// Put star into starArray Array to be used later for animation
starArray.push (star);

}

 

// Add ENTER_FRAME Event to animate the stars
stage.addEventListener (Event.ENTER_FRAME, moveStars);

 

function moveStars (evt:Event):void {

// Animate the stars one by one that hold in the Array
for (var i = 0; i < starArray.length; i++) { var stars = starArray[i];

// Move the stars accross the x-axis
stars.x += stars.xVelocity;

//If the stars move beyond the stage's width (stage.stageWidth)
if (stars.x > 512) {

// Locate it back to the left side (x-axis)
stars.x = 0;

// Locate random y-axis position
// Minimum value = 0 * 384 = 0
// Maximum value = 1 * 384 = 384
stars.y = Math.random() * 384;

}

}

}

 

/////////////////////////////////////////
////////// Comet Falling Down //////////
////////////////////////////////////////

//Add ENTER_FRAME Event to the star_mc
comet_mc.addEventListener (Event.ENTER_FRAME, fallStar);

 

function fallStar (evt:Event):void {

// Animate the star
comet_mc.x -= 2;

//If the stars move beyond the stage's height (stage.stageHeight)
//stageHeight = 384
//Add 200 to height so that the Comet will not appear immediately
if (comet_mc.y > 584) {

// Locate it back to the left side (x-axis)
// Minimum value = 200 + 0 = 200
// Maximum value = 200 + 350 = 550
comet_mc.x = 200 + Math.random() * 350;

// Locate random y-axis position
// Minimum value = 0 * 384 = 0
// Maximum value = 1 * 384 = 384
//star_mc.y = Math.random() * 384;
comet_mc.y = -20;


}

}

 

// Use a timer to create new stars in the same position as
// previous star. Therefore this can create a "tail" effect
// of the comet
var timer:Timer = new Timer(40, 0);

timer.start ();

timer.addEventListener (TimerEvent.TIMER, createStar);

 

function createStar (evt:Event):void {

// Create a new Comet

// Locate the new star in the same position of the original star
bornStar.x = comet_mc.x;
bornStar.y = comet_mc.y;

// Add the new Star at the bottom of the original star
addChildAt (bornStar, 0);

//Add ENTER_FRAME Event to bornStar
bornStar.addEventListener (Event.ENTER_FRAME, animateBornStar);

}

 

function animateBornStar (evt:Event):void {

//Change the alpha and scale of bornStar by each frame
evt.target.alpha -= 0.03;
evt.target.scaleY -= 0.03;

// Remove bornStar when it's alpha is less than zero
if (evt.target.alpha < 0) {

evt.target.removeEventListener (Event.ENTER_FRAME, animateBornStar);
removeChild ((MovieClip)(evt.target));

}

}

 

/////////////////////////////////////////////
///// Add the Night Scenery MovieClip //////
////////////////////////////////////////////

// Create a new MovieClip
var nightScenery:MovieClip = new NightScenery();

// Add the new MovieClip to the MainTimeline
// so that we can see it.
addChild(nightScenery);

// Set the location of the new MovieClip
nightScenery.x = 256;
nightScenery.y = 273;

Download Flash Source File:

Flash Source File Just click here to download the source code for this tutorial.

Remarks:

This Flash ActionScript tutorial shows how to create a starry night with comet effect Particle System scenery.