Description 94. Pake Flash Bikin Animasi Teks Paling Keren Read the Text Version No Text Content! Enter. Gambar tampilan animasi teks Squeeze atau tekanan 78 Bab 3 EFEK BOUNCE Secara terminologi, bounce berarti pantulan. Dari arti kata tersebut Anda tentunya sudah bisa membayangkan seperti apa animasi teks dengan efek bounce ini. Dalam bab ini, Anda akan berlatih menciptakan animasi teks yang kemunculannya seolah-olah jatuh dari bawah kemudian memantul sehingga tampak teks secara keseluruhan. Seperti halnya dengan efek-efek sebelumnya, pada efek inipun Anda juga harus melalui “perjalanan” yang cukup panjang untuk menghasilkan animasi teks yang diinginkan. Selama “perjalanan” Anda tersebut, Anda harus tetap cermat agar tidak ada satu langkahpun terlewatkan karena jika demikian maka Anda akan mengalami kegagalan. 79 Pengaturan Stage Baiklah, langsung saja Anda mulai latihan dengan terlebih dahulu melakukan pengaturan stage dengan langkah-langkah berikut ini 1. Klik Flash File ActionScript setelah Anda meluncurkan program Adobe Flash CS3 Professional. 2. Munculkan kotak dialog Document Properties melalui menu Modify lalu lakukanlah pengaturan Dimensions 400 600, Background color hijau, dan Frame rate 30 fps, sesudahnya tekan tombol OK. Gambar pengaturan pada kotak dialog document Properties 3. Muncul dokumen baru dengan warna hijau, langsung ubah tampilan stage menjadi Fit in Window. Gambar mengubah tampilan Stage menjadi fit in Window 80 4. Posisikan kursor mouse pada garis di antara Timeline dan stage sehingga berubah bentuk menjadi lalu klik dan drag ke atas untuk memperlebar stage. Gambar tampilan Stage yang tampak semakin lebar Membuat Background untuk Animasi Teks Proses selanjutnya setelah Anda melakukan pengaturan stage adalah membuat background untuk animasi. Dengan background ini, animasi teks yang dihasilkan nantinya tidak tampak polos, sehingga tampak lebih menarik. Adapun langkah-langkah pembuatannya sebagai berikut 1. Klik frame 1 Layer 1. 2. Kemudian tekan ikon Rectangle Tool yang terdapat di dalam Toolbox. 81 3. Mulailah membuat bidang persegi pada stage kemudian seleksilah menggunakan Selection Tool . Gambar bidang persegi dalam Stage yang diseleksi dengan Selection Tool 4. Beralih ke panel Properties dan masukkan angka pada W 350 dan H 600, sesudahnya tekanlah tombol Enter. Gambar memasukkan angka W dan H di Panel Properties 82 5. Lanjutkan langkah dengan mengklik ikon Align/Distribute to stage , Align vertical center , dan Align horizontal center pada panel Align untuk memposisikan bidang persegi di tengah stage. Gambar mengklik ikon align/distribute to Stage, align vertical center dan align horizontal center Gambar bidang persegi berada di tengah Stage 83 6. Klik frame 50 kemudian tekan tombol F5 dan lanjutkan dengan mengklik ganda Layer 1 dan ketiklah background lalu tekan tombol Enter. Gambar mengklik Frame 50 dan mengubah nama Layer 1 menjadi background Membuat Objek Teks di Stage Untuk sampai pada proses ini, terlebih dahulu Anda harus membuat objek teks yang nantinya akan diberi sentuhan animasi. Teknik membuat objek teks ini sangat sederhana dan tidak membutuhkan langkah yang panjang. Langsung saja Anda terapkan langkah- langkah berikut 1. Buatlah layer baru dengan mengklik ikon Insert Layer kemudian aktifkan frame 1 layer baru tersebut. Gambar membuat Layer baru dan mengaktifkan Frame 1 84 2. Selanjutnya dari Toolbox, klik ikon Text Tool . 3. Pada panel Properties aturlah Font Bauhaus Hv BT, Size 90, dan Color kuning. Gambar mengatur font dan atributnya 4. Kemudian, ketiklah bounce pada stage lalu klik ikon Selection Tool pada Toolbox. Gambar tampilan objek teks setelah mengklik selection Tool 85 5. Aturlah posisi objek teks agar berada di tengah stage dengan mengklik ikon Align vertical center dan Align horizontal center yang ada di panel Align. Gambar objek teks setelah diatur posisinya 6. Selanjutnya masukkan angka pada koordinat Y 375 lalu tekan tombol Enter untuk mengaplikasikannya. Gambar mengubah angka pada koordinat Y 86 Gambar perubahan posisi objek teks setelah angka koordinat Y diubah Proses Pembuatan Animasi Teks Akhirnya sampai juga pada proses inti dari pembuatan animasi teks dengan efek memantul. Proses pembuatan animasi teks ini dibedakan menjadi dua, yaitu mengedit setiap huruf teks dan membuat objek bidang persegi yang mengiringi animasi teks. Pengeditan setiap huruf teks dimaksudkan sebagai proses pemberian sentuhan efek animasi pada teks. Berikut langkah-langkahnya 87 1. Pilih menu Modify > Break Apart untuk memisahkan setiap huruf pada objek teks. Gambar setiap huruf objek teks berada pada kotak yang terpisah 2. Klik kanan objek teks kemudian pilih opsi Distribute to Layers. Gambar mengklik kanan objek teks dan memilih distribute to Layers 88 Gambar tampilan Timeline setelah memilih opsi distribute to Layers 3. Sekarang klik kanan keyframe 1 Layer B lalu pilih opsi Create Motion Tween dan lanjutkan dengan membuat keyframe pada frame 10 dan 15 melalui teknik menekan tombol F6. Gambar membuat Motion Tween pada Frame 1 dan membuat Keyframe pada Frame 10 dan 15 4. Aktifkan keyframe 1 kemudian ke panel Align untuk mengklik ikon Align top edge dan Align horizontal center sehingga objek huruf B berubah posisinya menjadi di tengah atas seperti ilustrasi berikut. Gambar posisi objek huruf B berubah menjadi di tengah atas 89 5. Beralih ke panel Transform, klik tombol radio Skew lalu masukkan angka 180 pada kotak Skew Vertically, sesudahnya tekan tombol Enter. Gambar mengaktifkan opsi skew dan memasukkan angka pada kotak skew vertically 6. Di dalam panel Properties, aturlah Ease -100 kemudian klikkan tombol kiri mouse pada objek huruf B di stage. Gambar mengatur Ease menjadi -100 7. Arahkan kursor mouse ke stage lalu klik objek huruf B. 90 8. Kembali ke panel Properties dan pilihlah Color Alpha kemudian masukkan angka 10 pada kotak paling kanan panel tersebut, kalau sudah tekan tombol Enter. Dengan begitu, objek huruf B menghilang dari stage untuk sementara. Gambar tampilan teks dalam Stage tanpa huruf B 9. Selanjutnya klik keyframe pada frame 10. 10. Pergilah ke panel Transform kemudian isi kotak bagian kanan dengan angka 50 lantas tekan tombol Enter untuk mengaplikasikan ukuran objek huruf B yang lebih kecil. Gambar mengisikan angka 50 pada kotak Transform sebelah kanan 91 Gambar ukuran objek huruf B yang lebih kecil dibandingkan dengan objek huruf lainnya 11. Pada panel Align, tekanlah ikon Align bottom edge dan Align horizontal center sehingga objek huruf B berubah posisinya di tengah bawah. Gambar posisi objek huruf B berada di tengah bawah 12. Kali ini aturlah Ease 100 dan Rotate CW di panel Properties, sesudahnya klik objek huruf B dalam stage. Gambar mengatur Ease dan Rotate di dalam panel Properties 92 13. Masih dari panel Properties, pilih Color Tint lalu sorot kotak warna yang ada di samping kanannya dan pilih merah. Dengan demikian, objek huruf B dalam stage akan berubah warnanya menjadi merah. Gambar memilih opsi tint dan warna merah Gambar perubahan warna pada objek huruf B yang menjadi merah 14. Langkah berikutnya adalah mengaktifkan keyframe pada frame 1 Layer O kemudian drag ke frame 6. 93 15. Buatlah Motion Tween di frame 6 dilanjutkan dengan membuat keyframe pada frame 15 dan 20. Gambar membuat motion Tween di Frame 6 dan keyframe di Frame 15 dan 20 16. Posisikan objek huruf O agar berada di atas tengah dengan cara yang sama ketika Anda memposisikan objek huruf B. 17. Kalau sudah, lakukan pengaturan pada panel Transform dan Properties dengan cara yang sama ketika Anda melakukan pengaturan pada objek huruf B sampai menghilang sementara dari stage. Jika langkah Anda benar, maka objek huruf O juga akan menghilang dari stage untuk sementara waktu. Gambar objek huruf O yang tidak tampak pada Stage 94 18. Masih pada layer yang sama, klik keyframe di frame 15. 19. Kemudian buatlah objek huruf O berukuran lebih kecil daripada huruf lainnya dan berada di tengah bawah serta berwarna merah dengan cara yang sama seperti pada objek huruf B. Gambar pengaturan objek huruf O pada Frame 15 20. Sekarang giliran objek huruf U yang harus Anda buat animasinya. Pastikan Anda telah mengaktifkan keyframe di frame ini pada Layer U. 21. Jika sudah, klik dan drag sampai ke frame 11 kemudian buatlah Motion Tween di frame tersebut terus dilanjutkan dengan memunculkan keyframe pada frame 20 dan 25. Gambar membuat motion Tween di Frame 11 dan Keyframe di Frame 20 dan 25 95 22. Posisikanlah objek huruf U di tengah atas dan dilanjutkan dengan pengaturan panel Transform dan Properties sama ketika Anda mengatur objek huruf sebelumnya. Jika langkah Anda tepat, maka objek huruf U akan menghilang atau tidak tampak keberadaannya di dalam stage. Gambar objek huruf U yang tidak tampak setelah pengaturan Panel Transform dan Properties 23. Lanjutkan langkah dengan menekan keyframe di frame 20. 24. Ubah ukuran objek huruf U menjadi lebih kecil melalui pengaturan di panel Transform, lalu posisikan objek ke tengah bawah kemudian ubah warnanya menjadi merah. Adapun caranya sama dengan yang Anda gunakan untuk mengatur objek 96 huruf sebelumnya. Langkah ini akan menghasilkan tampilan seperti ilustrasi berikut. Gambar objek huruf U dengan ukuran lebih kecil dan warna merah yang berada pada posisi di bagian tengah bawah 25. Berikutnya adalah objek huruf N yang harus Anda beri efek. Sama dengan yang lain pastikan dulu bahwa Anda telah mengaktifkan keyframe di frame 1 layer yang mempresentasikan objek tersebut. 26. Klik dan drag keyframe di frame 1 itu sampai ke frame 16 kemudian buatlah Motion Tween pada frame tersebut dilanjutkan dengan membuat keyframe di frame 25 dan 30. Gambar membuat motion Tween di Frame 16 dan Keyframe di Frame 25 dan 30 97 27. Lakukan pengaturan yang sama pada panel Align, Transform, dan Properties untuk memposisikan objek huruf N ke tengah atas hingga tidak tampak pada stage seperti ketika Anda melakukannya pada objek huruf sebelumnya. Gambar objek huruf N yang tidak tampak dalam Stage 28. Selanjutnya aktifkan keyframe pada frame 25. 98 29. Jika sudah, melalui cara yang sama dengan objek huruf sebelumnya, perkecil ukuran objek huruf N kemudian posisikan ke tengah bawah dan ubah warnanya menjadi merah. Perubahan yang terjadi pada stage akan tampak seperti ilustrasi berikut. Gambar tampilan objek huruf N setelah pengaturan Panel Transform, Align, dan Properties 30. Sekarang buatlah animasi untuk objek huruf C dengan terlebih dahulu mengklik keyframe pada frame 1 Layer C. 31. Sesudah itu, drag ke frame 21 lalu buatlah Motion Tween di frame ini kemudian dilanjutkan dengan menekan tombol F6 setelah mengklik frame 30 dan 35. Gambar membuat Motion Tween di Frame 21 dan Keyframe di Frame 30 dan 35 32. Untuk membuat animasi pertama pada objek huruf C, klik keyframe 21. 99

animasi text keren dengan flash