simbol dan libraries empat frame pada simbol tombol yaitu up,over, down dan hit. up menggambarkan...
TRANSCRIPT
Rini Marwati – Yudi Wibisono Page 1
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.
Rini Marwati – Yudi Wibisono Page 2
Matematika UPI – Dok Versi 2013
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.
Rini Marwati – Yudi Wibisono Page 3
Matematika UPI – Dok Versi 2013
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.
Rini Marwati – Yudi Wibisono Page 4
Matematika UPI – Dok Versi 2013
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.
Rini Marwati – Yudi Wibisono Page 5
Matematika UPI – Dok Versi 2013
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.
Rini Marwati – Yudi Wibisono Page 6
Matematika UPI – Dok Versi 2013
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,
Rini Marwati – Yudi Wibisono Page 7
Matematika UPI – Dok Versi 2013
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.
Rini Marwati – Yudi Wibisono Page 8
Matematika UPI – Dok Versi 2013
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.
Rini Marwati – Yudi Wibisono Page 9
Matematika UPI – Dok Versi 2013
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”.
Rini Marwati – Yudi Wibisono Page 10
Matematika UPI – Dok Versi 2013
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.
Rini Marwati – Yudi Wibisono Page 11
Matematika UPI – Dok Versi 2013
Tekan enter untuk mengetes animasi.
Rini Marwati – Yudi Wibisono Page 12
Matematika UPI – Dok Versi 2013
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
Rini Marwati – Yudi Wibisono Page 13
Matematika UPI – Dok Versi 2013
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.
Rini Marwati – Yudi Wibisono Page 14
Matematika UPI – Dok Versi 2013
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)
Rini Marwati – Yudi Wibisono Page 15
Matematika UPI – Dok Versi 2013