00:00
00:00

AS: Rain Effect

5,832 Views | 18 Replies
New Topic Respond to this Topic

AS: Rain Effect 2005-07-20 04:35:51


Since Typewriter Effect got it's own thread, I figured I'll teach people real quick how to make their very own AS rain effect..

The stages

-Drawing a Raindrop
-Making it move
-Drawing the Actual Rain Effect

Drawing the Raindrop

For more advanced Knowledge on drawing stuff with flash you should go and read AS: API by -liam-

I will just cover a very basic part of API... we will first start by creating an empty movie clip and naming it rain... this is so we don't get it mixed up with the rest of the movie

_root.createEmptyMovieClip("rain", 50000);

Now we have created an empty movie clip called rain, it is created on the base of the movie, and it is above pretty much everything since it's z-index is 50,000

this is how createEmptyMovieClip works

path.createEmptyMovieClip("[name]",[depth(
zindex]
);

where path is where the empty movie clip is created, the name is it's name and the z index is what it is above

now lets create the actual raindrop. we have already created the rain movieclip... let's create a drop movieclip inside it.

_root.rain.createEmptyMovieClip("dropOrigi
n", 100);

this creates a new model for the drop, we will later duplicate it instead of always drawing it again since it takes less memory and speed. more on duplicating stuff in AS: Duplicating MovieClips

now it's time to set the lineStyle for the drop, I usually prefer 1 thickness and 100 alpha, I can always toy with alpha later with the movieclip._alpha property since this line is all we have in the movieclip, our lext line is

_root.rain.dropOrigin.lineStyle(1, 0x1EB4C4, 100);

The syntax of line style is (copied from liam's tutorial):

container.lineStyle(thickness, colour, alpha) - this is used to outline what properties your lines will have

now let's draw the actual line... when we draw we always start at (0,0), I want to move to 10,40 so my next line is

_root.rain.dropOrigin.lineTo(10, 40);

the lineTo syntax (liam's tutorial again) is:

container.lineTo(x, y) - this actually draws the line. Just input co-ordinates and a line will go from the current position to them.

now we have drawn a blue line in a special MC, part 1 is complete :)

Making it move

In order to make the raindrop move, we need it to change it's _x and _y on every given amount of time, this can be done with setInterval but I rather use the simpler onEnterFrame method which triggers on every frame enter (1/12 by default, 1/fps otherwise)

this is my movement code:


_root.rain.dropOrigin.onEnterFrame = function() {
this._y += this._yscale/5;
this._x += this._xscale/10;
if (this._y>400) {
this._x = random(850)-220;
this._y = 0;
this._xscale += random(21)-10;
this._x = random(Stage.width);
}
};

If you want to learn more about the onEnterFrame = function handler read AS: Functions (5th reply), basically what I'm doing here, is 3 things:

-Adding to it's position through the _x and _y, in the first 2 lines
-Check if it went down so much that it's no longer visible
-If so set it back to the top... you'll notice I set the x twice,

you'll wonder why... it's because Stage.width includes the rest of the width of stuff on stage and not just _root._width, you CAN remove the second or the first set and observe the results, but they are worse...

now... I think it explains itself, if you have any questions, don't hesitate...

Drawing the Actual Rain Effect

Time to actually make more then 1 drop... by now you'll have one functing raindrop, not much.

this is my full code

this.moveTo(0,320);
this.lineStyle(3,0x000000,100);
this.lineTo(550,320);
amount = 70;
_root.createEmptyMovieClip("rain", 50000);
_root.rain.createEmptyMovieClip("dropOrigi
n", 100);
_root.rain.dropOrigin.lineStyle(1, 0x1EB4C4, 100);
_root.rain.dropOrigin.lineTo(10, 40);
for (i = 0; i<amount; i++) {
var jran = random(101)+50;
//depth game
_root.rain.dropOrigin.duplicateMovieClip("
drop"+i, jran);
_root.rain["drop"+i]._xscale = jran;
_root.rain["drop"+i]._yscale = jran;
_root.rain["drop"+i]._x = random(850)-220;
_root.rain["drop"+i].starty = random(400);
_root.rain["drop"+i].onEnterFrame = function() {
this._y += this._yscale/5;
this._x += this._xscale/10;
if (this._y>400) {
this._x = random(850)-220;
this._y = 0;
this._xscale += random(21)-10;
_root.rain["drop"+i]._x = random(Stage.width);
}
};
}

you'll see that I duplicated the movieclip we have created severl times, feel free to change
"amount" and enjoy the script.

Response to AS: Rain Effect 2005-07-20 04:43:01


FUCK...

I forgot to link to AS: Main

I'm teh tierd

One Thread to Rule Them All AS: Main

Response to AS: Rain Effect 2005-07-20 04:52:14


At 7/20/05 04:43 AM, Inglor wrote: FUCK...

I forgot to link to AS: Main

I'm teh tierd

One Thread to Rule Them All AS: Main

nice tut, you know what you should do is throw all of your tutorials into a flash movie... if you want i can do that for you, and u can be co-author... Idk, that might be able to work, depends if you want to or not...


A Girl in A Room Halloween Collaboration II -Join Now!-

BBS Signature

Response to AS: Rain Effect 2005-07-20 04:56:56


Looks cool but for actual rain it's too slow... I know it can be speed up but still.


I'm built from the leftover parts.

Response to AS: Rain Effect 2005-07-20 04:57:29


Another quality AS thread. In fact, I think I saw this question just earlier today. It also seemed like a good time to spam my on tutorial on creating a Snow Effect.

Response to AS: Rain Effect 2005-07-20 05:01:47


At 7/20/05 04:52 AM, _darx_ wrote: nice tut, you know what you should do is throw all of your tutorials into a flash movie... if you want i can do that for you, and u can be co-author... Idk, that might be able to work, depends if you want to or not...

if you'll actually animate them? sure go right ahead.

Response to AS: Rain Effect 2005-07-20 05:04:49


At 7/20/05 05:01 AM, Inglor wrote:
if you'll actually animate them? sure go right ahead.

alrighty cool, i'll probably do that, add me to your MSN or AIM, and we can discuss this further... *since i can't do actionscript very well*

AIM- darx1001
MSN- anime_artist1001@hotmail.com

incase i have questions or anything... O_o


A Girl in A Room Halloween Collaboration II -Join Now!-

BBS Signature

Response to AS: Rain Effect 2005-07-20 05:12:05


Nice tutorial, good to know for the future.


tre

BBS Signature

Response to AS: Rain Effect 2005-07-20 05:22:02


Hi,

I was just wondering, how much faster would it be to use this rain code instead of just using a layer with an animation of rain (with motion tweens or something)?

Response to AS: Rain Effect 2005-07-20 05:46:48


since this isn't using dumb tween equations... I guess about 4-8 times... but it's not worth looking worse...

I think it looks pretty good though

Response to AS: Rain Effect 2005-08-13 12:53:17


At 7/20/05 05:46 AM, Inglor wrote: I think it looks pretty good though

It's ok, I prefer this though [made in five minutes[omg]].

_root.createEmptyMovieClip("raindrop", 1);
width = Stage.width*2.5;
with (raindrop) {
lineStyle(1, 0x0099FF, 100);
lineTo(2, 7);
}
for (i=0; i<200; i++) {
duplicateMovieClip(raindrop, "rd"+i, 10+i);
_root["rd"+i]._x = random(Stage.width);
_root["rd"+i]._y = random(Stage.height);
_root["rd"+i].speed = random(30)+10;
_root["rd"+i]._alpha = random(80)+20
}
onEnterFrame = function () {
for (i=0; i<200; i++) {
_root["rd"+i]._y += _root["rd"+i].speed;
_root["rd"+i]._x += _root["rd"+i].speed/3;
if (_root["rd"+i]._x>Stage.width) {
_root["rd"+i]._x = random(width)-Stage.width/2;
_root["rd"+i]._y = 0;
}
if (_root["rd"+i]._y>Stage.height) {
_root["rd"+i]._y = 0;
_root["rd"+i]._x = random(width)-Stage.width/2;
}
}
};


Sup, bitches :)

BBS Signature

Response to AS: Rain Effect 2005-08-13 12:55:14


At 7/20/05 04:35 AM, Inglor wrote: a lot of stuff

TOO LONG TO READ! >:\

I mean... Nice tutorial

AS: Rain Effect

Response to AS: Rain Effect 2005-08-13 12:56:50


kool

Response to AS: Rain Effect 2005-12-07 03:24:01


At 8/13/05 12:53 PM, -Christmas- wrote: code

soz for the bump, but "christmas- (or liam) the only better thing about inglor's is its alot easier to remove. all you have to do is put a removeMovieClip("rain") but with you'res you have to type in every dot, or do some mod's to the code


========|| WWWWWWWW>[-[Blog] - [Audio] - [Userpage] - [Flash] - [Last.fm]-]<WWWWWWWW ||========

BBS Signature

Response to AS: Rain Effect 2006-02-22 07:25:14


Hello!
Nice Tut.
How do you setup the Z-INDEX or layer so you could put other things infront of the rain???

Response to AS: Rain Effect 2006-02-22 07:28:59


Hello!
Nice Tut.
How do you setup the Z-INDEX or layer so you could put other things infront of the rain???

Response to AS: Rain Effect 2006-02-22 07:41:38



BBS Signature

Response to AS: Rain Effect 2006-02-22 09:26:58


I still don't get it...

how can i put stuf infront of the rain??
can you modify the AC for me and post it again??

Response to AS: Rain Effect 2006-08-20 22:04:35


_root.rain.swapDepths(-1000000) should put the rain way back in the background.

Another thing you could do is manually create the rain movieclip on the stage, in the layer you want it to be. (make sure the instance name is rain, and then get rid of the createemptymovieclip in Inglor's script)