Home > Flex > Setting Flex 4 Application background transparent

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″?>
<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:s=”library://ns.adobe.com/flex/spark”>

<fx:Metadata>  [HostComponent("spark.components.Application")] </fx:Metadata>
<s:states>
<s:State name=”normal” />
<s:State name=”disabled” />
</s:states>

<!– Use an Image control to embed an image for the background of the Application container. –>
<mx:Image source=”@Embed(source=’images/transparent.png’)”
left=”0″ right=”0″ top=”0″ bottom=”0″ maintainAspectRatio=”false” />
<s:Group id=”contentGroup” left=”0″ right=”0″ top=”0″ bottom=”0″ />
</s:Skin>

Now if this skin is at the same level as your main application you can use it in your main application as follows:

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
width=”100%” height=”100%” minWidth=”550″
skinClass=”MainApplicationSkin”>
<fx:Declarations></fx:Declarations>
</s:Application>

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&#8221;     type=”application/x-shockwave-flash” width=”716″ height=”582″></embed>
</object>

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.

About these ads
  1. Scott
    November 14, 2010 at 8:23 am | #1

    Exactly what I was looking for! Unfortunately it doesn’t work for me :(. I carefully followed the directions, pretty simple… maybe I mishandled the transparent png image. My image is certainly transparent, but it wasn’t specified how big to make it. I tried both a 1×1 pixel and a 500×500 pixel transparent gif, neither had any effect. Maybe I put it in the wrong place? I put it in the top level of the src dir of my flex app and referenced it with .

  2. Laura
    November 25, 2010 at 10:04 am | #2

    Thank you.
    It was very helpful.

  3. tabman
    January 19, 2011 at 5:14 pm | #3

    this didn’t work for me either but the following does:
    http://www.nickkuh.com/flash-flex-air/transparency-for-flex-4spark-applications/2009/08/

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: