smanka

Flash – Case on
Masking Animation
http://muhammadadri.net
Tulisan ini merupakan salah satu modul praktik yang ditulis untuk digunakan
dalam pengembangan bahan ajar Multimedia, dalam proses pengolahan dan
pembuatan data animasi yang akan digunakan di dalam Multimedia
Instructional Design (MID)
2008
Muhammad Adri
Teknik Elektronika FT UNP
4/1/2008
IlmuKomputer.Com
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2008 IlmuKomputer.Com
1
IlmuKomputer.Com
Tutorial Berseri - Multimedia Instructional Design
Macromedia Flash MX 2004:
Case on Masking Animation
Muhammad Adri
adri@muhammadadri.net
http://muhammadadri.net
Pendahuluan
Teknik animasi masking merupakan salah satu teknik dalam pengolahan data
dalam flash, sehingga dengan teknik ini kita dapat menyembunyikan suatu objek dibalik
oebjek yang lain. Sedangkan proses “penampakan” objek tersebut dilakukan dengan
memanfaatkan suatu layer tambahan yang berfungsi sebagai “masking” bagi layer yang
disembunyikan.
Implementasi Masking
Teknik masking ini dapat diimpelementasikan dalam berbagai terapan animasi,
seperti untuk kebutuhan :
1. banner, iklan, atau informasi lainnya yang diharapkan mampu untuk menarik
perhatian pembacanya.
2. Penerapan metoda scanning, seperti pada materi ajar Biologi, Kimia, Fisika dengan
proses gerhana dan banyak contoh lainnya.
3. Efek sinar x untuk anatomi tubuh manusia
4. Banyak kebutuhannya lainnya yang membutuhkan implementasi metoda animasi
masking ini.
Contoh Kasus Masking 1. My Daughter Body
Pada latihan kasus ini, kita akan menggunakan dua gambar yang akan digunakan
sebagai contoh penggunaan Masking.
Ikutilah langkah‐langkah berikut ini :
Lisensi Dokumen:
Copyright © 2003-2008 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara
bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah
atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak
diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari
IlmuKomputer.Com.
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2008 IlmuKomputer.Com
2
IlmuKomputer.Com
1. Kita disain sebuah masking tubuh seorang anak kecil, seperti terlihat pada
gambar berikut :
a. Body b. Anak c. Hasil Masking
Gambar 1. Rancangan teknik Masking yang dibuat
2. Pertama siapkan sebuah area animasi pada dokumen flash dengan ukuran 120
x 101 pixel (H x W). pada size dcoment, seting warna background hitam
3. Import file gambar Anak yang akan dianimasikan pada Layer 1, dengan
mengklik menu File 􀃆 Import 􀃆 Import to stage, kemudian ganti nama layer
menjadi Anak.
4. Tambahkan sebuah layer baru ganti namanya menjadi Body, kemudian import
file gambar Body ke layer tersebut.
5. Pada layer Anak, klik kanan pada frame 50, kemudian pilih pop up menu insert
frame,
6. Pada layer Body, klik kanan pada frame 50, kemudian pilih pop up menu insert
frame,
7. Kemudian tambahkan sebuah Layer Baru, beri nama Sinar X.
8. Buat sebuah kotak persegi panjang vertical, dengan menggunakan Rectangle
Tool, buat dengan ukuran lebih tinggi dari gambar yang akan dimasking,
tempatkan pada sisi kiri gambar yang akan dimasking
9. Pada layer Sinar X, klik kanan pada frame 50, pilih Insert Key Frame
10. Kemudian masih pada layer yang sama, klik kanan pada frame ke 25, pilih
Insert Key Frame, kemudian pindahkan ke posisi sebelah kanan area yang akan
dimasking
a. Posisi frame 1 b. Posisi frame 25 c. posisi frame 50
Gambar 2. Penempatan Posisi Layer Scanning Sinar X
11. Klik kanan pada Layer Sinar X, kemudian pilih Mask.
12. Masih pada layer yang sama , pada frame 15, dan 35 klik kanan, pilih Insert
Motion Tween, sehingga akan tampak seperti pada Gambar 3.
13. Jalankan animasi dengan mengklik Ctrl + Enter
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2008 IlmuKomputer.Com
3
IlmuKomputer.Com
Gambar 3. Tampilan akhir animasi masking anak
Contoh Kasus Masking 2. My Head and My Brain
Pada latihan kasus ini, kita akan menggunakan dua gambar yang akan digunakan
sebagai contoh penggunaan Masking. Yaitu gambar sebuah tengkorak dan gambar
bagian dalam tengkorak manusia.
Ikutilah langkah‐langkah berikut ini :
1. Kita disain sebuah masking scanning otak manusia, seperti terlihat pada
gambar berikut :
a. Internal Otak b. Tengkorak c. Hasil Masking
Gambar 4. Rancangan teknik Masking yang dibuat
2. Pertama siapkan sebuah area animasi pada dokumen flash dengan ukuran 800
x 600 pixel (H x W). pada size dcoment, seting warna background hitam
3. Import file gambar Tengkorak yang akan dianimasikan pada Layer 1, dengan
mengklik menu File 􀃆 Import 􀃆 Import to stage, kemudian ganti nama layer
menjadi Tengkorak.
4. Tambahkan sebuah layer baru ganti namanya menjadi Isi Kepala, kemudian
import file gambar Tengkorak Isi ke layer tersebut.
5. Pada layer Tengkorak, klik kanan pada frame 50, kemudian pilih pop up menu
insert frame,
6. Pada layer Isi Kepala, klik kanan pada frame 50, kemudian pilih pop up menu
insert frame,
7. Kemudian tambahkan sebuah Layer Baru, beri nama Sinar X.
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2008 IlmuKomputer.Com
4
IlmuKomputer.Com
8. Buat sebuah kotak persegi panjang vertical, dengan menggunakan Rectangle
Tool, buat dengan ukuran lebih tinggi dari gambar yang akan dimasking,
tempatkan pada sisi kiri gambar yang akan dimasking
9. Pada layer Sinar X, klik kanan pada frame 50, pilih Insert Key Frame
10. Kemudian masih pada layer yang sama, klik kanan pada frame ke 25, pilih
Insert Key Frame, kemudian pindahkan ke posisi sebelah kanan area yang akan
dimasking
b. Posisi frame 1 b. Posisi frame 25 c. posisi frame 50
Gambar 5. Penempatan Posisi Layer Scanning Sinar X
11. Klik kanan pada Layer Sinar X, kemudian pilih Mask.
12. Masih pada layer yang sama , pada frame 15, dan 35 klik kanan, pilih Insert
Motion Tween, sehingga akan tampak seperti pada Gambar 6.
13. Jalankan animasi dengan mengklik Ctrl + Enter
Gambar 6. Tampilan lengkap desain masking
Contoh Kasus Masking 3. My Banner
Pada latihan ini, banner yang telah dirancang ditambahkan animasi masking, maka
pada latihan ini, yang akan kita animasi masking adalah teks informasi yang menjadi
identitas banner.
Untuk kebutuhan ini file banner yang telah dibuat, kemudian diedit kembali dengan
menggunakan Adobe Photoshop untuk menghilangkan teks yang akan dianimasi
maskingkan.
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2008 IlmuKomputer.Com
5
IlmuKomputer.Com
Setelah semua teks yang akan dianimasi maskingkan dihapus, maka file banner
disimpan kembali dengan ekstensi JPG atau GIF. Teks idetitas tersebut kemudian
dapat dibuat kembali dengan menggunakan Flash atau tetap dengan menggunakan
Adobe. Kita asumsikan supaya tampilan desain banner kita tidak jauh berbeda
dengan yang didesain pada photoshop, maka sebaiknya gunakan kembali Adobe
Photoshop untuk membuat teks, dengan ukuran image yang disesuaikan dengan
layer asli teks yang telah dihapus.
Konsep animasi masking yang akan kita lakukan adalah, pada teks identitas akan
terjadi pergantian warna teks, pada saat dilalui oleh masking. Maka untuk
kebutuhan tersebut dapat dilakukan langkah‐langkah berikut :
1. Buat file teks baru dengan Adobe Photoshop, dengan warna huruf putih dan
kemudian tambahkan sedikit stroke dan drop shadow yang disesuaikan dengan
warna background tempat teka akan ditempatkan pada banner.
2. Kemudian simpan file tersebut dengan nama Teks1.gif
3. Lakukan pergantan warna teks, misalnya dengan wana biru, dan kemudian
disimpan dengan nama Teks2.gif
4. Langkah selanjutnya, buka sebuah dokumen baru pada Flash
5. Import tiga gambar yang akan digunakan untuk membuat animasi masking
banner, yaitu : Banner.jpg/ Banner.gif, Teks1.gif dan Teks2.gif
6. Masing‐masing gambar ditempatkan pada layer yang terpisah. Banner pada
Layer 1, Teks1.gif pada layer 2 dan Teks2.gif pada layer 3.
7. Tambahkan satu layer baru, kemudian tambahkan sebuah rectangle tool, untuk
membuat sebuah kotak persegi.
8. Langkah selanjutnya lakukan pengaturan frame dan masking, hingga melakukan
motion seperti langkah‐langkah yang ada pada contoh kasus 1 dan 2
Selamat Mencoba
Biografi Penulis
Muhammad Adri. Menyelesaikan S1 di Jurusan Teknik
Elektronika FPTK IKIP Padang tahun 1999, dan S2 di Jurusan
Teknik Elektro Universitas Gadjah Mada Yogyakarta, dengan
konsentrasi Sistem Komputer dan Informatika (SKI) tahun
2004. Staf pengajar Teknik Elektronika Fakultas Teknik
Universitas Negeri Padang. Kompetensi inti pada bidang
Computer Networking and Security, Computer Architecture
and Organization, Web-Based Application, Online Learning,
Multimedia-Based Instructional Design, dan Knowledge
Community. Penulis aktif sebagai pemakalah dalam berbagai
Seminar Nasional, instruktur pada model pembelajaran
berbasis Multimedia dan Komputer., IT-Based Education.
Memegang Sertifikasi Microsoft, JENI (Java Education Network Indonesia) 1,2,dan 4.
Ketertarikan penulis dalam bidang implementasi IT dalam dunia pendidikan,
menghantarkan penulis sebagai mahasiswa doktoral Ilmu Pendidikan Pascasarjana
Universitas Negeri Padang, terhitung mulai September 2006.