Explode MovieClip effect

One of the sessions at Flash on the Beach got me interested into playing with particles. Seb Lee  showed us an example of a using particles to explode a skeleton. You clicked on a skeleton and bones went flying. The only problem was, you had to manually break up the skeleton into a bunch of movie clips first and placed them into the skeleton timeline. That got me thinking… There must be a way for Flash to do this programmaticaly. So I spend some time (and caffeine) and wrote a class capable of doing just that…

Above demo loads the titles of the blog entries from durej.com , breaks them apart and uses them as a particles. You can also roll over with your mouse to trigger particle animation.

So how Explode class works ?

It’s constructor takes 4 arguments :
ExplodeParticleMC (
explodeOnTimeline:MovieClip,
clipToExplode:MovieClip,
particleLinkageID:String,
piecesSize:Number
);

• explodeOnTimeline is a movieClip given to the class to fill with exploding movie clips
• clipToExplode is original clip that you want to break into pieces
• particleLinkageID is a library linkage of your particle MovieClip, this can be also empty MovieClip, or clip associated with class that has some particle behaviour.
• piecesSize - is a approximate size in pixels of exploding fragments

To get a division into various pieces, I create a perlin noise Bitmap that has treshold applied. After that I apply clipToExplode as a mask to this noise Bitmap which creates a blue and red version of this clip :

Then in the loop each pixel is analysed whether it’s one of the 2 colors - red or blue. If it is, it is filled with cyan color and the area that this fill comprises of is compared with previously filled fragments bounding rectangles.  If it’s detected as a unique fragment (previously unfilled) it’s colored with random color :

Now you may notice that there’s awful a lot of small dots around the edges of the text. That’s because the text is antialiased and therefore creates a lot of different shades of colors around the edges. So the script checks the dimensions of each colored rectangle and if it’s just one pixel it’s removed from the final color rectangles array.

In the final stage the differently colored fragments are copied into a new clips, that are being attached from the library, for every different color.

You can check the classes comments for more details on implementation.

Typical way of using this class would be to give it a clip to explode, then use “getExplodingClips” methods to get the array of eploding particles/MovieClips and in some loop activate the particle animation.

I am currently working on AS3 version of this class, but feel free to make it yourself and let me know.  AS2 version works fine, but can be a bit CPU consuming..

Also at the moment you need to have black background for the class to be able to identify the shape to use for explosion.

Download Explode class