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

Raining Flash ActionScript Particle System

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.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

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

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

Flash ActionScript Codes:

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

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 raining effect Particle System.