Rain?

[mdeluise]

Hello,
I am using Flash MX and would like to know if anyone knows of a tutorial for creating rain. The rain is going into an existing flash file I am currently working on.

Thank you.

Mike

[Sualdam]

It depends on how you want the rain to look, of course, but try some of these.

Please note that they are not my work - they're routines I've collected from the web.

Just paste this code into frame 1 of a new movie:

function createRain()
{
        this.createEmptyMovieClip("rain" + (++this.HL), this.HL).onEnterFrame = function()
        {
                this._y < 300 ? this._y += 20 : this.removeMovieClip();
        };
        this._parent.createDrops(this["rain" + this.HL]);
}

function createDrops(t)
{
        var x, y;
        for(var c = 0; c < 100; c++)
        {
                t.lineStyle(2, 0x99CCFF, Math.random() * 100 - 10);
                x = Math.random() * 300;
                y = Math.random() * 20;
                t.moveTo(x, y);
                t.lineTo(x, y + 5);
        }
}
this.createEmptyMovieClip("rain", ++this.HL);
this.rain.onEnterFrame = createRain;

Try this one against a dark movie background:

function createRain()
{
        this.createEmptyMovieClip("rain" + (++this.HL), this.HL).onEnterFrame = function()
        {
                (this._y += 20) < 400 ? this._x += Math.random() * 4 - 2 : this.removeMovieClip();
        };
        this._parent.createDrops(this["rain" + this.HL]);
}
function createDrops(t)
{
        for (var c = 0; c < 70; c++)
        {
                t.lineStyle(1, 0xFFFFFF, Math.random() * 10 + 15);
                x = Math.random() * 200;
                y = Math.random() * 20;
                t.moveTo(x, y);
                t.lineTo(x + Math.random() * 4 - 2, y + 25);
        }
}

this.createEmptyMovieClip("rain", ++this.HL);
this.rain.onEnterFrame = createRain;

This one is slightly different:

// -----------------------------------------------------
// the oval and circle methods
// -----------------------------------------------------

// ************************************************************************** //
// MovieClip.drawOval //

MovieClip.prototype.drawOval = function(obj) {
        // obj is an object containing the following properties:
        // rx: the x radius
        // ry: the y radius
        // line: contains "lineColor" and "lineAlpha"
        // bg: contains "bgColor" and "bgAlpha"
        
        // initialize parameters
        if (obj == undefined) { var obj = new Object(); }
        if (obj.rx == undefined) { obj.rx = 10; }
        if (obj.ry == undefined) { obj.ry = 10; }
        if (obj.line == undefined) { obj.line = new Object(); }
        if (obj.line.width == undesfined) { obj.line.width = 1; }
        if (obj.line.color == undefined) { obj.line.color = 0x000000; }
        if (obj.line.alpha == undefined) { obj.line.alpha = 100; }
        if (obj.bg == undefined) { obj.bg = new Object(); }
        if (obj.bg.color == undefined) { obj.bg.color = "noFill"; }
        if (obj.bg.alpha == undefined) { obj.bg.alpha = 100; }
        
        // initialize colors and fill info
        with (this) {
                lineStyle(obj.line.width, obj.line.color, obj.line.alpha);
                moveTo(0 + obj.rx, 0);
                if (obj.bg.color != "noFill") {
                        beginFill(obj.bg.color, obj.bg.alpha);
                } // end "if (obj.bg.color != noFill)"
                // draw the oval
                curveTo(obj.rx, 0.4142 * obj.ry, 0.7071 * obj.rx, 0.7071 * obj.ry);
                curveTo(0.4142 * obj.rx, obj.ry, 0, obj.ry);
                curveTo(-0.4142 * obj.rx, obj.ry, -0.7071 * obj.rx, 0.7071 * obj.ry);
                curveTo(-obj.rx, 0.4142 * obj.ry, -obj.rx, 0);
                curveTo(-obj.rx, -0.4142 * obj.ry, -0.7071 * obj.rx, -0.7071 * obj.ry);
                curveTo(-0.4142 * obj.rx, -obj.ry, 0, -obj.ry);
                curveTo(0.4142 * obj.rx, -obj.ry, 0.7071 * obj.rx, -0.7071 * obj.ry);
                curveTo(obj.rx, -0.4142 * obj.ry, obj.rx, 0);
                if (obj.bg.color != "noFill") {
                        endFill();
                } // end "if (obj.bg.color != noFill)"
        } // end "with (this)"
} // end MovieClip.drawOval() method definition

// end MovieClip.drawOval //
// ************************************************************************** //


// ************************************************************************** //
// MovieClip.drawCircle //

MovieClip.prototype.drawCircle = function(obj) {
        // obj is an object with the following properties:
        // radius: the radius of the circle,
        // line: an object with width, color, and alpha properties
        // bg: an object with color and alpha properties
        this.drawOval({rx: obj.radius, ry: obj.radius, line: obj.line, bg: obj.bg});
} // end MovieClip.drawCircle() method definition

// end MovieClip.drawCircle //
// ************************************************************************** //


// -----------------------------------------------------
// the rain/snow
// -----------------------------------------------------

function waterDrip(count, x, y) {
        _root.createEmptyMovieClip("spot" + count, theDepth++);
        _root["spot" + count].x = x;
        _root["spot" + count].y = y;
        _root["spot" + count].createEmptyMovieClip("drop_mc", theDepth++);
        with (_root["spot" + count].drop_mc) {
                _x = x;
                _y = y - 150;
                _alpha = 0;
                drawCircle({radius: 1, line: {width: 0, color: 0xFFFFFF, alpha: 80}, bg: {color: 0xFFFFFF, alpha: 80}});
        } // end with (_root["spot" + count])
        _root["spot" + count].drop_mc.onEnterFrame = function() {
                if (this._y < (y - 4)) {
                        this._x += Math.random();
                        this._x -= Math.random();
                        this._y += 7;
                        (y > 200) ? this._alpha += 10 : this._alpha += 2;
                } else {
                        waterSpot(count);
                        _root["dripInterval" + count] = setInterval(waterSpot, 400, count);
                        this.clear();
                        delete this.onEnterFrame;
                } // end if (this._y < (y-4))
        } // end onEnterFrame()
} // end waterDrip()

function waterSpot(count) {
        if (_root["spot" + count].num < 2) {
                _root["spot" + count].createEmptyMovieClip("drip" + _root["spot" + count].num, theDepth++);
                with (_root["spot" + count]["drip" + _root["spot" + count].num]) {
                        _x = _root["spot" + count].x;
                        _y = _root["spot" + count].y;
                        drawOval({rx: 80, ry: 10, line: {width: 1, color: 0xAAAAAA, alpha: 80}, bg: {color: "noFill"}});
                        _xscale = 0;
                        _yscale = 0;
                } // end with (_root["drip" + count])
                _root["spot" + count]["drip" + _root["spot" + count].num].onEnterFrame = function() {
                        this._xscale += 4;
                        this._yscale += 4;
                        this._alpha -= 2;
                        (this._y > 200) ? this._alpha -=2 : this._alpha -= 4;
                } // end onEnterFrame()
                _root["spot" + count].num += 1;
        } else {
                clearInterval(_root["dripInterval" + count]);
        } // end if (_root["spot" + count].num < 2)
} // end waterSpot()

function startDripping() {
        clearInterval(drippingInterval);
        waterDrip(i++, (Math.random() * 600) - 25, (Math.random() * 200) + 150);
        drippingInterval = setInterval(startDripping, Math.random() * 2000);
} // end startDripping()

drippingInterval = setInterval(startDripping, Math.random() * 500);

You can easily modify them to look how you want them to look.

[Sualdam]

Stupid board timeouts...

[Sualdam]

Stupid phpBB timeouts...

[J_Paul]

I like the 2nd one that has this one.. but make sure you change the values in the BOLD

function createRain()
{
this.createEmptyMovieClip("rain" + (++this.HL), this.HL).onEnterFrame = function()
{
(this._y += 20) < 400 ? this._x += Math.random() * 4 - 2 : this.removeMovieClip();
};
this._parent.createDrops(this["rain" + this.HL]);
}
function createDrops(t)
{
for (var c = 0; c < 70; c++)
{
t.lineStyle(1, 0xFFFFFF, Math.random() * 10 + 15);
x = Math.random() * 400;
y = Math.random() * 600;
t.moveTo(x, y);
t.lineTo(x + Math.random() * 4 - 2, y + 25);
}
}

this.createEmptyMovieClip("rain", ++this.HL);
this.rain.onEnterFrame = createRain;

Thanks for these ... May have to put them in FlashNewz

[Sualdam]

They also make good competition entries - think of a topic and have people write code-only routines like these in a set number of lines ;)

[mdeluise]

Thank you Sualdam and J_Paul.

I will give these a shot. Is it possible to mask an area (for an umbrella) in my existing movie that has this rain code in it? Just wondering. Thanks again!

mdeluise

[Sualdam]

Yes, and you can either mask manually or dynamically (using just code).

Give it a go - the best way of learning is to try something, see what it does, then try other things and see how the effect changes.

That's the best way of learning I can think of :)

[mdeluise]

Thank you for your help Sualdam. I'll give it a go.

mdeluise