Indonesian Flex Community Adobe User Group http://indonesianflexcommunity.org Wed, 24 Mar 2010 09:34:20 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Download Flash Builder 4 Final http://indonesianflexcommunity.org/download-flash-builder-4-final/ http://indonesianflexcommunity.org/download-flash-builder-4-final/#comments Wed, 24 Mar 2010 09:34:20 +0000 tm2_reynolds http://indonesianflexcommunity.org/?p=187 Sekian lama para developer flex menunggu kehadirannya, akhirnya telah di release juga Flash Builder 4 Final. Dengan menyempurnakan fitur-fiturnya, Flash Builder 4 hadir dengan lebih mantap.
Download

Buzz it!
Share/Bookmark]]> http://indonesianflexcommunity.org/download-flash-builder-4-final/feed/ 4 Membuat Button skin + transition color + image dengan menggunakan Flex 4 http://indonesianflexcommunity.org/membuat-button-skin-transition-color-image-dengan-menggunakan-flex-4/ http://indonesianflexcommunity.org/membuat-button-skin-transition-color-image-dengan-menggunakan-flex-4/#comments Sat, 06 Mar 2010 11:38:27 +0000 tm2_reynolds http://indonesianflexcommunity.org/?p=170 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]]> http://indonesianflexcommunity.org/membuat-button-skin-transition-color-image-dengan-menggunakan-flex-4/feed/ 8 National Seminar RIA and Mobile Solution With Adobe Flash Platform http://indonesianflexcommunity.org/national-seminar-ria-and-mobile-solution-with-adobe-flash-platform/ http://indonesianflexcommunity.org/national-seminar-ria-and-mobile-solution-with-adobe-flash-platform/#comments Fri, 26 Feb 2010 14:46:37 +0000 admin http://indonesianflexcommunity.org/?p=163 Seminar Nasional Rich Internet Application and Mobile Solution With Adobe Flash Platform

Seminar Nasional Rich Internet Application and Mobile Solution With Adobe Flash Platform

Buzz it!
Share/Bookmark]]> http://indonesianflexcommunity.org/national-seminar-ria-and-mobile-solution-with-adobe-flash-platform/feed/ 2 Membuat Button skin + transition color dengan menggunakan Flex 4 http://indonesianflexcommunity.org/membuat-button-skin-transition-color-dengan-menggunakan-flex-4/ http://indonesianflexcommunity.org/membuat-button-skin-transition-color-dengan-menggunakan-flex-4/#comments Wed, 17 Feb 2010 16:53:23 +0000 tm2_reynolds http://indonesianflexcommunity.org/?p=155 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:

Buzz it!
Share/Bookmark]]> http://indonesianflexcommunity.org/membuat-button-skin-transition-color-dengan-menggunakan-flex-4/feed/ 6 Membuat Button skin sederhana dengan menggunakan Flex 4 http://indonesianflexcommunity.org/membuat-button-skin-sederhana-dengan-menggunakan-flex-4-3/ http://indonesianflexcommunity.org/membuat-button-skin-sederhana-dengan-menggunakan-flex-4-3/#comments Tue, 16 Feb 2010 10:07:08 +0000 tm2_reynolds http://indonesianflexcommunity.org/?p=145 Pada tutorial flex kali ini, kita akan mencoba membuat sebuah button yang sederhana dengan tampilan yang tidak biasa pada Flex 4. Pertama – tama kita buat file dengan nama CustomButtonSkin.mxml, kemudian ketik source yang ada di bawah ini.

<?xml version="1.0" encoding="utf-8"?>
<!-- CustomButtonSkin.mxml -->
<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.ButtonSkin");
		}

	</fx:Style>

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

</s:Application>

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


<?xml version="1.0" encoding="utf-8"?>
<!-- skins/ButtonSkin.mxml -->
<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>

	<!-- 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:
CustomButtonSkin

Buzz it!
Share/Bookmark]]> http://indonesianflexcommunity.org/membuat-button-skin-sederhana-dengan-menggunakan-flex-4-3/feed/ 2 Squiggly – a spell checking engine for Adobe® Flash® Player and Adobe AIR® http://indonesianflexcommunity.org/squiggly-a-spell-checking-engine-for-adobe%c2%ae-flash%c2%ae-player-and-adobe-air%c2%ae/ http://indonesianflexcommunity.org/squiggly-a-spell-checking-engine-for-adobe%c2%ae-flash%c2%ae-player-and-adobe-air%c2%ae/#comments Sat, 13 Feb 2010 13:12:19 +0000 ahmadfathihadi http://indonesianflexcommunity.org/?p=39 Squiggly adalah spell checking engine untuk Adobe Flash Player dan Adobe AIR. Dengan menggunakan Squiggly library, aplikasi yang kita buat dapat dengan mudah ditambahi fitur spell checking. Squiggly akan bekerja pada semua component berbasiskan Text Control. Namun squiggly hanya dapat digunakan untuk text berbahasa inggris.

Adobe tidak menjanjikan hal lebih dari pengembangan squiggly, karena ini hanya merupakan rilis dari teknologi yang mereka buat, walaupun pada website resminya http://labs.adobe.com/technologies/squiggly/, Adobe mengatakan akan mengupayakan kedepannya  agar Squiggly tidak hanya dapat digunakan untuk bahasa inggris saja.

Squiggly - a spell checking engine for Adobe® Flash® Player and Adobe AIR®

Squiggly - a spell checking engine for Adobe® Flash® Player and Adobe AIR®


Untuk demo klik disini

Untuk contoh source code klik disini

Untuk download squiggly klik disini

Buzz it!
Share/Bookmark]]> http://indonesianflexcommunity.org/squiggly-a-spell-checking-engine-for-adobe%c2%ae-flash%c2%ae-player-and-adobe-air%c2%ae/feed/ 0 Tour de Flex http://indonesianflexcommunity.org/tour-de-flex/ http://indonesianflexcommunity.org/tour-de-flex/#comments Fri, 12 Feb 2010 16:32:45 +0000 admin http://indonesianflexcommunity.org/?p=30 Tour de Flex adalah aplikasi yang dikembangkan menggunakan Flex dan dicompile menjadi aplikasi Desktop [Adobe Intergated Runtime] yang memiliki tujuan utama sebagai penjelajah fitur-fitur dan kesanggukan dari Flex serta beserta Source code dari sample yang diberikan. Tour de Flex menyertakan sample dari Components utama Flex, Adobe AIR dan integrasi data-nya, serta menyediakan juga banyak Components dari pihak ketiga, seperti effects, skins, Phyics, dll.

Tour de Flex mempunyai tiga fungsi utama :

  • Memperlihatkan kepada Non-Flex developers hal-hal indah yang bisa dilakukan oleh Flex dengan memberikan contoh-contoh yang baik, look and see.
  • Menyediakan ilustrasi kepada para Flex Developer dengan referensi yang cukup baik.
  • Menyediakan tempat untuk para Flex developer dalam menunjukkan pekerjaan mereka baik komersial maupun non-komersial.

Tour de Flex menyediakan lebih dari 216 contoh aplikasi yang bisa langsung dilihat, sebagian contoh telah dilengkapi dengan source code, dokumentasi, dan details lainnya. Topik yang terdapat dalam Tour de Flex adalah Flex Core Components, Flex Data Access, AIR Desktop Capabilities, Cloud APIs, Data Visualization, Mapping, and a growing collection of custom components, effects, skins, etc.

The Tour de Flex component explorer

Components and samples in Tour de Flex

Share Tour de Flex

Anda bisa membantu menyebarluaskan tentang Tour de Flex ini dengan cara mengembed tag HTML dibawah ini :

<iframe width="216" height="182" frameborder="0" scrolling="no" src="http://tourdeflex.adobe.com/badge/"></iframe>
Buzz it!
Share/Bookmark]]> http://indonesianflexcommunity.org/tour-de-flex/feed/ 8 Skinning Flex Components with Adobe Fireworks CS4 http://indonesianflexcommunity.org/skinning-flex-components-with-adobe-fireworks-cs4/ http://indonesianflexcommunity.org/skinning-flex-components-with-adobe-fireworks-cs4/#comments Fri, 12 Feb 2010 16:22:56 +0000 admin http://indonesianflexcommunity.org/?p=27 Banyak cara untuk membuat skin component Flex/AIR, kali ini akan dibahas cara pembuatannya menggunakan Adobe Fireworks CS4. Silahkan download di sini

Buzz it!
Share/Bookmark]]> http://indonesianflexcommunity.org/skinning-flex-components-with-adobe-fireworks-cs4/feed/ 0 Pentingnya penggunaan ScaleGrid pada pembuatan Flex Skin http://indonesianflexcommunity.org/pentingnya-penggunaan-scalegrid-pada-pembuatan-flex-skin/ http://indonesianflexcommunity.org/pentingnya-penggunaan-scalegrid-pada-pembuatan-flex-skin/#comments Fri, 12 Feb 2010 16:13:12 +0000 ahmadfathihadi http://indonesianflexcommunity.org/?p=17 Ketika kita membuat Skin untuk komponen Flex, maka kita perlu memperhatikan Scale Grid. Scale Grid adalah garis pemandu yang berfungsi untuk pembatasi suatu Flex Skin yang dibuat. Scale Grid memiliki garis pemisah Atas, Bawah, Kiri dan Kanan, atau yang disebut scaleGridLeft, scaleGridTop, scaleGridRight, scaleGridBottom.

Nah, lalu apa yang menjadi penting dari scale Grid ?, mari kita lihat contoh dibawah.

Nah, terlihat sudah perbedan menggunakan ScaleGrid dengan Tidak.
Ketika kita menggunakan ScaleGrid maka Flex tidak akan menarik atau merusak kawasan yang terdapat didalamnya. Oleh sebab itulah Skin yang dibuat bisa terlihat tidak pecah walaupun ditakir dari ukuran sebenarnya.

Teknik ini adalah wajib bagi para pembuat UI.
Cara memberikan ScaleGrid pada Skin adalah mudah.

Buka file CSS anda

Kemudian Klik pada tombol Edit Scale Grid

Jika sudah anda bisa langsung menentukan posisi GridScale yang sesuai dengan Skin yang anda pakai.
Jika sudah, lihat file CSS anda. Maka akan terlihat penambahan atribut CSS.


Button
{
	upSkin: Embed(source="aset/Button_upSkin.png",scaleGridRight="60",
	scaleGridLeft="5",scaleGridTop="5",scaleGridBottom="24");
	overSkin: Embed(source="aset/Button_overSkin.png",scaleGridRight="58",
	scaleGridLeft="5",scaleGridTop="5",scaleGridBottom="22");
	downSkin: Embed(source="aset/Button_downSkin.png",scaleGridRight="60",
	scaleGridLeft="5",scaleGridTop="5",scaleGridBottom="24");
	disabledSkin: Embed(source="aset/Button_disabled.png",scaleGridRight="60",
	scaleGridLeft="5",scaleGridTop="5",scaleGridBottom="24");
	color: #FFFFFF;
	textRollOverColor: #FFFFFF;
	textSelectedColor: #FFFFFF;
}
Buzz it!
Share/Bookmark]]> http://indonesianflexcommunity.org/pentingnya-penggunaan-scalegrid-pada-pembuatan-flex-skin/feed/ 0 Flex 3 documentation http://indonesianflexcommunity.org/flex-3-documentation/ http://indonesianflexcommunity.org/flex-3-documentation/#comments Fri, 12 Feb 2010 15:43:19 +0000 admin http://indonesianflexcommunity.org/?p=15 Suatu software yang baik tentunya dilengkapi dengan dokumentasi yang baik, bagus, dan lengkap. Untuk para Flex Developer, Buku, Video Tutorial, E-Book,dsb, merupakan hal yang tidak asing lagi dan pasti dimiliki. Namun ada satu hal yang biasanya terlewatkan atau diacuhkan. Flex 3 documentation, Sudah pernah Dilihat atau dibaca ?.

Flex 3 documentation sangatlah bermanfaat dikarenakan banyak hal teknis dan juga teori yang dibahas atau dijelaskan di sini. Flex 3 documentation terdiri dari :

  • Installation Instructions for Adobe Flex 3 and Adobe Flex Builder 3
  • Using Adobe Flex Builder 3
  • Adobe Flex Language Reference
  • Flex 3 Developer Guide
  • Creating and Extending Adobe Flex 3 Components
  • Building and Deploying Adobe Flex 3 Applications
  • Adobe Flex 3 Data Visualization Developer Guide
  • Developing and loading sub-applications
  • Developing AIR Applications with Flex
  • Programming ActionScript 3.0
  • Using Flex with Data Services
  • Importing Skins into Flex Builder
  • Using the Flex Component Kit for Flash CS3
  • Adobe Flex 3 Compiler API User Guide
  • Testing Adobe Flex Applications with Mercury QuickTest Professional

Itu semua bisa didownload terpisah di http://www.adobe.com/support/documentation/en/flex/

dan juga bisa didowload semuanya sekaligus di http://livedocs.adobe.com/flex/3/flex3_documentation.zip

Seberapa penting Flex 3 documentation menurut anda ?

Buzz it!
Share/Bookmark]]> http://indonesianflexcommunity.org/flex-3-documentation/feed/ 1