Classic Tweening Materi yang dipelajari pada bagian ini adalah: Pembuatan animasi bergerak. Membuat group dan un-group. Efek tambahan saat animasi: rotasi, easing, motion effect (efek muncul dan menghilang), motion guide (animasi bergerak yang mengikuti suatu jalur tertentu) Pada tutorial pertama (animasi Jamur) Anda telah mempelajari bagaimana membuat animasi sederhana. Prinsip animasi pada Flash adalah menambahkan tween di antara dua frame penting (keyframe). Ada dua jenis tween: shape tween dan classic tween. Di tutorial pertama yang kita gunakan adalah shape tween. Pada tutorial ketiga ini, giliran Classic Tween yang akan kita coba. Classic tween hanya dapat dilakukan terhadap simbol atau group. Oleh karena itu sebelum masuk ke materi Classic tween kita akan bahas terlebih dulu mengenai group (materi simbol sudah dibahas di tutorial kedua) Group dan Ungroup Group pada prinsipnya adalah mengelompokkan beberapa objek menjadi satu kesatuan. Contohnya adalah jamur yang kita buat pada tutorial pertama. Jamur tersebut memiliki dua bagian, lingkaran bawah dan lingkaran atas. Tanpa group, jika kita ingin memindahkan jamur tersebut ke suatu posisi, yang harus kita lakukan adalah memindahkan satu persatu bagian jamur. Bagaimana jika kita ingin memutarnya? Itu juga harus dilakukan satu persatu. Bagaimana jika jamur kita terdiri atas 5 bagian? Akan semakin banyak waktu yang harus dikeluarkan. Dengan group, hal tersebut dapat dilakukan dengan lebih mudah. Melakukan grouping objek sangat mudah, berikut langkah-langkahnya: 1) Buat file baru 2) Buat beberapa objek, misalnya lingkaran dan segiempat seperti gambar di bawah. Rini Marwati – Yudi Wibisono Matematika UPI – Dok Versi 2013
Page 1
3)
Objek lingkaran (1 buah), segiempat (3 buah) pada gambar diatas masih terpisah-pisah. Untuk meng-groupnya, pilih semua gambar yang akan di-group dengan cara memilih arrow tool, lalu drag membentuk wilayah segiempat disekitar gambar sehingga keempat objek tersebut masuk.
4)
Objek yang terpilih akan berubah warnya (bintik-bintik putih). Pililh menu Modify Group (Ctrl-G). Terlihat kotak berwarna biru di sekitar gambar. Sekarang gambar sudah di-group. Silahkan drag untuk memindahkannya. Cobalah fasilitas lain (klik kanan Scale, Rotate, Free Transform).
5)
Misalkan kita ingin memperbesar bagian kepala. Bagaimana caranya? Kita tidak bisa men-select kepala orang ini! Salah satu cara adalah dengan meng-ungroup-nya terlebih dulu. Pilih gambar, lalu pilih menu Modify Ungroup (Ctrl-Shift-G). Anda sekarang bisa men-select bagian kepala. Double klik kepala, lalu klik kanan untuk memilih menu scale. Perbesar sedikit, atur posisinya agar di tengah dan selesai. Untuk memasukkan kepala dalam group lagi, lalukan kembali langkah 4.
Rini Marwati – Yudi Wibisono Matematika UPI – Dok Versi 2013
Page 2
6)
Jika kita sering mengubah-ubah elemen dari suatu grup, langkah 5 pasti terasa kurang praktis. Alternatif lain yang lebih mudah adalah dengan masuk ke dalam mode edit group. Mirip seperti mode edit simbol, caranya dengan men-double klik gambar yang sudah di-group. Saat masuk ke mode edit group, bagian atas stage akan berubah menjadi berikut:
Klik stage untuk men-deselect. Lalu perbesar kepala seperti pada langkah 5 (select,scale). Setelah selesai, klik scene 1 untuk kembali ke stage utama. Gambar orang yang kita buat masih dalam keadaan ter-group, jauh lebih mudah bukan? Menambahkan Classic tweening Perlu diingatkan lagi bahwa classic tween hanya dapat dilakukan pada simbol atau objek yang telah digroup. Bahkan untuk bentuk sederhana seperti rectangle atau lingkaran, tetap harus di-group atau dijadikan simbol terlebih dulu. Sekarang kita coba menganimasikan gambar orang yang telah kita buat dari kiri ke kanan. Langkah-langkahnya sebagai berikut: 1) Pindahkan gambar orang ke bagian paling kiri. 2) Pilih frame 20, lalu jadikan keyframe dengan F6. 3) Geser gambar orang ke bagian paling kanan. 4) Pilih frame diantara frame 1 dan 20 (misalnya frame 15). Pada panel properties, pilih tween dengan Motion.
Coba animasi dengan menekan Enter. Gambar orang akan bergerak dari kiri ke kanan.
Rini Marwati – Yudi Wibisono Matematika UPI – Dok Versi 2013
Page 3
Anda juga dapat mengubah ukuran gambar, sehingga saat gambar bergerak ukurannnya juga berubah. Langkahnya adalah sebagai berikut: Pastikan kotak scale di-check (lihat gambar sebelumnya); Pilih frame 20, ubah ukuran objek menjadi lebih besar (dengan scale) Lihat hasilnya dengan menekan enter. Menambahkan Rotasi
Untuk menambahkan rotasi saat objek bergerak, pilih frame satu. Lihat frame properties
Isi rotate dengan CW (clock wise = searah dengan jarum jam), lalu isi kotak sebelahnya dengan 1 yang berarti objek akan berputar sekali sebelum mencapai tujuan, semakin besar nilai ini semakin banyak objek berputar. Tekan enter untuk melihat hasilnya. Nah, silahkan bermain-main dengan rotate dan jumlah perputaran. Easing
Easing adalah proses mengatur akselerasi animasi dan kebalikannya. Anda dapat mengatur apakah animasi dimulai pelan kemudian akan semakin cepat (easing in) atau mulai cepat dan melambat (easing out). Dengan easing, animasi akan tampak lebih hidup. Contohnya adalah animasi benda jatuh, animasi ini harus menggunakan easing in karena semakin lama akan semakin cepat, sedangkan benda yang dilemparkan ke atas sebaliknya, semakin lama akan semakin lambat (easing out).
Rini Marwati – Yudi Wibisono Matematika UPI – Dok Versi 2013
Page 4
Efek easing dilakukan dengan mengisi nilainya pada frame properites. Nilai 0 berarti kecepatan animasi konstan. Nilai lebih besar dari 0 adalah easing out dan sebaliknya adalah easing in. Sekarang kita coba efek ini dengan membuat sebuah animasi bola memantul. Animasi ini melibatkan dua bola, salah satu dengan easing dan yang lainnya animasi gerak biasa. Setiap bola diletakkan pada sebuah layer, sehingga terdapat dua layer. Harap diingat bahwa animasi classic tweening tidak bisa dilakukan pada dua objek yang terletak pada satu layer, sehingga kita harus meletakkan setiap bola pada layer yang terpisah. Berikut adalah langkah-langkahnya: 1) Buat file baru 2) Tambahkan lingkaran, jadikan sebagai simbol. Caranya dengan menselect seluruh lingkaran, klik kanan dan pilih menu “Convert to Symbol”
Beri nama “bola” dengan behavior sebagai graphic. 3) Tambahkan keyframe pada frame 15 dan 30. Frame 1 sd 15 merupakan bagian saat bola turun, sedangkan frame 15 sd 30 bagian saat bola naik.
4) Sekarang kita akan membuat animasi saat bola jatuh ke bawah. Pilih frame 15 lalu Pindahkan bola ke bagian bawah stage (tip: lebih mudah dilakukan sambil menekan tombol Shift saat memindahkan bola). Tambahkan classic tween antara frame 1 dan 15. Coba animasi dengan menekan enter.
Rini Marwati – Yudi Wibisono Matematika UPI – Dok Versi 2013
Page 5
5) Kemudian buat animasi saat bola memantul ke atas. Pilih frame 30, karena posisi bola sudah diatas, kita tinggal menambahkan classic tween antara frame 15 dan 30. Timeline akan terlihat seperti berikut:
Cobalah animasi dengan menekan enter, terlihat bola jatuh kebawah dan memantul lagi keatas. Sekarang saatnya kita membuat bola kedua. 6) Tambahkan layer baru (ingat materi layer yang ada di tutorial jamur tumbuh). Beri nama layer pertama dengan bola1 dan layer kedua dengan bola2 7) Pilih frame 1, tambahkan simbol bola di sebelah bola pertama, dan buat animasi seperti langkah 1-5, sehingga stage dan time line akan menjadi:
Coba tekan enter, kedua bola itu akan turun dan naik secara bersamaan. 8) Sekarang saatnya menambahkan easing saat bola jatuh, pilih frame diantar 1 dan 15 (pastikan pada layer bola2), ubah isi ease menjadi -100 (easing in)
Rini Marwati – Yudi Wibisono Matematika UPI – Dok Versi 2013
Page 6
Perhatikan efeknya, bola kedua akan jatuh semakin cepat. Terlihat lebih natural bukan? Hal ini sesuai dengan keadaan sesungguhnya bahwa saat benda jatuh akan mendapat percepatan (silahkan cocokkan pelajaran Fisika SMA Anda). 9) Lanjutkan dengan memberikan easing out saat bola memantul keatas. Pilih frame antara 15-30 (sekali lagi pastikan pada layer bola2) dan isi nilai Ease dengan 100. Terlihat bola akan melambat. Classic tweening Effect
Ada dua cara untuk membuat sebuah objek menghilang secara perlahanlahan dan kebalikannya (dari hilang lalu muncul). Pertama dengan mengganti nilai alpha dan kedua adalah mengatur tint. Alpha berkaitan dengan nilai transparansi suatu objek dan tint berkaitan dengan warna. Berikut langkah-langkahnya: 1) Gunakan file bola memantul pada contoh sebelumnya. 2) Sekarang kita coba dengan menggunakan nilai Alpha. Pilih frame 15 pada layer bola1. Pilih simbol bola, pada bagian properties, pilih Alpha sebagai color, dan ubah persentasenya menjadi 0%
Bola akan menghilang karena alpha 0% sama artinya dengan transparan penuh. Tes animasi dengan menekan Enter. 3) Saatnya mencoba tint. Pilih frame 15 pada layer bola2. Pilih simbol bola. Pada bagian properties, ganti color dengan Tint, pilih warna putih. Coba jalankan animasi. Keduanya akan menghasilkan efek yang sama. Alpha merupakan sifat transparan, dapat dianalogikan dengan penggunaan lapisan kaca buram yang semakin lama semakin jernih (nilai transparan semakin kecil). Tint adalah warna, efek hilang terjadi karena warna bola sama dengan warna latar. Untuk membuktikannya silahkan ganti warna latar dengan warna Rini Marwati – Yudi Wibisono Matematika UPI – Dok Versi 2013
Page 7
selain warna putih dan warna bola (klik kanan stage dan pilih “Document Properties”). Dengan teknik alpha efek hilang tetap terjadi, tetapi untuk tint bola terlihat berubah warna menjadi putih. Perbedaan antara alpha dan tint Kelebihan tint adalah lebih cepat, sedangkan teknik alpha membutuhkan komputasi yang lebih rumit sehingga lebih lambat. Teknik tint juga dapat digunakan untuk menghasilkan efek perubahan warna secara perlahan-lahan (misal dari warna biru ke warna merah). Motion Guide
Motion guide memberikan fasilitas untuk menentukan jalur pergerakan objek saat beranimasi. Untuk lebih memahami konsep motion guide, ikuti tutorial berikut: 1) Buat file baru 2) Gambar objek apa saja. Dalam contoh ini yang digunakan adalah gambar ikan yang dibuat dengan pencil tools (option: smooth). Lihat tutorial pertama untuk penggunaan pencil tools. Gunakan paint bucket tools untuk mengisi warna .
Hasilnya adalah sebagai berikut:
3) Jadikan simbol (select semua dan tekan F8). Beri nama simbol ini “Simbol Ikan” 4) Tambahkan keyframe pada frame 20 5) Ganti nama layer1 dengan “Ikan” Rini Marwati – Yudi Wibisono Matematika UPI – Dok Versi 2013
Page 8
6) Pada panel timeline, klik icon dengan titik-titik merah yang melengkung (pada gambar bawah ditunjuk oleh kursor mouse). Pastikan bahwa Anda telah menambah keyframe pada frame 20. Flash akan menambahkan satu layer baru “Guide Ikan”. Pada layer inilah kita tentukan lintasan animasi.
7) Buat jalur lintasan ikan kita pada layer “Guide Ikan”. Jalur ini bisa dibuat dengan pencil tools, rectangle tools, oval dan seterusnya. Yang penting ada garis lintasan. Warna dan bentuk garis tidak penting, karena tidak akan dimunculkan pada film akhir.
Rini Marwati – Yudi Wibisono Matematika UPI – Dok Versi 2013
Page 9
8) Kembali ke layer ikan. Pilih frame 1, pilih arrow tools, drag titik kecil di tengah ikan ke arah awal lintasan. Pastikan bahwa snap to object terpilih (menu view snap to objects). Dengan snap secara otomatis titik kecil di tengah ikan akan “lengket” dengan lintasan. Ingat lakukan tween pada layer ikan, bukan layer motion guide.
9) Pilih frame 20, lakukan seperti pada langkah 8, bedanya sekarang arahkan ikan pada ujung lintasan
10)
Tambahkan classic tween antara frame 1 sd 20 untuk layer ikan (pilih frame antara 1-20, lalu set tween dengan motion). Tes animasi dengan menekan Enter. Terlihat bahwa ikan sekarang mengikuti jalur sesuai dengan yang kita buat di layer “Guide Ikan”
Rini Marwati – Yudi Wibisono Matematika UPI – Dok Versi 2013
Page 10
