Starry night effect is a very common Flash Particle System. We do the Particle System effect with step by step, from creating static stars on the stage, then making the stars in more realistic by scaling them and animating them.
The final Flash Starry Night Particle System Effect is shown in the Movie below. We will explain how to do it with step by step.
Let’s get started…
Table of Contents
Step 1: Create Stars Randomly on the Stage
To create a starry night Flash Actionscript Particle System, the first thing come to mind is to create all stars on the stage of Flash Movie in random.
// 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;
}
/////////////////////////////////////////////
///// 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;Step 2: Scale and set Alpha of Stars
This is the second step to create the Starry Night Particle System, let’s resize and set alpha to all stars randomly.
The stars created on previous Flash ActionScript Particle System tutorials are not very realistic – same size and same brightness. In this starry night Particle system tutorial, we make the stars looking more realistic by resizing and setting alpha of the stars randomly.
/ 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;
}
/////////////////////////////////////////////////////////////
///// 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;Step 3: Animate Stars Moving Across the Sky
The Starry Night Particle System looks good. Let’s try to animate the stars.
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.
// 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;
Step 4: Add Twinkling Effect to Stars
The Starry Night Particle System is almost finished. Let’s add some interesting effect to the stars in the sky.
This is the fourth step to create a starry night Flash ActionScript Particle System. In reality the stars are twinkling in the sky. Therefore we also add the twinkling effect to the stars. For simplicity, the twinkling effect are not accomplished by ActionScript. You can simply double click the star MovieClip in the Library window, and add motion tween to the star MovieClip.
// 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;
Step 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 traveling across the sky randomly.
This is the final step to create a starry night Flash ActionScript Particle System. Sometimes we can see comet traveling 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.
// 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;
Leave a Reply