How does one smooth an image used as a control skin?

Question

I'm embedding an image like this:

[Embed(source="/tool_deleteUp.png")]
private static const c_deleteButton_styleUp:Class;

I'm using it like this:

_removeButton = new Button();
_removeButton.setStyle('upSkin', c_deleteButton_styleUp);

When I rotate the button, the image doesn't scale smoothly. I know the tricks one uses to scale an image loaded in an Image control, but I'm banging my head against a wall trying to figure out how to do it here.

Help!

Answer 1

a hacky way would be to traverse the children/grandchildren of the button, to find the corresponding Bitmap that is of type c_deleteButton_styleUp, and set its smoothing to true ... it is a big flaw of flex, that sometimes it requires classes for styling although some IDisplayObjectFactory would completely suffice for that purpose and would make your life a lot easier ... but life is life ...

don't know of a clean flex only way ... the only possibility i could think of, is to create an SWF, that contains your asset as a symbol, with smoothing turned on, and embed this symbol from that SWF ...

hope that helps ...

Answer 2

Silly, but it works.

import flash.display.Bitmap;
import mx.controls.Button;

public class SmoothButton extends Button{
    protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
     for(var i:int = 0; i < this.numChildren; i++){
      var child:Bitmap = this.getChildAt(i) as Bitmap;
      if(child != null){
       child.smoothing = true;
      }
     }
    }

}

Answer 3

A better, more general solution. Not only does it handle the above case, but it does it

• Without subclasses
• It works with any UIComponent, including IRawChildContainers (like Container), which hide skin children in rawChildren
• It only smooths newly added items, instead of running every time the control updates.

---

public static function smoothChildBitmaps(object:UIComponent):void{

    // Define a nested smooth method
    function smoothChildren(val:UIComponent):void{
        var childList:IChildList;
        if(val is IRawChildrenContainer){
            childList = (val as IRawChildrenContainer).rawChildren;
        }
        else{
            childList = object;
        }

        for(var i:int = 0; i < childList.numChildren; i++){
            var child:Bitmap = childList.getChildAt(i) as Bitmap;
            if(child != null){
                child.smoothing = true;
            }
        }
    };

    // Call the nested method on the object right away
    smoothChildren(object);

    // Set up an event handler to re-call the method when a child is added
    object.addEventListener(
        Event.ADDED,
        function(args:Event):void{
            smoothChildren(object);
        }
    );
}

Answer 4

Hello,

I do not know what you folks banged your head on no offense, just joking. I had a desk :-P

Anyway, those scripts presented are totally useless! For one thing you cannot cast a uicomponent to bitmap! The other thing is, that the seconds script with rawchildren ist more ore less the same. rawchildren gets your the children and the chrome of the container - that's it. If you have a button in a container you can try to smooth the chrome of the container - the rest stays the same since all casts to bitmap will fail.

So, did anyon rdfm?

On the other hand. One could try out stage.quality to stagequality.best. If you check the adobe forums http://forums.adobe.com/thread/427899 you will see that flex runs well - just air kind of ignores this :-(

If those two scripts ever worked - esp. the part with button as bitmap - I'll go and smash my head somewhere :-). I see NO WAY in the class hierarchy that this could work. After all, numChildren only gives you uicomponents or displayobjects but nothing more!

Answer 5

In response to your smoothChildBitmaps function, I am running into some issues.

Firstly, this function does not seem to work on Images (mx:Image). This is because the child of the Image is a Loader, not a Bitmap. Having it run smoothing on Image.loader.content does the trick

Unfortunately, I cannot get this function to work on Flex components whatsoever. After some digging around (in this case, it's with mx:Button), I discovered that the art assets for the skin are stored as SpriteAssets as children of the Button. Unfortunately, I am not having a very good time trying to smooth these SpriteAssets. I've tried drawing the sprite onto a new BitmapData, loaded this BitmapData into a new Bitmap with smoothing set to true, added this Bitmap to a new SpriteAsset, then switching the SpriteAsset inside of the button for this new one, but I do not get consistent results. It will smooth the button the first time, but any subsequent smooth calls (due to mouse over/out, whatever) end up reverting the button back to its non-smooth state. Any ideas here?