SIMBOL DAN LIBRARIES

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 1

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 2

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 3

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 4

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 5

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 6

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 7

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 (ctrlenter). Anda pasti kesulitan untuk meng-klik tombol ini, karena area sensitifnya mengikuti lekuklekuk 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 8

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 9

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 10

Tekan enter untuk mengetes animasi. Rini Marwati Yudi Wibisono Page 11

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 12

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 13

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 14

Rini Marwati Yudi Wibisono Page 15