In this tutorial, we’ll see how to create Particles in Flash using ActionScript 2.0. In this tutorial, the effect will be Particles creation when the Mouse moves.
Create a new Flash document. Set the frame rate to 25 and the background color to black.
Create a new MovieClip (CTRL+F8) named Particle. Inside, draw an object of any kind, from a range of about 18-30 pixels. Press CTRL+F8 again. Name this new MovieClip ‘Fall’. Drag ‘Particle’ into ’Fall’ (Make sure it is in the centre). Right click ’Fall’ in your library and click ‘Linkage’. Check the box ‘Export for Actionscript’. Also, after this has been clicked, be sure that ‘Export in First Frame’ is checked.
Name the Identifier ’Fall’ and press ok. Go back to the ‘Fall’ MovieClip; inside ‘Fall’, click on the frame 30 in the timeline. Press F6. Now drag the ‘Particle’ from the centre of the stage (on frame 30) down by about 100 pixels, and change its colour to Alpha -> 0%. Motion tween from frame 1 to 30, and in frame 30, in the actions panel, type:
stop(); this.removeMovieClip();
Go back to the main stage and click on the first frame. Bring the actions panel up again and type the following:
var i = 0;
var dep = 1;
_root.onMouseMove = function(){
var p = _root.attachMovie("Fall", "fallMC"+i++,_root.dep);
dep++;
p._x = _xmouse;
p._y = _ymouse;
p._xscale = p._yscale = Math.random()*100 + 50;
}
Test the movie and move your mouse. Voila!
Lets see what the actions do:
var i = 0; var dep = 1;
This means that the variable ‘i’ has a value of 0, and variable dep has a value of 1.
_root.onMouseMove = function(){
var p = _root.attachMovie("Drop", "dropMC"+i++,_root.dep);
When the mouse is moving a function happens. This function consits of a variable named ‘p’. ‘p’ attaches the MovieClip ‘Fall’, gives it a new instance name (dropMC and i (which keeps adding on)) and “_root.dep” as the depth.
dep++; p._x = _xmouse; p._y = _ymouse; p._xscale = p._yscale = Math.random()*100 + 50; }
Dep keeps adding on, therefore the depth in ‘var P’ keeps adding on. Variable p’s x position is the mouses x position, and variable p’s y position is the mouses y position. p’s x scale is the same as its y scale. They are both Math.random()*100 + 50;. meaning that if you changed Math.random()*100 + 50; to Math.random()*300 + 50, the particles will be a bigger scale for both x and y.
Well, i hope i helped you all out.
Download my file if you got any errors.
Related Posts:
11 Comments, Comment or Ping
Frederik J
Hi there Gabriel.
Good tutorial, and very well explained, even if there ain’t to much to tell
I would just like to point out that this method take too much CPU, and is completely foolish to you for games. You should prefer using the BitmapData class instead, which will render the particles much faster, and without the heavy using of CPU.
Looking forward to more homemade tutorials
Aug 4th, 2008
Gabriel Bianconi
Hello. Thanks for commenting.
I know, there are different ways to do this. But this tutorial isn’t mine. Reece Fielding did it as guest post. Actually, he did a lot of tutorials (like Custom Cursor) and he’s helping me a lot.
Thanks for commenting, again!
Aug 4th, 2008
Frederik J
Oh Sorry. I haven’t noticed that it was Reece, before I posted it. Anyway keep in mind that it’s better to do it with the BitmapData class.
Aug 4th, 2008
Gabriel Bianconi
Yes, I know.
Thanks for commenting. And I e-mailed you some questions, please see it.
Aug 4th, 2008
kannan
hey without mouse action i wanna move the particles up not only in full stage but also even in a small box as our wish.. is it possilbe.
(example to move water bubbles in a water can upwards like tat)
Cheers
Kanna
Oct 25th, 2008
Gabriel Bianconi
Kannan: Thanks for commenting. To make the particles appear without making the mouse move, change ‘_root.onMouseMove’ to ‘_root.onEnterFrame’. To change where they appear, change:
p._x = _xmouse;
p._y = _ymouse;
into:
p._x = [NUMBER]
p._y = [NUMBER]
Thanks.
Oct 25th, 2008
Luiz Fernando
this rocks, fastest ActionScript 2.0 particles I’ve ever seen
Oct 27th, 2008
kannan
Hi Gabriel Bianconi,
very thanks for ur immediate reply.. the reply u gave is working thanks again. again i got a doubt is
1) me creating a flash banner, in tat i wanna make this bubbles to go upside through out the frames.. tat is if i starts the movie, in a particular frame set i wanna play this bubble effect and in mean time some text effects and all i may add. so tat effects should not affect this.. i tried but as it was in a single frame it is going to next frame and playing the full movie but i cant see this bubble effect alone.. so is there any way for tat.
thanks again
cheers
Kanna
Oct 28th, 2008
Gabriel Bianconi
Kannan: Thanks for commenting. I didn’t understand what you want. The bubbles can’t leave the flash movie and go to the rest of the screen. Please say what you need clearer.
Oct 28th, 2008
Reece Fielding
Kannan, if you mean for the particle effects to loop throughout all of the frames, add another layer called actions. type stop(); at the beginning of the actions, followed by the actions for the particle efect. in the first layer (default Layer 1) begin your movie. it will continue to work throughout all of the necessary frames.if this is not what you mean, then i cannot understand what you want.
Oct 29th, 2008
Reece Fielding
also, i am going to submit a tutorial on particles in which you do not need to use a motion tween to make the particle motivate around the screen.
Oct 29th, 2008
Reply to “Creating Particles with ActionScript 2.0”