This Particle System with Animate CC Flash ActionScript tutorial series show how to create a raining effect in sea with water ripple effect.

Flash particle system with raining effect is always interesting especially if water ripples effect is included. This flash tutorial show how to create a raining with ripples effect particle system.

The final Flash Raining with Ripple Effect in sea is shown in the Movie below. We will explain how to do it in step by step.

Step 1: Create Rain Drop Particles Randomly on Stage

Same as other Flash ActionScript Particle System, the first step is create rain drop particles randomly on the stage of flash movie.

To create flash rain and water ripples effect, The first step is create all rain drops particles on the stage. The position of rain drops are created randomly on the stage.

// Declare number of Rain Drops
var numOfRain:uint = 10;

// Creates 10 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: 0 - 490
	// y-axis: 0 - 200
	rain.x = Math.random() * 490;
	rain.y = Math.random() * 200;

}

Step 2: Scale and Set Alpha of Rain Drop Particles

To create a more realistic flash raining effect, this is better to scale and set alpha to the rain drop particles randomly.

The rain drop particles of the Flash raining effect were all created. However the rain drop particle look very dull, with same size and same transparancy. Let’s scale and set alpha to the rain drop particles randomly so that they look more natural.



// Declare number of Rain Drops
var numOfRain:uint = 10;

// Creates 10 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: 0 - 490
	// y-axis: 0 - 200
	rain.x = Math.random() * 490;
	rain.y = Math.random() * 200;;
	
	// 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;

}

Step 3: Create Raining Animation

The flash raining effect is almost ready. It is time to animate the rain drop particles.

In the Flash raining effect scenery, all rain drop particles were created , scaled and set alpha. Like other flash particle system, let’s try to animate the rain drops to see the flash effect.

// Declare number of Rain Drops
var numOfRain:uint = 10;

// Create an Array to hold the Rain drops
var rainArray:Array = new Array();

// Creates 10 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: 0 - 490
	// y-axis: 0 - 200
	rain.x = Math.random() * 490;
	rain.y = Math.random() * 200;;
	
	// 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 velocity (y-axis) to the Rain drop
	// Math.random returns value between 0 - 1
	// i.e.
	// Minimum value = 6 + 0 = 6
	// Maximum value = 6 + 5 = 11
	// Summary:
	// Math.random returns value between 2 - 5
	rain.yVelocity = 6 + Math.random() * 5;
	
	// Also assign a velocity in x-axis
	// so that the rain will be dropped down with an angle
	rain.xVelocity = 2;
	
	// 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;
		rainParticles.x += rainParticles.xVelocity;
		
		// If the Rain Drops fall near stage's height (stage.stageHeight)
		if (rainParticles.y > 280 + Math.random() * 230) {
			// Locate the Rain Drop back to the Cloud (x-axis)
			rainParticles.x = Math.random() * 490;
			
			// Locate the Rain Drop back (y-axis)
			// 10 pixel above the upper stage
			rainParticles.y = -10;
		}
	}

}

Step 4: Create Raining with Water Ripples Effect

The flash raining effect is almost finished. For many flash rain effect, this is the end of the tutorial. However we would like to add an interesting water ripples effect.

A Flash raining effect without the water ripples effect is not perfect. This is the last step of this rain effect tutorial. We are going to add water ripples effect to rain drop particles when they fall into the sea or water. We also animate the cloud to make the movie looks more interesting.

// Declare number of Rain Drops
var numOfRain:uint = 10;

// 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 10 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: 0 - 490
	// y-axis: 0 - 200
	rain.x = Math.random() * 490;
	rain.y = Math.random() * 200;;
	
	// 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 velocity (y-axis) to the Rain drop
	// Math.random returns value between 0 - 1
	// i.e.
	// Minimum value = 6 + 0 = 6
	// Maximum value = 6 + 5 = 11
	// Summary:
	// Math.random returns value between 2 - 5
	rain.yVelocity = 6 + Math.random() * 5;
	
	// Also assign a velocity in x-axis
	// so that the rain will be dropped down with an angle
	rain.xVelocity = 2;
	
	// 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);
	
	// Set to negative so that they cannot be seen when first add to stage.
	ripple.y = -20;
	
	// Scale the Ripple according to the size of Rain Drops
	// so that:
	// A bigger Rain Drop will have a bigger Ripple
	// A smaller Rain Drop will have a smaller Ripple
	ripple.scaleX = rain.scaleX;
	ripple.scaleY = rain.scaleX;
	
	// 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;
		rainParticles.x += rainParticles.xVelocity;
		
		// If the Rain Drops fall near stage's height (stage.stageHeight)
		if (rainParticles.y > 280 + Math.random() * 230) {
			// 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 = Math.random() * 490;
			
			// Locate the Rain Drop back (y-axis)
			// 10 pixel above the upper stage
			rainParticles.y = -10;
		}
	}

}

/////////////////////////////////////////////////////////
////////// 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 Source File:

Click here to download the source code for this tutorial