Kamis, 17 September 2015

Prak 3 - Memperhalus Walk Cycle Menggunakan Konsep Arcs


1. Tujuan

Memperhalus walk cycle menggunakan konsep Arcs
2. Bahan
Sebuah walk cycle yang memiliki kriteria berikut:
1. Pose lengkap (contact, down, passing, up)
2. Timing tepat ( 8 frame atau 16 frame )
3. Inbetween antar pose (seluruh frame terisi keyframe)
3. Alat
Adobe Flash Professional CS5.5
4. Dasar Teori
Apabila ingin membuat pergerakan animasi lebih halus selain melihat tiga konsep seperti pada praktikum sebelumnya (Pose, Timing, dan Inbetween) terdapat satu lagi yaitu dengan memeprhatikan Arcs. Arcs yang dimaksud adalah garis lengkungan lintasan pergerakan. Untuk gerakan walk cycle, arcs yang muncul lebih dari satu macam. Arcs yang perlu diperhatikan pada walk cycle adalah arcs dari titik penting sebuah stickman. Ada banyak titik penting yang perlu di-cek arcs-nya. Selain pinggul, salah satunya adalah titik tumit. Berikut adalah contoh cara mengecek arcs yang dihasilkan dari pergerakan tumit.

Cara mengecek arcs bisa dimulai dengan menandai titik pentingnya. Pada video diatas, titik tumit ditandai dengan titik warna hijau. Setelah seluruh titik tumit pada seluruh frame ditandai, maka kita akan dapat kumpulan titik sebagai berikut


tanda-titik-tumit
titik penanda posisi tumit pada setiap frame

jika titik-titik hijau tersebut dihubungkan, maka akan bisa dievaluasi apakah animasinya sudah halus atau belum. jika garis yang dihasilkan tidak berbentuk kurva mulus, maka animasinya termasuk kurang halus.
berikut adalah contoh titik-titik yang menghasilkan arcs yang kurang mulus. perhatikan pada daerah yang dilingkari biru. jika daerah ini dibetulkan, yaitu dengan menggeser posisi tumit pada keyframe tersebut, maka akan diperoleh hasil animasi yang lebih halus.

broken-arcs
Contoh titik yang merusak arcs

5. Tugas Praktikum

Perbaiki arcs pada titik:
1. pinggul
2. tumit

6. Hasil Praktikum



7. Kesimpulan Praktikum

Jika memperhatikan konsep dasar sederhana dalam animasi, pergerakan setiap objek atau gambar yang berjalan akan terlihat lebih natural dan menarik. Hal ini dapat dijadikan sebagai dasar untuk membuat animasi yang lain.

8. Referensi

www.mohhasbias.com
Teori mata kuliah Animasi 2D
http://galleryhip.com/stick-figure-walking-cycle.html

Kamis, 10 September 2015

Praktikum 2 - Membuat Animasi Stickman Menggunakan Adobe Flash Professional

1. Tujuan
Membuat animasi walking cycle berupa stickman dengan menggunakna adobe flash professional

2. Alat
Komputer dengan adanya instalasi Adobe Flash CS5.5
Mouse

3. Dasar Teori
Ada beberapa dasar teori yang bisa digunakan sebagai petunjuk (guidance) dalam pembuatan stickman berjalan, antara lain
  1. Pose
  2. Timing
  3. Inbetween

1. Pose
Berikut adalah pose-pose yang perlu ada dalam sebuah walk. Seringkali disebut dengan walk cycle. Dinamakan cycle karena pose ini dipilih sedemikian rupa sehingga pose terakhir identik dengan pose awal sehingga bisa disusun menjadi sebuah siklus tanpa henti.
walk-cycle-basic
Walk Cycle Poses Collection
Perhatikan bahwa ada 4 pose yang diperlukan, yaitu contact, down, passing, dan up.
Untuk mempermudah proses belajar, ada baiknya jika fokus pada pergerakan kaki dahulu. kemudian baru dilanjut bagian tubuh yang lain pada kesempatan berikutnya.

2. Timing

Timing yang dimaksud adalah jumlah frame yang diperlukan untuk menghasilkan animasi yang diinginkan. Timing juga berhubungan dengan durasi animasi yang diinginkan, apakah cepat atau lambat. Yang perlu diingat, untuk memperlambat animasi, tidak dilakukan dengan cara mengubah setting FPS, akan tetapi dengan cara mengubah jumlah frame yang dibuat. Dalam animasi baik 2D dan 3D, standar FPS adalah 24.
Untuk walk cycle, ada beberapa timing yang bisa digunakan tergantung jenis walk yang diinginkan
normal walk: 12 frame (0.5 detik)
cartoon walk: 8 frame
Timing yang relatif mudah untuk keperluan belajar adalah 8 frame. Dengan spesifikasi berikut,
pose contact –> frame 1
pose down –> frame 3
pose passing –> frame 5
pose up –> frame 7
pose contact –> frame 9
berikut adalah susunan keyframe pada timeline
basic-timing
timing untuk 4 pose walk cycle
berikut adalah tampilan onion skin dari 4 pose dasar walk cycle
walk-cycle-onion-skin
4 basic walk cycle in onion skin

3. Inbetween

4 pose hanya bisa untuk 4 keyframe. Sedangkan untuk walk cycle dengan timing cartoon, perlu 8 frame. Sehingga perlu 4 tambahan frame atau 1 tambahan perantara frame yang biasa disebut dengan inbetween. Proses pembuatan inbetween sangat sederhana.
  1. Cukup aktifkan onion sehingga bisa tampak keyframe frame sebelumnya dan frame setelahnya. Sebagai contoh, berikut adalah kondisi frame 2 saat masih baru ditambahkan empty keyframe dengan mode onion skin aktif.
    onion-skin
    onion skin
  2. Tambahkan gambar yang mewakili pertengahan dari kedua frame tersebut. Berikut adalah contoh hasil penambahan inbetween untuk keyframe pada frame 2.
    hasil-inbetween
    hasil proses inbetween
  3. Ulangi langkah tersebut untuk menambahkan keyframe pada frame 4, 6, dan 8. Sehingga diperoleh keyframe untuk masin-masing frame seperti berikut ini
    1-frame-1-keyframe
    1 frame 1 keyframe
  4. Tugas Praktikum
  1. Buatlah sebuah stickman. Bisa menggunakan line tool dengan ketebalan stroke 8
Animasikan stickman tersebut sehingga terlihat berjalan

5. Hasil Praktikum
6. Kesimpulan
Mengetahui cara membuat stickman walking dengan pergerakan yang halus dengan menggunakan 3 prinsip

7. Referensi
mohhasbias.com

Kamis, 03 September 2015

Praktikum 1 - Mengenal Tampilan Adobe Flash Professional CS 5.5

1. Tujuan
Mengetahui nama dan fungsi masing-masing window yang terdapat pada tampilan awal

2. Dasar Teori
Animasi merupakan salah satu cabang multimedia yang digemari karena pada dasarnya pembuatan animasi sangat menyenangkan. Mulai dari menggambar, memberikan warna dan menggerakkan. Proses pembuatannya juga memerlukan software tertentu yang dapat digunakan animasi slaah satunya adalah Adobe Flash. Disini saya menggunakan adobe flash cs 5.5. Sebelumnya sekilas tentang Flash adalah sebagai berikut. Adobe Flash (dahulu bernama Macromedia Flash) adalah salah satu perangkat lunak komputer yang merupakan produk unggulan Adobe Systems. Adobe Flash digunakan untuk membuat gambar vektor maupun animasi gambar tersebut. Berkas yang dihasilkan dari perangkat lunak ini mempunyaifile extension .swf dan dapat diputar di penjelajah web yang telah dipasangi Adobe Flash Player. Flash menggunakan bahasa pemrogramman bernama ActionScript yang muncul pertama kalinya pada Flash 5.

3. Tugas Praktikum
Identifikasi masing-masing bagian user interface berikut
adobe-flash-cs5.5
Tampilan Adobe Flash Professional CS5.5
4. Hasil Praktikum

Penjelasan dari gambar diatas adalah sebgaia berikut :
1.      Untitled
Merupakan nama file atau lembar kerja yang sedang kita kerjakan. Nama ini dapat diubah ketika akan menyimpan hasil kerja. Dan setelah menyimpan hasil kerja, secara otomatis nama tersebut akan berubah.
2.      Workspace
Digunakan untuk mengatur tampilan jendela-jendela yang ditampilkan pada lembar kerja. Disini kita juga dapat memilih beberapa jenis yang sudah tersedia untuk mengatur tampilan yang uncul pada lembar kerja.
3.      Tiga ikon ini masing-masing berfungsi sebagai
Scene              : digunakan untuk kembali ke scene (lembar kerja pertama yang kita kerjakan)
Symbol           : digunakan untuk menampilkan objek di stage secara lebih besar untuk melakukan pengeditan terhadap objek atau gambar
Zoom option   : digunakan untuk mengatur seberapa besar tampilan stage yang kita inginkan
4.      Properties
Panel Properties akan berubah tampilan dan fungsinya mengikuti bagian mana yang sedang diaktifkan. Misalnya Kita sedang mengaktifkan Line tool, maka yang muncul pada jendela properties adalah fungsi-fungsi untuk mengatur line/garis seperti besarnya garis, bentuk garis, dan warna garis.

Library
Panel Library mempunyai fungsi sebagai perpustakaan simbol/media yang digunakan dalam animasi yang sedang dibuat. Simbol merupakan kumpulan gambar baik movie, tombol (button), sound, dan gambar statis (graphic).

5.      Stage
Merupakan area kerja yang kita gunakan dalam proses pembuatan animasi yang biasa disebut layar atau panggung. Disini kita dapat membuat objek, text atau karakter ng ingin dianimasikan.
6.      Panel yang berisi
Colors             : digunakan untuk memberikan warna pada objek maupun teks (bisa diatur untuk membuat gradasi warna)
Swatches        : digunakan untuk memebrikan warna pada objek maupun teks (hanya bisa dengan satu warna dan radial gradient) *radial gradient menggunakan warna yang sudah tersedia, tidak dapat diatur sesuai keinginan
Align               : digunakan untuk mengatur format teks
Info                 : digunakan untuk mencari informasi terkait detail objek terpilih seperti posisi, ketinggian, lebar, maupun detail warna
Transform     : digunakan untuk editing secara presisi karena melibatkan ukuran
Code snippets            : digunakan untuk memberikan efek
Components   : diguanakan untuk memebrikan perintah berupa tombol, slider, dll
Motion Preset : digunakan untuk memebrikan efek transisi
7.      Fungsi Document Properties adalah untuk melakukan pengaturan ukuran layar, warna background, framerate, dan dimensi dari animasi yang akan dibuat. Untuk memanggil kotak dialog Document Properties, pilih jendela Properties di bawah layar, kemudian pilih tombol Size
8.      Toolbar
Toolbar merupakan panel berisi berbagai macam tool. Tool-tool tersebut dikelompokkan menjadi empat kelompok :
a.      Tools         : berisi tombol-tombol untuk membuat dan mengedit gambar
b.      View         : untuk mengatur tampilan lembar kerja
c.       Colors        : menentukan warna yang dipakai saat mengedit
d.      Option       : alat bantu lain untuk mengedit gambar
9.      Timeline dan Layer
Timeline atau garis waktu merupakan komponen yang digunakan untuk mengatur atau mengontrol jalannya animasi. Timeline terdiri dari beberapa layer. Layer digunakan untuk menempatkan satu atau beberapa objek dalam stage agar dapat diolah dengan objek lain. Setiap layer terdiri dari frame-frame yang digunakan untuk mengatur kecepatan animasi. Semakin panjang frame dalam layer, maka semakin lama animasi akan berjalan.

5. Kesimpulan
Mengetahui lebih dalam tentang adobe flash karena sbelumnya terbiasa dengan menggunakan macromedia flash. setelah praktikum ini, ternayta terdapat ebberapa perbedaan.

6. Referensi
https://namiraputri.wordpress.com/2011/04/03/flash-cs3-professional/
https://id.wikipedia.org/wiki/Adobe_Flash