Membuat Button skin + transition color dengan menggunakan Flex 4

Melanjutkan tutorial sebelumnya “Membuat Button skin sederhana dengan menggunakan Flex 4″, saat ini kita akan membuat suatu button skin yang sederhana namun dengan menambahkan sentuhan transisi warna yang cantik. Pertama – tama kita buat file dengan nama CustomButtonSkinTransition.mxml, kemudian ketik source yang ada di bawah ini.

<?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/halo"
			   minWidth="1024" minHeight="768" backgroundColor="#4E4E4E">

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/halo";

		s|Button
		{
			skinClass: ClassReference("skins.ButtonSkinTransition");
		}

	</fx:Style>

	<s:Button label="Custom Button"  horizontalCenter="0" verticalCenter="15"/>

</s:Application>

Kemudian, buatlah folder skins dan juga buatlah file ButtonSkinTransition.mxml di dalam folder skins yang tadi dibuat. Selanjutnya ketikan source yang ada di bawah ini pada file ButtonSkinTransition.mxml.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 minHeight="40" minWidth="40"
			 alpha.disabled="0.5">

	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>

	<s:transitions>
		<s:Transition fromState="up" toState="over" autoReverse="true">
			<s:AnimateColor targets="{[g1,g2]}" duration="300"/>
		</s:Transition>
		<s:Transition fromState="over" toState="down" autoReverse="true">
			<s:AnimateColor targets="{[g1,g2]}" duration="300"/>
		</s:Transition>
		<s:Transition fromState="over" toState="up" autoReverse="true">
			<s:AnimateColor targets="{[g1,g2]}" duration="300"/>
		</s:Transition>
	</s:transitions>

	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.Button")]
	</fx:Metadata>

	<fx:Script>
		<![CDATA[
			static private const exclusions:Array = ["labelDisplay"];

			override public function get colorizeExclusions():Array {
				return exclusions;
			}
		]]>
	</fx:Script>

	<s:Group left="0" right="0" top="0" bottom="0">

		<!-- fill -->
		<s:Rect left="1" right="1" top="1" bottom="1"
				radiusX="4" radiusY="4">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry id="g1"
									 color="0x47f2e8"
									 color.over="0x007bc2"
									 color.down="0x656565"
									 alpha="0.85" />
					<s:GradientEntry id="g2"
									 color="0x007bc2"
									 color.over="0x47f2e8"
									 color.down="0x000000"
									 alpha="0.85" />
				</s:LinearGradient>
			</s:fill>
		</s:Rect>

		<!-- highlight -->
		<s:Rect left="2" right="2" top="2" radiusX="4" radiusY="4" height="10">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry color="#ffffff" alpha="0.6" />
					<s:GradientEntry color="#ffffff" alpha="0.1" />
				</s:LinearGradient>
			</s:fill>
		</s:Rect>

		<!-- text -->
		<s:RichText id="labelDisplay"
					verticalAlign="middle"
					verticalCenter="0"
					left="20" right="20" top="10" bottom="10"
					color="0xffffff">
			<s:filters>
				<s:DropShadowFilter color="#000000" blurX="0" blurY="0" distance="1" alpha="0.5"/>
			</s:filters>
		</s:RichText>

	</s:Group>
</s:SparkSkin>

Berikut tampilan programnya: