REMAKE ''ONE LITTLE FINGER'' BY SUPER SIMPLE SONGS (PROGRESS 3)

Laporan Praktikum 9

Remake "One Little Finger" by Super Simple Songs (Progress 3)

TUJUAN

Menerapkan konsep Motion Tween pada animasi ''One Little Finger''

ALAT DAN BAHAN

Adobe Flash Profesional CS5.5

DASAR TEORI

Motion Tween

Motion Tween adalah pergerakan suatu objek dari keadaan awal sampai keadaan akhir.

Motion Tween sering digunakan untuk memberikan animasi berupa merubah posisi benda, merubah ukuran benda, dan merubah visibilitas, kecerahan (brightnees), kedalaman warna benda. merubah posisi benda dapat diartikan bahwa Motion Tween dapat menggerakkan benda dari titik A ke titik B.

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.

Classic Tween

Pengertian Motion Tween tidak jauh beda dengan Motion Tween, hanya saja Classic Tween digunakan untuk animasi 2D.

TUGAS PRAKTIKUM

Remake ''One Little Finger''

HASIL PRAKTIKUM

KESIMPULAN

REFERENSI

• Super Simple Songs, "One Little Finger"

• Ariska Dwi Febrina, "Pengertian Motion Tween, Shape Tween, Classic Tween, dan Masking"

REMAKE ''ONE LITTLE FINGER'' BY SUPER SIMPLE SONGS (PROGRESS 2)

Laporan Praktikum 8

Remake "One Little Finger" by Super Simple Songs (Progress 2)

TUJUAN

Menerapkan konsep Motion Tween pada animasi ''One Little Finger''

ALAT DAN BAHAN

Adobe Flash Profesional CS5.5

DASAR TEORI

Motion Tween

Motion Tween adalah pergerakan suatu objek dari keadaan awal sampai keadaan akhir.

Motion Tween sering digunakan untuk memberikan animasi berupa merubah posisi benda, merubah ukuran benda, dan merubah visibilitas, kecerahan (brightnees), kedalaman warna benda. merubah posisi benda dapat diartikan bahwa Motion Tween dapat menggerakkan benda dari titik A ke titik B.

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.

Classic Tween

Pengertian Motion Tween tidak jauh beda dengan Motion Tween, hanya saja Classic Tween digunakan untuk animasi 2D.

TUGAS PRAKTIKUM

Remake ''One Little Finger''

HASIL PRAKTIKUM

KESIMPULAN

REFERENSI

• Super Simple Songs, "One Little Finger"

• Ariska Dwi Febrina, "Pengertian Motion Tween, Shape Tween, Classic Tween, dan Masking"

REMAKE ''ONE LITTLE FINGER'' BY SUPER SIMPLE SONGS

Laporan Praktikum 7

Remake "One Little Finger" by Super Simple Songs

TUJUAN

Menerapkan konsep Motion Tween pada animasi ''One Little Finger''

ALAT DAN BAHAN

Adobe Flash Profesional CS5.5

DASAR TEORI

Motion Tween

Motion Tween adalah pergerakan suatu objek dari keadaan awal sampai keadaan akhir.

Motion Tween sering digunakan untuk memberikan animasi berupa merubah posisi benda, merubah ukuran benda, dan merubah visibilitas, kecerahan (brightnees), kedalaman warna benda. merubah posisi benda dapat diartikan bahwa Motion Tween dapat menggerakkan benda dari titik A ke titik B.

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.

Classic Tween

Pengertian Motion Tween tidak jauh beda dengan Motion Tween, hanya saja Classic Tween digunakan untuk animasi 2D.

TUGAS PRAKTIKUM

Remake ''One Little Finger''

HASIL PRAKTIKUM

KESIMPULAN

REFERENSI

• Super Simple Songs, "One Little Finger"

• Ariska Dwi Febrina, "Pengertian Motion Tween, Shape Tween, Classic Tween, dan Masking"

MEMBUAT WALK CYCLE MENGGUNAKAN MOTION TWEEN

Laporan Praktikum 6

MEMBUAT WALK CYCLE MENGGUNAKAN MOTION TWEEN 

TUJUAN

Menerapkan walk cycle pada sebuah karakter animasi

ALAT DAN BAHAN 

Adobe Flash Profesional CS 6

DASAR TEORI

Ada beberapa dasar teori yang bisa digunakan sebagai petunjuk (guidance) dalam pembuatan stickman berjalan, antara lain

1. Pose
2. Timing
3. Inbetween
4. Arcs

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

timing untuk 4 pose walk cycle

berikut adalah tampilan onion skin dari 4 pose dasar walk cycle

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.

• 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

• Tambahkan gambar yang mewakili pertengahan dari kedua frame tersebut. Berikut adalah contoh hasil penambahan inbetween untuk keyframe pada frame 2.

hasil proses inbetween

• 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

4. Arcs

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

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.

Contoh titik yang merusak arcs

TUGAS PRAKTIKUM

Membuat walk cycle dengan menggunakan motion tween

HASIL

KESIMPULAN

Untuk menambahkan sebuah karakter pada animasi walk cyle harus diperhatikan setiap inci gerakan. Dan juga harus dilakukan dengan membuat setiap gerakan pada frame - framenya. Jangan sampai dari gerakan satu ke gerakan lain tidak sinkron. Maka dibutuhkan sebuah kesabaran serta ketelitian.

REFERENSI

Moh. Hasbi Assidiqi, "Prak 6 - Walk Cycle using Tween"

Moh. Hasbi Assidiqi, "Prak 3 - Memperhalus Walk Cycle dengan menggunakan konsep Arcs "

Moh. Hasbi Assidiqi, "Memperhalus Animasimenggunakan Arcs "

CHARACTER WALK CYCLE

Laporan Praktikum 5
CHARACTER WALK CYCLE

TUJUAN

Mengaplikasikan walk cycle pada sebuah karakter animasi

ALAT DAN BAHAN

Adobe Flash Profesional CS6

DASAR TEORI

Ada beberapa dasar teori yang bisa digunakan sebagai petunjuk (guidance) dalam pembuatan stickman berjalan, antara lain

Pose
Timing
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 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

berikut adalah tampilan onion skin dari 4 pose dasar walk cycle

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.
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
Tambahkan gambar yang mewakili pertengahan dari kedua frame tersebut. Berikut adalah
contoh hasil penambahan inbetween untuk keyframe pada frame 2.

hasil proses inbetween
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

TUGAS PRAKTIKUM

Membuat walk cycle dengan karakter animasi

HASIL

KESIMPULAN 

Untuk menambahkan sebuah karakter pada animasi walk cyle harus diperhatikan setiap inci gerakan. Dan juga harus dilakukan dengan membuat setiap gerakan pada frame - framenya. Jangan sampai dari gerakan satu ke gerakan lain tidak sinkron. Maka dibutuhkan sebuah kesabaran serta ketelitian.

REFERENSI
Terry Irawan, "Animasi Stickman dengan Adobe Flash CS3 (Latihan Animasi Frame by Frame)" 

iis sayyida, "Tutorial Flash: Membuat Animasi Berjalan"

Moh Hasbi Assidiqi "Prak 2 – Membuat Animasi Stickman Menggunakan Adobe Flash Professional"

MEMBUAT WALK CYCLE MENGGUNAKAN KEYFRAME

Laporan Praktikum 3

MEMBUAT WALK CYCLE MENGGUNAKAN KEYFRAME

TUJUAN

Memperhalus walk cycle menggunakan konsep Arc

BAHAN

1.Pose lengkap (Contact, Down, Passing, Up)

2.Timing tepat (8 frame atau 16 frame)

3.Inbetween antar pose (seluruh frame terisi keyframe)

ALAT

Adobe Flash Profesional CS6

DASAR TEORI

Ada beberapa dasar teori yang bisa digunakan sebagai petunjuk (guidance) dalam pembuatan stickman berjalan, antara lain

Pose
Timing
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 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

berikut adalah tampilan onion skin dari 4 pose dasar walk cycle

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.
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
Tambahkan gambar yang mewakili pertengahan dari kedua frame tersebut. Berikut adalah
contoh hasil penambahan inbetween untuk keyframe pada frame 2.

hasil proses inbetween
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

TUGAS PRAKTIKUM

Perbaiki Arc pada titik:

1.Pinggul

2.Tumit

HASIL PRAKTIKUM

KESIMPULAN

Bahwa untuk membuat sebuah animasi dibutuhkan ketelitian disetiap gerakan frame-framenya,agar gerakan pertama sampai berikutnya dapat sinkron.

REFERENSI

1. Richard Williams, The Animator’s Survival Kit: A Manual of Methods, Principles and Formulas for Classical, Computer, Games, Stop Motion and Internet Animators
2. Andrew, Walk Cycle Poses

MEMBUAT ANIMASI STICKMAN DI ADOBE FLASH

Laporan Praktikum 2

MEMBUAT ANIMASI STICKMAN DI ADOBE FLASH

TUJUAN

Untuk mengenal cara membuat animasi stickman berjalan menggunakan Adobe Flash Profesional CS6

ALAT DAN BAHAN
Adobe Flash Profesional CS6

DASAR TEORI

Adobe Flash merupakan sebuah program yang didesain khusus oleh Adobe dan program aplikasi standar authoring tool professional yang digunakan untuk membuat animasi dan bitmap yang sangat menarik untuk keperluan pembangunan situs web yang interaktif dan dinamis. Flash didesain dengan kemampuan untuk membuat animasi 2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya. Selain itu aplikasi ini juga dapat digunakan untuk membuat animasi logo, movie, game, pembuatan navigasi pada situs web, tombol animasi, banner, menu interaktif, interaktif form isian, e-card, screen saver dan pembuatan aplikasi-aplikasi web lainnya. Dalam Flash, terdapat teknik-teknik membuat animasi, fasilitas action script, filter, custom easing dan dapat memasukkan video lengkap dengan fasilitas playback FLV. Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code pemograman baik yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau digunakan untuk berkomunikasi dengan program lain seperti HTML, PHP, dan Database dengan pendekatan XML, dapat dikolaborasikan dengan web, karena mempunyai keunggulan antara lain kecil dalam ukuran file outputnya.

TUGAS PRAKTIKUM
Membuat animasi stickman berjalan

HASIL PRAKTIKUM

KESIMPULAN
Bahwa untuk membuat sebuah animasi dibutuhkan ketelitian disetiap gerakan frame-framenya,agar gerakan pertama sampai berikutnya dapat sinkron.

REFERENSI
https://id.wikipedia.org/wiki/Adobe_Flash

MENGENAL TAMPILAN ADOBE FLASH PROFESIONAL

Laporan Praktikum 1

MENGENAL TAMPILAN USER INTERFACE ADOBE FLASH

TUJUAN

Pratikum pertama kali untuk mata kuliah Animasi 2D ini adalah mengenal tampilan Adobe Flash. Tujuan dari Pratikum ini adalah sebagai langkah awal untuk lebih mengenal dan dekat dengan Adobe flash agar di pratikum - pratikum selanjutnya dapat lebih lancar dan menguasai dalam menggunakan Software Adobe Flash.

DASAR TEORI

Adobe Flash merupakan sebuah program yang didesain khusus oleh Adobe dan program aplikasi standar authoring tool professional yang digunakan untuk membuat animasi dan bitmap yang sangat menarik untuk keperluan pembangunan situs web yang interaktif dan dinamis. Flash didesain dengan kemampuan untuk membuat animasi 2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya. Selain itu aplikasi ini juga dapat digunakan untuk membuat animasi logo, movie, game, pembuatan navigasi pada situs web, tombol animasi, banner, menu interaktif, interaktif form isian, e-card, screen saver dan pembuatan aplikasi-aplikasi web lainnya. Dalam Flash, terdapat teknik-teknik membuat animasi, fasilitas action script, filter, custom easing dan dapat memasukkan video lengkap dengan fasilitas playback FLV. Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code pemograman baik yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau digunakan untuk berkomunikasi dengan program lain seperti HTML, PHP, dan Database dengan pendekatan XML, dapat dikolaborasikan dengan web, karena mempunyai keunggulan antara lain kecil dalam ukuran file outputnya.

TUGAS PRAKTIKUM

Mengenal User Interface dari Adobe Flash Profesional

HASIL PRAKTIKUM

                                                                                                                                                

Bagian angka 1, Tab Title

Tab title, merupakan suatu identitas ataupun judul dari sebuah project itu sendiri, contoh diatas pada tab titlenya menggunakan "Untitled" Project.

Bagian angka 2, Essential

Merupakan suatu mode interface yang ditawarkan oleh adobe flash itu sendiri, pada sebelah kanan kata essential terdapat tanda panah yang dimana jika kita mengclick tanda tersebut akan keluar mode - mode interface yang lainya.

Bagian angka 3,  Zoom

Merupakan suatu tools yang digunakan untuk membesarkan stage itu sendiri (area kerja)

Bagian angka 4, Panel Properties & Panel Library

Dari namanya pun sudah terliahat jelas bahwa pada panel tersebut, terdapat tools, atau perintah - perintah yang dimana segala pengaturan untuk object yang ada pada worksheet.

Bagian angka 5, Stage

Merupakan suatu tempat dimana kita dapat menggoreskan segala macam tulisan, gambar, maupun object yang diinginkan.

Bagian angka, 6 Panel Tambahan

Merupakan suatu panel yang didalamnya terdapat tools yang salah satunya dapat digunakan untuk coloring gradasi object dll.

Bagian angka 7, Menu Properties

Menu properties merupakan bagian dari Panel Properties pada bagian 4 tadi. didalamnya terdapat bayak sekali tools dan settingan untuk object.

Bagian angka 8, Toolbar

Merupakan bar yang dimana terdapat kumpulan kumpulan dari tools.                             

Bagian angka 9, Timeline

Merupakan suatu panel dimana terdapat 2 bagian lagi, yaitu panel frame dan panel layer. Kegunaan dari panel frame merupakan sebagai tempat urutan - urutan frame dari sebuah motion atau animasi gerak. sedangkan untuk panel layer merupakan sebuah tempat peletakkan layer - layer.

KESIMPULAN

Pada praktikum ini saya dapat menyimpulkan bahwa software adobe flash ini digunakan untuk membuat sebuah animasi dan juga dapat digunakan untuk membuat animasi logo, movie, game, pembuatan navigasi pada web, tombol animasi, banner, menu interaktif, interaktif form isian, e-card, screen saver dan pembuatan aplikasi aplikasi web lainnya.

REFERENSI

https://id.wikipedia.org/wiki/Adobe_Flash