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 3: Animate Stars Moving Across the Sky

The Starry Night Particle System looks good. Let's try to animate the stars.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

This is the third step to create a starry night Flash ActionScript Particle System. Now all stars are created, resized and alpha was set randomly. The stars seems to be quite realistic now, it's time to think how to animate them. We animate the stars by moving them from the left to right of 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;


}

}

}

 

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

Remarks:

This Flash ActionScript Starry Night Particle System tutorial shows how to animate stars across the sky.