| Materi Matakuliah Desain Komunikasi Visual

Materi DKV

Nirmana

Nirmana Dasar

Pengertian nirmana dan elemen-elemen dasar penyusun nirmana

Grafis

Desain Efek Uang

Membuat efek tekstur untuk desain uang kertas

Grafis

Desain Poster Ilmiah PIMNAS

Prinsip desain dan contoh poster ilmiah untuk PIMNAS

Grafis

Desain Poster Ilmiah

Prinsip dasar desain poster ilmiah / Poster Riset

Presentasi

Membuat Konten Presentasi

Cara membuat konten presentasi yang baik dan efektif

Animasi

Animasi Motion Tween

Tutorial Animasi Flash dengan teknik motion tween

Animasi

Animasi Tween dengan Ease

Penambahan ease (percepatan atau perlambatan) pada animasi

Animasi

Animasi Tween dengan Rotasi

Penambahan rotasi pada animasi motion

Animasi

Animasi Motion Guide

Membuat animasi dengan gerakan mengikuti pola

Animasi

Animasi Motion Guide 2

Membuat animasi movieclip mobil bergerak melintasi bukit

Animasi

Animasi Roller Coaster

Membuat animasi roller coaster dengan menggunakan teknik graphic

Reprografis

Cetak Saring (Sablon)

Cara menyablon (cetak - saring) dan standart peralatan

Game

Animasi dalam Game

Penggunaan animasi di dalam game, dan game sebagai viral marketing animasi

Game

Potensi Pasar Game Mobile

Potensi game mobile dan strategi mengembangkan mobile games

Game

Game Making Breakdown

Breakdown proses pembuatan game, tahapan-tahapan mendesain game


Materi Selengkapnya

Motion Guide (lanjutan)

Animasi dengan menggunakan bitmap

Beberapa animator terbiasa mengolah gambar dengan menggunakan software/aplikasi grafis di luar flash seperti photoshop, Adobe Ilustrator, Gimp, Corel atau aplikasi lainya. Apabila anda lebih familiar dengan software tersebut dalam mengolah grafik, maka akan lebih mudah jika Flash hanya kita pergunakan sebagai tool untuk animasi. Flash menyediakan fitur import grafik berbagai tipe seperti JPG, PNG, GIF dan sebagainya.







Animasi Motion Guide dengan teknik Movieclip

Pada tutorial ini akan dijelaskan cara membuat animasi mobil yang bergerak melintasi bukit dengan memanfaatkan gambar siap pakai bertipe PNG, sebagai berikut:

  1. Buatlah sebuah project baru dengan memilih menu File > New Pilih opsi Action Script 3
  2. Selanjutnya klik menu File > Import > Import to Stage kemudian pilihlah 3 buah gambar (ada di dalam file sumber) yaitu body_mobil.png, roda.png dan bukit.png. Pemilihan file bertipe PNG dikarenakan file tersebut mendukung mode transparan.
  3. Setelah semua objek gambar muncul di stage, seleksi semuanya kemudian Klik kanan dan pilih Distribute to Layers. Dengan opsi tersebut, masing-masing objek akan dibuatkan layer masing-masing. (perlu diingat bahwa dalam animasi motion, 1 buah objek membutuhkan 1 keyframe khusus, sehingga dalam hal ini 1 objek membutuhkan 1 layer khusus)
    tutorial animasi by wandah_w
  4. Selanjutnya hapus roda (kita belum membutuhkannya saat ini), kemudian atur posisi body-mobil dan bukit seperti tampak pada gambar.
    tutorial animasi by wandah_w
  5. Klik kanan frame 100 layer bukit kemudian pilih Insert frame. Penambahan frame (bukan keyframe) dimaksudkan untuk memberikan jeda waktu tanpa ada perubahan apapun.
    tutorial animasi by wandah_w
  6. klik body-mobil kemudian pilih menu Modify > Convert to symbol. Ketikan mobil pada kolom nama, dan pastikan titik registrasi-nya ada di tengah.
    tutorial animasi by wandah_w
  7. Untuk menambahkan pola / guide yang akan menjadi lintasan dari gerakan mobil klik kanan frame 100 Layer body-mobil kemudian pilih Insert Keyframe,
    Kemudian klik kanan Layer body-mobil, kemudian pilih Add Motion Guide, maka sebuah layer baru akan muncul di atas layer body-mobil.
    tutorial animasi by wandah_w
  8. Klik frame 1 layer guide, kemudian dengan menggunakan Pencil Tool atau Pen Tool buatlah sebuah pola lintasan mengikuti pola bukit.
    tutorial animasi by wandah_w
  9. Selanjutnya klik movieclip mobil pada frame 1 kemudian drag ke awal lintasan, sampai menempel (agar menempel dengan baik, pastikan ikon magnet di drawing tool menyala, dan pastikan lingkaran kecil di tengah movieclip berubah menjadi lingkaran yang lebih besar). Atur rotasinya agar sesuai dengan pola lintasan.
    Dengan cara yang sama klik mobil di Frame 100 lalu drag menuju akhir lintasan, atur juga rotasi lintasannya. tutorial animasi by wandah_w
  10. Klik kanan Frame 50 Layer body-mobil kemudian pilih Create Motion Tween untuk CS3 ke bawah atau Create Classic Tween untuk CS4 ke atas. Maka timeline akan berubah menjadi berwarna biru dan bergaris, dan animasi mobil bergerak mengikuti pola akan terbentuk.
    Agar rotasi mobil mengikuti pola lintasan, klik frame 50 layer body-mobil kemudian buka panel properties dan aktifkan opsi Orient to path.
    tutorial animasi by wandah_w
  11. Menambahkan Animasi Roda

  12. Setelah animasi mobil bergerak di atas bukit terbentuk, tahapan selanjutnya adalah menambahkan animasi roda. Hal yang harus dipahami adalah roda menempel ke body-mobil sehingga bergerak bersama-sama. Selain itu terdapat 2 roda yang sama bentuk dan gerakannya. Dalam kasus tersebut kita cukup membuat 1 buah animasi roda dan kemudian menduplikatnya menjadi 2.
  13. Klik frame 1 layer body-mobil, selanjutnya double klik movieclip mobil, maka kita akan memasuki mode edit movieclip mobil. Dalam mode edit apapun yang kita lakukan terhadap objek hanya akan berpengaruh pada movieclip yang diedit. Sehingga kita tidak bisa merubah apapun yang berada di luar movieclip.
    tutorial animasi by wandah_w
  14. Buka panel Library kemudian drag grafik roda ke stage, atur posisinya (letakkan di bagian depan). Selanjutnya seleksi gambar roda tersebut dan Convert menjadi movieclip "animasi roda"
    tutorial animasi by wandah_w
  15. Dobel Klik movieclip animasi roda sehingga kita berada dalam mode edit movieclip "animasi roda"
    tutorial animasi by wandah_w
  16. Seleksi gambar roda, kemudian Convert menjadi movieclip "roda mobil"
    tutorial animasi by wandah_w
  17. Untuk membuat animasi roda berputar klik kanan frame 20 layer 1, kemudian pilih Insert Keyframe. Selanjutnya buka panel properties dan pilih CW pada bagian rotate untuk menambahkan rotasi searah jarum jam.
    tutorial animasi by wandah_w tutorial animasi by wandah_w
  18. Tekan MovieClip mobil untuk kembali ke mode edit movieclip mobil
    tutorial animasi by wandah_w
  19. Selanjutnya Copy movieclip "animasi roda" lalu paste dan atur posisinya sebagai roda belakang
    tutorial animasi by wandah_w
  20. Simpan project, kemudian jalankan animasi dengan menekan tombol Ctrl+Enter. Maka animasi mobil bergerak di atas bukit akan terbentuk.

Output


Get Adobe Flash player

File Sumber


download


Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon