Rini Marwati Yudi Wibisono Page 1 Matematika UPI Dok Versi 2013

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 Page 2 Matematika UPI Dok Versi 2013

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 Page 3 Matematika UPI Dok Versi 2013

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 Page 4 Matematika UPI Dok Versi 2013

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 Page 5 Matematika UPI Dok Versi 2013

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 men-

select 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 Page 6 Matematika UPI Dok Versi 2013

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 Page 7 Matematika UPI Dok Versi 2013

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 perlahan-

lahan 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