Morphing Menu

May 1st, 2009 by Slav

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.

morphmenu

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…

 Download ExplodeAS3 Class

Posted in AS3, flash, particles

7 Responses

  1. Tom Krcha

    So cool !!

  2. RooTShell

    Thanks for sharing this…

    Looks great!

  3. Benjamin

    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

  4. Slav

    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.

  5. Colin

    Awesome effect. Would it be possible to see the fla for the morph menu?

  6. Slav

    Colin: leave me an email, I’ll see what I can do.

  7. Colin

    Slav, email is colinlac [at] optushome.com.au

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.