Tuesday, November 10, 2015

Praktikum 10 Remake "One Little Finger" by Super Simple Song Finishing

1. Tujuan
tujuan pada praktikum ini adalah untuk lebih memahami tentang cara membuat animasi dengan motion tween.

2. Alat dan Bahan

Adobe Flash Profesional CS3

3. Dasar Teori

Mengenal lebih dalam mengenai Motion Tween dan Shape Tween, Pada program flash terdapat 2 (dua) jenis animasi yaitu Animasi Motion Tween dan Animasi Shape Tween.

1.Motion Tween
Motion Tween adalah pergerakan suatu objek dari keadaan awal sampai keadaan akhir. sebagai contoh anda ingin menggerakan suatu bola dari kiri ke kanan, dengan adanya motion tween kita bisa menggunakan sedikit objek tanpa harus membuat banyak objek, 

langkah - langkah untuk membuat classic tween sederhana adalah sebagai berikut :
1 . buka adobe flash cs3 professional . 
2 . buat sebuah objek 
3 . blok objek tersebut , tekan f8 lalu ubah dari movie clip menjadi symbol 
4 . double klik pada objek tersebut 
5 . pada frame yg ke 30 insert keyframe 
6 . ubah letak objek tersebut , bila perlu ubah warna objek tersebut . 
7 . pada frame yang ke 15 klik kanan , classic tween 
8 . jalankanlah animasi tersebut . animasi objek berubah bentuk dan warna sudah jadi dengan menggunakan classic tween  

2.Shape Tween
Shape Tween adalah perubahan bentuk dari suatu objek ke objek lain. untuk Shape Tween objek yang dianimasikan harus berjenis Shape, untuk ukuran file yang dihasilkan Shape Tween lebih besar dibandingkan motion Tween 

 Langkah - langkah untuk membuat animasi sederhana dengan menggunakan shape tween adalah : 
1 . buka adobe flash cs3 professional 
2 . buat sebuah objek 
3 . blok objek tersebut , tekan f8 lalu ubah dari movie clip menjadi symbol 
4 . double klik pada objek tersebut 
5 . pada frame yg ke 30 insert keyframe 
6 . ubah letak dan bentuk serta warna dari objek tersebut . 
7 . pada frame yang ke 15 klik kanan ,shape tween 
8 . jalankanlah animasi tersebut . animasi objek berubah bentuk dan warna sudah jadi dengan 
menggunkan classic tween  



4. Tugas Praktikum

Meniru video animasi one little finger semirip mungkin.

5. Hasil Praktikum


    6. Kesimpulan 

     pada adobe flash ada dua jenis motion yaitu motion tween dan motion shape yang keduanya memilik cara yang hampir sama untuk membuatnya dan fungsinya juga hampir sama. Motion Tween berfungsi untuk menggerakan suatu objek yang bergerak dari awal sampai akhir. Dan amotion shape digunakan untuk menggerakan objek yang berbentuk shape.


    Sunday, October 25, 2015

    Praktikum 8 Remake "One Little Finger" by Super Simple Song Part 2

    1. Tujuan
    tujuan pada praktikum ini adalah untuk lebih memahami tentang cara membuat animasi dengan motion tween.

    2. Alat dan Bahan

    Adobe Flash Profesional CS3

    3. Dasar Teori

    Mengenal lebih dalam mengenai Motion Tween dan Shape Tween, Pada program flash terdapat 2 (dua) jenis animasi yaitu Animasi Motion Tween dan Animasi Shape Tween.

    1.Motion Tween
    Motion Tween adalah pergerakan suatu objek dari keadaan awal sampai keadaan akhir. sebagai contoh anda ingin menggerakan suatu bola dari kiri ke kanan, dengan adanya motion tween kita bisa menggunakan sedikit objek tanpa harus membuat banyak objek, 

    langkah - langkah untuk membuat classic tween sederhana adalah sebagai berikut :
    1 . buka adobe flash cs3 professional . 
    2 . buat sebuah objek 
    3 . blok objek tersebut , tekan f8 lalu ubah dari movie clip menjadi symbol 
    4 . double klik pada objek tersebut 
    5 . pada frame yg ke 30 insert keyframe 
    6 . ubah letak objek tersebut , bila perlu ubah warna objek tersebut . 
    7 . pada frame yang ke 15 klik kanan , classic tween 
    8 . jalankanlah animasi tersebut . animasi objek berubah bentuk dan warna sudah jadi dengan menggunakan classic tween  

    2.Shape Tween
    Shape Tween adalah perubahan bentuk dari suatu objek ke objek lain. untuk Shape Tween objek yang dianimasikan harus berjenis Shape, untuk ukuran file yang dihasilkan Shape Tween lebih besar dibandingkan motion Tween 

     Langkah - langkah untuk membuat animasi sederhana dengan menggunakan shape tween adalah : 
    1 . buka adobe flash cs3 professional 
    2 . buat sebuah objek 
    3 . blok objek tersebut , tekan f8 lalu ubah dari movie clip menjadi symbol 
    4 . double klik pada objek tersebut 
    5 . pada frame yg ke 30 insert keyframe 
    6 . ubah letak dan bentuk serta warna dari objek tersebut . 
    7 . pada frame yang ke 15 klik kanan ,shape tween 
    8 . jalankanlah animasi tersebut . animasi objek berubah bentuk dan warna sudah jadi dengan 
    menggunkan classic tween  



    4. Tugas Praktikum

    Meniru video animasi one little finger semirip mungkin.

    5. Hasil Praktikum



      6. Kesimpulan 

       pada adobe flash ada dua jenis motion yaitu motion tween dan motion shape yang keduanya memilik cara yang hampir sama untuk membuatnya dan fungsinya juga hampir sama. Motion Tween berfungsi untuk menggerakan suatu objek yang bergerak dari awal sampai akhir. Dan amotion shape digunakan untuk menggerakan objek yang berbentuk shape.


      Tuesday, October 13, 2015

      Praktikum 7 Remake "One Little Finger" by Super Simple Song Part 1

      1. Tujuan
      tujuan pada praktikum ini adalah untuk lebih memahami tentang cara membuat animasi dengan motion tween.

      2. Alat dan Bahan

      Adobe Flash Profesional CS3

      3. Dasar Teori

      Mengenal lebih dalam mengenai Motion Tween dan Shape Tween, Pada program flash terdapat 2 (dua) jenis animasi yaitu Animasi Motion Tween dan Animasi Shape Tween.

      1.Motion Tween
      Motion Tween adalah pergerakan suatu objek dari keadaan awal sampai keadaan akhir. sebagai contoh anda ingin menggerakan suatu bola dari kiri ke kanan, dengan adanya motion tween kita bisa menggunakan sedikit objek tanpa harus membuat banyak objek, 

      langkah - langkah untuk membuat classic tween sederhana adalah sebagai berikut :
      1 . buka adobe flash cs3 professional . 
      2 . buat sebuah objek 
      3 . blok objek tersebut , tekan f8 lalu ubah dari movie clip menjadi symbol 
      4 . double klik pada objek tersebut 
      5 . pada frame yg ke 30 insert keyframe 
      6 . ubah letak objek tersebut , bila perlu ubah warna objek tersebut . 
      7 . pada frame yang ke 15 klik kanan , classic tween 
      8 . jalankanlah animasi tersebut . animasi objek berubah bentuk dan warna sudah jadi dengan menggunakan classic tween  

      2.Shape Tween
      Shape Tween adalah perubahan bentuk dari suatu objek ke objek lain. untuk Shape Tween objek yang dianimasikan harus berjenis Shape, untuk ukuran file yang dihasilkan Shape Tween lebih besar dibandingkan motion Tween 

       Langkah - langkah untuk membuat animasi sederhana dengan menggunakan shape tween adalah : 
      1 . buka adobe flash cs3 professional 
      2 . buat sebuah objek 
      3 . blok objek tersebut , tekan f8 lalu ubah dari movie clip menjadi symbol 
      4 . double klik pada objek tersebut 
      5 . pada frame yg ke 30 insert keyframe 
      6 . ubah letak dan bentuk serta warna dari objek tersebut . 
      7 . pada frame yang ke 15 klik kanan ,shape tween 
      8 . jalankanlah animasi tersebut . animasi objek berubah bentuk dan warna sudah jadi dengan 
      menggunkan classic tween  



      4. Tugas Praktikum

      Meniru video animasi one little finger semirip mungkin.

      5. Hasil Praktikum


      6. Kesimpulan 

       pada adobe flash ada dua jenis motion yaitu motion tween dan motion shape yang keduanya memilik cara yang hampir sama untuk membuatnya dan fungsinya juga hampir sama. Motion Tween berfungsi untuk menggerakan suatu objek yang bergerak dari awal sampai akhir. Dan amotion shape digunakan untuk menggerakan objek yang berbentuk shape.





      Friday, October 9, 2015

      Praktikum 6 Walk Cycle Using Tween

      1.      Tujuan
      Tujuan praktikum ini adalah untuk mengeteahui cara-cara dan fungsi-fungsi dari motion tween serta untuk mempelajari menggerakan suatu karakter dengan motion tween.
      2.      Alat dan Bahan

      Adobe CS3 Porfesional
      3.      Dasar teori
      Tweened animation merupakan suatu animasi yang memanfaatkan fasilitas motion dari Flash MX. Untuk membuat suatu animasi motion sangatlah mudah karena Anda tinggal menentukan panjang lama animasi tersebut dijalankan lalu menggerakkan dari satu sisi ke sisi lainnya. Biasanya objek yang telah di tween pada timeline akan terlihat tanda panah. Untuk menggunakan animasi tween tersebut maka ikutilah petunjuk berikut ini.
      a.       Gambar objek (misal: rectangle tool) pada stage, kemudian buatlah objek tersebut menjadi satu group (Ctrl+G).
      b.      Setelah itu klik kanan pada objek lalu pilih Distribute to layers. Kemudian beri nama layer tersebut dengan nama kotak dengan cara double click item tersebut di timeline.
      c.       Melalui timeline tentukanlah panjang animasi tersebut berjalan dengan cara klik kanan pada frame ke 15 lalu pilih insert keyframe.
      d.      Kemudian klik kanan pada frame yang telah terbentuk. Lalu pilih Create Motion Tween
      e.       Anda gerakkan objek yang Anda buat dari tempat yang semula ke tempat yang lain. Jika objek sudah Anda pindahkan.
      f.       Kemudian tekan enter untuk menjalankan animasi yang Anda disain. Maka objek yang Anda buat tadi akan bergerak dari sisi awal menuju ke sisi yang lainnya secara otomatis.

      Empat konsep dasar untuk membuat walk cycle motion yaitu:

      1.      Arcs
      Pada animasi, sistem pergerakan tubuh pada manusia atau mahluk hidup yang lainnya bergerak mengikuti polar/jalur(maya) yang disebut arcs. Bola yang dilempar tidak akan pernah lurus, pasti ada sedikit pergesern. Hal ini memungkinkan objek bergerak dengan smooth, lebih realistis dan tidak berkesan rekayasa computer. Sebagai contoh arcs ditunjukan pada lintasan tangan saat melemper bola dan lintasan gerak di udara.

      2.      Timing
      Timing menentukan apakah gerakan tersebut alami atau tidak. Misalkan gerakan orang berjalan terlalu lambat, sedangkan latar belakang terlalu cepat bergerak. Atau bola yang memantul ke tanah, tetapi sebelum memantul efek suara pantulan sudah terdengar lebih dahulu. Jadi timing ini lebih kepada sinkronisasi antara elemen-elemen animasi. Jadi timing adalah tentang penentuan waktu kapan sebuah gerakan harus dilakukan, sementara spacing adalah tentang penentuan percepatan dan perlambatan dari bermacam-macam jenis gerak. Contoh timing: menentukan pada detik ke berapa sebuah objek/karakter berjalan sampai ke tujuan atau berhenti. Contoh spacing: menentukan kepadatan gambar (yang pada animasi akan berpengaruh pada kecepatan gerak)

      3.      Pose
      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

      4.      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.

      4.      Tugas Praktikum

      Buatlah walk cycle dari naruto dengan menggunakan bantuan Classic Tween

      5.      Hasil Praktikum
      6.      Kesimpulan

      Untuk membuat walk cycle animsi di adobe flash tidak hanya dapat menggunakan frame by frame tetapi juga dapat menggunakan motion tween. Untuk membuat animasi yang bergerak minimal yang harus dipahami ada empat konsep yaitu pose, timing, inbetween, dan arcs.

      7.      Referensi 

      https://infongajar.files.wordpress.com/2013/12/animasi-part-1.pdf

      mohhasbias"membuat animasi menggunakan adobe flash profesioanal" http://www.mohhasbias.com/category/mata-kuliah/animasi2d-2015/

      stevannovaphotoworks "animasi berbasis timeline" https://stevannovaphotoworks.wordpress.com/

      Monday, September 28, 2015

      Praktikum 5 Membuat karakter Berjalan

      1. Tujuan

      Membuat animasi karakter berjalan dengan baik dan sesuai dengan yang asli.

      2. Bahan

      Tanpa Bahan

      3. Alat

      Adhobe Flash Profesional cs3

      4. 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
      5. Hasil Praktikum


      6. Kesimpulan

      Untuk membuat animasi berjalan kita menggunakan tiga dasar yaitu pose, timing dan inbetween. Agar karakter yang kita buat bisa berjalan dengan baik kita gunakan cara seperti membuat walkcycle pada stikman.

      7. Referensi

      http://webneel.com/walk-cycle-animation

      (Moh Hasbi, Prak 3 Membuat Walk Cycle Menggunakan Keyframe) http://www.mohhasbias.com/category/mata-kuliah/animasi2d-2015/

      Monday, September 14, 2015

      Praktikum 3 Membuat Walk Cycle menggunakan Keyframe

      1. Tujuuan
      Ttujuan membuat dan memahami cara membuat walk cycle menggunakan adobe Flash

      2. Bahan
      Tanpa Bahan

      3. Alat

      Adobe Flash CS 3

      4. Dasar Teori

      Salah satu cara memperhalus animasi adalah dengan memperhatikan arcs-nya. Arcs yang dimaksud adalah 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. 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
      Membuat stikman berjalan dengan halus dan normal, tidak seperti menari dan tidak seperti orang senam.

      6. Hasil Praktikum



      7. Kesimpulan
      untuk menghasilkan animasi berjalan dengan lebih halus dan lebih nyata, maka kita harus menggunakan dan membuat banyak frame. kita harus mengulangi setiap gerakan dengan cara memperbanyak key frame. semakin banyak frame yang kita buat maka hasil animasi kita akan semakin halus. selain menggunakan banyak frame kita juga harus memperhatikan ketepatan waktunya juga.

      8. Referensi

      (Edu Soft, " resume praktikum multimedia 2 flash " http://edu-softs.blogspot.co.id/2013/03/resume-praktikum-multimedia-2-flash.html )
       (Moh.Hasbi, Prak 3 – Membuat Walk Cycle menggunakan Keyframe) http://www.mohhasbias.com/


      Monday, September 7, 2015

      Praktikum 2 Menbuat Stickman Berjalan


      1. Tujuan

      Mengetahui dan memahami pembuatan animasi sederhana dengan membuat stickman sederhana.

      2. 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

      Alat :

      Adhobe Flash Profesional CS 3

      4. Tugas Praktikum 

      a. Membuat Stickman
      b. Membuat Stickaman Berjalan dari kiri kekanan atau dari kanan kekiri

      5. Hasil Praktikum


      6. Kesimpulan

      Dari praktikum yang telah dilakukan dapat disimpulkan bahwa untuk membuat animasi sederhana kita harus membuat karakter terlebih dahulu kemudian menentukan key frame agar karakter yang akan kita buat bisa berjalan maka kita tambahkan titik yang kemudian sebagai titik pusat untuk acuan agar karakter bisa digerakan. setelah itu kita juga perlu mengconvert menjadi file movie agar bisa kita lihat tanpa harus melalui adobe flash lagi.

      7. Referensi



      http://www.google.co.id/imgres?imgurl=https://stevannovaphotoworks.files.wordpress.com/2013/02/4-015fcbefbd.jpg&imgrefurl=https://stevannovaphotoworks.wordpress.com/category/tugas-kuliah-animasi-dasar/&h=209&w=632&tbnid=FRDe50zHpmsgWM:&docid=VIOtaR71V8ex2M&ei=2APwVe_EOs6iugSllL_oCw&tbm=isch&ved=0CB4QMygEMARqFQoTCO-Q1bXZ6ccCFU6RjgodJcoPvQ

       (Moh.Hasbi, Prak 3 – Membuat Walk Cycle menggunakan Keyframe) http://www.mohhasbias.com/