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:

http://SampleApp.swf

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.

Advertisements

Error #2032:IOError

To start with in this error I have encountered and explored is specific to ASP.NET and Flash communication using URLVariables and URLLoader.

The error was that although I could send update value to my .Net page but couldn’t receive the update back in Flash player specifically in Chrome and Opera.  To my relief the problem for Opera was resolved with their latest release of version 10.54

So the quest begin and I Google around and found the one of the best source related to Flash Errors on web which is Judah’s blog So in case you are not looking to .net related problem please go through the post and responses in that blog entry you might come across your problem related response.

I put flash.events.HTTPStatusEvent.HTTP_STATUS as suggested by Mike Chambers on that Judah’s blog that helped me to move in right direction at least. I just noticed that in Chrome I am getting status=0 whereas in Firefox or IE I was getting Status=200.

I used Wireshark as suggested in the comments by quite a few users. This post Using WireShark to sniff HTTP packets
has steps listed to help you in getting related information using Wireshark. I was able to figure out that I am receiving response from in both Chrome and Firefox but somehow Chrome is not able to read the response.

Suddenly because of my good luck ASP.Net developer has put some error in his page by mistake and i was able to see the error value in Chrome and when I asked me to send me some text in error blog itself i was able to see the value in Chrome as well.

So now it was the turn of .net code to figure out what wrong was there and we saw that the correct block has two lines after sending the values which are:

Response.Flush();
//Response.Close();

We just commented out Response.Close(); and here it is the problem is solved and we were able to see the values in all browsers. So for reference I searched around what was the problem with Response.close and here is a  post Response.End, Response.Close, and How Customer Feedback Helps Us Improve MSDN Documentation

Which clearly states that Response.close send reset packet and that’s why I was getting 0 instead of 200 and because of that Chrome was missing the values somehow.

Few other related forum questions and blog post which i have read during this problem are:

URLLoader Error #2032: Stream Error

Why is my URLLoader not dispatching when it completes?

Failed to load RSL: Error #2032

Yesterday i was just going through my usual work when i got a client mail pointing to me that he is getting “Failed to Load RSL” and “Error #2032”. Not knowing the exact cause, I tried to dig into the issue and Googled for this. The only solution i could find is to use Failover swf file for RSL(Runtime Shared Library). But nothing concrete. Because serving a swf file instead of swz file was not the option i want to go with as the swf file will be placed in the browser cache, which many people clear from time to time, whereas swz file will be placed in the Flash player cache, which someone rarely reached to clear.

Then it came to my mind that it could be a #2032 i.e. stream error. That means that my application is not picking up the RSL i.e. framework_..swz file from the specified location. I checked the swz file and it was there. So tried to view that swz file in browser by browsing to that file manually http://……/framework..swz and to my surprize I got 404 page not found error.  What does that mean? it means that IIS is not able to stream that file to my browser or is not recognizing the file extension or mime-type. So i searched again for the .swz mime type, it’s the same as of swf file but only the extension is different so i updated it in IIS. Following are the steps to update in IIS:

Steps to update mime type in IIS:

1. Open up IIS

2. Move to website folder

3. Right click on web site folder/virtual directory and open properties

4. Open up HTTP Headers and click on button at bottom in the tab “File Type”

5. Click “New Type”

6. Enter ‘.swz’ without quotes in Associations Extension and ‘application/x-shockwave-flash‘ without qoutes in Content type (MIME). Click ok and and you are ready to go.