Skinning Flex Components with Adobe Fireworks CS4

Jujur saya belum yakin jika para membaca sudah mempunyai Adobe Fireworks CS4 (beta). Anda bisa mendownloadnya di labs.adobe.com
Walapun hanya trial 2 hari tapi sudah lumayan untuk menghilangkan rasa penasaran kita untuk mencoba produk Adobe yang satu ini. Saya tidak akan membahas bagaimana cara agar bisa merubah trial 2 hari menjadi unlimited. (^_^)
Jika anda sudah mendownload dan kemudian menginstalnya, anda bisa membukanya sekarang :

Nah ikuti saja seperti dibawah ini :

Pada contoh kali ini kita akan membuat Skin untuk Button

Anda akan menemui tampilan seperti berikut :

Anda bisa merubah sesuai selera anda !. misalkan saya membuatnya seperti sibawah ini :

Jika anda sudah selesai dengan urusah mendesign, kita akan menuju tahap selanjutnya, yaitu Export.

Jangan lupa untuk memilih Layers to Files pada pilihan Export

Pilih sebuah folder baru menyimpan hasil export, kemudian Klik Save.

Berikut hasil exportnya. . . .

Nah mari kita beralih ke Flex Builder 3.

Buatlah sebuah project baru kemudian buatlah sebuah file CSS baru

Sebelum hal itu anda lakukan, Copylah folder yang berisi hasil export yang sudah kita buat sebelumnya di Adobe Fireworks CS4 ke dalam struktur folder src.

Save file CSS baru tersebut dengan nama terserah anda, kali ini saya memberikan nama cssku.css

Klik Finish . .

Jika sudah buka file CSS anda, kemudian klik pada tanda yang sudah ditandai pada gambar dibawah ini. Yaitu New Style.

Akan muncul gambar berikut. . .

Pilih Button, kemudian klik OK

Kemudian klik Flex Properties, lalu klik image files. . .

Lalu pilih gambar sesuai ketentuan konsep, yaitu Up,Over,Down,Disable

Akan seperti ini jika kita sudah memilih gambar skin

Hasil akhir dari CSS seperti berikut :

Button

{

upSkin: Embed(source="skin/Button_upSkin.png");

overSkin: Embed(source="skin/Button_overSkin.png");

downSkin: Embed(source="skin/Button_downSkin.png");

disabledSkin: Embed(source="skin/Button_disabled.png");

color: #FFFFFF;

textRollOverColor: #FFFFFF;

textSelectedColor: #FFFFFF;

}

Jika sudah kembali lagi ke main Application, kemudian tambahkan tag Style setelah tag Application.

<mx:Style source="cssku.css"/>

Jika sudah anda bisa mencoba memasukkan komponen button dan mencoba hasilnya. . .

Semoga tutorial ini bisa bermanfaat (^_^)