Generating icon class styles at runtime

Hi David,

I am dynamically creating MX:Button (s) and I need to change an icon style on mouse events. I don't want to embed all icons into SWF. How can I load icons at runtime? I found couple examples on the internet:

http://meteorite-13.blogspot.com/2008_08_01_archive.html

http://svn.assembla.com/svn/drpinternet/Filemanager/src/IconUtility.as

http://pastebin.com/f6a4f17e8

Unfortunately on mouse over or down the button icon is NULL.

Please can you help me ASAP?

Thanks,

Alex

Hi Alex,

The samples you submitted won't work for component skinning with different icons for the different event states (down, up, over, etc). We can define multiple style event properties in ActionScript for a given component, however using these examples as currently implemented you can override bitmapData when creating class factory skins only once - there is no support for multiple event states. This is why the other icon properties are NULL.

Try my solution and let me know if it works for you.

package
{ 
    import flash.display.BitmapData;
    import flash.events.Event;
    import flash.utils.Dictionary;
    import mx.core.BitmapAsset;
    import mx.core.UIComponent; 

    public class ImageFactory extends BitmapAsset
    {
        private static const _dictionary:Dictionary = new Dictionary();

        function ImageFactory(){
            super();
            addEventListener(Event.ADDED, addedHandler, false, 0, true);
       }
      
       private function addedHandler(event:Event):void {
          removeEventListener(Event.ADDED, addedHandler);
          var items:Array = _dictionary[parent];
          if(items!= null) {
            var icons:Array = [];
            for(var i:uint = 0; i < items.length; i++){
                var item:Object = items[i];
                if(item.name == name || (bitmapData == null && item.name == null)){
                    bitmapData = item.data;
                }else if(item.name && parent.getChildByName(item.name) == null){
                    var icon:BitmapAsset = new ImageFactory() as BitmapAsset;
                    icon.name = item.name;
                    icon.bitmapData = item.data;
                    icon.visible = false;
                    icons.push(icon);
                }
            }
            delete _dictionary[parent];
        
            UIComponent(parent).invalidateSize(); 
            for(i = 0; i < icons.length; i++)
                parent.addChild(icons[i]);
         }
      }

      public static function getClass(target:UIComponent, bitmapData:BitmapData, styleName:String=null):Class{
        var icons:Array = _dictionary[target];
        if(_dictionary[target] == null){
            icons = [];
            _dictionary[target] = icons;
        }
    
         for(var i:uint = 0; i < icons.length; i++){
            var item:Object = icons[i];
            if(item.name == styleName)
                return ImageFactory;
       }

       if(styleName != null)
           target.setStyle(styleName, ImageFactory);
       icons.push({data:bitmapData, name:styleName});
         return ImageFactory;
    }

     public static function setIconStyles(target:UIComponent, bitmapData:BitmapData):void
    {
        var buttonStates:Array = ['icon', 'upIcon', 'overIcon', 'downIcon', 'disabledIcon',
'selectedUpIcon', 'selectedOverIcon', 'selectedDownIcon', 'selectedDisabledIcon'];

        var icons:Array = [];
        for(var i:uint = 0; i < buttonStates.length; i++){
          target.setStyle(buttonStates[i], ImageFactory);
          icons.push({data:bitmapData, name:buttonStates[i]});
      }
      _dictionary[target] = icons;
    }
  }
}