This tutorial series will show how to make a raining effect in desert using Animate CC Flash Particle System with ActionScript 3.
Raining Particle System with Animate CC Flash ActionScript Flash is quite interesting. We will try to create a raining effect with ActionScript in desert area.
The final Flash Raining Effect Particle System in desert area is shown in the Movie below. We will explain how to create the rain particle system in step by step.
Step 1: Create Rain Drop Particles on Stage
To create a Flash Particle System with ActionScript 3, the first step is create rain drop particle in random under the cloud.
As you learned from previous Particle System with Animate CC Flash ActionScript Flash, the first step is to create rain drop particle randomly on the stage under the cloud.
// Declare number of Rain Drops
var numOfRain:uint = 20;
// Creates 20 Rain Drops
for (var i:uint = 0; i < numOfRain; i++) {
// Create a new Rain Drop
// Remember to set linkage in Movie Library
var rain:RainDrop = new RainDrop();
// Add the ain Drop to the stage
addChild(rain);
// Assign start location of Rain Drops
// x-axis: Line within the cloud
// y-axis: between cloud and ground
rain.x = ( cloud_mc.x - (cloud_mc.width / 2) + 10 ) + Math.random() * 170;
rain.y = cloud_mc.y + 10 + Math.random() * 300;
}Step 2: Create Rain Effect Animation
Like other Flash Particle System with ActionScript 3, the second step is try to animate the rain drop particles to create the raining effect animation.
In previous step of raining particle with Flash ActionScript, all rain drop particles were created on the stage. Like other Flash ActionScript Particle System tutorials, the next step is:
– animate the rain drop particles,
– resize the rain drops particles randomly,
– set random alpha to rain drops particle.
Since we are quite familar with the Flash ActionScript Particle System, we animate the rain drop particles, resize rain drop particles and set alpha of rain drop particles at the same time.
// Declare number of Rain Drops
var numOfRain:uint = 20;
// Create an Array to hold the Rain Drops
var rainArray:Array = new Array();
// Creates 20 Rain Drops on the stage.
for (var i:uint = 0; i < numOfRain; i++) {
// Create a new Rain drop
// Remember to set linkage in Movie Library
var rain:RainDrop = new RainDrop();
// Add the Rain Drop to the stage
addChild(rain);
// Assign start location of Rain Drops
// x-axis: Line within the cloud
// y-axis: between cloud and ground
rain.x = ( cloud_mc.x - (cloud_mc.width / 2) + 10 ) + Math.random() * 165;
rain.y = cloud_mc.y + 15 + Math.random() * 300;
// Assign random alpha to Rain Drop
// 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
rain.alpha = 0.4 + Math.random() * 0.6;
// Assign random scale to Rain drop
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 0.3 + 0 = 0.3
// Maximum value = 0.3 + 0.3 = 0.6
// Summary:
// Assign random scale between 0.3 and 0.6
rain.scaleX = 0.3 + Math.random() * 0.3;
rain.scaleY = rain.scaleX;
// Assign random speed (y-axis) to the Rain Drop
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 2 + 0 = 2
// Maximum value = 2 + 3 = 5
// Summary:
// Math.random returns value between 2 - 5
rain.yVelocity = 2 + Math.random() * 3;
// Put Rain Drop into rainArray Array to be used later for animation
rainArray.push(rain);
}
// Add ENTER_FRAME Event to animate the Rain Drops
stage.addEventListener(Event.ENTER_FRAME, raining);
function raining(evt:Event):void {
// Animate the Rain Drops one by one that hold in the Array
for (var i = 0; i < rainArray.length; i++) {
var rainParticles = rainArray[i];
// Rain Drops falling down the y-axis
rainParticles.y += rainParticles.yVelocity;
// If the Rain Drops fall near stage's height (stage.stageHeight)
if (rainParticles.y > 350) {
// Locate the Rain Drop back to the Cloud (x-axis)
rainParticles.x = ( cloud_mc.x - (cloud_mc.width / 2) + 10 ) + Math.random() * 165;
// Locate the Rain Drop back to the Cloud (y-axis)
// 15 pixel down the center axis
rainParticles.y = cloud_mc.y + 15;
}
}
}
Step 3: Create Raining with Dipping Effect on Sand
The Flash ActionScript Raining Particle System looks good. However I would like to add more realistic raining effect to the Flash Particle System.
The raining effect Flash ActionScript Particle System is not perfect without the “dipping” effect when the rain drop particles hit the sand. This final step of flash Raining Particle System shows how to do the dipping effect.
// Declare number of Rain Drops
var numOfRain:uint = 20;
// Create an Array to hold the Rain drops
var rainArray:Array = new Array();
// Create an Array to hold the Rain Ripple
var rippleArray:Array = new Array();
// Creates 20 Rain Drops on the stage.
for (var i:uint = 0; i < numOfRain; i++) {
// Create a new Rain Drop
// Remember to set linkage in Movie Library
var rain:RainDrop = new RainDrop();
// Add the Rain Drop to the stage
addChild(rain);
// Assign start location of Rain Drops
// x-axis: Line within the cloud
// y-axis: between cloud and ground
rain.x = ( cloud_mc.x - (cloud_mc.width / 2) + 10 ) + Math.random() * 165;
rain.y = cloud_mc.y + 15 + Math.random() * 300;
// Assign random alpha to Rain Drop
// 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
rain.alpha = 0.4 + Math.random() * 0.6;
// Assign random scale to Rain Drop
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 0.3 + 0 = 0.3
// Maximum value = 0.3 + 0.3 = 0.6
// Summary:
// Assign random scale between 0.3 and 0.6
rain.scaleX = 0.3 + Math.random() * 0.3;
rain.scaleY = rain.scaleX;
// Assign random speed (y-axis) to the Rain drop
// Math.random returns value between 0 - 1
// i.e.
// Minimum value = 2 + 0 = 2
// Maximum value = 2 + 3 = 5
// Summary:
// Math.random returns value between 2 - 5
rain.yVelocity = 2 + Math.random() * 3;
// Put Rain Drop into rainArray Array to be used later for animation
rainArray.push(rain);
///////////////////////////////////
////////// Rain Ripple //////////
///////////////////////////////////
// Create a new Rain Ripple
// Remember to set linkage in Movie Library
var ripple:Ripple = new Ripple();
// Add the Rain Ripple to the stage
addChild(ripple);
// Put Rain Ripple into rippleArray Array to be used later for animation
rippleArray.push(ripple);
}
// Add ENTER_FRAME Event to animate the Rain Drops
stage.addEventListener(Event.ENTER_FRAME, raining);
function raining(evt:Event):void {
// Animate the Rain Drops one by one that hold in the Array
for (var i = 0; i < rainArray.length; i++) {
var rainParticles = rainArray[i];
var rippleParticles = rippleArray[i];
// Rain Drops falling down the y-axis
rainParticles.y += rainParticles.yVelocity;
// If the Rain Drops fall near stage's height (stage.stageHeight)
if (rainParticles.y > 350) {
// Play the corresponding Ripple
rippleParticles.x = rainParticles.x;
rippleParticles.y = rainParticles.y;
rippleParticles.play();
// Locate the Rain Drop back to the Cloud (x-axis)
rainParticles.x = ( cloud_mc.x - (cloud_mc.width / 2) + 10 ) + Math.random() * 165;
// Locate the Rain Drop back to the Cloud (y-axis)
// 15 pixel down the center axis
rainParticles.y = cloud_mc.y + 15;
}
}
}
/////////////////////////////////////////////////////////
////////// Moving Cloud Animation //////////
////////////////////////////////////////////////////////
function moveCloud(evt:Event):void {
//Use ENTER_FRAME event to fire action for every frame.
stage.addEventListener(Event.ENTER_FRAME, moveCloud);
// Keep track the location of the Cloud
// If location small than the Stage Width, move to right by 1 pixel
// otherwise move back to the left of Stage by 110 pixel
if (cloud_mc.x < 620) {
cloud_mc.x += 0.25;
} else {
cloud_mc.x = -110;
}
}
// Call the moveCloud function when movie starts.
// Therefore the Cloud will start moving when movie starts.
moveCloud(null);
Leave a Reply