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;

[as3]package com.fladev.effect
{
import flash.display.Sprite;

public class MainClass extends Sprite
{
public function MainClass() {
}
}
}[/as3]

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

[as3]package com.fladev.effect
{
import flash.display.Sprite;

public class RainDrop extends Sprite
{
public function RainDrop() {
}
}
}[/as3]

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:

[as3]
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;
[/as3]

Then in constructor function we will create a timer:

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

Let’s raining

[as3]
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);
}
[/as3]

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:

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

Then in constructor function add an EnterFrame listener:

[as3]
this.addEventListener(Event.ENTER_FRAME, move);
[/as3]

And the function that make drops to move:

[as3]
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
}
}
[/as3]

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:

[as3]
addEventListener(REMOVE_DROP, removeDrops);
[/as3]

Then create the function that remove all drops:

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

That’s it, thank you for your time.


Twitter Digg Delicious Stumbleupon Technorati Facebook

3 Responses to “Create a Rain Effect in Flash using AS3”

  1. Krystal Klein 10. Nov, 2010 at 1:01 pm

    nice work there.kudos

  2. Hey just thought I would point out that in the class files you are missing:

    import flash.utils.Timer;

    This is important otherwise it throws an error “was not a compile time constant Timer”

    🙂 otherwise good tut

  3. you’re right! 😉