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