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!

Leave a Reply


Copyright © 2008-2010 K BalaSubramanian | Credits