Setting Flex 4 Application background transparent
This article is covered in more detail in flex 4 help documents at About the Application container so in case you are looking for detailed description on what all you can do with Application container please refer to that article.
I am going to cover the small part of it here as I found that it’s a bit tricky in Flex 4 to get your background transparent and you don’t find enough help on it while searching around on the net.
In flex 4 you can’t set backgroundImage or backgroundAlpha to zero directly you have to create skin for your application container using which you can set background color or image. So in case you want to make a see through flash/flex application you need a transparent image. The first thing you will need is a transparent image you can use. So create one using Photoshop or some other design software. For Transparent skin you can use the following code, create a file named for example: MainApplicationSkin.mxml (you can name it any. just make sure use the same name in main application).
<?xml version=”1.0″ encoding=”utf-8″?>
<fx:Metadata> [HostComponent("spark.components.Application")] </fx:Metadata>
<s:State name=”normal” />
<s:State name=”disabled” />
<!– Use an Image control to embed an image for the background of the Application container. –>
left=”0″ right=”0″ top=”0″ bottom=”0″ maintainAspectRatio=”false” />
<s:Group id=”contentGroup” left=”0″ right=”0″ top=”0″ bottom=”0″ />
Now if this skin is at the same level as your main application you can use it in your main application as follows:
width=”100%” height=”100%” minWidth=”550″
You can see how the MainApplicationSkin has been supplied as a parameter to skinClass. This will make your main flex application as transparent. Now the other part is to make this as a transparent in your html code. We need to tell the object code to set the object “wmode” as transparent. For this you have to set it at two places one in object code part and other in embed code part. For Example:
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”716″ height=”582″ title=”SampleApp”>
<param name=”movie” value=”SampleApp.swf” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”transparent” />
<embed src=”SampleApp.swf” quality=”high” wmode=”transparent” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”716″ height=”582″></embed>
You can see how the wmode has been set as transparent in two places. This will make your html background appear through flash object. So as we see, we need to make it transparent at 2 levels one in flex application which we do using skin in flex 4 and other in html code. It’s same as we used to do with earlier versions of flash/flex applications.