Morphing Menu
After some requests from readers of this blog. I’ve decided to port my Explode class, that was written a while ago in AS2, to AS3, and while doing so, I also made some improvements to it as well.
The main difference is that you can use different functions separately now. For example you can use Explode.generate function to get the multicolor map and then Explode.generateParticlesBMPsFromMap to get the array of bitmaps and their positions..
This allows to separate the color map creating part of the script - which is the most CPU heavy from generation of particle BitmapData. This means you can effectively “cache” and reuse color map for multiple DisplayObjects..
Now, if you’re reusing particle map, this allows for creating some interesting effects such as morphing via particle flow..
I created an example of morphing menu prototype that utilises this functionality.
To use this class :
var explode= new Explode(100,100,5);
var explObj:Object = explode.generate();
var explPartMap_arr:Array = explObj.map;
var noiseMap:BitmapData = explObj.noise;
var bmps_arr = explode.generateParticlesBMPsFromMap(gfx,noiseMap,explPartMap_arr);
First create new Explode class instance and pass width and height of the area you’d like to have broken into chunks. The third compulsory argument is a chunk size in pixels..
Then call generate() to get color map (array of unique colors and their positions), and bitmapData with the generated color. This is the most CPU heavy part and should be done sparingly possibly sometime in advance to generate the reusable color map.
Then call generateParticlesBMPsFromMap(), passing displayObject as a first argument. This is your display object that will be broken down to chunks of BitmapData. Second and third argument need to be the map array and the BitmapData of the map.
This function returns an array of objects in format : {bmp:BitmapData,pos:Point}.
You can use this now easily, let say, in a for loop , wrap bmp in a Bitmap class and position via pos.x and pos.y.. Or wrap bmp in your own particle class and do some really cool and magical stuff with it..
Good luck and enjoy…



May 2nd, 2009 at 1:06 pm
So cool !!
May 2nd, 2009 at 6:47 pm
Thanks for sharing this…
Looks great!
June 19th, 2009 at 1:39 am
Having some trouble using this effect, cool stuff by the way. Not too sure what I am supposed to do once a the particles_arr is returned from the generateParticlesBMP() method, and also how to pass a DisplayObject ( in your example gfx ) to that method.
I tried exporting from the library a bitmap, and a movieclip with the name gfx with DisplayObject as the base class, and also tried MovieClip as the base class, with no luck get this error:
Type Error #1034 Type Coercion failed: cannot convert gfx$ to flash.display.DisplayObject.
How do you work with an abstract class like DisplayObject when everything in flash that is visible, swf, jpgs, png, are subclasses of DisplayObject. As you can probably tell little lost here. And again once you figure out how to pass a displayObject how do you add the bmps_arr to the stage so you can view the effect?
Thanks
August 1st, 2009 at 2:59 pm
Benjamin :
once particles_arr is returned it contains arrays of the bitmap data pieces in BitmapData format and it’s positions in Point format.
{pos:Point, bmp:BitmapData}
So for example, you could create a particle class that accept these two as arguments in constructor and maybe wraps bitmapData in a Bitmap and positions that bitmap with the point data..
Then , loop through array and animate the particles.
Hope this helps.
November 6th, 2009 at 7:51 am
Awesome effect. Would it be possible to see the fla for the morph menu?
November 6th, 2009 at 12:00 pm
Colin: leave me an email, I’ll see what I can do.
November 7th, 2009 at 7:01 am
Slav, email is colinlac [at] optushome.com.au