simbol dan libraries empat frame pada simbol tombol yaitu up,over, down dan hit. up menggambarkan...

Rini Marwati – Yudi Wibisono

Matematika UPI – Dok Versi 2013

SIMBOL DAN LIBRARIES

Materi yang dipelajari pada bagian ini adalah: pembuatan simbol grafis, simbol tombol (termasuk

teks sebagai tombol) dan simbol movieclips. Men-share simbol antar file dan meng-impor bitmap

ke dalam simbol.

Simbol pada Flash adalah komponen atau bagian dari Flash yang dapat disimpan dan digunakan

kembali (reuse) bahkan pada film yang berbeda.

Manfaat penggunaan simbol:

1. Film lebih mudah di-maintenance.

2. Film lebih cepat dibuat karena menggunakan simbol yang ada dibandingkan membuat dari

nol.

3. Ukuran film flash menjadi lebih kecil.

Simbol terdiri atas tiga tipe:

1. Simbol grafis.

2. Simbol button (tombol)

3. Simbol movie clip (cuplikan film)

Sekarang kita mulai dengan membuat simbol grafis.

B. Membuat Simbol Grafis

Simbol grafis adalah simbol gambar yang tidak memiliki aspek dinamis.

1. Menambahkan Simbol

Buat film baru dengan File New.

Tambahkan simbol dengan menu Insert New Symbol. Dialog akan muncul.



Ganti nama “symbol 1” dengan “Simbol Grafis”.

2. Mode Edit Simbol

Perhatikan perubahan pada stage, kita sekarang bukan berada pada stage utama lagi, tetapi dalam

mode edit simbol

Untuk kembali ke stage utama, klik tulisan “Scene 1”. Simbol Grafis kita akan disembunyikan.

Untuk meng-editnya kembali, munculkan library dengan menu Window Library atau F11.

Double klik gambar (panah merah di bawah) atau preview-nya (panah merah di atas), untuk

kembali dalam mode edit simbol.



3. Menambahkan Tulisan Pada Simbol

Setelah Anda dalam mode edit simbol (pastikan dengan melihat bagian kiri atas stage, harus

terlihat seperti gambar pada langkah 2). Pilih text tools dan buat sebuah tulisan.

Klik arrow tools, maka kotak di sekitar teks akan berubah menjadi biru (jika tidak, klik teksnya).

Perhatikan panel properties, set koordinat x dan y dengan 0.

Perhatikan gambar teks di stage, teks akan berada tepat di tengah-tengah tanda +. Sekarang

Anda telah mengetahui bahwa koordinat (0,0) suatu objek pada simbol berada di tengah. Ini

berbeda dengan dengan stage utama yang koordinat (0,0) berada pada kiri atas.

4. Memasukkan Simbol Pada Film

Pilih “scene 1”, tulisan kita tidak terlihat lagi (karena tulisan tersebut ada di simbol, bukan di stage

utama). Buka library (F11), lalu drag simbol (salah satu dari panah merah) ke stage utama.



Buat tiga buah copy dari simbol (disebut instance) pada stage utama dengan mendrag simbol tiga

kali.

5. Mengubah Simbol

Selanjutnya kita akan coba mengubah simbol dan melihat efeknya pada 3 instances yang baru kita

tambahkan di stage utama. Buka kembali library dan double klik untuk masuk ke mode edit

simbol. Ganti jenis huruf dan warna tulisan, dengan cara men-double klik teks, lalu blok (ctrl-A)

dan pilih jenis huruf dan warna yang Anda kehendaki.



Kembali ke scene1, lihat pengaruhnya di stage utama. Ketiga instances simbol ini juga ikut

berubah! Inilah manfaat utama dari simbol. Tanpa simbol, untuk mencapai efek yang sama, kita

harus mengubah teks secara manual tiga kali. Apalagi kalau perubahan itu sering terjadi. Fitur ini

akan memudahkan kita untuk me-maintenance film. Dengan simbol hanya satu teks yang

disimpan. Sedangkan tanpa simbol, ketiga teks akan disimpan oleh Flash sehingga memperbesar

ukuran film. Simbol ini juga dapat kita gunakan ulang pada film yang lain.

C. Membuat Simbol Button (Tombol)

Tombol memegang peranan penting karena pengguna dapat menggunakannya untuk berinteraksi

dengan film yang kita buat. Tombol dapat menjadi alat navigasi dan tanda untuk memulai suatu

aksi.

1. Mengubah Shape Menjadi Simbol

Pilih oval tools dan buatlah sebuah lingkaran. Pilih lingkaran tersebut (ingat dengan double klik)

lalu pilih menu Insert Convert to Symbol (F8). Selain dengan double klik Anda juga dapat

memilih dengan membuat area kotak (dengan arrow tool) di sekitar lingkaran ini.



Beri nama “Simbol Button” dan pilih “Button” sebagai behavior. Lihat pada stage utama, ada kotak

pada lingkaran merah yang menandakan bahwa ini adalah simbol. Pada library juga muncul simbol

ini dengan icon yang berbeda dengan simbol kita sebelumnya.

2. Inisialisasi Tombol

Langkah berikutnya adalah membuat tombol bereaksi terhadap pengguna. Tekan double klik pada

lingkaran (setelah Anda memilih arrow tool). Terlihat bahwa kita masuk ke mode edit simbol,

bagian lain dari stage terlihat tetapi dalam warna samar-samar.

Perhatikan perubahan pada panel timeline

Ada empat frame pada simbol tombol yaitu up,over, down dan hit.

Up menggambarkan kondisi button normal,



over menggambarkan kondisi button saat mouse lewat diatasnya,

down saat button ditekan, dan

hit untuk mendefiniskan area dimana pengguna dapat meng-klik tombol.

Dari lingkaran hitam di tengah, Anda dapat kenali bahwa baru frame “Up” saja yang menjadi

keyframe. Untuk mendefinisikan setiap kondisi, Anda harus mengubah frame menjadi keyframe.

Pilih frame “over” lalu tekan F6, dilanjutkan frame “down”, tekan F6 dan juga frame “hit”.

Cara alternatif yang lebih cepat adalah pilih frame tersebut dengan mouse sambil menekan ctrl.

Setelah semua terpilih, tekan F6.

Sekarang pilih frame “Over”, ganti warna tombol kita dengan warna lain, dilanjutkan dengan

frame “Down”. Pastikan ketiga warna tombol untuk frame Up, Over, Down berbeda. Frame “Hit”

akan kita tangani nanti.

Untuk melihat hasilnya, pilih menu Control Test Movie atau ctrl-Enter.

Coba arahkan mouse ke tombol, perhatikan perubahan warnanya sesuai kondisi normal, mouse

berada di atas tombol, dan tombol ditekan.

Untuk keluar dari Test Movie, pilih menu File Close atau Ctrl-W.

3. Frame “Hit”

Sekarang kita akan mengisi kondisi pada frame “Hit”. Pilih frame “Hit” dan pilih Rectangle Tool.

Buat gambar kotak di atas tombol. Jangan khawatir jika hal itu menutupi semua tombol.



Coba lakukan lagi Test Movie, lihat bahwa kotak akan hilang. Saat mouse mendekati button,

sebelum mencapai lingkaran, kondisi button sudah berubah. Inilah fungsi dari frame “Hit”, yaitu

untuk mendefinsikan area sensitif suatu tombol. Frame ini bermanfaat jika kita akan membuat

tombol dari teks.

D. Simbol Tombol dari Teks

Kita dapat membuat tombol dari teks. Prosesnya mirip dengan simbol tombol gambar dengan

beberapa perbedaan. Berikut langkah-langkahnya:

1. Mengubah Teks Menjadi Simbol

Jangan lupa kembalikan stage ke scene 1! Kemudian, tambahkan teks “Klik Saya”. Pastikan pada

panel properties, tipe teks adalah “Static Text”

Klik arrow tool lalu pilihlah teks tersebut (sampai teks dikelilingi kotak biru), lalu pilih Insert >

Convert To Symbol. Beri nama simbol “Simbol KlikSaya”.

2. Inisialisasi Tombol

Double klik tombol teks, Anda akan masuk ke mode edit simbol. Buatlah keyframe untuk frame

“over”, “down”, “hit” dan isi setiap frame (kecuali frame “hit”) dengan kondisi teks yang berlainan

(bisa berupa warna,ukuran, jenis atau kombinasinya). Silahkan coba dengan Test Movie (ctrl-

enter). Anda pasti kesulitan untuk meng-klik tombol ini, karena area sensitifnya mengikuti lekuk-

lekuk huruf. Inilah peranan dari fame “Hit”.

Untuk menghilangkan masalah ini, tambahkan keyframe pada frame “Hit”. Pilih rectangle tool

dengan warna bebas, karena yang digunakan oleh Flash adalah areanya.



Hasilnya akan tampak seperti berikut:

Silahkan jalankan “Test Movie” sekali lagi, maka area sensitif button akan mengikuti kotak merah

yang kita buat pada frame “Hit”. Simpanlah file ini.

E. Membuat Simbol Movie Clip

Movie Clip adalah simbol ketiga dan terakhir. Jenis simbol ini memiliki peranan penting pada film

Flash. Movie Clip adalah “film di dalam film”. Movie clip dapat mengandung multi layer, animasi,

suara, gambar dan sebagainya.

Salah satu contoh movie clip yang sering digunakan adalah clip yang menggambarkan logo dan

suara latar. Selama film berlangsung, logo secara berulang akan hilang dan muncul, dan suara latar

akan selalu terdengar.

Langkah-langkah pembuatan simbol movie clip adalah sebagai berikut:

1. Mengubah Kotak Menjadi Simbol

Karena dokumen flash yang ada sekarang sudah cukup penuh, close file sebelumnya (jangan lupa

save lebih dulu) dan buat file baru. Pada stage utama buatlah kotak dengan rectangle tools

(warna bebas), dan jadikan sebagai simbol (pilih dan tekan F8). Pastikan tipenya adalah movie clip

dan berikan nama “Square Clip”.



2. Membuat Animasi Kotak

Double klik kotak untuk masuk ke mode edit simbol. Perhatikan panel timeline, timeline pada

simbol bekerja sama persis dengan timeline stage utama. Perbedaanya adalah segala aksi yang

ada pada timeline ini hanya bersifat lokal, yaitu hanya berlaku terhadap movie clip ini.

Sekarang kita akan mulai membuat animasi. Klik frame 20 dan jadikan keyframe (F6). Selanjutnya

pilih arrow tool, lalu pilih bagian luar untuk melengkungkan kotak.

Lengkungkan sesuai dengan keinginan Anda.

Jadikan animasi seperti pada tutorial pertama. Pilih satu frame di antara 1 dan 20, dan pada panel

properties isi tween dengan shape.



Tekan enter untuk mengetes animasi.



3. Memasukkan Movie Clip ke dalam Film

Sekarang kembali ke Scene 1. Coba buka window library (F11)

Perhatikan pada bagian preview di bagian atas (ditunjukkan oleh panah) terdapat tombol play.

Silahkan coba fasilitas ini.

Lanjutkan dengan men-drag simbol “Square Clip” ke stage utama. Buat tiga instance dari clips ini.

Lalu coba dengan Control Movie Test atau (Ctrl-Enter )

Perhatikan timeline pada stage utama, sama sekali tidak terlihat keyframe tambahan dan tween.

Coba tekan Enter, tidak akan terjadi apa-apa. Ini disebabkan karena timeline film utama tidak

terpengaruh oleh timeline simbol.

Berikutnya (masih pada stage utama), pilihlah frame 10 dan jadikan keyframe. Tambahkan

instance movie clip ini. Coba jalan Movie Test, maka instance ini akan muncul pada frame ke-10

lalu hilang sebelum beranimasi. Mengapa? Karena instance ini hanya muncul di satu frame (frame

10). Sekarang tambahkan keyframe di frame 30. Lihat hasilnya dengan Movie Test. Terlihat bahwa

tiga instance pertama beranimasi, lalu pada frame ke 20 sampai dengan 30 instance ke-4 ikut

beranimasi. Hal ini menunjukkan bahwa walaupun simbol memiliki time-line yang independen



dengan time-line utama, simbol menggunakan frame-rate yang sama dengan time-line utama.

Simpan file ini.

4. Membagi (Sharing) Simbol antar File

Simbol yang sudah kita buat dapat digunakan pada file flash yang lain. Berikut langkah-langkahnya:

1) Buat file baru.

2) Tekan F11, lihat bahwa library masih kosong.

3) Pilih menu File Open as Library

4) Pilihlah file yang mengandung simbol yang sudah pernah kita buat sebelumnya.

Jika keluar pesan seperti ini:

Artinya file tersebut masih terbuka. Untuk mengatasinya, pilih menu Window dan pilih file

ini.

Lalu close file ini dengan File Close atau Ctrl-W atau mengklik icon “X” di bagian bawah.

Ulangi lagi langkah 4.

5) Lihat window library (F11), simbol pada file tersebut telah masuk dan dapat digunakan seperti

biasa.



Flash menyediakan library standar yang dapat digunakan. Pilih Menu Common Libraries

5. Mengimpor Gambar bitmap ke dalam Simbol

Sebelum mengimpor gambar bitmap, perlu diperhatikan bahwa gambar bitmap akan

memperbesar ukuran film Flash. Jika Anda meletakkan film berukuran besar di sebuah situs, waktu

download akan menjadi lama dan pengunjung situs bisa “lari”. Sangat dianjurkan untuk membuat

semua gambar, bahkan logo dengan fasilitas menggambar yang disediakan Flash. Gambar yang

dibuat di dalam Flash akan tersimpan dalam format vektor sehingga ukurannya lebih kecil dan

Flash dapat mengolahnya dengan lebih optimal.

Gunakanlah gambar bitmap dalam kondisi berikut ini:

Anda membutuhkan foto.

Anda membutuhkan screen-shot (misalnya Anda membuat tutorial MS-Word dengan

Flash, tentu saja Anda akan memerlukan beberapa screen-shot MS-Word)

Berikut langkah-langkahnya:

1) Plih menu File Import.

2) Pilih file yang dikehendaki (biasanya ada beberapa gambar di c:\windows), Flash akan

meletakkannya di Window Library (munculkan dengan tombol F11). Anda dapat

menggunakannya seperti pada simbol (dengan mendrag ke stage)

simbol dan libraries empat frame pada simbol tombol yaitu up,over, down dan hit. up menggambarkan...

Documents