7. Randomize the size and opacity. Randomizing the size and opacity of our particles involves just a couple simple lines of code that we're going to add to our addParticle function. Here is the code:
As you can see, the only new code here is on lines 9 and 10. In line 9, we're randomizing the opacity so that it results in a number between 0.2 and 1.0. This will result in an opacity level anywhere from 20% to 100%.
On line 10, we're randomizing the scaleX and scaleY properties in order to change the size of the particle.
Oh, and one more thing! If you want your particle effects to run smoothly, it's a good idea to tell Flash to cache your movie clips as bitmaps. This will significantly improve the performance of your effect. To do this, simply insert the following line of code somewhere around line 15:
dot.cacheAsBitmap = true ;
The final result should look something like this:
So, as you can see, by making just 2 small changes (randomizing the size and opacity), we were able to transform this from a bland, monotonous effect into something beautiful and organic.
Anyways, I hope you enjoyed this tutorial. And I hope you'll take the time to play around with these setting a little bit to try to achieve different results. Part of the fun of creating particle effects is experimenting with them and trying out different settings. So play around a little bit, and if you come up with something interesting, please email the results in a zip file to craig {at} schoolofflash.com.
Here is the FLA file used in this tutorial: particles.zip
Igor Borodin
Thank you. Very nice tutoring style – clean, coherent, well worded.
IB
paparanch
good day!
first of all, thnx for this wonderful tutorial…
i wonder how to make this particle effect as mask of my pictures…coz i wanted this effect as the transitions of my photo gallery…could someone help me with this?
Marc Hughes
I’ve been working on an open source particle engine aimed at designers. It lets you create effects like this (and even more complex behaviors) through an interactive particle explorer without writing any Actionscript.
http://www.rogue-development.com/pulseParticles.html
Glenn Russell
G’Day Craig,
Mate, I’ve been playing with Flash for about 9 months, and only got enough courage to start playing with actionscript about 6 months ago. I struggled for about 3 months and then went off it.
Then about 1 month ago I stumbled over your video tutorials and they just make it all so clear and simple. I have only two days ago upgrade from V8 to CS3 (i.e. actionscript 2 to actionscript 3). I have only had a small taste of whats to come, have been watching your tutorials on AS3 now. Loving every minute of it.
Anyways, just thought you deserve a rap for your efforts.
Thanks.
Jeremie
This a great effect that has tons of potential.
Eric
Let me just say that this is the most thorough Flash tutorial that I’ve ever attempted. Thanks a bunch for the post…this site is going into favorites list immeditealy!
KR
This was great. Please make more tutorials as this was the only one I could follow on the web!!
Cynthia Schmutz
Hi Craig,
I finished your tutorial (great btw) but I was wondering if you could tell me how to control the positioning with your cursor? Thanks!
Bluesed
Great tutorial
and if I can help a bit to answer Cynthia Schmutz question.
To control it with mouse you just need to modify 2 lines in the addParticle function:
dot.x = mouseX;
dot.y = mouseY;
Im No an expert since I only have 5 days of experience but it works.
Edgar Nunes
Its a very good tutorial But I would like to know, if it is possible to stream .asx radiostations in flash cs3.
Thanks a lot
Dilby
Does anyone know how this could be altered to allow 4 different colours?
Cheers.
Jeremy
I used your particle effect tutorial its great thanks. I tweaked mine and added this:
dot.x = mouseX;
dot.y = mouseY;
How can I make this so that when you mouse over a link the particles don’t interfere with clicking the link?
Abhishek
Can this thing be done in Action Script 2.0? Me and many of my friends want to know this. While dooing it in Action Script 3.0 many of my friends getting error like “playerglobal.swc is missing”. How can this be solved?
Robert
Very clean and simple effect, I like it
tester
I got the following error when i run it in my application:
TypeError: Error #1009: Der Zugriff auf eine Eigenschaft oder eine Methode eines null-Objektverweises ist nicht möglich.
at bg_partikel_fla::disco_4/addParticle()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
disco is the movieclip in which i placed the as.
Thanks for help
guillotine605
Hi Craig,
Excellent tutorial there, but can you please make one for Actionscript 2?
Much apprectiated
guillotine605
chicago web design
Very helpful tutorial. Thanks
connectuma
Great Work . Very Very helpful .. Continue helping us by your Good Works
.
connectuma
Very Good Work. Very very helpful .. Thanks .. Plz continue posting
adam
this did not work for me at all it did it all i even tried AS 1-3.0 not a single thing worked out for me
saenone
Is there a way to stop it?
wdag
Hi Craig, simple one of the most trough out tutos I’ve ever seen. Tnxs for the great job. I found out a problem, how I could stop this effect from happening cause when I go to another frame in my movie the effect still there.
Tnxs for any help.
Alex D'Arcy
Brilliant tutorial, very clear and easy to follow, havn’t played with Flash since Studio 8 and now need to be using it again, thankyou very much for taking the time to write and post this, it’s been very helpfull
Parthapratim Sinha
Hi! Craig,
This is a great one. The way you describe anyone can understand easily. Thanks buddy !!
Waiting for your next tutorial.
Alexis Bicât
Hi Craig,
What a fantastic, erudite and clear tutorial you’ve created.
Please consider this a textual bouquet for your efforts.
Many Thanks,
Alexis.
tim
hello,
wonderful job here !
exactly what i was looking for, thanks a lot
Any chance that make it compatible with Actionscript 2 ?
Jon
Great tutorial! Question, is there anyway for an object to come into contact with a particle, then get removed from the stage? IE fun. testCollision ( event : Event ) : void {
if ( ship.hitTestObject (dot)) {
this.removeEventListener ( Event.ENTER_FRAME, testCollision );
removeChild (ship);
Jørgen
Great tutorial!
I’ve added it to the tutorial directory at http://www.TutorialMagazine.com. Contact me at jorgen [at] tutorialmagazine.com if you want your new tutorials to show up there automatically
Jørgen
- editor of http://www.TutorialMagazine.com
Phong
Great tut! Can you tell me how to make this effect in a small area on the stage?
Thanks a lot!
Steel
Is this AS3 or AS2?
Lancelot
Great tutorial! Question do you know of another other things that could be done to even further optimize this (like getting rid of particles after they are out of the scene?) Thanks allot.
BongoBox
Here’s another variation of this:
http://www.computerarts.co.uk/tutorials/new_media/cool_particle_effects_in_flash
Armig Esfahani
Great! thank youuu! can I hug you ?
Joe23
Awesome tutorial. I do have one question though. How would I get the animation to play for a certain amount of time? For example: Just a few seconds. Once again – very helpful tutorial.
Porter
Awesome tutorial, very in depth. As for Joe23, you would create a counter variable, and each code itteration increase or decrease that variable. When it reaches 0, or the number you want it to stop at (depending on how you set it up) the code will stop running. You simply wrap all the code running the particles in an if(counter>0) or if(counter<endValue), something of that nature.
Thanks again for sharing, excellent stuff.
Vishu
very interesting and well explained tutorial, followed it till the end and enjoyed every bit
…well done sir!..i’ll stay around =]
lorembolo
great tuto, but it seems to have some issues :
– if you try to make the poarticles follow another clip, after a while, alls the particles are stucked to the emmiter.
- you never remove listeners, it causes some slowdown.
anyway, thx for sharing
Kanishka
Dear Craig,
This is the best site, i have ever seen in which clear insruction has been given methodically for flash. Thank you very much,
Kanishka
From Srilanka
helen
How do I get to page 2 of this tutorial? When I click on ‘next page’ it loads page 1 again. Tried this on firefox and chrome…