ooh, there’s david’s old tutorial. I’ll have to revamp that and put that back on the site (as you can tell the design on it is quite old).
Cheers!
Kirupa :asian:
Yeah, definitely…lol.
well im no flash guru but i have created a random effect of snow, and bubbles (simlar but going up)… but anyway lemme give it a shot…
im not really into the whole frame loop thing like ive seen many great flash effects done… (although i should try to do those more) im more into using onClipEvent(load){} style code and having everything happen in 1 frame… so i usually make a movie clip off the stage to hold some code…
so:
(before you start there will be little chunks of code here and there… i will show put together parts towards the end and where it goes… i just explain the little bits as you go)
(also i have complete code at the bottom and attached the FLA)
** setting up **
1.) Create a movie clip of a snowflake (a small white circle will work) and give it the instance name of “snow”
2.) Create a movie clip off the stage (nobody will see it) and you dont need to give it an instance name. This movie clip will just be the clip to hold the code that generates flakes so they will be continuously random.
3.) **Generating snow…**To generate your flakes, you want to use a duplicate movie clip command (there is a tutorial), but just basic… you will want to make sure it has a specified range because each new clip goes in its own depth, and if you use the same depth for 2 things on the stage at the same time, the older of the two will disappear. So, lets say we get a range of 100 (there wont necessarily be 100 flakes on the screen at once, but this just ensures there will be enough) so in your movie clip that is off the screen put the code:
onClipEvent(load)
{
var i = 1;//declare variable and initialize
}
onClipEvent(enterFrame)
{
_root.snow.duplicateMovieClip("snow"+i,i);//duplicate the movie clip
i++;//increase i which is the depth
if(i>100)//this defines the range. if there are 100 movie clips created, it will start writing over ones already created (if they are still on the screen)
{
i=1;
}
}
this duplicates your movie and makes it so your range of duplications is 100.
4.) Randomization… i found it is easier to put code within movie clips being duplicated rather than using functions (to start out with at least) so now in your snow flake you want to give it a random size, and i like to make the speed dependent on the size for a more realistic effect. The larger the snowflake, the faster it will move.
First, the placement of the movie clip…
you want to make the flake start a little above the stage so set the y to -10… and set the x to a value that is random between 0 and the width of the stage (the width in my movie is 600)
so the code would be :
this._x = Math.random()*600;
this._y = -10;
that part is simple enough…
Second, the randomization of the size and speed dependency…
this._xscale = this._yscale = 10 + Math.random()*50;
this sets the x and the y equal to eachother, and assigns it (10 + [random number between 10 and 50] so altogether you can have a size between 10 and 60)
now, basic math… if you multiply by a decimal the number gets smaller correct? so if we multiply the speed by a decimal it will get smaller to make the snow fall slower… and this is how we make the speed dependent on the size… take the size of the movie clip and divide by the total possible size… this way say the size came out to be 60… when you divide 60 by 60, it will be one and you can multiply that by your speed and it will go as fast as you set it, but if it is say 30, and you divide you will get 0.5, which when multiplied by your speed will make it go half as hast (i hope that was clear)
so anyway i actually used 20 and random of 70 for my size to make it big enough so the next part of the code is
this._xscale = this._yscale = 20+Math.random()*70;
var speed = 20 * (this._xscale / 90);
this gives it a random size, and makes the speed dependent on the size (gives it a little sensation of depth)
5.) Swaying…
well im sure kirupa has a better way of doing it… but an easy way (and i think it looks pretty cool) is to use a basic sine wave… (i havent taken trig yet and i figured it out while playin with my graphing calculator when i was bored in math so its not very hard)
basically the format is :
x = Math.sin(y / arc) * frequency;
if arc is bigger it will make a longer arc, and if frequency is bigger, it will become less frequent (just does… maybe someone who has taken trig can explain better) but anyway i have that for this effect if the arc = 90 and the frequency = 20 it looks pretty good… and the reason we use y inside the () is because we are moving along the y axis, and we want the x to move back and forth accordingly (sine wave)… but… you cant just do that… because (im not really sure why) but the original random x we created earlier wont apply… so we will change that line to be a variable declaration instead…
this._x = Math.random()*600;
will become:
var offset = Math.random()*600;
and then we can add this offset to the x to make it not align at the left. so your sine wave code will be:
this._x = offset + Math.sin(this._y / 90) * 20;
this will give it a random curve back and forth going down, and since we have the speed dependent on size it comes out with a nice effect…
oh yeah, i almost forgot though… your movie will really lag if you dont take out those snowflakes… so in there add an if statement checking the boundaries
if(this._y > 400)
{
this.removeMovieClip();
}
this will just remove the movie clip if it goes off the bottom of the stage… reducing lag… soooooooooo im sure this code is a little sketchy with how i gave it in little chunks…
Over all Code (for within snowflake)
onClipEvent(load)
{
offset = Math.random()*600;//random X starting position
this._y = -10;//starts above the top of the stage
this._xscale = this._yscale = 20+Math.random()*70;//random size
var speed = 20 * (this._xscale / 90);//speed dependent on size
}
onClipEvent(enterFrame)
{
this._y += speed;//move by the random speed
this._x = offset + Math.sin(this._y / 90)*20;//move along a sine wave
if(this._y > 400)//remove if it gets off the stage
{
this.removeMovieClip();
}
}
Code for within movie clip generating snow
onClipEvent(load)
{
var i = 1;//declare variable and initialize
}
onClipEvent(enterFrame)
{
_root.snow.duplicateMovieClip("snow"+i,i);//duplicate the movie clip
i++;//increase i which is the depth
if(i>100)//this defines the range. if there are 100 movie clips created, it will start writing over ones already created (if they are still on the screen)
{
i=1;
}
}
i hope i explained the code well enough as i went…
if there are any questions i will be happy to answer (if i can) and i’m sure many others here (like all the people smarter than me) can answer them too… but it really doesnt take very much code as you can see…
i have attached the FLA in case anybody needs it
Kirupa was going to write his tutorial on his effect hopefully tomorrow morning BTW :-\
lol thats ok i dont mind if he doesnt use anything i put… i was bored… and i knew how to do the effect pretty much… so i figured i would try to help people… no biggie if it doesnt get used for anything… im sure kirupa can explain better than i did anyway
Ok. I was just posting that for people who were wondering as well. In another thread, Kirupa stated he was going to work on it tomorrow morning, but since this one is so popular with the effect, I figured I would post it in here, I went to… and you had already posted this whole thing on how you did it…lol.
Ironic I guess.
Um… no, I would never drink heavy metal.
The tutorial is almost done: http://www.kirupa.com/developer/mx/snow.asp . Just need some time to proofread and fix all the links/titles,etc.
Cheers!
Kirupa:bad:
Hey big K, if this is an MX tutorial, you can change this…
movieWidth = 300;
movieHeight = 200;
To this…
movieWidth = Stage.width;
movieHeight = Stage.height;
Saves user editing.
I just got done reading the first page. I will continue.
Bravo on the tutorial. I think everything is well said. I don’t know how you are so good at explaining things.
I take like an hour to come up with my explanations…lol.
Well anywho, I saw you added my name at the end of the tutorial. Thanks (although I said you didn’t have to :P)
Add this line as well if you want it to output the exact height and wide:
Stage.scaleMode = true;
I’ll keep it like that for now; it’s ok if Flash 5 users get to dip into the Flash MX section =) I didn’t know we could use that to get the stage width/height. I’ll definitely use that from now on 
Cheers!
Kirupa <:}
Hey h88, what is scaleMode = true???
