Animasi Frame by Frame dan Animasi Tweening dalam Multimedia

Pada modul pembelajaran kali ini anda akan mempelajari tentang teknik animasi frame by frame dan animasi tweening. Anda juga akan dipandu untuk membuat animasi dengan teknik tweeing.

A. Capaian Pembelajaran Mata Kegiatan

Setelah mengikuti seluruh tahapan pada kegiatan belajar ini, peserta dapat memahami teknik animasi Frame by Frame dan animasi Tweening.

B. Sub Capaian Pembelajaran Mata Kegiatan

  1. Memahami pengertian frame.
  2. Memahami teknik animasi frame by frame.
  3. Membuat animasi frame by frame.
  4. Memahami teknik animasi tweening.
  5. Membuat animasi 2 dimensi dengan teknik tweening.

C. Pokok-pokok Materi

  1. Pengertian frame.
  2. Jenis-jenis Animasi di Adobe Flash Pro.
  3. Membuat animasi frame per frame
  4. Membuat animasi teks frame per frame.
  5. Pengertian Tweening.
  6. Cara Kerja Tweening.
  7. Membuat animasi dengan tweening.
  8. Pengertian Animasi Shape Tweening.
  9. Teknik Masking.

D. Uraian Materi

Pendahuluan

Sebelum mempelajari lebih lanjut tentang animasi frame by frame, ada baiknya peserta mengetahui tentang berbagai aplikasi software yang biasa digunakan dalam membuat animasi 2 dimensi. Aplikasi tersebut terdiri dari aplikasi yang berbayar dan aplikasi yang tidak berbayar. Aplikasi berbayar contohnya Adobe Flash Pro (sekarang namanya diganti menjadi Adobe Animate pada seri Creative Cloud), Harmony, Anime Studio, dan lain-lain. Sedangkan untuk aplikasi yang tidak berbayar contohnya adalah Synfig, Tupi, Pencil 2D, Flipnote Studio, dan masih banyak lagi.

Baik aplikasi yang berbayar maupun yang tidak berbayar mempunyai kelebihan dan kekurangan masing-masing.

Selanjutnya contoh praktek pada modul ini akan menggunakan aplikasi Adobe Flash Pro CS5. Aplikasi ini dipilih karena pada penerapan di dunia kerja, aplikasi ini paling sering sering digunakan.

Pengertian Frame

Frame adalah satuan terkecil dalam video sedangkan pada program flash, frame diumpamakan seperti kertas HVS yang telah digambar, dan contoh apabila framenya kita perpanjang sebanyak 5 frame, maka diumpamakan seperti 5 kertas HVS dengan gambar yang sama. Apabila kita merubah gambar salah satu frame, maka frame yang lain akan mengikuti perubahan gambar tersebut, karena frame tidak dapat berdiri sendiri.

Animasi frame merupakan animasi yang paling sederhana, di mana animasinya didapatkan dari rangkaian gambar yang ditunjukan bergantian. Pergantian gambar ini diukur dalam satuan fps (frame per second). Contoh animasi frame adalah ketika kita membuat rangkaian gambar yang berbeda pada tepian sebuah buku, kemudian kita buka buku tersebut sedemikian rupa menggunakan jempol, maka gambar akan terlihat bergerak.

Animasi frame by frame menuntut banyak gambar yang harus dibuat. Efek animasi diciptakan dengan mengganti gambar yang satu dengan gambar yang lain selama beberapa waktu. Semua gambar yang bergerak dihasilkan dari gambar yang berbeda-beda tiap frame-nya.

Keyframe adalah frame di mana Anda menentukan perubahan pada tombol atau animasi. Pada animasi tween, Saudara membuat keyframe hanya pada titik yang penting di dalam Timeline. Keyframe ditandai oleh titik di dalam frame. Keyframe yang tidak berisi gambar di dalam layer ditandai oleh titik kosong.

Blank Keyframe artinya kita mempersiapkan frame kosong untuk diisi objek baru, dan apabila kita menggambar objek, blank keyframe tersebut sudah berisi objek. Blank keyframe dilambangkan dengan titik bulat putih pada frame.

Jenis-jenis Animasi di Adobe Flash Pro

a. Motion Path

Anda dapat menggunakan motion path untuk membuat simbol bergerak mengikuti bentuk lintasan yang sulit. Pada Adobe CS3 dan versi sebelumnya, motion path dibuat dengan menggunakan layer Motion Guide untuk membuat garis untuk lintasan gerak objek. Layer Guide ditandai oleh ikon guide di sebelah nama layer.

b. Animasi Margue

Animasi margue banyak dilihat pada situs web, yaitu suatu teks yang muncul dari bagian kanan layar, lalu begerak menuju ke kiri layar dan menghilang, begitu seterusnya.

c. Animasi Transparan

Animasi transparan adalah animasi yang terlihat secara transparan perlahan-lahan lalu menghilang. Animasi ini sering digunakan dalam melakukan pergantian animasi dari satu animasi ke animasi lainnya, sehingga perpindahan animasi akan terlihat halus.

d. Animasi Fade

Animasi fade adalah animasi pemudaran. Fade dibagi menjadi 2, yaitu fade in (pemudaran ke dalam) dan fade out (pemudaran keluar).

e. Animasi Rotasi

Animasi rotasi adalah animasi objek atau teks yang berputar, seperti jam, kincir angin, putaran roda, dan lain-lain. Kita bisa memutarnya searah jarum jam (CW : Clock Wise) atau berlawanan dengan arah jarum jam (CCW : Counter Clock Wise).

f. Animasi Blink

Blink adalah animasi berkedip atau berkelip, seperti bintang di langit atau lampu disco, animasi blink biasanya sangat efektif untuk menarik perhatian, sehingga banyak digunakan untuk membuat banner.

g. Animasi Shape

Animasi ini adalah perubahan bentuk dari suatu objek menjadi objek lain atau dari suatu objek menjadi teks dan sebaliknya. Animasi ini juga sering disebut efek Morph.

h. Animasi Masking

Masking adalah animasi yang menyembunyikan atau menutupi suatu objek dengan objek lain, sehinga objek yang menutupi terlihat transparan dan menyatu dengan objek yang ditutupi.

Membuat Animasi Frame per Frame

Langkah-langkah pembuatan animasi frame per frame dapat Anda lihat disini.

Membuat Animasi Teks Frame Per Frame

Animasi Frame by Frame adalah animasi yang menampilkan objek pada tiap frame secara berurutan. Di dalam kegiatan praktik ini akan diberikan proses pembuatan animasi teks frame by frame. Langkah-langkahnya membuat Animasi Teks Frame Per Frame dapat dilihat disini.

Pengertian Tweening

Tweening adalah proses membuat sebuah animasi pergerakan dengan cara memberikan perubahan pada bentuk atau posisi objek dengan menentukan keyframe awal dan akhir sehingga dapat terbentuk frame-frame baru. Fungsi utama tweening adalah untuk menggerakkan objek dari satu titik ke titik lainnya.

Animasi motion tween digunakan apabila kita ingin membuat gerakan animasi yang teratur. Animasi ini sangat mengurangi waktu karena kita tidak perlu membuat animasi secara frame per frame. Sebaliknya, kita hanya perlu membuat frame awal dan frame akhir saja. Dua alasan utama mengapa Animasi motion tween sangat baik yaitu karena mengurangi pekerjaan mengambar dan meminimalkan ukuran file karena isi dari setiap frame tidak perlu disimpan.

Cara Kerja Tweening

Prinsip kerja dari animasi motion tween adalah membuat objek pada frame pertama dan terakhir saja, sedangkan frame-frame diantaranya akan dibuat secara otomatis. Objek yang dapat diaplikasikan dalam motion tween adalah objek instance (simbol), group dan teks. Animasi motion tween biasa digunakan untuk membuat animasi objek bergerak, berputar, dan mengubah ukuran (skala). Kita hanya perlu menentukan posisi pertama dan posisi terkakhir obyek.

Pada Adobe Flash Pro CS5, ada 3 jenis fitur tweening yang digunakan, yaitu Motion Tween, Shape Tween, dan Classic Tween. Untuk Adobe seri CS3, fitur Motion Tween berubah menjadi Classic Tween pada seri CS5. Sedangkan pada CS5 ada tambahan fungsi yang lebih memudahkan pengguna pada fitur Motion Tween, yakni munculnya garis guide secara otomatis sehingga memungkinkan pengguna untuk melakukan edit garis guide secara lebih bebas.

Membuat Animasi dengan Tweening

Pada kegiatan ini akan diberi contoh cara pembuatan animasi sederhana menggunakan teknik tweening. Langkah-langkahnya membuat animasi dengan tweening dapat dilihat pada tutorial berikut ini.

Pengertian Animasi Shape Tweening

Shape Tween adalah perubahan bentuk dari suatu objek ke objek lain. Untuk Shape Tween objek yang dianimasikan harus berjenis Shape, untuk ukuran file yang dihasilkan Shape Tween lebih besar dibandingkan motion Tween.

Shape tweening biasa digunakan untuk membuat animasi perubahan bentuk. Sebagai contoh di dalam frame awal terdapat obyek bintang, kemudian di dalam frame akhir terdapat obyek bulan sabit. Dengan menggunakan shape tweening, program akan menganimasi dan menentukan transisi perubahan bentuk dari bintang menjadi bulan sabit secara otomatis. Yang perlu diperhatikan, shape tweening hanya dapat diterapkan untuk menganimasi obyek shape. Jadi tidak untuk melakukan Shape tween untuk group, simbol, atau teks.

Untuk hasil yang baik biasanya digunakan satu shape. Jika Anda menggunakan banyak shape, semuanya harus dalam layer yang sama.Hal ini akan memudahkan jika ingin melakukan perubahan. Shape tweening juga memperbolehkan untuk mengubah warna.

Teknik Masking

a. Pengertian Masking

Mask merupakan fasilitas di flash yang mampu membuat objek gambar ditampilkan sesuai dengan objek shape yang kita kehendaki. Masking adalah animasi yang menyembunyikan atau menutupi suatu objek dengan objek lain, sehinga objek yang menutupi terlihat transparan dan menyatu dengan objek yang ditutupi.

Mask artinya adalah penutup mempunyai fungsi sesuai dengan namanya yaitu untuk menutupi suatu layer. Mask dapat diterapkan kepada suatu layer dan layer yang sudah dikenai mask bisa berfungsi untuk menutupi layer dibawahnya.

Prinsip kerja dari Animasi Mask adalah menampilkan bidang yang tertutup dan menyembunyikan bidang yang terbuka.

b. Cara Kerja Masking

Prinsip kerja masking adalah menampilkan bidang yang tertutup dan menyembunyikan bidang yang terbuka. Pada dasarnya animasi masking terjadi dikarenakan penumpukan dua buah objek yang dibuat dalam layer yang berbeda, layer utama ditutup layer objek dengan bantuan masking, sehingga objek utama hanya terlihat seukuran objek penutup atau objek yang dijadikan masking. Atau dengan kata lain, objek yang terlihat adalah objek yang saling bertumpukan sedangkan objek yang lain disembunyikan.

c. Membuat Animasi Masking

Pada animasi masking, Anda akan belajar teks yang lebih hidup menggunakan animasi masking. Langkah-langkahnya dapat Anda lihat di tutorial ini.

d. Animasi Motion Guide

Animasi motion guide adalah animasi yang mempunyai gerakan sesuai dengan jalur yang kita buat. Animasi ini merupakan lanjutan dari animasi motion tween.

Animasi ini sangat cocok digunakan untuk jenis animasi yang membutuhkan ketelitian dalam pergerakan yang dikehendaki atau sesuai keinginan pembuat animasi. Pada Adobe Flash Pro CS5 ada dua cara menambahkan motion guide.

Yang pertama dengan menggunakan fitur Motion Tween seperti telah dijelaskan pada contoh pertama, dimana pengguna dapat mengatur alur guide path pada objek. Dan yang kedua adalah dengan membuat layer baru sebagai layer guide. Berbeda dengan pada Adobe Flash Pro CS3, fitur motion guide pada CS5 berubah menjadi Classic Motion Guide.

e. Animasi Shape Tween

Animasi Shape Tween adalah animasi dimana suatu objek dibuat mengalami perubahan bentuk. Contoh sederhananya adalah perubahan objek berbentuk bintang menjadi bentuk lingkaran, tulisan, dan sebagainya.

Sumber : http://ppg.spada.ristekdikti.go.id