BAB VIII MACROMEDIA FLASH (4) SHAPE TWEENING
Pada tutorial ini dibahas secara lebih detil mengenai shape tweening, perbedaanya dengan motion tweening, teks ke teks tweening, shape tweening modifier dan terakhir mengatur animasi dengan shape hint. Shape Tweening adalah proses perubahan secara perlahan-lahan suatu bentuk menjadi bentuk yang lain baik diam maupun bergerak.
Pada tutorial pertama kita sudah menggunakan shape tweening sederhana. Pada tutorial kali ini akan kita akan mempelajari lebih mendalam mengenai shape tweening.
Perbedaan utama antara shape tweening dan motion tweening adalah shape tweening hanya bisa diterapkan pada objek berjenis shape dan tidak bisa dilakukan kepada group atau simbol. Ini dikarenakan Flash membutuhkan akses ke elemen-elemen paling dasar dari sebuah shape untuk melakukan shape tweening. Untuk meyakinkan agar objek dapat di-shape tweening, gunakan menu Modify Break Apart yang akan memecah objek ke elemen dasarnya (bisa dilakukan terhadap group atau simbol).
Shape tweening juga dapat menangani objek yang bergerak, ingat animasi jamur tumbuh? Waktu itu kita menggunakan shape tweening dan bagian kepala jamur bergerak dari bawah ke atas. Lalu bagaimana cara menentukan kapan harus menggunakan shape tweening dan kapan menggunakan motion tweening? Prinsipnya, jika tidak ada perubahan bentuk gunakanlah motion tweening. Alasannya adalah walaupun shape tweening bisa menangani pergerakan objek, shape tweening membutuhkan proses yang lebih rumit sehingga dapat memperlambat animasi.
Mari kita mencoba membuat beberapa animasi yang menarik menggunakan shape tweening.
8 Shape Tweening
74
K. Teks ke Teks Tweening Anda akan membuat animasi yang menampilkan suatu teks yang berubah menjadi teks yang lain secara perlahan-lahan. Berikut langkah-langkahnya 1. Buat file baru, pada posisi frame ke-1 dengan teks tool buatlah sebuah teks yang cukup besar “Selamat Datang!” 2. Buat kata yang kedua. Tambahkan keyframe pada frame 30. Pada frame tersebut, pilih teks (dengan double klik), hapus dan ganti isinya dengan “Sampai Jumpa Lagi!” 3. Telah dibahas sebelumnya bahwa shape tweening membutuhkan akses ke elemen paling dasar dari sebuah shape. Oleh karena itu, kita harus memecah teks kita menjadi huruf, kemudian pecahkan lagi menjadi kumpulan garis. Lakukan dengan memilih teks, lalu tekan Ctrl-B (atau melalui menu Modify Break Apart). Terlihat bahwa teks terpecah menjadi huruf-huruf, ini belum merupakan elemen dasar, lakukan lagi Ctrl-B sehingga setiap huruf menjadi elemen dasar
4. Lakukan hal yang sama untuk teks pada Frame 1 . Ingat bahwa pemecahan harus dilakukan dua kali. 5. Tambahkan shape tweening dengan memilih frame diantara frame 1 sd 30, ubah tween menjadi shape. Cobalah dengan menekan enter.
Walaupun tampak menarik, animasi ini memiliki kelemahan. Orang tidak akan sempat membaca tulisan karena langsung beranimasi (coba dengan test movie, Ctrl-Enter) . Untuk mengatasinya, kita harus menambahkan jeda di awal dan di akhir animasi. 6. Tambahkan jeda di awal dengan menggeser frame 1-30 menjadi 11 – 40. Caranya dengan memilih frame 1 (gambar bawah)
8 Shape Tweening
75
lalu drag sampai dengan frame 30. Frame 1-30 akan terpilih dan warnanya akan berubah menjadi hitam. Mirip seperti saat kita memilih sekelompok kata di MS Word.
Selanjutnya pilih frame 30 dan drag frame ini ke frame 40 (lihat gambar bawah)
Kondisi akhir akan seperti ini (frame 1 sd 10 kosong)
Jika kita coba dengan Enter, akan terjadi blank pada frame 1-10. Padahal yang kita inginkan muncul adalah teks “Selamat Datang” dari frame 1 sd 10 dan kemudian pada frame 11 baru teks tersebut beranimasi. Untuk melakukan hal itu, kita akan copy gambar pada frame 11 ke frame 1. Pilihlah frame 11, copy dengan Ctrl-C atau menu Edit Copy kemudian pilih frame 1 dan pilih menu Edit Paste In Place (Ctrl-Shift-C) sehingga posisinya akan sama persis dengan frame 11. Jangan gunakan paste biasa karena tulisan akan di paste di tengah-tengah layar. Coba animasi ini. 7. Tambahkan jeda di akhir. Ini lebih mudah dilakukan. Tambahkan keyframe pada frame 50. Sekarang lihat animasinya sekali lagi, lebih terbaca bukan?
8 Shape Tweening
76
L. Shape Tweening Modifier Ada beberapa fasilitas untuk memodifikasi shape tweening. Fasilitas tersebut adalah Easing dan Blend. Pada shape tweens, easing sama dengan motion tween. Fasilitas ini mengontrol Flash untuk mempercepat dan memperlambat aksi pada awal dan akhir animasi. Sedangkan blend mengontrol “ketajaman” garis. Nilainya di-set pada panel frame property.
Jika option blend tidak muncul pada frame property, ada kemungkinan option ini sedang disembunyikan. Klik segitiga di bagian bawah kanan.
Blend distributive akan membuat animasi yang pada setiap framenya, objek digambar secara halus dan tanpa sudut. Sedangkan blend angular akan mempertahankan sudut dan garis lurus. Shape Hints Shape hints digunakan pada shape tween untuk mengontrol secara manual proses perubahan bentuk. Jika Anda menggunakan shape tween, Flash akan mencari “rute” perubahan yang paling mudah. Hal ini seringkali menghasilkan efek animasi yang diluar keinginan kita. Gunakan shape hints untuk mengatur arah perubahan sesuai dengan keinginan kita.
Cara kerja shape hints adalah dengan menambahkan sejumlah titik pada gambar dan memberi tahu Flash kemana titik ini harus bergerak
Kelemahan dari shape hints adalah animasi menjadi lebih memakan sumber daya komputer. Akibatnya animasi dapat berjalan lambat di komputer yang tidak mempunyai spesifikasi yang cukup baik.
8 Shape Tweening
77
Penasaran? Mari kita coba fasilitas ini. Pada contoh berikut Anda akan membuat shape tween segiempat menjadi segitiga. Anda akan menambahkan beberapa shape point untuk mengatur perubahan tersebut.
Berikut langkah-langkahnya: 1.
Buat file baru dan buatlah animasi shape tween dari kotak menjadi segitiga. Tambahkan segitiga di frame 20. (lihat tutorial sebelumnya untuk contoh pembuatan shape tween). Untuk membuat segitiga, pilih ujung kotak dan drag ke tengah. Tambahkan shape tween diantara frame 1 sd 20.
2.
Cobalah film, perhatikan bahwa animasi yang terjadi kurang natural. Kita akan memperbaik hal ini. Pilih frame 1, deselect dengan mengklik stage. Sekarang tambahkan shape hint dengan menu Modify Shape Add Shape Hint (Ctrl-Shift-H). Akan muncul titik kecil dengan huruf “a”. Geser titik tersebut ke sudut kiri atas.
Tambahkan lagi shape hint (Ctrl-Shift-H). Geser ke bagian kanan atas
Catatan: Jumlah shape hint dalam suatu tween maksimal 26 titik. Shape hint dianjurkan untuk diletakkan berurutan mulai dari sudut kiri atas dan selanjutnya berlawanan dengan jarum jam.
8 Shape Tweening
78
3.
Sekarang kita lihat frame 20, jika terlihat hanya satu shape hint, hal itu karena keduanya bertumpukkan. Geser shape hint a dan b ke bagian bawah (lihat gambar berikut)
Silahkan coba animasi. Terlihat lebih baik, cobalah dengan meletakkan shape hint diberbagai posisi untuk melihat efeknya.
8 Shape Tweening
79
