Using Background image in flex 4 components
Posted by Shardul Singh Bartwal on September 5, 2010
Flex 4 components are not having any property like backgroundImage.
Now showing image in the background of any component like canvas, vbox etc is not so simple as it was in flex 3.0.
Below is the example for achieving this.
Main Application
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" > <fx:Script> <![CDATA[ protected function btn_click(evt:MouseEvent):void { this.setStyle("skinClass", MySkinClass); } ]]> </fx:Script> <s:Button label="Change Back Ground Image" click="btn_click(event);"/> </s:Application>
MySkinClass.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Metadata> [HostComponent("spark.components.supportClasses.SkinnableComponent")] </fx:Metadata> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <s:BitmapImage source="@Embed('image1.jpg')" smooth="true" left="0" right="0" top="0" bottom="0" /> </s:Skin>
enjoy flexing……..
Advertisements
Free Video Background FVB0048 | PowerPoint Gems said
[…] Using Background image in flex 4 components « BTA Flexing […]
buycheapsoftwareinc said
Thanks for the article. I was recently interested in this topic. Very interesting and informative. I wish more such articles on this portal.
Mac Adobe said
Mac Adobe…
[…]Using Background image in flex 4 components « BTA Flexing[…]…