How to create transparent application background – Spark SDK

We have to agree that some drawbacks in spark SDK. Here the problem is, I cannot set the alpha for the main application. So to create a Flex web application with transparent background, follow the below.

Create a MXML component and name it as TransparentApplicationSkin and paste the following code into that. This code is the default ApplicationSkin in the Spark SDK, I just added the alpha attribute to make the transparent background.

<?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"
		alpha.disabled="0.5">

	<fx:Metadata>
		<![CDATA[
		/**
		* A strongly typed property that references the component to which this skin is applied.
		*/
		[HostComponent("spark.components.Application")]
		]]>
	</fx:Metadata>

	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
		<s:State name="normalWithControlBar"/>
		<s:State name="disabledWithControlBar"/>
	</s:states>

	<!-- fill -->
	<!---
		 A rectangle with a solid color fill that forms the background of the application.
		 The color of the fill is set to the Application backgroundColor property.
	-->
	<s:Rect id="backgroundRect"
			left="0"
			right="0"
			top="0"
			bottom="0">
		<s:fill>
			<s:SolidColor color="{getStyle('backgroundColor')}"
						  alpha="0"/>
		</s:fill>
	</s:Rect>

	<s:Group left="0"
			 right="0"
			 top="0"
			 bottom="0">
		<s:layout>
			<s:VerticalLayout gap="0"
							  horizontalAlign="justify"/>
		</s:layout>

		<!---
			 Application Control Bar
		-->
		<s:Group id="topGroup"
				 minWidth="0"
				 minHeight="0"
				 includeIn="normalWithControlBar, disabledWithControlBar">

			<!-- layer 0: control bar highlight -->
			<s:Rect left="0"
					right="0"
					top="0"
					bottom="1">
				<s:stroke>
					<s:LinearGradientStroke rotation="90"
											weight="1">
						<s:GradientEntry color="0xFFFFFF"/>
						<s:GradientEntry color="0xD8D8D8"/>
					</s:LinearGradientStroke>
				</s:stroke>
			</s:Rect>

			<!-- layer 1: control bar fill -->
			<s:Rect left="1"
					right="1"
					top="1"
					bottom="2">
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry color="0xEDEDED"/>
						<s:GradientEntry color="0xCDCDCD"/>
					</s:LinearGradient>
				</s:fill>
			</s:Rect>

			<!-- layer 2: control bar divider line -->
			<s:Rect left="0"
					right="0"
					bottom="0"
					height="1"
					alpha="0.55">
				<s:fill>
					<s:SolidColor color="0x000000"/>
				</s:fill>
			</s:Rect>

			<!-- layer 3: control bar -->
			<s:Group id="controlBarGroup"
					 left="0"
					 right="0"
					 top="1"
					 bottom="1"
					 minWidth="0"
					 minHeight="0">
				<s:layout>
					<s:HorizontalLayout paddingLeft="10"
										paddingRight="10"
										paddingTop="7"
										paddingBottom="7"
										gap="10"/>
				</s:layout>
			</s:Group>
		</s:Group>

		<!---
			 @copy spark.components.SkinnableContainer#contentGroup
		-->
		<s:Group id="contentGroup"
				 width="100%"
				 height="100%"
				 minWidth="0"
				 minHeight="0"/>

	</s:Group>

</s:Skin>

And, apply this skin to the 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"
               skinClass="TransparentApplicationSkin">

Now, the flex application will get the transparent background, but the swf base will have some default background, to override that, we need to set the wmode as transparent in the javascript.

params.wmode = "transparent";

Yeah, now you will get the Flex Web Application with transparent background.

"utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">

<fx:Metadata>
<![CDATA[
/**
* A strongly typed property that references the component to which this skin is applied.
*/
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>

<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
<s:State name="normalWithControlBar"/>
<s:State name="disabledWithControlBar"/>
</s:states>

<!-- fill -->
<!---
A rectangle with a solid color fill that forms the background of the application.
The color of the fill is set to the Application backgroundColor property.
-->
<s:Rect id="backgroundRect"
left="0"
right="0"
top="0"
bottom="0">
<s:fill>
<s:SolidColor color="{getStyle('backgroundColor')}"
alpha="0"/>
</s:fill>
</s:Rect>

<s:Group left="0"
right="0"
top="0"
bottom="0">
<s:layout>
<s:VerticalLayout gap="0"
horizontalAlign="justify"/>
</s:layout>

<!---
Application Control Bar
-->
<s:Group id="topGroup"
minWidth="0"
minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar">

<!-- layer 0: control bar highlight -->
<s:Rect left="0"
right="0"
top="0"
bottom="1">
<s:stroke>
<s:LinearGradientStroke rotation="90"
weight="1">
<s:GradientEntry color="0xFFFFFF"/>
<s:GradientEntry color="0xD8D8D8"/>
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>

<!-- layer 1: control bar fill -->
<s:Rect left="1"
right="1"
top="1"
bottom="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xEDEDED"/>
<s:GradientEntry color="0xCDCDCD"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

<!-- layer 2: control bar divider line -->
<s:Rect left="0"
right="0"
bottom="0"
height="1"
alpha="0.55">
<s:fill>
<s:SolidColor color="0x000000"/>
</s:fill>
</s:Rect>

<!-- layer 3: control bar -->
<s:Group id="controlBarGroup"
left="0"
right="0"
top="1"
bottom="1"
minWidth="0"
minHeight="0">
<s:layout>
<s:HorizontalLayout paddingLeft="10"
paddingRight="10"
paddingTop="7"
paddingBottom="7"
gap="10"/>
</s:layout>
</s:Group>
</s:Group>

<!---
@copy spark.components.SkinnableContainer#contentGroup
-->
<s:Group id="contentGroup"
width="100%"
height="100%"
minWidth="0"
minHeight="0"/>

</s:Group>

</s:Skin>

Be Sociable, Share!

14 Responses to “How to create transparent application background – Spark SDK”

  1. Chris Borzillo says:

    Hi,
    Thanks for the tip, I managed to nail down the first part however I’m unable to find the javascript I’m supposed to edit. I created the app in Catalyst then moved it to Builder to try and make the background transparent so the HTML background shows through.

  2. Thanks Sir!.

    One hour stoped before to find this…, your post!.

    Best regards from Spain ;-).

    J.R. León

  3. Bllurp says:

    Thanx a lot !!!!!!!!!!!!!!!!

    4 hours banging my head !

    And like Leon, i finally found your post !

    Cheers!

  4. Mary says:

    Thanks very useful!

  5. Andrew says:

    I’m new to FLEX and have followed most of what is said here. I have the following questions. Where do I apply params.wmode = “transparent”;? You mention in the swf base javascript. However, the only file I can find is SWFObject.js. Is this the file? And were would it go? Lastly, if I attempt to edit it, Flex Builder (via Eclipse) pops up a message saying the file is derived. Thanks.

  6. traneo says:

    perfect!! thx guy, nice job!

  7. Webster Montego says:

    Thanks for the awesome tip, it works wonderfully. After an hour of thinking it was my wmode param in my html followed by me doing some nasty AS hacking I found your guide.

  8. Adobe…you couldn’t have made it easier?

    It seems like every new version, simple things become much more complicated.

    *ponders*

    Thanks for a solution….

  9. Tichon007 says:

    Thank a lot it works perfectly 🙂

  10. Deepak says:

    Wasn’t application.backgroundAlpha = 0 much easier than building such huge code base!!! Phew…… Not sure what was the intent to remove those properties, it’s a real pain!

    Anyway, just wanted to know using above code, can we control the alpha programmatically?

    Earlier, i could have easily set backgroundAlpha as and when and wherever i needed. But in the case above how can we achieve it?

  11. Yatko says:

    Thanks for the saved hours!

  12. starlover says:

    Hello,

    How about create an application in any shape (like a car or a beer bottle) in flex 3 you could use a png as a backgroundimage..

    any idea how to get this to work on flash builder 4.5?

    what i did:
    in your-app.xml you need to set:
    none
    true
    true

    in project->properties ->flex compiler you need to add a line at additional compiler arguments:
    -theme=${flexlib}/themes/Halo/halo.swc

    in yourapp.mxml i got code like this:

    @namespace s “library://ns.adobe.com/flex/spark”;
    @namespace mx “library://ns.adobe.com/flex/mx”;
    mx|Application
    {
    /* make app window transparent
    background-color:””;*/
    background-image:””;
    padding: 0px;
    }

    this will get me a chrome-less application window with a custom background image, but i can’t seem to get rid of the blue background color after my png image.. in flex3 you use background-color:””; but in the new flash builder 4.5 it gives me an error: invalid background color: “”

    any idea how to fix this??

  13. starlover says:

    @ owner of this site
    i see my added code will not show correctly.. could you contact me and modify the message?

  14. led shirts says:

    led shirts Great stuff.You may want to actually consider such as something like cheeseburger. What are your thoughts?…

    Great stuff.You may want to actually consider such as something like cheeseburger. What are your thoughts?…

Leave a Reply


Copyright © 2008-2010 K BalaSubramanian | Credits