Apply Vertical or Horizontal Gradient Color to Application Container through MXML Skinning In Flash Builder 4.6

Posted by & filed under ADOBE FLEX.

In this tutorial we are going to see how to apply vertical gradient color and horizontal gradient color to the application container using MXML skinning.

apply vertical gradient color to application container using mxml skinning in flash builder 4.6

Step 1: Create Flex project by selecting New -> Flex project.

Step 2: Now in the package explorer (top left) look for project you have just created, right click on the main application name and New -> MXML Skin (it creates MXML skin for your main application).

apply vertical gradient color to application container using mxml skinning in flash builder 4.6( note :  Mostly when selecting the Host component by default Application container won’t showed in the list of option, so just type spark.components.Application in the Host component and uncheck the create as copy of option)

Step 3: Now just use below code for the skin class.

<?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"
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.Application")]
	</fx:Metadata>

	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="normal" />
	</s:states>

	<!-- SkinParts
	name=contentGroup, type=spark.components.Group, required=false
	name=controlBarGroup, type=spark.components.Group, required=false
	-->

	<s:Rect top="0" left="0" right="0" bottom="0">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry alpha="0.5" color="#0000ff"/>
				<s:GradientEntry alpha="0.0" color="#0000ff"/>
			</s:LinearGradient>
		</s:fill>

	</s:Rect>
	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />

</s:Skin>

Step 4: You have created vertical gradient color MXML skinning class, so just apply that skinning to your main application using skinClass like in the below code.

<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/mx”
skinClass=”VerticalSkin”>

<?xml version="1.0" encoding="utf-8"?>
<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/mx"
			   skinClass="VerticalSkin">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:Application>

Here is the horizontal gradient color MXML skinning class code, where only small difference between both vertical and horizontal skinning class that’s rotation property of the Linear Gradient class.

In horizontal class the rotation is zero degree, where as in vertical class the rotation is 90 degrees.

<?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"
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.Application")]
	</fx:Metadata>

	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="normal" />
	</s:states>

	<!-- SkinParts
	name=contentGroup, type=spark.components.Group, required=false
	name=controlBarGroup, type=spark.components.Group, required=false
	-->

	<s:Rect top="0" left="0" right="0" bottom="0">
		<s:fill>
			<s:LinearGradient rotation="0">
				<s:GradientEntry alpha="0.5" color="#0000ff"/>
				<s:GradientEntry alpha="0.0" color="#0000ff"/>
			</s:LinearGradient>
		</s:fill>

	</s:Rect>
	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />

</s:Skin>

 

 

 .

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!