Be a Supporter!

AS: Rain Effect

  • 5,102 Views
  • 18 Replies
New Topic Respond to this Topic
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
AS: Rain Effect Jul. 20th, 2005 @ 04:35 AM Reply

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.

Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Rain Effect Jul. 20th, 2005 @ 04:43 AM Reply

FUCK...

I forgot to link to AS: Main

I'm teh tierd

One Thread to Rule Them All AS: Main

ReklessCreati0n
ReklessCreati0n
  • Member since: Apr. 4, 2005
  • Offline.
Forum Stats
Member
Level 15
Animator
Response to AS: Rain Effect Jul. 20th, 2005 @ 04:52 AM Reply

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
sysrq868
sysrq868
  • Member since: Feb. 9, 2005
  • Offline.
Forum Stats
Member
Level 19
Blank Slate
Response to AS: Rain Effect Jul. 20th, 2005 @ 04:56 AM Reply

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.

BleeBlap
BleeBlap
  • Member since: Mar. 8, 2005
  • Offline.
Forum Stats
Member
Level 24
Blank Slate
Response to AS: Rain Effect Jul. 20th, 2005 @ 04:57 AM Reply

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.

Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Rain Effect Jul. 20th, 2005 @ 05:01 AM Reply

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.

ReklessCreati0n
ReklessCreati0n
  • Member since: Apr. 4, 2005
  • Offline.
Forum Stats
Member
Level 15
Animator
Response to AS: Rain Effect Jul. 20th, 2005 @ 05:04 AM Reply

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
f0d
f0d
  • Member since: Sep. 19, 2004
  • Offline.
Forum Stats
Member
Level 31
Blank Slate
Response to AS: Rain Effect Jul. 20th, 2005 @ 05:12 AM Reply

Nice tutorial, good to know for the future.


tre

BBS Signature
GameSQUID
GameSQUID
  • Member since: Jul. 13, 2005
  • Offline.
Forum Stats
Member
Level 02
Blank Slate
Response to AS: Rain Effect Jul. 20th, 2005 @ 05:22 AM Reply

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)?

Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Rain Effect Jul. 20th, 2005 @ 05:46 AM Reply

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

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS: Rain Effect Aug. 13th, 2005 @ 12:53 PM Reply

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
Ozcar
Ozcar
  • Member since: May. 12, 2002
  • Offline.
Forum Stats
Member
Level 32
Blank Slate
Response to AS: Rain Effect Aug. 13th, 2005 @ 12:55 PM Reply

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

TOO LONG TO READ! >:\

I mean... Nice tutorial

AS: Rain Effect

<deleted>
Response to AS: Rain Effect Aug. 13th, 2005 @ 12:56 PM Reply

kool

Vengeance
Vengeance
  • Member since: Mar. 18, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: Rain Effect Dec. 7th, 2005 @ 03:24 AM Reply

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
candyandy
candyandy
  • Member since: Feb. 22, 2006
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to AS: Rain Effect Feb. 22nd, 2006 @ 07:25 AM Reply

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

candyandy
candyandy
  • Member since: Feb. 22, 2006
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to AS: Rain Effect Feb. 22nd, 2006 @ 07:28 AM Reply

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

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: Rain Effect Feb. 22nd, 2006 @ 07:41 AM Reply

CandyAndy, read this: http://www.newground../topic.php?id=328799


BBS Signature
candyandy
candyandy
  • Member since: Feb. 22, 2006
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to AS: Rain Effect Feb. 22nd, 2006 @ 09:26 AM Reply

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??

Togukawa
Togukawa
  • Member since: Jun. 14, 2003
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Rain Effect Aug. 20th, 2006 @ 10:04 PM Reply

_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)