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>
