IconUtilityPlus - use DisplayObjects as flex icons

recently i needed a way to generate small preview-thumbs and put them on flex' Buttons - as it turned out, it isn't that easy to use dynamic content as icons at all.
after some while i found a nice way to put dynamically loaded images in icons: ben stucki's IconUtility.

i took his class and kicked it up a notch. now it's able to take any DisplayObject as a source and lets you use it as an icon for flex components:

  1. var sprite:Sprite = new Sprite();
  2. sprite.graphics.beginFill(0xff0000, 0.5);
  3. sprite.graphics.drawCircle(0, 0, 15);
  5. var button:Button = new Button();
  6. button.setStyle("icon", IconUtilityPlus.getClass(button, sprite));

of course it works in MXML, too:

  1. <mx:Button id="button" icon="{IconUtilityPlus.getClass(button, sprite)}"/>

i've also added a third parameter for animated DisplayObjects like Video or MovieClip - added this just for fun, it will definitely cost some performance to display animated stuff and may be buggy.

thanks again to ben for the previous work, it really is some smart way to bypass adobe's way of only using classes :)

here it is: IconUtilityPlus.as

edit: fixed drawing method for DisplayObjects with offsets <0

This entry was posted in Uncategorized. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.


  1. Nico
    Posted May 29, 2009 at 12:49 pm | Permalink

    nice work - thanks a lot ;-)

  2. Posted September 25, 2009 at 8:24 pm | Permalink

    Can this be used for creating animated icons aswell?


  3. kris
    Posted October 5, 2009 at 12:55 pm | Permalink

    jonas, the implementation for animated stuff has been done in a few minutes, but it should work for videos without a problem.

    if you want to use a flash-animated movieclip or something similar you have to put a transparent rectangle inside it. this rectangle has to cover the area of movement.
    that’s because it sets the width and height only while initialization, so if these values changed during the animation you’d only see a portion of it.

  4. Posted April 21, 2010 at 10:28 am | Permalink

    hey should should add this line

    bitmapData.fillRect(bitmapData.rect, 0×00FFFFFF);

    in the displaySource method so the image is filled with transparent before drawing the new frame. otherwise you get some funny outcome when you have gradients with transparency.

    I implemented it between
    var bounds:Rectangle ….

  5. dezomer
    Posted August 7, 2010 at 11:59 pm | Permalink

    it’s nearly what i’m looking for - would be perfect if it would work with “Alert” Component

    i looked how you make the dif between AccordionHeader and Tab - but it seems tat it’s not possible with Alert icon or titleIcon

    i want to display a displayobject in the alert
    or is there a easier way
    ( i tried it also with ImageSnapshot but there is no way to convert it to a icon Class !

    thx for any hints


Post a Comment

Your email is never published nor shared. Required fields are marked *