Smoothing the background fill on an MX Panel container in Flex 3

The following example shows how you can apply smoothing to a background image fill on an MX Panel container in Flex 3 by extending the BitmapAsset class, setting the Boolean smoothing property, and setting the backgroundImage and backgroundSize styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ -->
<mx:Application name="Embed_smoothing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Panel id="pnl1"
            title="default"
            width="100%" height="50%"
            backgroundImage="@Embed('fx_appicon-tn.gif')"
            backgroundSize="100%"/>
 
    <mx:Panel id="pnl2"
            title="smoothing (MXML)"
            width="100%" height="50%"
            backgroundImage="{FxLogo}"
            backgroundSize="100%"/>
 
</mx:Application>

And the custom BitmapAsset class, FxLogo.as, is as follows:

/**
 * http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ 
 */
package {
    import mx.core.BitmapAsset;
 
    [Embed(source="fx_appicon-tn.gif")]
    public class FxLogo extends BitmapAsset {
        public function FxLogo() {
            smoothing = true;
        }
    }
}

You can also set the backgroundImage and backgroundSize styles in an external .CSS file or <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ -->
<mx:Application name="Embed_smoothing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .fxLogoStyles {
            backgroundImage: ClassReference("FxLogo");
            backgroundSize: "100%";
        }
    </mx:Style>
 
    <mx:Panel id="pnl1"
            title="default"
            width="100%" height="50%"
            backgroundImage="@Embed('fx_appicon-tn.gif')"
            backgroundSize="100%"/>
 
    <mx:Panel id="pnl2"
            title="smoothing (CSS)"
            width="100%" height="50%"
            styleName="fxLogoStyles" />
 
</mx:Application>

Or you can also set the backgroundImage and backgroundSize styles using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ -->
<mx:Application name="Embed_smoothing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            protected function init():void {
                pnl2.setStyle("backgroundImage", FxLogo);
                pnl2.setStyle("backgroundSize", "100%");
            }
        ]]>
    </mx:Script>
 
    <mx:Panel id="pnl1"
            title="default"
            width="100%" height="50%"
            backgroundImage="@Embed('fx_appicon-tn.gif')"
            backgroundSize="100%"/>
 
    <mx:Panel id="pnl2"
            title="smoothing (ActionScript)"
            width="100%" height="50%"
            initialize="init();" />
 
</mx:Application>

One thought on “Smoothing the background fill on an MX Panel container in Flex 3

  1. Hi Peter

    How can I retrieve the image attributes of a background image for a canvas object “myCanvas”? myCanvas.getStyle(“backgroundImage”) gives me URL of the image. But is there any way by which I get the image attributes of this already loaded image from any canvas property without constructing a new image object

Comments are closed.