Inside you can find a quick experiment + source to a AS3 class that breaks up vectors/bitmaps into particles and then moves them around in a semi-random firefly pattern. It’s a little bit CPU intense so I added a fps meter (fpsbox, courtesy of Schell Scivally). On lesser computers I’m sure it can choke a little bit due to the 2000-ish bitmap particles swarming around with filters but all it all it should be fairly okay.
I guess it’s fairly useless, usability wise, but it looks friggin cool and it can handle any shape or size. The larger, the slower however….
You can revert back (animates back) and that jazz as well. Please note that the in/out motion is done with TweenMax, so if you don’t have it you might want to download it first. Thanks Greensock ;) His collection of tween libraries are lightning speed fast! :P
Download here (20Kb) (3621 downloads)
June 19th, 2008 at 11:31 am
This looks very cooool!!
June 19th, 2008 at 11:32 am
Awesome. I was wondering how you did this before, I hadn’t really looked into particles until recently.
June 19th, 2008 at 11:37 am
Looks great, I really have to start getting into AS3.
Cheers!
June 19th, 2008 at 11:25 pm
Very cool, Erik! Great job as usual.
June 22nd, 2008 at 8:13 am
Very cool. Loving your blog man. Good job. :)
June 22nd, 2008 at 10:18 am
Great effect!
And great blog too!
June 23rd, 2008 at 12:54 pm
I’m liking it! I want to stop what I’m doing and play with that code! Thanks!
June 23rd, 2008 at 10:02 pm
Very very nice. That movement is incredibly organic. Would love to see some transitions with this.
Maybe a tiny request ;)
June 26th, 2008 at 7:00 am
[...] Source Files [...]
June 26th, 2008 at 3:36 pm
Appreciate all the comments.
Jon; Stay tuned for that. It’s in the work :)
June 27th, 2008 at 2:16 am
interesting effect, very good. :)
July 3rd, 2008 at 7:25 pm
Looks nice, can’t wait to dive into it.
July 7th, 2008 at 11:29 am
very cool
July 8th, 2008 at 8:34 pm
Fantastic. REALLY nice. Would be cool to have it as an explosion as well (like a firework) or as a transition to another image (firefly morph). Cheers!
July 9th, 2008 at 1:10 am
Nice effect, i’ll use it. I’ve just modified this a bit cause of flex bitmap weird memory management. I keep the reference to the bitmapdata of each pixel and free all thoses things up at the end.
On complete handler i call this :
public function detruire():void{
pixelExplosion.visible = false;
for(var i:int = 0; i 0){
removeChildAt(0);
free_memory();
}
}
Now you can call this in flex how much you want without seeing flash memory growing. Hope this helped someone +
July 9th, 2008 at 1:12 am
oops my copied code in my comment is fucked up. Baah erase this :/
July 10th, 2008 at 12:23 pm
I’m new to actionscript 3 and this probably sounds like a dumb question but here it goes. I downloaded this source file to this example, I then downloaded the TweenMax because you said to, now how should I make your example work properly. I just placed the TweenMax folder in the same directory as the project and that did not work, then I placed the TweenMax folder into the Adobe Flash CS3 Folder in my applications, and your example still doesn’t want to work! Here’s the code that’s in the actions layers in your example, maybe it’ll help. In the first frame you have:
stop();
bstart.addEventListener(MouseEvent.MOUSE_UP, startIt);
bstart.buttonMode = true;
bstart.useHandCursor = true;
function startIt(e:MouseEvent):void {
bstart.removeEventListener(MouseEvent.MOUSE_UP, startIt);
gotoAndStop(3);
};
Then in the third frame is:
stop();
import flash.events.*;
import com.efnx.fps.fpsBox;
import com.pixel;
import com.pixelator;
stage.align = StageAlign.TOP_LEFT;
var fps:fpsBox = new fpsBox(stage);
var startAnim:Boolean = true;
var animating:Boolean = false;
var pixelExplosion:pixelator = new pixelator(test2_mc);
addChild(fps);
addChild(pixelExplosion);
function btnfunc():void {
btn.addEventListener(MouseEvent.MOUSE_UP, clickHandler);
btn.buttonMode = true;
btn.useHandCursor = true;
pixelExplosion.addEventListener(”PIXELS_DONE”, allDone);
pixelExplosion.addEventListener(”ANIM_DONE”, anDone);
};
function allDone(event:Event) {
startAnim = true;
animating = false;
}
function anDone(event:Event) {
animating = false;
}
function clickHandler(event:MouseEvent) {
if (pixelExplosion.doneCreating && startAnim && !animating) {
pixelExplosion.explode();
animating = true;
startAnim = false;
btn.gotoAndStop(2);
}
else if (!startAnim && pixelExplosion.doneCreating && !animating) {
animating = true;
var _speed:int = 8;
pixelExplosion.retract();
btn.gotoAndStop(1);
}
}
btnfunc();
Any help would be greatly appreciated, thank you ahead of time.
July 10th, 2008 at 12:28 pm
Hey Mike. What errors are you getting? : )
July 11th, 2008 at 7:55 am
Basically I’m getting errors which look like this
Scene 1, Layer ‘Actions’, Frame 3, Line 1172: Definition com.efnx.fps:fpsBox could not be found.
Scene 1, Layer ‘Actions’, Frame 3, Line 1172: Definition com.pixel could not be found.
Scene 1, Layer ‘Actions’, Frame 3, Line 1172: Definition com.pixelator could not be found.
Scene 1, Layer ‘Actions’, Frame 3, Line 1172: Definition com.efnx.fps:fpsBox could not be found.
Scene 1, Layer ‘Actions’, Frame 3, Line 1172: Definition com.pixel could not be found.
Scene 1, Layer ‘Actions’, Frame 3, Line 1172: Definition com.pixelator could not be found.
Scene 1, Layer ‘Actions’, Frame 3, Line 1046: Type was not found or was not a complie-time constant: fpsBox.
Scene 1, Layer ‘Actions’, Frame 3, Line 1046: Type was not found or was not a complie-time constant: pixelator.
Scene 1, Layer ‘Actions’, Frame 3, Line1180: Call to a possibly undefined method fpsBox.
Scene 1, Layer ‘Actions’, Frame 3, Line1180: Call to a possibly undefined method pixelator.
And that’s it. Like I said, I’m a newbee and I have no idea how to import classes in AS3?!? Hopefully someday I’ll know how. PLEASE HELP!
July 13th, 2008 at 9:02 am
[...] .. just a spinning circle because how cool aren’t spinning circles? Much much cooler than fireflies, for [...]
July 14th, 2008 at 2:25 pm
E.Hallander,
Do you know what is wrong with my code in the FLA file for this firefly particles, I’d really like to get flash to work for me and not against me. It seems that since AS3, I am lost. I have no idea of how to link classes to my files, I tried the document class bar to link things up but Nope, didn’t work. Could somebody please help : (
August 1st, 2008 at 3:47 pm
I wonder if it is only me, but after including the latest TweenMax library, this one crashes the Flash IDE .. any ideas?
August 5th, 2008 at 12:11 am
Further to the above .. the following line, for me crashes Flash anytime I try to publish the source:
var pixelExplosion:pixelator = new pixelator(test2_mc);
.. just posting for reference, great work on what you have done.
August 8th, 2008 at 6:16 am
[...] Read tutorials [...]
August 24th, 2008 at 10:05 am
[...] Read more | Source [...]
September 20th, 2008 at 8:39 am
That’s so coool!!!
October 14th, 2008 at 5:46 am
[...] http://www.erikhallander.com/blog/2008/bitmapvector-into-firefly-particles-as30.html [...]
October 17th, 2008 at 5:34 am
Looks great, but when i try to implement this i get a lot of errors:
Invalid BitmapData.
at flash.display::BitmapData()
at com::pixelator/setupPixels()
at com::pixelator()
Anyone else got this or knows why this happends??
November 11th, 2008 at 12:47 pm
Issue seems to have something to do with the size of the clip being copied to the bitmap. If it’s really big you get that message, if it’s medium sized it causes flash to spaz out and generate a system error.
January 13th, 2009 at 1:00 pm
Hi,
I too am a newbie, like Mike B.
I have played with tweenlite before.
But I can not get the example to work once I download it.
Could someone please explain the basic file and directory layout (including the tweenmax download) in relation to the fireflies.fla
thanks
January 13th, 2009 at 6:16 pm
Ok so I got it working.
In case any other newbies come by arrange files like this
To the folder containing the fireflies.fla copy the com folder (and all subfolders) from fireflies download, also the gs folder (and all subfolders) from TweenMaxAS3 download
January 14th, 2009 at 2:37 pm
Hi,
me again!
well I have been playing with the pixelator class.
I have found some ways to alter things using the TweenMax parts.
It seems you have to just make changes directly in the class?
I was wondering if you or anyone could take a look and drop some simple inline comments into it.
Just some hints to get started with, like, bigger number here = faster movement or bigger number = wider spread.
February 1st, 2009 at 2:31 pm
Hi,
if I add my pixel explosion like this
var pixelExplosion:pixelator = new pixelator(menu_mc);
addChild(pixelExplosion);
pixelExplosion.explode();
how do I listen for the completion of the retract event I add later, so that I can run a function when its done. Here is a simple version of what I tried without success.
pixelExplosion.retract();
pixelExplosion.addEventListener(”PIXELS_DONE”, finished);
function finished(e:EVENT):void{
trace(”pixels imploded”);
}
hope some one can help, thanks
mark
March 21st, 2009 at 6:09 pm
cool ! i love this effect
but there’s a defect , about 3 minutes later
look this pic
http://space.flash8.net/bbs/attachments/month_0903/09032208007a0b24939c0e1870.gif
I’d strongly recommend that you correct it ，thanks