Flex Examples
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>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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