PERTEMUAN II

TATA WARNA

TUGAS

Mengatur warna pada sebuah user interface, baik pewarnaan teks, latar, ataupun component.

LANGKAH KERJA

Software yang digunakan: Adobe Flash CS6 Professinal

Langkah-langkah:
1. Buat file dokumen Flash (ActionScript 3.0) baru.
2. Drag Button dari panel Component ke Stage. Pada tab Parameters, ubah parameter
toggle menjadi true.
3. Double-click Button untuk membuka Button skin.

Button Skin
4. Double-click skin selected_over untuk masuk ke mode symbol-editing.

mode symbol-editing
5. Perbesar sampai 400% untuk mempermudah dalam peng-editan.
6. Double-click latar Button sampai warna latarnya muncul di Fill color picker pada
Property inspector.

7. Pilih warna #CC0099 pada Fill color picker untuk mengganti dengan warna baru pada
skin selected_over.
8. Klik tombol kembali di sisi sebelah kiri edit bar diatas Stage untuk kembali ke mode
document-editing.
9. Pilih Control> Test Movie.
10. Klik Button untuk melihat perubahannya.

Button yang telah diubah

Langkah-langkah:
1. Drag ComboBox dari panel Component ke Stage. Pada tab Parameters, ubah
parameter toggle menjadi true.
2. Double-click ComboBox untuk membuka ComboBox skin.

ComboBox Skin
3. Double-click Up skin sampai latarnya tertandai.
4. Perbesar sampai 400% untuk mempermudah dalam peng-editan.
5. Klik pada area tengah skin sampai warna latarnya muncul di Fill color picker pada
Property inspector.

6. Pilih warna #33FF99 pada Fill color picker untuk mengganti dengan warna baru pada
Up skin.
7. Klik tombol kembali di sisi sebelah kiri edit bar diatas Stage untuk kembali ke mode
document-editing.
8. Pilih Control> Test Movie.

ComboBox yang telah diubah

Langkah-langkah:
1. Drag DataGrid dari panel Component ke Stage.
2. Double-click DataGrid untuk membuka ComboBox skin.

DataGrid Skin
3. Perbesar sampai 400% untuk mempermudah dalam peng-editan.
4. Double-click HeaderRenderer skin untuk membuka skin HeaderRenderer.
5. Double-click Up_Skin untuk masuk ke mode symbol-editing dan klik latar sampai
warna latarnya muncul di Fill color picker pada Property inspector.
6. Pilih warna #00CC00 pada Fill color picker untuk mengganti dengan warna baru pada
Up skin.
7. Klik tombol kembali di sisi sebelah kiri edit bar diatas Stage untuk kembali ke mode
document-editing.
8. Pilih Control> Test Movie.

DataGrid yang telah diubah

Langkah-langkah:
1. Drag TextInput dari panel Component ke Stage.
2. Double-click TextInput untuk membuka ComboBox skin.

TextInput Skin
3. Perbesar sampai 400% untuk mempermudah dalam peng-editan.
4. Double-click Normal skin.
5. Pilih sembarang garis pada border Normal skin dan atur warna #993399 pada Fill
color picker untuk mengganti dengan warna baru.
9. Double-click latar sampai warna latarnya muncul di Fill color picker pada Property
inspector. Pilih warna #99CCCC pada Fill color picker untuk mengganti dengan
warna baru pada Up skin.
6. Klik tombol kembali di sisi sebelah kiri edit bar diatas Stage untuk kembali ke mode
document-editing.
7. Pilih Control> Test Movie.

TextInput yang telah diubah

== Selamat Belajar ==