Senin, 21 Februari 2011

Animasi Masking

Animasi masking adalah animasi yang pada intinya menampilkan objek yang semula kita sembunyikan. Animasi masking mempunyai 2 metode dasar yaitu :
1. Area masking yang bergerak, objek yang di mask diam.
2. Area masking yang diam dan objek yang di mask yang bergerak.
Kedua teknik tersebut akan menampilkan hasil animasi yang berbeda.. Selain itu area masking hanya boleh berupa fill. Jadi untuk outline (garis) tidak diperbolehkan.

Membuat animasi masking
Di bawah ini akan ditunjukkan proses pembuatan animasi masking :
1. Buka file baru atau Ctrl+N.
2. Disini kita akan berkerja dengan area background berwarna hitam, jadi pada properties.kita ubah dulu warna background menjadi warna hitam.
3. Kemudian buat dua buah layer.dengan nama layer “text” yaitu layer yang di mask dan layer “masked” yaitu layer masking.
4. Pada layer text frame ke-1 buat sebuah tulisan “ANIMASI MASKING” dengan warna putih seperti pada gambar.
5. Kemudian klik kanan frame 50 pada layer text dan pilih Insert Frame.
6. Pada layer masked frame ke-1, buat sebuah lingkaran berbentuk elips berwarna hitam, letakkan di samping kiri dari stage.
7. Pada layer masked frame ke-50 klik kanan pilih Insert Keyframe. Lalu ubah posisi lingkaran elips ke samping kanan stage.
8. Pada layer masked frame ke-1 klik kanan pilih Create Motion Tween.
9. Pada layer masked, klik kanan pilih mask .
10. Kemudian tekan Enter untuk melihat hasilnya.

Animasi Masking

Animasi masking adalah animasi yang pada intinya menampilkan objek yang semula kita sembunyikan. Animasi masking mempunyai 2 metode dasar yaitu :
1. Area masking yang bergerak, objek yang di mask diam.
2. Area masking yang diam dan objek yang di mask yang bergerak.
Kedua teknik tersebut akan menampilkan hasil animasi yang berbeda.. Selain itu area masking hanya boleh berupa fill. Jadi untuk outline (garis) tidak diperbolehkan.

Membuat animasi masking
Di bawah ini akan ditunjukkan proses pembuatan animasi masking :
1. Buka file baru atau Ctrl+N.
2. Disini kita akan berkerja dengan area background berwarna hitam, jadi pada properties.kita ubah dulu warna background menjadi warna hitam.
3. Kemudian buat dua buah layer.dengan nama layer “text” yaitu layer yang di mask dan layer “masked” yaitu layer masking.
4. Pada layer text frame ke-1 buat sebuah tulisan “ANIMASI MASKING” dengan warna putih seperti pada gambar.
5. Kemudian klik kanan frame 50 pada layer text dan pilih Insert Frame.
6. Pada layer masked frame ke-1, buat sebuah lingkaran berbentuk elips berwarna hitam, letakkan di samping kiri dari stage.
7. Pada layer masked frame ke-50 klik kanan pilih Insert Keyframe. Lalu ubah posisi lingkaran elips ke samping kanan stage.
8. Pada layer masked frame ke-1 klik kanan pilih Create Motion Tween.
9. Pada layer masked, klik kanan pilih mask .
10. Kemudian tekan Enter untuk melihat hasilnya.

Animasi Frame to Frame

Animasi ini adalah jenis animasi yang paling banyak memakan kapasitas file dan memori, karena itu lebih baik penggunaan animasi ini hendaknya diminimalis. Animasi frame per 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 framenya. Karena animasi frame per frame harus memiliki gambar yang unik tiap framenya maka animasi frame per frame sangat ideal untuk membuat animasi yang kompleks yang terdiri dari banyak perubahan seperti ekspresi wajah.
Membuat animasi frame per frame
Di bawah ini akan ditunjukkan proses pembuatan animasi frame per frame :
1. Buka file baru atau Ctrl+N.
2. Kemudian kita pilih Rectangle Tool (R) pada toolbox dan kita mulai
membuat objek balok pada stage dengan mengklik dan drag, jangan lupa warna fiil objek balok harus berbeda dari warna background stage.
3. Kemudian klik kanan di frame ke-1, pilih Insert Keyframe atau tekan F6, maka akan muncul frame ke-2.
4. Pada frame ke-2 kita pilih Free Transform Tool (Q), kemudian kita putar balok sedikit ke kanan dan letaknya dirubah sedikit kebawah dengan meneka tombol Shift + Panah bawah satu kali.
5. Kemudian masukan kembali KeyFrame hingga menjadi tiga frame, kemudian putar kembali balok sedikit ke kanan dan sedikit kebawah.
6. Ulangi langkah di atas sampai frame 8 hingga balok tampak jatuh.
7. Kemudian tekan Enter untuk melihat hasilnya.

Animasi Frame to Frame

Animasi ini adalah jenis animasi yang paling banyak memakan kapasitas file dan memori, karena itu lebih baik penggunaan animasi ini hendaknya diminimalis. Animasi frame per 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 framenya. Karena animasi frame per frame harus memiliki gambar yang unik tiap framenya maka animasi frame per frame sangat ideal untuk membuat animasi yang kompleks yang terdiri dari banyak perubahan seperti ekspresi wajah.
Membuat animasi frame per frame
Di bawah ini akan ditunjukkan proses pembuatan animasi frame per frame :
1. Buka file baru atau Ctrl+N.
2. Kemudian kita pilih Rectangle Tool (R) pada toolbox dan kita mulai
membuat objek balok pada stage dengan mengklik dan drag, jangan lupa warna fiil objek balok harus berbeda dari warna background stage.
3. Kemudian klik kanan di frame ke-1, pilih Insert Keyframe atau tekan F6, maka akan muncul frame ke-2.
4. Pada frame ke-2 kita pilih Free Transform Tool (Q), kemudian kita putar balok sedikit ke kanan dan letaknya dirubah sedikit kebawah dengan meneka tombol Shift + Panah bawah satu kali.
5. Kemudian masukan kembali KeyFrame hingga menjadi tiga frame, kemudian putar kembali balok sedikit ke kanan dan sedikit kebawah.
6. Ulangi langkah di atas sampai frame 8 hingga balok tampak jatuh.
7. Kemudian tekan Enter untuk melihat hasilnya.

Membuat Tombol Navigasi Sederhana

Pada tutorial kali ini kita akan membahas mengenai bagaimana membuat tombol navigasi, ngerti kan apa itu tombol navigasi? Tombol navigasi itu berfungsi agar pengguna dapat berinteraksi dengan movie flash yang kita buat. Misalkan mereka ingin pergi kebagian tertentu, kita sebagai pembuat telah menyediakan navigasi yang berupa tombol
untuk mereka klik.

Langsung saja yah….
  1. Buka program flash tentunya, setelah itu buat file baru dengan properties tertentu, saya pakai ukuran 800x600.
  2. Pada frame 1 buat teks dengan Teks Tool dan propertisnya teks statis bertuliskan “Home”.
  3. Klik frame 1, kemudian ganti “Frame label” dengan “home” setelah itu tekan Enter.
  4. Klik kanan frame 10 pilih Insert Blank Keyframe, kemudian buat teks statis “Materi”. Klik lagi frame 10 dan ganti “Frame label” dengan “materi” dan tekan Enter.
  5. Buat lagi seperti langkah no. 4 diatas pada frame 20 dengan teks statis bertuliskan “Latihan” dan “Frame label” diganti dengan “latihan”, kemudian pada frame 30 dengan teks statis bertuliskan “Contoh” dan “Frame label” diganti dengan “contoh”.
  6. Buat layer baru dan beri nama layer dengan nama “tutup” dengan cara klik dua kali pada tulisan “Layer 2”. Kemudian klik frame satu layer “tutup” dan buat teks statis “Tutup”.
  7. Kemudian klik kanan pada tulisan “Tutup” pilih Convert to Symbol pilih type button dan beri nama “tutup_btn” dan klik ok.
  8. Buat layer baru lagi dan beri nama “tombol”.
  9. Klik pada frame satu layer “tombol “ kemudian import tobol dari panel Component. Caranya adalah dengan klik Windows kemudian pilih components. Dari panel Componens pilih User interface kemudian pilih button. Kemudian drag(klik tanpa dilepaskan) dan geser kedalam stage.
  10. kemudian tutup panel Components dan rubah Instance name dari keempat button tersebut masing masing “home_btn”, “materi_btn”, “latihan_btn”, “contoh_btn” dan lebelnya masing masing “home”, “materi”, “latihan”, “contoh” dengan cara klik satu persatu dan merubahnya pada panel parameters.
  11. Buat layer baru lagi dan rubah namanya “skrip”, klik pada frame pertama dan buka jendela Actions kemudian masukan Action Script di bawah ini :

    stop()
    home_btn.onPress = function(){
    gotoAndStop("home");
    }
    materi_btn.onPress = function(){
    gotoAndStop("materi");
    }
    latihan_btn.onPress = function(){
    gotoAndStop("latihan");
    }
    contoh_btn.onPress = function(){
    gotoAndStop("contoh");
    }
  12. Kemudian klik kanan tombol tutup dan pilih Actions dan masukan Action Script di bawah ini :

    on(release){
    fscommand("quit","true");
    }
  13. Langkah terakhir adalah menyimpan dokumen, beri nama Tombol navigasi.
  14. Kemudian Klik Ctrl+Enter. Dan lihat hasilnya pada tempat dimana kita menyimpannya, selesai.

Membuat Tombol Navigasi Sederhana

Pada tutorial kali ini kita akan membahas mengenai bagaimana membuat tombol navigasi, ngerti kan apa itu tombol navigasi? Tombol navigasi itu berfungsi agar pengguna dapat berinteraksi dengan movie flash yang kita buat. Misalkan mereka ingin pergi kebagian tertentu, kita sebagai pembuat telah menyediakan navigasi yang berupa tombol
untuk mereka klik.

Langsung saja yah….
  1. Buka program flash tentunya, setelah itu buat file baru dengan properties tertentu, saya pakai ukuran 800x600.
  2. Pada frame 1 buat teks dengan Teks Tool dan propertisnya teks statis bertuliskan “Home”.
  3. Klik frame 1, kemudian ganti “Frame label” dengan “home” setelah itu tekan Enter.
  4. Klik kanan frame 10 pilih Insert Blank Keyframe, kemudian buat teks statis “Materi”. Klik lagi frame 10 dan ganti “Frame label” dengan “materi” dan tekan Enter.
  5. Buat lagi seperti langkah no. 4 diatas pada frame 20 dengan teks statis bertuliskan “Latihan” dan “Frame label” diganti dengan “latihan”, kemudian pada frame 30 dengan teks statis bertuliskan “Contoh” dan “Frame label” diganti dengan “contoh”.
  6. Buat layer baru dan beri nama layer dengan nama “tutup” dengan cara klik dua kali pada tulisan “Layer 2”. Kemudian klik frame satu layer “tutup” dan buat teks statis “Tutup”.
  7. Kemudian klik kanan pada tulisan “Tutup” pilih Convert to Symbol pilih type button dan beri nama “tutup_btn” dan klik ok.
  8. Buat layer baru lagi dan beri nama “tombol”.
  9. Klik pada frame satu layer “tombol “ kemudian import tobol dari panel Component. Caranya adalah dengan klik Windows kemudian pilih components. Dari panel Componens pilih User interface kemudian pilih button. Kemudian drag(klik tanpa dilepaskan) dan geser kedalam stage.
  10. kemudian tutup panel Components dan rubah Instance name dari keempat button tersebut masing masing “home_btn”, “materi_btn”, “latihan_btn”, “contoh_btn” dan lebelnya masing masing “home”, “materi”, “latihan”, “contoh” dengan cara klik satu persatu dan merubahnya pada panel parameters.
  11. Buat layer baru lagi dan rubah namanya “skrip”, klik pada frame pertama dan buka jendela Actions kemudian masukan Action Script di bawah ini :

    stop()
    home_btn.onPress = function(){
    gotoAndStop("home");
    }
    materi_btn.onPress = function(){
    gotoAndStop("materi");
    }
    latihan_btn.onPress = function(){
    gotoAndStop("latihan");
    }
    contoh_btn.onPress = function(){
    gotoAndStop("contoh");
    }
  12. Kemudian klik kanan tombol tutup dan pilih Actions dan masukan Action Script di bawah ini :

    on(release){
    fscommand("quit","true");
    }
  13. Langkah terakhir adalah menyimpan dokumen, beri nama Tombol navigasi.
  14. Kemudian Klik Ctrl+Enter. Dan lihat hasilnya pada tempat dimana kita menyimpannya, selesai.

Cara Meletakkan Action Script Pada Button

Pemrograman Flash sangat sensitif sekali akan kesalahan, apalagi menyangkut action script, jadi apabila terjadi kesalahan kecil saja maka program flash yang kita buat tidak akan bekerja. Karena itu pada kesempata ini akan diberikan dasar-dasar yang sebenarnya sangat sepele, tetapi apabila diabaikan, akan berakibat fatal, apalagi buat para orang yang baru belajar flash. Untuk meletkan action script pada button adalah :

  1. Pastikan button (tombol) baik yang kita buat sendiri ataupun yang mengambilnya dari panel library sudah terseleksi. Cara menyeleksinya yaitu dengan selection tool dan kita klik satu kali pada button yang ingin kita beri action.
  2. Untuk memastikannya kita bisa melihat pada property inspector setelah button kita seleksi maka akan muncul keterangan seperti pada gambar di bawah.
  3. Setelah button yang ingin kita beri scipt sudah terselaksi, langkah selanjutnya adalah membuka panel action. Disini ada beberapa cara yang bisa digunakan, pertama bisa degan lagsun tekan f9, yang kedua adalah adalah klik kanan lalu pilih action, kemudian cara yang ketiga adalah langsung membukanya pada panel action.
  4. Yang harus di ingat di sini untuk mecegah terjadinya kesalahan adalah pada panel action yang telah terbuka terdapat keterangan yang menyebutkan bahwa action adalah milik dari button yang telah diseleksi, karena setiap action berbeda-beda antara penempatan pada button, movie clip, ataupun pada frame.
  5. Setelah langkah-langkah tersebut barulah kita bisa menuliskan scipt yang kita ingin tulis.

Cara Meletakkan Action Script Pada Button

Pemrograman Flash sangat sensitif sekali akan kesalahan, apalagi menyangkut action script, jadi apabila terjadi kesalahan kecil saja maka program flash yang kita buat tidak akan bekerja. Karena itu pada kesempata ini akan diberikan dasar-dasar yang sebenarnya sangat sepele, tetapi apabila diabaikan, akan berakibat fatal, apalagi buat para orang yang baru belajar flash. Untuk meletkan action script pada button adalah :

  1. Pastikan button (tombol) baik yang kita buat sendiri ataupun yang mengambilnya dari panel library sudah terseleksi. Cara menyeleksinya yaitu dengan selection tool dan kita klik satu kali pada button yang ingin kita beri action.
  2. Untuk memastikannya kita bisa melihat pada property inspector setelah button kita seleksi maka akan muncul keterangan seperti pada gambar di bawah.
  3. Setelah button yang ingin kita beri scipt sudah terselaksi, langkah selanjutnya adalah membuka panel action. Disini ada beberapa cara yang bisa digunakan, pertama bisa degan lagsun tekan f9, yang kedua adalah adalah klik kanan lalu pilih action, kemudian cara yang ketiga adalah langsung membukanya pada panel action.
  4. Yang harus di ingat di sini untuk mecegah terjadinya kesalahan adalah pada panel action yang telah terbuka terdapat keterangan yang menyebutkan bahwa action adalah milik dari button yang telah diseleksi, karena setiap action berbeda-beda antara penempatan pada button, movie clip, ataupun pada frame.
  5. Setelah langkah-langkah tersebut barulah kita bisa menuliskan scipt yang kita ingin tulis.

AREA BEKERJA PADA FLASH




Menu Bar
adalah kumpulan menu-menu yang ada pada Flash 8
Timeline
jendela panel yang digunakan untuk mengelompokkan dan mengatur isi atau gerak sebuah movie atau simbol, panel time line ini berisi:
  1. scene
    merupakan tempat berbagai kejadiandi dalam stage
  2. layer
    merupakan tempat dimana kita menampung objek dalam satu scene
  3. frame
    merupakan tempat kita mengatur animasi bagian perbagian yang di kelompokan dalam sebuah layer

Stage
adalah area putih dimana kita bekerja dengan objek di dalam flash

Nama file
merupakan tempat dimana nama dari file yang kita buat dicantumkan untuk lebih memudahkan apabila kita bekerja dengan file yang banyak

Tools
adalah alat-alat yang ada di dalam flash dan yang akan kita gunakan untuk bekerja dengan objek, untuk lebih detailnya lihat gambar.


Zoom
merupakan option dimana kita mengatur besar kecilnya stage atau area kerja kita

Panel action
adalah tempat kita menuliskan script/coding/actions

Properties
adalah panel dimana kita mengatur objek yang kita gunakan untuk bekerja, baik mengatur teks jika kita ekerja dengan teks, warna, ukuran dan lain-lain

Panel-panel
panel panel disini terdiri dari :
  1. panel libraby
    panel ini adalah tempat kita menampung semua jenis animasi, gambar, lagu, movie clip, dan lain sebagainya
  2. Panel Color Mixer
    Panel ini berguna untuk mengatur warna di dalam flash
  3. Panel align, info, transform
    panel ini berguna untuk mengatur bentuk, letak dan posisi dari objek di dalam flash

AREA BEKERJA PADA FLASH




Menu Bar
adalah kumpulan menu-menu yang ada pada Flash 8
Timeline
jendela panel yang digunakan untuk mengelompokkan dan mengatur isi atau gerak sebuah movie atau simbol, panel time line ini berisi:
  1. scene
    merupakan tempat berbagai kejadiandi dalam stage
  2. layer
    merupakan tempat dimana kita menampung objek dalam satu scene
  3. frame
    merupakan tempat kita mengatur animasi bagian perbagian yang di kelompokan dalam sebuah layer

Stage
adalah area putih dimana kita bekerja dengan objek di dalam flash

Nama file
merupakan tempat dimana nama dari file yang kita buat dicantumkan untuk lebih memudahkan apabila kita bekerja dengan file yang banyak

Tools
adalah alat-alat yang ada di dalam flash dan yang akan kita gunakan untuk bekerja dengan objek, untuk lebih detailnya lihat gambar.


Zoom
merupakan option dimana kita mengatur besar kecilnya stage atau area kerja kita

Panel action
adalah tempat kita menuliskan script/coding/actions

Properties
adalah panel dimana kita mengatur objek yang kita gunakan untuk bekerja, baik mengatur teks jika kita ekerja dengan teks, warna, ukuran dan lain-lain

Panel-panel
panel panel disini terdiri dari :
  1. panel libraby
    panel ini adalah tempat kita menampung semua jenis animasi, gambar, lagu, movie clip, dan lain sebagainya
  2. Panel Color Mixer
    Panel ini berguna untuk mengatur warna di dalam flash
  3. Panel align, info, transform
    panel ini berguna untuk mengatur bentuk, letak dan posisi dari objek di dalam flash

ANIMASI MOTION SHAPE

Animasi jenis ini adalah animasi dimana kita dapat merubah bentuk atau memecah bentuk dari objek yang kita animasikan.

Membuat animasi Motion Shape

Disini akan ditunjukkan bagaimana carapembuatan animasi Motion Shape
  1. Buka file baru atau Ctrl+N
  2. Pada drame pertama kita buat sebuah objek lingkaran dengan menggunakan Oval Tool.
  3. Kemudian pada frame 20 buatlah sebuah keyframe.
  4. Setelah itu pada frame 20 yang telah kita buat sebuah key frame, kita hapus dengan cara klik frame 20 kemudian tekan Delete pada keyboard.
  5. Setelah keyframenya kosong kita buat sebuah objek persegi pada frame 20 tersebut.

  6. Klik frame 1 kemudian buka panel properties, pada pilihan animasi tween pilih shape.

  7. Kemudian tekan Enter untuk melihat hasilnya