Membuat Animasi Masking di Animate CC

Bagikan:

Salah satu animasi dasar dalam Adobe Flash (sekarang Adobe Animate CC) adalah animasi masking. Sesuai namanya, mask dalam terjemahan bahasa Indonesia artinya menutupi. Dalam konteks animasi, penggunaan animasi masking akan menampakkan objek/gerakan yang tertutup oleh maskernya. Bingung? Langsung aja dah praktik membuat animasi masking.

Sebelum praktik, pastikan kalian sudah menginstal Adobe Animate CC versi berapapun. Bagi yang masih menggunakan Adobe Flash juga masih dapat mengikuti dengan beberapa penyesuaian masing-masing yup 😀

Membuat Animasi Masking

Buka Adobe Animate kalian. Klik menu File > New, kemudian atur ukuran stage-nya menjadi 800 x 600 pixel. Akhiri dengan klik Create.

ukuran stage

Setelah dokumen baru terbentuk, biasanya stage akan langsung besar. Untuk menampilkan keseluruhan, ubah aja bagian 100% menjadi Show Frame.

show frame

Kemudian buat objek baru, di sini saya mencontohkan dengan membuat teks saja agar sekiranya mudah nampak perbedaannya. Untuk membuat teks, gunakan Text Tool seperti berikut.

text tool

Di sini saya membuat teks Animasi Masking. Untuk pengaturan jenis font, ukuran, dan sejenisnya dari teks, kalian bisa mengubahnya di panel Properties sebelah kanan. Tampilan Properties akan muncul setelah objek teks dipilih.

Pengaturan Properties teks di Animate

Setelah membuat teks, perhatikan bagian panel Timeline (biasanya di bawah). Kalian akan memiliki satu layer untuk objek teks tersebut. Sekarang tambahkan layer baru dengan klik New Layer untuk membuat layer sebagai tempat objek masking.

Untuk memudahkan pembuatan, ada baiknya kalian memberi nama pada masing-masing layer sesuai objeknya. Untuk mengganti nama layer, cukup klik dua kali teks nama layer. Berikan nama dua layer seperti berikut.

mengganti nama layer

Pada gambar di atas, layer teks sudah berisi objek teks yang tadi kita buat. Untuk layer masking masih kosong ya. Untuk membedakan layer yang sudah berisi objek atau kosong, bisa kalian lihat pada titik keyframe seperti tampilan berikut.

perbedaan layer kosong dan berisi objek

Layer yang sudah berisi objek akan memiliki titik keyframe dengan bulatan hitam yup. Nah, sekarang kalian isi layer masking dengan objek kotak.

Buat kotak dengan Rectangle Tool. Warna bebas saja sesuai keinginan karena kita latihan dasar. Jika sudah membuat animasi cukup kompleks, warna objek masking juga harus diperhatikan. Tapi sementara dasar dulu saja ya 😀

rectangle tool

Tampilan stage kalian harusnya sudah ada objek kotak dan teks sekarang, seperti ini:

Lanjuuut…masukkan frame untuk membuat durasi animasinya. Blok terlebih dahulu frame 15 pada dua layer kalian. Kemudian Klik kanan > pilih Insert Frame.

insert frame di Animate

Oiya, jika tampilan timeline terlalu kecil sehingga keyframe tidak cukup terlihat besar, kalian bisa memperbesar melalui slider di sebelah kanan seperti berikut.

memperbesar timeline Animate

Setelah menambahkan frame dengan Insert Frame tadi, kemudian klik kanan pada frame di layer masking > pilih Create Classic Tween.

create classic tween di Animate

Setelah itu akan muncul garis panah dengan frame berwarna ungu pada layer masking kalian. Masih di layer masking, klik kanan frame terakhir yakni frame 15 > pilih Insert Keyframe.

insert keyframe di bagian terakhir

Kemudian geser posisi kotak ke sebelah kanan. Perhatikan gambar berikut.

geser ke sebelah kanan objek masking di keyframe terakhir

Sampai di sini, objek kotak kalian sudah bisa bergerak dari kiri ke kanan. Namun, objek ini belum menjadi masking. Cus lanjut ke langkah terakhir.

Klik kanan layer masking > pilih Mask.

klik kanan layer masking untuk menjadikan sebagai mask

Tampilan layer pada timeline kalian setelah ada masking harusnya seperti berikut.

tampilan timeline dengan layer masking

Layer teks akan sedikit menjorok ke kanan sebagai tanda bahwa ia telah termasking.

Nah, sudah selesai. Sekarang coba lakukan tes dengan Ctrl + Enter pada keyboard. Yang terjadi itulah yang disebut animasi masking. Kalian bisa mendownload contoh yang saya buat di sini.

Bagikan: