AS: Random Rainf effect

[Cybex]

AS: Main

OK, there's already an API thread about making rain, but i believe mine's better :p.

I will put //comments inside the AS to explain what's happening, so don't get angry that i haven't explained it because i have.

Anyway i'll start off by showing you the finished result of what we will be making.

And here it is.

To start off, make an MC of a raindrop (fig:1) and give it the instance name rain. Try and get the shape realistic, but make the colour a solid blue.

Inside the MC type in this code:

onClipEvent (load) {
// Give a viariable a number between 0 and 850
// change the number 850 to about 300 more than the width of your stage.
xpos = Math.random()*850;
//set the raindrop to somewhere between -300 and 550 on the x axes.
this._x = xpos-300;
//set the raindrop to somewhere between -450 and 0 on the y axes.
//This is so it won't start from the same height each time it drops,
// but will always start off the screen.
this._y = Math.random()*-450;
//change tha alpha to somewhere between 0 and 60%
this._alpha = int(Math.random()*60);
// Set two variables, xspeed and yspeed.
//xspeed is always between 10 and 25
//yspeed is always 4*xspeed.
speed = Math.random()*15;
speedx = speed+10;
speedy = speedx*4;
}
onClipEvent (enterFrame) {
//Make the raindrop got downwards by yspeed each frame and accross
//by xspeed each frame.
//this is done so that it falls at an angle
this._x += speedx;
this._y += speedy;
//rotate the raindrop so that it faces the direction it falls
this._rotation = -20;
//When the raindrop reaches the bottom of the screen,
// it goes back to the top and falls again from a random spot
if(this._y>400){
this._x = xpos-300;
this._y = Math.random()*-450;
}
}

Then on the main timeline paste this code:

//Duplicate the rain movieclip 60 times
for(i=0; i<60; i++){
rain.duplicateMovieClip("rain", +i, i);
}

And hey presto, you have rain that falls randomly at a random speed and has a random alpha. You can easily mess around with it to change the speed it falls at, the alpha it has or even how much wind there is and which direction it's coming from.

This method also works well with snow.

[Nick]

Looks very cool :D Rain can be a bugger to animate sometimes.

[Barbeq]

Almost too big raindrops but nice script, i might use this script someday with smaller raindrops

[authorblues]

At 1/15/06 07:57 AM, Cybex wrote: And hey presto

"hey presto" is the catch phrase for FOSS. if youre going to write a thread clumsily disguised as an AS: thread, try to explain it a bit more instead of just throwing code at people. AS is a teaching method, not a copy-paste resource...

[Cybex]

At 1/15/06 09:34 AM, authorblues wrote:

At 1/15/06 07:57 AM, Cybex wrote: And hey presto

"hey presto" is the catch phrase for FOSS. if youre going to write a thread clumsily disguised as an AS: thread, try to explain it a bit more instead of just throwing code at people. AS is a teaching method, not a copy-paste resource...

I explained it in comments inside the code. And i'm terribly sorry about the hey presto thing, i didn't know it meant so much to you.

[authorblues]

At 1/15/06 09:48 AM, Cybex wrote: I explained it in comments inside the code. And i'm terribly sorry about the hey presto thing, i didn't know it meant so much to you.

nah, i came across as slightly more of a dick than i planned. i just meant that i didnt feel it was explained in enough detail what is going on (delimited comments or not). i just thought you should explain it a bit better, for the benefit of AS: MAIN.

[Inglor]

Yeah, I think this is more of a foss

[Cybex]

OK, to explain the code better i will split each bit up into sections and try and give more detail.

onClipEvent (load) {

This first section sets a variable called xpos to a number between 1 and 850. Math.random() produces a number between 0 and 1 so by timesing it by 850, xpos is set to a number between 1 and 850.

xpos = Math.random()*850;

These two lines tell the raindrop MC where to go. It sets its x axes to xpos-300. Therefore the rain drop will appear between -300 and 550 on the x axes. It does this because when the raindrop is slanted, we will need it to start further to the left to cover the whole screen in rain. It sets the y axes to a random point above the stage. We don't want every single raindrop to start at the same height other wise they would just come down in clumps.

this._x = xpos-300;
this._y = Math.random()*-450;

This sets the alpha of the raindrop to somewhere between 0% and 60% so that each raindrop is slightly different.

this._alpha = int(Math.random()*60);

A variable called speed is set. The Math.random()*15 makes speed a number between 0 and 15. Two more variables (speedx and speedy are created. Speed x is speed +10 and so is anywhere between10 and 25, and speedy is always 4 times speedx. This is done so that the raindfrop will always fall at the same angle.

speed = Math.random()*15;
speedx = speed+10;
speedy = speedx*4;
}
onClipEvent (enterFrame) {

This is the section where everything happens. The first two lines tell the raindrop to move right by speedx and down speedy. This will mean that each raindrop will move at slightly different speeds but always the same angle.

this._x += speedx;
this._y += speedy;

As the raindrop falls at an angle, we must rotate the raindrop slightly to make it fall correctly. This could also be done by just making the raindrop slightly tilted to start with, but this way if you want the direction of the raindrops to change, it's a lot easier.

this._rotation = -20;

This bit says that if the raindrop gets to the bottom of the screen, it should go back up to another random place above the screen.

if(this._y>400){
this._x = xpos-300;
this._y = Math.random()*-450;
}
}

If you tested the movie at this point you would see one raindrop fall at a time. In order to make more, you could either make 60 movieclips all with slightly different names and exactly the same AS inside them, or let the computer do it for you.

Then on the main timeline type this code:

This for loop creates 60 variables (i think. I'm new to AS and so don't fully understand what for loops do, but understand how to use them)
The first part in the brackets (i=0) tells the computer that i=0, the second (i<60) says that this command should be true as long as i is less than 60 and the third part (i++) says that i should increase by 1. The result of this is getting i=1, i=2, i=3 etc. all the way to i=60, but then it stops.

for(i=0; i<60; i++){

This line duplicates the rain MC 60 times. Each MC will have the instance name of "rain"+i, so there will be rain1, rain2, rain3, rain4 etc.

rain.duplicateMovieClip("rain", +i, i);
}

And hey pres.... erm, i mean and there you go, you have rain!

Sorry if i have explained anything wrong.

[Cybex]

At 1/15/06 09:55 AM, Inglor wrote: Yeah, I think this is more of a foss

I have to admit that i never really bothered to look up what FOSS stood for untill just now, but i think i understand now. So is it just nifty little things thats anyone could use to help their game/animation? Things like an old film effect or this rain effect and stuff like that?

[Rule]

That looks great.

[authorblues]

At 1/15/06 10:47 AM, Cybex wrote: I have to admit that i never really bothered to look up what FOSS stood for untill just now, but i think i understand now. So is it just nifty little things thats anyone could use to help their game/animation? Things like an old film effect or this rain effect and stuff like that?

the actual purpose of FOSS is to write a code to achieve an effect or solve a problem, and by making it open-source, others can modify it, not only for their own use, but also to improve the code and fix mistakes. its a nice trick, as long as you dont use FOSS-style to write an AS tutorial, because they are very different things...

good explaination. im sufficiently pleased.

[reelbigcheese]

heres an easier code (maybe) that i made that dosent involve doing anything just put it on the frame XD

function raining(){
if(this._x>555){
this._x=-5;
}else{
this._x+=this.speed/2.5}
if(this._y>405){
this._y=-5;
}else{
this._y+=this.speed}}
for(a=0;a<150;a++){
r=_root.createEmptyMovieClip("rain"+a,a);
r.lineStyle(2,0x000099,random(100));
r.moveTo(-1,-3);
r.lineTo(1,3);
r._x=random(550);
r._y=random(400);
r.speed=25;
r.onEnterFrame=raining}

[Cybex]

At 1/15/06 02:24 PM, -reelbigcheese- wrote: heres an easier code (maybe) that i made that dosent involve doing anything just put it on the frame XD

I think mine looks better.

[Cybex]

At 1/15/06 02:04 PM, authorblues wrote:

At 1/15/06 10:47 AM, Cybex wrote:

the actual purpose of FOSS is to write a code to achieve an effect or solve a problem, and by making it open-source, others can modify it, not only for their own use, but also to improve the code an

On FOSS: Main, is it ok to just post a fla rather than giving a full tutorial?