Prak 15 – Animasi menggunakan Programming

1. Tujuan

Mengenal bentuk lain pembuatan animasi. Yaitu pembuatan animasi menggunakan programming.

2. Alat

Adobe Flash Professional CS6

3. Bahan

Flint Particle Engine
Download file tersebut kemudian extract. Ambil file “Flint2d_4.0.1.swc”

4. Dasar Teori

Membuat animasi bisa dilakukan dengan berbagai cara. Salah satunya dengan menggunakan programming. Salah satu bentuk programming untuk membuat animasi adalah Particle System.

5. Tugas Praktikum

1. Lakukan petunjuk praktikum yang diberikan
2. Ubah posisi dari animasi tersebut
3. Ubah warna dari animasi tersebut
4. Ubah radius dari animasi tersebut
5. Ubah posisi animasi tersebut setiap kali muncul

6. Petunjuk Praktikum

1. Buat project ActionScript 3

2. Buka action window dengan menekan tombol “actions” pada panel di sebelah kanan


3. Salin kode berikut pada “actions” window

import org.flintparticles.common.actions.*;
import org.flintparticles.common.counters.*;
import org.flintparticles.common.displayObjects.Dot;
import org.flintparticles.common.easing.Quadratic;
import org.flintparticles.common.events.EmitterEvent;
import org.flintparticles.common.initializers.*;
import org.flintparticles.twoD.actions.*;
import org.flintparticles.twoD.emitters.Emitter2D;
import org.flintparticles.twoD.initializers.*;
import org.flintparticles.twoD.renderers.*;
import org.flintparticles.twoD.zones.*;

var emitter:Emitter2D = new Emitter2D();

emitter.counter = new Blast( 700 );

emitter.addInitializer( new SharedImage( new Dot( 2 ) ) );
emitter.addInitializer( new ColorInit( 0xFFFFFF00, 0xFFFF6600 ) );
emitter.addInitializer( new Velocity( new DiscZone( new Point( 0, 0 ), 200, 120 ) ) );
emitter.addInitializer( new Lifetime( 5 ) );

emitter.addAction( new Age( Quadratic.easeIn ) );
emitter.addAction( new Move() );
emitter.addAction( new Fade() );
emitter.addAction( new Accelerate( 0, 50 ) );
emitter.addAction( new LinearDrag( 0.5 ) );

emitter.addEventListener( EmitterEvent.EMITTER_EMPTY, restart, false, 0, true );

var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 500, 400 ) );
renderer.addFilter( new BlurFilter( 2, 2, 1 ) );
renderer.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.95,0 ] ) );
renderer.addEmitter( emitter );
addChild( renderer );

emitter.x = 250;
emitter.y = 150;
emitter.start();

function restart( ev:EmitterEvent ):void
{
  Emitter2D( ev.target ).start();
}




1. Sehingga “actions” window berisi kode seperti berikut





2. Buka “ActionScript Setting”



3. Pilih tab “Library Path” klik icon “Browse to SWC”



4. Pilih file swc “Flint2d_4.0.1.swc”



5. Pastikan file swc tersebut muncul pada daftar



6. Tekan “OK” kemudian jalankan movie-nya (Test Movie, Ctrl + Enter)

7. Hasil Praktikum

1. Lakukan petunjuk praktikum yang diberikan

src="http://ximg.us/upload/1452327318.swf"

2. Ubah posisi dari animasi tersebut
3. Ubah warna dari animasi tersebut
4. Ubah radius dari animasi tersebut
5. Ubah posisi animasi tersebut setiap kali muncul

8. Kesimpulan

9. Referensi

1. Create Fireworks animation using Flint Particle Engine

Prak 14 – Shape Tween

1. Tujuan

Menguasai tool shape tween

2. Alat

Adobe Flash Profesional CS6

3. Bahan

Logomotion

4. Dasar Teori

Shape tween adalah tool yang memungkinkan penganimasian perubahan bentuk antar dua keyframe secara otomatis

5. Tugas Praktikum

Buatlah tiruan dari animasi berikut

6. Petunjuk Praktikum

Silahkan tirukan animasi tersebut sebaik mungkin

7. Hasil Praktikum

Add caption

8. Kesimpulan

Pada praktikum ini peneliti bisa memperbaiki arah perubahan bentuk agar identik dengan yang dicontohkan.

9. Referensi

Moh Hasbi Assidiqi
Dasar teori flash
Youtube

Prak 13 - Shape Tween

1. Tujuan

Mengusai penggunaan tools bernama shape tween

2. Alat

Adobe Flash Professional CS6

3. Bahan

Logomotion

4. Dasar Teori

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.

5. Tugas Praktikum

Buatlah tiruan animasi berikut
1. 

2.

6. Petunjuk Praktikum

Silahkan tirukan animasi tersebut sebaik mungkin

7. Hasil Praktikum

8. Kesimpulan

Pada praktikum ini peneliti bisa memperbaiki arah perubahan bentuk agar identik dengan yang dicontohkan.

9. Referensi

Moh Hasbi Assidiqi
Dasar teori flash
Youtube

Prak 12 - Shape Tween Pada Adobe Flash CS6

1. Tujuan

Mempercepat penguasaan Adobe Flash Professional menggunakan konsep Shape Tween

2. Alat

Adobe Flash Professional CS6

3. Bahan

Shape Tween

4. Dasar Teori

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.

5. Tugas Praktikum

Buatlah tugas animasi berbagai logo atau logomotion dengan menggunakan konsep Shape Tween

6. Petunjuk Praktikum

Mulailah membuat logomotion dengan berbagai logo yang ada dengan menggunakan konsep Shape Tween

7. Hasil Praktikum

8. Kesimpulan

Pada praktikum ini peneliti bisa menghasilkan 2 buah logo yang hampir jadi dengan menggunakan konsep shape tween.

9. Referensi

Moh Hasbi Assidiqi
Dasar teori flash

Prak 11 – Masking on Flash

1. Tujuan

Melakukan fungsi masking pada flash.

2. Alat

Adobe Flash Professional CS6

3. Dasar Teori

Animasi masking merupakan salah satu jenis animasi yang paling banyak digunakan dalam dunia iklan online. Animasi ini mampu menghasilkan jenis file yang menarik dan secara tidak langsung akan mempengaruhi konsumen untuk melihat kemudian mengklik iklan tersebut. Kali ini saya akan menjelaskan langkah-langkah membuat animasi masking dengan flash.

4. Tugas Praktikum

Buatlah Animasi dengan memanfaatkan fungsi masking

5. Hasil Praktikum

Ini hasil praktikum saya. membuat bendera dan loading screen.

6. Kesimpulan

Praktikum kali ini saya mengaplikasikan fungsi masking pada pembuatan bendera berkibar dan loading screen. sesuai fungsinya sendiri, masking adalah fungsi untuk menampilkan bagian yang di inginkan dan menyembunyikan yang tidak ingin ditampilkan.

Prak 10 – Remake “One Little Finger” by Super Simple Song (Part 1)

1. Tujuan

Mempercepat penguasaan Adobe Flash Professional melalui kegiatan remake.

2. Alat

Adobe Flash Professional CS6

3. Bahan

One little finger by super simple song

4. Dasar Teori

A. Classic Motion Tween
B. Graphic Symbol
C. Movie Clip Symbol and Filters

5. Tugas Praktikum

Buatlah tiruan dari video “One Little Finger”
semakin mirip semakin bagus

6. Petunjuk Praktikum

Mulailah dari bentuk animasi yang sederhana seperti gerakan title opening, gerakan awan, dan character 1, character 2 dan transisi

7. Hasil Praktikum

8. Kesimpulan

Berdasarkan praktikum ini kami mencoba meremake video one little finger dengan menerapkan beberapa materi pada praktikum sebelumnya. Dengan tambahan beberapa tahap yang belum dipraktekkan pada materi sebelumnya.

9. Referensi

Motion Tween
Graphic Symbol
Graphic Filters

Prak 9 – Remake “One Little Finger” by Super Simple Song (Part 1)

1. Tujuan

Mempercepat penguasaan Adobe Flash Professional melalui kegiatan remake.

2. Alat

Adobe Flash Professional CS6

3. Bahan

One little finger by super simple song

4. Dasar Teori

A. Classic Motion Tween
B. Graphic Symbol
C. Movie Clip Symbol and Filters

5. Tugas Praktikum

Buatlah tiruan dari video “One Little Finger”
semakin mirip semakin bagus

6. Petunjuk Praktikum

Mulailah dari bentuk animasi yang sederhana seperti gerakan title opening, gerakan awan, dan character 1 dan transisi

7. Hasil Praktikum

8. Kesimpulan

Berdasarkan praktikum ini kami mencoba meremake video one little finger dengan menerapkan beberapa materi pada praktikum sebelumnya. Dengan tambahan beberapa tahap yang belum dipraktekkan pada materi sebelumnya.

9. Referensi

Motion Tween
Graphic Symbol
Graphic Filters

Prak 8 – Remake “One Little Finger” by Super Simple Song (Part 1)

1. Tujuan

Mempercepat penguasaan Adobe Flash Professional melalui kegiatan remake.

2. Alat

Adobe Flash Professional CC

3. Bahan

One little finger by super simple song

4. Dasar Teori

A. Classic Motion Tween
B. Graphic Symbol
C. Movie Clip Symbol and Filters

5. Tugas Praktikum

Buatlah tiruan dari video “One Little Finger”
semakin mirip semakin bagus

6. Petunjuk Praktikum

Mulailah dari bentuk animasi yang sederhana seperti gerakan title opening, gerakan awan, dan tampilan awal character 1

7. Hasil Praktikum

8. Kesimpulan

Berdasarkan praktikum ini kami mencoba meremake video one little finger dengan menerapkan beberapa materi pada praktikum sebelumnya. Dengan tambahan beberapa tahap yang belum dipraktekkan pada materi sebelumnya.

9. Referensi

Motion Tween
Graphic Symbol
Graphic Filters

Prak 7 – Remake “One Little Finger” by Super Simple Song (Part 1)

1. Tujuan

Mempercepat penguasaan Adobe Flash Professional melalui kegiatan remake.

2. Alat

Adobe Flash Professional CC

3. Bahan

One little finger by super simple song

4. Dasar Teori

A. Classic Motion Tween
B. Graphic Symbol
C. Movie Clip Symbol and Filters

5. Tugas Praktikum

Buatlah tiruan dari video “One Little Finger”
semakin mirip semakin bagus

6. Petunjuk Praktikum

Mulailah dari bentuk animasi yang sederhana seperti gerakan title opening dan gerakan awan.

7. Hasil Praktikum

8. Kesimpulan

Berdasarkan praktikum ini kami mencoba meremake video one little finger dengan menerapkan beberapa materi pada praktikum sebelumnya. Dengan tambahan beberapa tahap yang belum dipraktekkan pada materi sebelumnya.

9. Referensi

Praktikum 7 Animasi
Motion Tween
Graphic Symbol
Graphic Filters

Prak 6 – Walk Cycle using Tween

1. Tujuan

Menerapkan walk cycle pada sebuah karakter yang populer dengan bantuan Tween.

2. Alat

Adobe Flash Professional CS6

3. Bahan

Gambar referensi berisi salah satu karakter animasi yang populer misalnya naruto.

4. Dasar Teori

Secara prinsip, ada minimal 4 konsep yang perlu dipenuhi, antara lain:

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

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.

Secara teknis, adobe flash memiliki fitur untuk inbetween otomatis yang didebut dengan Tween
(tambahkan contoh penggunaan tween untuk mengerakkan sebuah kotak)

5. Tugas Praktikum

Buatlah walk cycle dari naruto dengan menggunakan bantuan Classic Tween

6. Petunjuk Praktikum

Berikut adalah langkah-langkah membuat walk cycle untuk kaki:

1. Pecah kaki naruto menjadi 4 Graphic Symbol yang mewakili kaki bagian atas dan bawah untuk bagian kiri dan kanan
2. Gunakan symbol tersebut untuk membuat contact position pada frame ke 1
3. Gunakan transform tool (Q) untuk mengatur pivot dari masing-masing symbol. Dimana pivot kaki bagian atas terletak pada pinggul dan pivot kaki bagian bawah terletak pada lutut
4. Buat keyframe (F6) pada frame ke 9. Buat contact position kebalikan dari frame ke 1
5. Copy contact position pada frame 1 ke frame ke 17
6. Klik kanan pada timeline diantara frame 1 dan 9 kemudian pilih menu “Create Classic Tween”
7. Klik kanan pada timeline diantara frame 9 dan 17 kemudian pilih menu “Create Classic Tween”
8. Uji animasi yang dibuat dengan menekan tombol Ctrl+Enter. Jika menghasilkan animasi kaki sliding seperti di danau es, maka lanjutkan ke langkah berikutnya. Jika tidak, perbaiki dulu animasinya.
9. Buat keyframe (F6) pada frame ke 5 dan 13. Buatlah passing position pada frame tersebut.
10. Jika semua berjalan lancar, maka akan diperoleh good enough walk cycle.

untuk memperhalus animasinya, dapat dilanjutkan dengan menambahkan gambar lutut dan menambahkan pose down dan up.

7. Hasil Praktikum

 

8. Kesimpulan

Berdasarkan praktikum ke 6 tentang classic tween, kami dapat membuat animasi secara lebih halus dan lebih cepat dari praktikum sebelumnya.

9. Referensi

Josiah Brooks, How To Animate – Walk Cycle (Tweened)
Walk Cycle using Tween

Prak 5 – Popular Character Walk Cycle

1. Tujuan

Menerapkan konsep walk cycle pada sebuah karakter yang populer.

2. Alat

Adobe Flash Professional CS6

3. Bahan

Gambar referensi berisi salah satu karakter animasi yang populer misalnya naruto.

4. Dasar Teori

Secara teori, sebuah walk cycle dari sembarang karakter dapat diperoleh dengan me-replace stickman pada praktikum sebelumnya dengan karakter populer yang diinginkan.

5. Tugas Praktikum

Buatlah walk cycle dari character populer tersebut

6. Hasil Praktikum

7. Kesimpulan

Berdasarkan praktikum ini kami dapat mempelajari cara walk cycle dengan contoh gambar naruto menggunakan tahap-tahap walkcycle seperti pada praktikum sebelumnya.

8. Referensi

Prak 5 – Popular Character Walk Cycle 

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 CS6

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

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

5. Tugas Praktikum

Perbaiki arcs pada titik:
1. pinggul
2. tumit

6. Hasil Praktikum

7. Kesimpulan Praktikum

Dengan praktikum ini, kami dapat membuat animasi walkcycle menjadi lebih halus dalam pergerakan kaki dan pinggang. Dan kurva yang tergambar pada pinggang dan tumit sangat berpengaruh terhadap pergerakan walkcycle.

8. Referensi

Prak 3 – Memperhalus Walk Cycle menggunakan Konsep Arcs 

HOW TO TRANSFER ART OR LETTERING TO PHOTOSHOP

Proses transferring tulisan tangan atau yang sering disebut hand lettering atau typography ke Photoshop adalah hal yang sangat mudah. Nah dengan mengimport hand lettering ke Photoshop ini kita dapat menggunakannya untuk banyak hal, seperti header blog, kartu undangan, kartu ucapan atau desain-desain digital lainnya. Berikut ini caranya:

Prak 2 – Membuat Animasi Stickman Menggunakan Adobe Flash Professional

1. Tujuan

Membuat animasi pertama menggunakan adobe flash professional

2. Alat

Adobe Flash Professional CS6

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

Prak 1 - Mengenal Tampilan Adobe Flash Professional

1. Tujuan

Praktikum 1 Mata Kuliah Animasi 2D bertujuan untuk mengenal bagian-bagian dan tampilan dari Adobe flash. Sehingga dapat mempermudah mahasiswa D3 Multimedia Broadcasting PENS untuk lebih mengerti dan memahami Tampilan dan fungsi adobe flash saat menggunakannya.

2. Dasar Teori

     Adobe Flash (dahulu bernama Macromedia Flash) adalah salah satu perangkatlunak komputer yang merupakan produk unggulan Adobe System. Adobe Flash digunakan untuk membuat gambar vektor maupun animasi gambar tersebut. Berkas yang dihasilkan dari perangkat lunak ini mempunyai file extension .swf dan dapat diputar di penjelajah web yang telah dipasangi Adobe flash player.

   

Generasi CADAS Generasi CADAS MMK #Ega Khansa Alifa #PENS

 Tugas KPP LKMM Pra-TD 2014 Politeknik Elektronika Negeri Surabaya by Ega Khansa Alifa - MMK 2014

Degrees of Comparison - Video Presentation