Flex Transparent Background On Desktop Application

Question

I have started taking on Flex and Adobe Air to develop cross browser applications. Most of it is pretty straight forward for me due to my development background. However for the life of me i cannot figure out how to make the basic initial application have a completely transparent background and no control buttons or title bar.

Here is the basic setup of the app mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" width="800" height="800" maxWidth="800" maxHeight="600">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

    </fx:Style>
    <fx:Script>
        <![CDATA[

        ]]>
    </fx:Script>
    <s:BorderContainer width="800" height="600" borderVisible="false" top="0" left="0" skinClass="MainSkin" id="mainContainer">
        <s:VGroup width="800" height="600">

        </s:VGroup> 
    </s:BorderContainer>
</s:WindowedApplication>

So, I am just looking for how to make a) The app window completely transparent as i will be laying a PNG over it, b) How to remove the control buttons(close, minimise and maximise) c) How to remove the default windows title bar

Answer 1

Well I guess you are having two problems: 1. The default background of the Flashplayer stage is white 2. The default background of the WindowedApplication Skin is also white

So you have to first tell the Flashplayer to be transparent. This is done in the html that embeds the flash movie by setting the wmode to transparent ( http://forums.adobe.com/message/4246096 )

Now that your flashplayer is transparent, you have to make the background of the WindowedApplication transparent. You can either provide a custom skinClass or style the existing one to have transparent background: ( http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/skins/spark/WindowedApplicationSkin.html#backgroundRect ) Here you could utilize the flex color notation that adds #rrggbbtt (the optional fourth segment can be used to set the transparency of a color (called alpha)) http://myflex.wordpress.com/2007/09/07/about-hex-color-codes-in-flex-as3/

Hope this helps :-)