Create a Rain Effect in Flash using AS3

Even if outside it’s raining or shining, here you’ll  know how to create a Rain effect in Flash using ActionScript 3.0. You don’t need an umbrella, but you will need a background image and few ActionScript classes.

Preview the final result

Settings all files

Create a new ActionScript File and save it as “MainClass.as” (com.fladev.effect.MainClass.as) – this will be the main class;

package com.fladev.effect
{
import flash.display.Sprite;

public class MainClass extends Sprite
{
public function MainClass() {
}
}
}

Create a second .as file and save it “RainDrop.as” (com.fladev.effect.RainDrop.as) – this will be the class for rain drops.

package com.fladev.effect
{
	import flash.display.Sprite;

	public class RainDrop extends Sprite
	{
		public function RainDrop() {
		}
	}
}

Both package classes extends the Sprite class (since we don’t have a timeline animation). Finally create a new AS3 Flash file(590x300px) and open it, so that we have all files opened. Before to start, put an image in your flash movie as background.

Rain Drop

In flash movie draw a shape like a rain drop:

Convert this to a MovieClip with name “Drop” and select “Export for ActionScript” checkbox with class “com.fladev.effect.RainDrop”

MainClass.as

Let’s add some variables and constants:

private static const SPEED_TIMER:Number = 1;//timer
private static const DELAY_TIMER:Number = 5;//timer delay
public static const REMOVE_DROP:String = "remove_rain_drop";

private var timer:Timer;
private var rain:RainDrop;

Then in constructor function we will create a timer:

timer = new Timer(SPEED_TIMER, 1);
timer.addEventListener(TimerEvent.TIMER, createParticles);
timer.start();

Let’s raining

private function createParticles(e:TimerEvent):void
{
         //timer
	timer.delay = Math.random() * DELAY_TIMER;
	timer.reset();
	timer.start();

        //call RainDrop class
	rain = new RainDrop();
	container.addChild(rain);

	//random positions for drops
	rain.x = Math.floor(Math.random()*stage.stageWidth+30);
	rain.y = Math.floor( -50 + Math.random() * 50);
}

If you test the movie you will see that drops will appear on stage but there’s no moving. That’s because the “RainDrop” class is empty and we need to create the move functions.
Add a variable for speed:

private var speed:Number = 100;//try to play with this variable

Then in constructor function add an EnterFrame listener:

this.addEventListener(Event.ENTER_FRAME, move);

And the function that make drops to move:

private function move(e:Event):void
{
	if (this.y >= stage.stageHeight) {//check the drop's position;
		this.removeEventListener(Event.ENTER_FRAME, move); // remove the listener and dispatch an event if the drop's Y position is higher than stageHeight.
		dispatchEvent(new Event(MainClass.REMOVE_DROP, true));
	} else {
		var n:Number = Math.floor(1 + Math.random() * speed)
		this.y += n
		this.x -= 1//drops will move to left side
	}
}

Test the movie and see the result. Everything is done? Well not really, become we need to remove the drops after they are outside of stage. In “MainClass.as” create a listener:

addEventListener(REMOVE_DROP, removeDrops);

Then create the function that remove all drops:

private function removeDrops(e:Event):void
{
	container.removeChild(DisplayObject(e.target));
}

That’s it, thank you for your time.