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.
