| 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

Animasi Roller Coaster (Motion Guide 3)

Pada tutorial ini akan dijelaskan cara membuat animasi roller coaster yang bergerak mengikuti sebuah pola lintasan. Coba perhatikan output dari tutorial ini


Get Adobe Flash player

Pada animasi diatas terlihat bahwa terdapat animasi 5 gerbong kereta. Bagi yang belum pernah membuat animasi seperti ini sebelumnya, akan sering berpendapat jika animasi ini dibuat menggunakan teknik Motion Guide sebanyak 5 kali. Atau dengan kata lain akan ada 5 buah animasi dengan 5 buah guide.





Sebenarnya animasi ini dibuat hanya dengan menggunakan 1 buah animasi Motion Guide di dalam sebuah MovieClip yang diduplikasi sebanyak 5 kali, dan dilakukan perubahan waktu mulai. Untuk lebih jelasnya perhatikan langkah-langkah berikut :

  1. Buatlah sebuah project baru dengan memilih menu File > New Pilih opsi Action Script 3. Atur ukuran stage 800 x 600 px.
  2. Selanjutnya klik menu Insert > New Symbol kemudian ketikan nama animasi rc dan type MovieClip. Pada tahapan ini kita akan membuat sebuah movieclip yang di dalamnya terdapat sebuah animasi gerbong roller coaster.
    tutorial animasi by wandah_w
  3. Langkah 2 secara otomatis akan membawa stage ke Mode Edit MovieClip animasi rc. Artinya apapun yang akan kita lakukan di stage, hanya akan berpengaruh pada movieclip animasi rc saja.

    Selanjutnya buatlah sebuah gambar gerbong, atau anda bisa mengimport sebuah bitmap ke stage.
    tutorial animasi by wandah_w
  4. Seleksi gambar tersebut kemudian Convert to Symbol menjadi MovieClip dengan nama gerbong
    tutorial animasi by wandah_w
  5. Untuk mempermudah kita dalam membuat animasi gerakan roller coaster, aktifkan Ruler dengan cara klik kanan stage, kemudian pilih Rulers, maka angka kordinat akan muncul di atas dan di samping kiri stage.
    tutorial animasi by wandah_w
  6. Drag Garis Bantu, dari ruler sebelah atas dan samping sebanyak 4 kali yaitu untuk batas-batas stage ( X = 0, X = 800, Y = 0, Y = 600), kemudian letakkan gerbong di sebelah kanan luar (disini letak start dari animasi gerbong). Maksud dari penarikan garis bantu adalah untuk mempermudah kita dalam mengatur animasi terhadap ukuran stage. Dengan garis bantu ini kita dapat mengetahui apakah objek berada di area stage atau di luar.
    tutorial animasi by wandah_w
  7. Selanjutnya klik Frame 200 Layer 1 kemudian tambahkan KeyFrame
  8. Tambahkan Motion Guide Layer kemudian dengan menggunakan Pencil Tool/Pen Tool buatlah sebuah pola gerakan gerbong roller coaster. TIPS : pastikan ujung awal dan akhir lintasan berada di luar stage.
    tutorial animasi by wandah_w
  9. Drag Movieclip gerbong di frame 1 ke ujung awal lintasan dan drag Movieclip gerbong di frame 200 ke ujung akhir lintasan. Selanjutnya tambahkan Motion Tween / Classic Motion dan opsi Orient to Path sehingga terbentuk animasi gerakan gerbong mengikuti pola yang anda buat
    tutorial animasi by wandah_w
  10. Kembali ke scene utama dengan menekan Ctrl+E.

    Selanjutnya buka panel Library dengan menekan Ctrl+L atau memilih menu Window > Library. Selanjutnya drag movieclip animasi rc ke stage. Letakkan di sebelah kanan luar stage. Note : semua objek yang telah di convert menjadi symbol secara otomatis akan masuk ke dalam Library, dan dapat kita gunakan sewaktu-waktu
    tutorial animasi by wandah_w
  11. Klik kanan Frame 200 Layer 1 Selanjutnya pilih Insert Frame. Angka 200 diperoleh dari durasi movieclip animasi rc (langkah 7). Jalankan movie dengan menekan Ctrl+Enter, maka akan anda dapati sebuah animasi satu gerbong yang bergerak mengikuti pola lintasan.
    tutorial animasi by wandah_w
  12. Dari langkah ini, akan dijelaskan sebuah konsep animasi menggunakan teknik graphic sebagai berikut :

    • Movieclip adalah sebuah animasi independen. Animasi ini akan bergerak secara terus menerus apabila diletakkan di dalam sebuah keyframe. Sebuah movieclip berdurasi beberapa frame dapat muncul/dimainkan secara penuh hanya dengan menempati 1 buah keyframe.
    • Dalam stage, Movieclip hanya ditampilkan pada posisi Frame 1 saja. Animasi Movieclip baru akan terlihat jika animasi/movie sudah dijalankan dengan Ctrl+Enter. Sehingga ketika di eksport menjadi file bertipe AVI/MOV, akan terjadi kesalahan karena hanya menampilkan frame 1 dari movieclip - bukan animasi secara keseluruhan
    • Movieclip selalu dimulai dari frame 1 dan tidak dapat diatur frame awal dimulainya animasi. Kecuali diatur menggunakan kode Actionscript.
    • Berbeda dengan symbol bertipe Graphic. Symbol bertipe Graphic membutuhkan durasi frame, untuk menampilkan animasi secara penuh. Animasi graphic akan tampak di timeline tergantung dari durasi (frame) yang ada pada timeline.
    • Symbol bertipe Graphic memiliki opsi pengaturan untuk awal animasi, waktu animasi dan pemutaran ulang animasi. Sehingga dapat digunakan untuk memanipulasi waktu dari animasi yang dibuat.
    • Symbol bertipe Graphic tidak dapat diakses menggunakan kode Actionscript. Sehingga proses pengaturan animasi harus dilakukan secara manual
    • Masing-masing symbol dapat diganti type nya melalui panel Properties, sehingga kita dapat menyesuaikan dengan kebutuhan.

  13. Setelah memahami konsep di atas, klik Movieclip animasi rc Selanjutnya buka panel Properties. Ubah typenya menjadi Graphic dan pilihlah Loop agar animasi dapat berjalan secara terus menerus (Lihat Gambar)
    tutorial animasi by wandah_w
  14. Klik kanan Movieclip animasi rc selanjutnya pilih opsi Copy.
    tutorial animasi by wandah_w
  15. Klik kanan Stage selanjutnya pilih opsi Paste in Place. Kedua langkah copy-paste ini ditujukan untuk membuat gerbong ke dua. Pemilihan Paste in Place ditujukan agar letak gerbong sama persis dengan gerbong pertama.
    tutorial animasi by wandah_w
  16. Klik animasi rc gerbing ke 2 selanjutnya buka panel Properties. Pada kolom first, ketikan 8. Maka animasi gerbong ke 2 akan dimulai dari frame 8, sehingga gerbong ke 2 akan terlihat berada di depan gerbong pertama.
    tutorial animasi by wandah_w
  17. Lakukan Paste in place sekali lagi untuk membuat gerbong ke 3. Buka Properties dan pada kolom first, ketikan 15. Maka animasi gerbong ke 3 akan dimulai dari frame 15, dan gerbong ke 3 berada diposisi terdepan.

    Pemilihan angka 8 dan 15 disesuaikan dengan animasi yang anda buat. Setelah frame yang tepat anda temukan, maka start awal gerbong selanjutnya mengikuti kelipatan (jarak antara gerbong 1 dan gerbing 2).

    Dalam file tutorial ini menggunakan kelipatan 7 sehingga awal animasi (first) gerbongnya adalah 1, 8, 15, 22, 29 dan seterusnya.

    Lakukan penambahan gerbong beberapa kali, sehingga anda dapatkan seperti gambar berikut:
    tutorial animasi by wandah_w
  18. Tambahkan Layer 2 sebagai tempat untuk menggambar lintasan roller coaster.
    tutorial animasi by wandah_w
  19. Selanjutnya buatlah gambar lintasan roller coaster, anda dapat melakukan copy-paste guide pada movieclip animasi rc untuk mempermudah penggambaran lintasan. Atur posisinya dan tambahkan beberapa gambar pendukung.
    tutorial animasi by wandah_w
  20. Jalankan animasi dengan menekan Ctrl+Enter maka akan anda dapatkan animasi roller coaster.

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