Mar 6, 2010

Posted by tm2_reynolds in Learning Center | 8 Comments

Membuat Button skin + transition color + image dengan menggunakan Flex 4

Membuat Button skin + transition color + image dengan menggunakan Flex 4

Pada tutorial flex 4 ini kita akan membuat suatu button skin yang akan lebih di percantik lagi dengan tambahan image dan transition color. Pertama – tama kita buat file dengan nama CustomButtonSkinWithImage.mxml, kemudian ketikkan source yang ada di bawah ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?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">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<fx:Style source="assets/css/style.css"/>
 
	<s:HGroup width="534" height="246" verticalCenter="-22" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" horizontalCenter="0">
		<s:Button label="BUDGET" styleName="BudgetButton"/>
		<s:Button label="ACCOUNTING" styleName="AccountingButton"/>
		<s:Button label="SYNC" styleName="SyncButton"/>
	</s:HGroup>
</s:Application>

Kemudian buatlah file style.css yang di letakkan pada folder “assets/css” dan kemudian ketikkan source di bawah ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
 
s|Application
{
	skin-class: ClassReference('skins.ApplicationSkin');	
}
 
.BudgetButton
{
	skin-class: ClassReference('skins.BudgetButton');
}
 
.AccountingButton
{
	skin-class: ClassReference('skins.AccountingButton');
}
 
.SyncButton
{
	skin-class: ClassReference('skins.SyncButton');
}

Berikut adalah source skin untuk button yang nantinya akan digunakan. Buatlah 3 buah file dengan nama BudgetButton.mxml, AccountingButton.mxml, dan Sync.mxml, kemudian ketikkan source di bawah ini pada masing-masing ke tiga file tadi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

<?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" 
			 xmlns:mx="library://ns.adobe.com/flex/halo"  >
	<fx:Declarations>
 
	</fx:Declarations>
 
	<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,g3,g4]}" duration="300"/>
		</s:Transition>
 
		<s:Transition fromState="over" toState="up" autoReverse="true">
			<s:AnimateColor targets="{[g1,g2,g3,g4]}" duration="300"/>
		</s:Transition>
	</s:transitions>
 
 
	<fx:Metadata>
		[HostComponent("spark.components.Button")]
	</fx:Metadata>
 
	<s:RectangularDropShadow color="#000000" 
							 blurX="15" blurY="15" top="0" left="0" right="0" bottom="0" 
							 blRadius="6" brRadius="6" tlRadius="6" trRadius="6"
							 angle="90" />
 
	<s:Rect radiusX="6" radiusY="6" top="0" right="0" left="0" bottom="0">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry id="g1" 
								 color="#3f3f3f"
								 color.over="#ffffff"
								 />
 
				<s:GradientEntry id="g2" 
								 color="#000000"
								 color.over="#e0e0e0"
								 />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
 
	<!--stroke-->
	<s:Rect radiusX="6" radiusY="6" top="1" right="1" left="1" bottom="1">
		<s:stroke>
			<s:LinearGradientStroke rotation="-27">
				<s:GradientEntry color="#ffffff" alpha="0.9"/>
				<s:GradientEntry color="#ffffff" alpha="0.05"/>
				<s:GradientEntry color="#ffffff" alpha="0.9"/>
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
 
	<s:VGroup top="0" left="0" right="0" bottom="0" horizontalAlign="center" gap="2" paddingRight="10" paddingLeft="10" paddingBottom="10" paddingTop="10">
		<s:BitmapImage id="pic" source="@Embed('assets/images/Budget.png')" smooth="true"  top="5"/>
		<!-- layer 8: text -->
 
		<s:Group verticalCenter="0" horizontalCenter="0" width="100%">
			<s:RectangularDropShadow color="#000000" 
									 blurX="8" blurY="8" top="0" left="0" right="0" bottom="0"  distance="2"
									 blRadius="6" brRadius="6" tlRadius="6" trRadius="6"
									 angle="90" />
			<s:Rect radiusX="6" radiusY="6" verticalCenter="0" horizontalCenter="0" width="100%" height="{labelDisplay.height + 14}">
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry id="g3" 
										 color.over="#ff6d13"
										 color="#ffffff"
										 />
 
						<s:GradientEntry id="g4" 
										 color.over="#e85603"
										 color="#e0e0e0"
										 />
					</s:LinearGradient>
				</s:fill>		
			</s:Rect>
 
			<s:RichText id="labelDisplay"
						color="0x000000"
						color.over="0xffffff"
						fontSize="15" fontWeight="bold" horizontalCenter="0" verticalCenter="0"/>
		</s:Group>
	</s:VGroup>
 
 
	<s:Rect topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" top="1" right="1" left="1" height="80">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#ffffff" alpha="0.3"/>
				<s:GradientEntry color="#ffffff" alpha="0"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
 
	<s:Rect radiusX="6" radiusY="6" top="4" right="4" left="4" height="20">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#ffffff" alpha="0.6"/>
				<s:GradientEntry color="#ffffff" alpha="0.05"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
 
</s:SparkSkin>

Kemudian untuk membedakan sebuah image, dapat kita ganti source yang menunjukkan letak file image tersebut seperti penggalan source di bawah ini:

65

<s:BitmapImage id="pic" source="@Embed('assets/images/Budget.png')" smooth="true"  top="5"/>

Selanjutnya untuk merubah latar belakang / background pada aplikasi ini, dapat kita buat sebuah file dengan nama ApplicationSkin.mxml lalu ketikkan source program di bawah ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?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" 
			 xmlns:mx="library://ns.adobe.com/flex/halo" width="100%" height="100%">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	</s:states>
 
	<fx:Metadata>
		[HostComponent("spark.components.Application")]
	</fx:Metadata>
 
	<s:Rect left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:RadialGradient y="0" scaleX="1000" scaleY="1373.44" rotation="-90">
				<s:GradientEntry color="#f6f6f6"/>
				<s:GradientEntry color="#d4d4d4"/>
			</s:RadialGradient>
		</s:fill>
	</s:Rect>
 
	<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0" />
 
</s:SparkSkin>

Berikut tampilan programnya:

Buzz it!
  • Share/Bookmark

8 Comments

  1. rangga says:
    May 5, 2010 at 10:07

    thank you…

  2. hrv says:
    May 22, 2010 at 01:42

    flash previewnya di tampilkan juga dong..

  3. tm2_reynolds says:
    May 25, 2010 at 22:18

    @hrv
    terimakasih sudah mengingatkan, akan saya usahakan..:)

  4. tm2_reynolds says:
    May 25, 2010 at 22:22

    @rangga
    sama – sama..:)

  5. lalala says:
    May 26, 2010 at 10:49

    Kalo mau manggil function dari user’nya gmna ya, ada yg tau ga >.<

  6. gum says:
    June 10, 2010 at 21:11

    halo, saya baru belajar adobe flex. adakah mailing list adobe flex berbahasa indonesia yang bisa saya ikuti?

    terima kasih :)

  7. ahmadfathihadi says:
    June 11, 2010 at 07:36

    ya ada
    http://tech.groups.yahoo.com/group/Flex_indonesia/
    ini Milis iFx :)

    Welcome

  8. whisnu says:
    June 15, 2010 at 17:56

    flash previewnya mana bos

Leave a Reply