Animasi Stickman

Animasi Stickman


Langkah- Langkah Membuat Animasi Stickman

1. Buka “macromedia flash 8.0” lalu pilih “flash document"

2. Buat sebuah jalan untuk stickman berbentuk persegi panjang menggunakan “Rectangle tool”. Rename layernya jadi “ground”. Lihat pada gambar dibawah.

3. Tambah layer baru kemudian rename juga layernya jadi “stickman”.

4. Buat gambar stickman pada layer stickman menggunakan tool seperti pada gambar.

5. Setelah gambar stickman selesai lalu select gambar tersebut lalu klik kanan pilih “convert to symbol”, 

setting seperti pada gambar dibawah.

6. Lakukan langkah selanjutnya seperti pada gambar dibawah secara teliti.

7. Setelah membuat beberapa frame untuk membuat stickman melangkah, kemudian klik-drag sampai ujung, lalu klik kanan pilih “insert keyframe”.

8. Klik frame paling ujung akhir pada layer stickman, lalu drag gambar stickman sampai batas ujung jalan.

9. Langkah terakhir, klik kanan pada frame lalu pilih “create motion tween”.

Untuk penyimpanan bisa dibuat file swf, gif, jpg, avi, dll. Caranya pilih “file-export-export movie” lalu isi nama file dan tipe file yang diinginkan.

Tentang Media Interaktif di Flash

Cara Membuat Media Interaktif di Flash

Pernah liat program/animasi yang menarik, interaktif, keren? Saya 68% yakin itu dibuat menggunakan flash. Tidak percaya? memang itu hanya dugaan Saya saja :P. Tapi bukan tanpa alasan, boleh dikatakan flash menawarkan kemudahan dalam pembuatan bermacam media interaktif, kali ini kita ambil contoh membuat company profile. perlu dicatat, bahwa company profile disini dapat anda ganti dengan CD interaktif, CV (curriculum vitae), portfolio, presentasi, atau apapun namanya. Prinsipnya kita akan membuat sebuah media/aplikasi yang interaktif seperti web tetapi lebih banyak animasinya.

Buat yang masih bingung seperti apakah media interaktif itu, silahkan lihat aplikasi tour windows XP: klik start menu>all programs>accessories>tour windows xp (pilih yang animated tour!). Sesudah animasi berjalan beberapa lama dan sudah puas mengklik sana-sini, cobalah iseng-iseng klik kanan, akan kita dapati keterangan yang menyatakan bahwa aplikasi tour windows XP ini dibuat dengan flash. (yang ga punya windows XP, silakan coba di kompie teman masing-masing). Nah, bagaimana sekarang, tertarik untuk bisa membuat yang seperti itu? mudah…

Pertama-tama pastikan pada komputer anda telah terinstall aplikasi flash (ya iyalah…) boleh Flash MX (Flash 6), Flash MX 2004 (Flash 7), Flash 8, Flash CS3 (Flash 9), dan sebagainya. Kita akan lebih banyak teknik animasi dengan script yang sederhana saja, karena ini untuk umum.

Siapa yg perlu membuat media interaktif?

Siapapun yg baru kenal flash, dan ingin membuat sesuatu yang berguna, yg sedang mencari aplikasi presentasi yg lebih bisa diutak-atik daripada PowerPoint, yg sedang mencari aplikasi pembuat aplikasi yg mudah membuat desain yg menarik, akademisi/praktisi yg ingin membuat publikasinya dalam bentuk aplikasi media interaktif, siswa SMP/SMA atau mahasiswa yg ingin membuat aplikasi/presentasi dengan desain yg menarik, guru2 yg ingin mencoba metoda baru, mengajar interaktif (halah. dimana-mana mah ngajar pasti interaktif)…bukan..maksudnya ingin membuat metoda penyampaian yg berbeda dari sekadar menulis di papan tulis, perusahaan maupun personal yg ingin meningkatkan brand imagenya dengan membuat profile interaktifnya yg didistribusikan ke berbagai tujuan, Anda…ya… Anda!, atau siapapunlah yg sedang iseng-iseng aja 

Baiklah, langsung kita mulai saja…..

1) Tentukan konsep desain

Jangan sampai terjadi ketika sudah berhadapan dengan komputer kemudian bengong, eeuu….(dengan gaya patrick  ). Jadi buat dulu konsepnya! sebenarnya kita mau buat apa, apa saja content yang akan disajikan, kemudian bagaimana menampilkannya pada user, dan seterusnya. pikirkan hal-hal ini kalau perlu dicatat, kemudian susun rancangan menu-menunya menjadi semacam hierarki. semua digambarkan dalam bentuk sketsa di kertas (rileks, bebaskan pikiran, kemudian buat sketsa sebebas-bebasnya, sekali-kali selingi dengan minum supaya kita tetap fresh), akhirnya simpanlah kertas sketsa kita, inilah yang akan menjadi rujukan pembuatan company profile yang akan kita buat. Adapun untuk latihan sekarang kita pakai rancangan Saya dulu, seperti apa? mari ikuti…

2) Beberapa cara umum, secara umum

ada banyak cara dalam menggabungkan kesemuanya, setidaknya ada 3 cara yang umum digunakan:

[peringatan: cara-cara di bawah ini hanya subjektifitas penulis saja, belum tentu benar]

Cara 1:

File flash dibuat dalam satu file saja dengan tipe projector –aplikasi .exe– karena flash playernya sudah built-in sehingga untuk menjalankannya kita tidak perlu flash player.

Keuntungan dari cara ini adalah lebih praktis terutama jika contentnya hanya sedikit, besar file berkisar antara 1-3 MB sehingga relatif mudah kita kirim atau e-mailkan kepada orang lain tanpa perlu khawatir apakah di komputer orang tersebut ada flash player atau tidak.

Sedangkan kekurangan dari cara ini adalah jika kita membuat aplikasi yang kompleks dengan content yang bermacam-macam, maka ketika menjalankannya pertama kali akan lebih berat disebabkan meskipun kita hanya menjalankan sebuah bagian (misalnya intronya saja), tetap saja kan kita perlu me-load 1 file utuh.

Cara 2:

File flash dibuat per bagian-bagiannya dengan 1 file induk yang menyatukan semuanya. Jadi masing-masing bagian dan sub-sub bagian dipisah menjadi file .swf tersendiri (begitu juga dengan file-file gambar seperti jpg dipisahkan sendiri) kemudian ditambah sebuah file ‘Loader’ –file inilah yang menjadi file utama yang kemudian memanggil file .swf-.swf atau file-file lain dari bagian project kita.

Keuntungan menggunakan teknik ini adalah ketika kita membuat sebuah project dengan content yang kompleks, maka cara ini lebih ringan. Karena file yang perlu dibaca oleh komputer hanya bagian yang diload (ingat tiap bagian mempunyai .swf yg terpisah) berbeda dengan cara pertama tadi. ini juga prinsip kalau kita membuatnya di web, yang perlu didownload hanya bagian swf yg berhubungan saja. coba kalau semuanya digabung dalam 1 file, nanti di sebuah warnet yg lemot yg muncul tulisannya malah: now loading, 1% of 9MB, time remaining 59 minutes 
Kekurangannya adalah dalam distribusi (CD misalnya) kita perlu mengemasnya sedemikian rupa agar orang yang melihat file-file tersebut tidak bingung (bayangkan: melihat banyak file .swf, .jpg, .exe, mana yang harus saya klik?) dan dengan mudah mengklik file ‘Loader’-nya. Pintar2 mengemasnya saja, untuk CD biasanya Saya membuatnya autorun secara otomatis+petunjuk readme.txt yang berisi penjelasan jika CD tidak berjalan otomatis bla…bla…bla…

Tambahan cara membuat autorun di CD:

– buka notepad

– ketik:

[autorun]
open=namaFile*.exeYangMauDiJalankanOtomatisPadaCDnya
icon=namaFileIkon*.icoYangMauDijadikanIkonPadaCDTersebut
contoh:
[autorun]
open=mySalman.exe
icon=mySalman.exe
– klik save as

– pilih ‘save as type’-nya all files (jangan txt!) kemudian beri nama autorun.inf (namanya harus autorun + ekstensinya harus inf, tapi aturan penulisan windows tidak case-sensitive, jadi nyantai aja…)

– copy-kan file autorun.inf ke CD tersebut (perhatian: file autorun.inf harus berada di root utama CD tersebut, sedangkan file .exe yg diautorun boleh setara dengannya atau di folder bawahnya)

Cara 3:

Menggunakan template. ada tersedia berbagai macam template flash di dunia ini, pabalatak–lah pokoknya, kita bisa mendapatkannya dengan berbagai cara. mulai dari download yg gratisan, melakukan reverse engineering seperti mendecompile sebuah file swf punya orang (jika yang didecompile sebenarnya berbayar, cara ini tidak begitu dianjurkan), bikin template sendiri, sampai ke meminta bantuan orang untuk membuatkannya (nah kalau ini sangat boleh, jangan lupa komisi-nya ya  ).

bersambung…

.

.

.

.

Update (20 Juni 2007): Tadi malam Saya sudah mencoba membuat prototypenya, ini yang mungkin akan Saya berikan step-by-stepnya. berikut ini screenshot dari latihan membuat media interaktif dengan flash

Tidak diperlukan waktu yang lama untuk membuatnya, aplikasi yg diperlukan pun hanya Flash saja, adapun untuk iconnya Saya buat dengan teknik tracing (cara ini Saya dapat dari Andre). Bagi yang mau source fla-nya (cuman bisa dibuka minimal dari Flash 8…) bisa diunduh di http://www.box.net/shared/5op0lm8cos

https://faisalman.com/2007/06/19/membuat-media-interaktif-dengan-flash/

Cara Membuat Api Lilin

Cara Membuat Api Lilin di Macromedia Flash 8

1. Buka program flash, atur background menjadi warna gelap atau hitam!

2. klik frame 1 dan buatlah sebuah gambar batang dari lilin tersebut menggunakan rectangle tool (tekan R)

3. dan atur color background menjadi #CCCCCC (abu2) dan non aktifkan strok color.

4. kemudian ubah rectangle setting dengan radius 3. hal ini dilakukan agar pinggiran dari lilin menjadi halus dan tidak runcing.

5. selanjutnya buatlah batang llin tersebut pada layer 1. jadikan simbul movie clip dengan menekan F8.

6. masuk ke jendela edit in place dengan meng klik objek lilin sebanyak 2 kali.

7. selanjutnya buat satu buah layer yang berada di atas layer 1.

8. di layer 2 frame 1 kita akan membuat api dari lilin tersebut, dengan menggunakan Oval tool (O) serta mengatur warna menjadi kuning seperti gambar berikut.

9. buatlah cahaya lilin seperti gambar di samping.

10. dengan menggunakan selection tool (V),

11. klik ujung pada cahaya lilin kemudian tarik ke sebelah kiri.

12. Kemudian insert key frame pada frame 10 di layer 1 dan layer 2

13. pada layer 2 frame 10 rubah posisi cahaya lilin menjadi ke sebelah kanan

14. klik layer 2 frame 1, klik kanan dan copy frames,

15. selanjutnya pada frame 20 paste frames.

16. 

 selanjutnya insert keyframes pada layer 1 frame 20.

17.

pada layar 2 blok frame seperti gambar berikut.

18. 

pada panel propertis berikan tween dengan tipe shape

19. buat 2  layer baru dengan posisi di bawah layer 1 dan layer 2.

20. 

pada layer 4 kita akan buat tali sebagai pangkal api untu menyala. klik frame 1 pada layer 4, dengan menggunakan brush tool serta atur besaran brush, buatlah pangkal lilin seperti gambar berikut.

21. 

oke kalau sudah, kita beralih ke layer 3 frame 1. dengan menggunakn oval tool kita akan membuat cahaya dari lilin tersebut. gunakan warna tipe radial merah dan hitam. serta buatlah cahaya tersebut di belakang cahaya lilin seperti gambar berikut.

22. 

pada layer 3 buat 3 buah keyframe yaitu pada frame 1, 10 dan 20.

pada frame 10 besarkan cahaya sesuai komposisi yang anda anggap cukup.

dengan teknik tween safe insert tween safe pada layer 3. (catatan . kalau terjadi garis putus-putus pada layer 3, ubah objek sinar dengan break Apark (ctrl + b ) pada frame 1, 10, dan 20.)

hasil akhir yang benar pada layer adalah sebagai berikut.

Cara Membuat Bola Berputar

Cara Membuat Bola Berputar di Flash

1. Buat Dokumen Baru.
Jalankan macromedia Flash dan buat dokumen baru dengan klik Flash Document.

2. Import Gambar.

Masukkan gambar roda dengan cara : klik File – Import – Import Stage.

Untuk gambar roda silahkan tanyakan ke Eyang Google.

3. Convert Symbol.

Rubahlah gambar roda menjadi Movie Clip, dengan cara klik Modify – Convert to Symbol.

Perhatikan gambar di bawah :

4.  Insert Key Frame.

Masukkan KeyFrame di frame 60 dengan cara klik Frame 60 – klik kanan pilih insert KeyFrame.

Klik Frame 25 dan lanjutkan dengan klik kanan pilih Create Motion Tween.

Selanjutkanya klik Frame 1 dan tekan Ctrl + F3 untuk mengaktifkan tab Properties.

Rubah Rotate dari Auto menjadi CW.

Selesai,, Selamat Mencoba

12 Prinsip Animasi

12 PRINSIP ANIMASI

12 prinsip animasi adalah prinsip yang harus dipenuhi untuk membuat sebuah animasi yang “hidup” dan terlihat alami dan tidak hanya asal jadi atau hanya bergerak saja, prinsip itu meliputi dasar-dasar gerak, pengaturan waktu, peng-kaya-an visual sekaligus teknik pembuatan sebuah animasi.

Perumus dari 12 prinsip animasi adalah Frank Thomas dan Ollie Johnston, mereka adalah animator kawakan dari Walt Disney Studios,

12 prinsip animasi itu muncul sekitar tahun 1981 yang ditulis dalam salah satu judul buku mereka yang diberi judul “The Illussion of life” Disney Animation

12 prinsip animasi muncul karena Frank Thomas dan Ollie Johnston mempunyai semangat untuk meneliti dan mengembangkan karya seni baru saat mereka masih muda,

prinsip dasar itu merupakan hasil eksperimen dan latian mereka serta atas keinginan dari walt disney untuk memikirkan suatu cara bagaimana membuat animasi semirip mungkin dengan gerakan nyata sebuah objek baik itu benda, hewan maupun manusia. Selain itu juga untuk menunjukkan bagaimana ekspresi dan kepribadian sebuat karakter.

12 prinsip animasi tersebut adalah :

1.      Squash & Stretch

Squash and strecth adalah upaya penambahan efek lentur (plastis) pada objek atau figur sehingga -seolah-olah ‘memuai’ atau ‘menyusut’ sehingga memberikan efek gerak yang lebih hidup. Penerapan squash and stretch pada figur atau benda hidup (misal: manusia, binatang, creatures) akan memberikan ‘enhancement’ sekaligus efek dinamis terhadap gerakan/ action tertentu, sementara pada benda mati (misal: gelas, meja, botol) penerapan squash and stretch akan membuat mereka (benda-benda mati tersebut) tampak atau berlaku seperti benda hidup.

Contoh pada benda mati: Ketika sebuah bola dilemparkan. Pada saat bola menyentuh tanah maka dibuat seolah-olah bola yang semula bentuknya bulat sempurna menjadi sedikit lonjong horizontal, meskipun nyatanya keadaan bola tidak selalu demikian.Hal ini memberikan efek pergerakan yang lebih dinamis dan ‘hidup’.

Contoh pada benda hidup: Sinergi bisep dan trisep pada manusia. Pada saat lengan ditarik (seperti gerakan mengangkat barbel) maka akan terjadi kontraksi pada otot bisep sehingga nampak ‘memuai’, hal inilah yang disebut squash pada animasi. Sedangkan stretch nampak ketika dilakukan gerakan sebaliknya (seperti gerakan menurunkan lengan), bisep akan nampak ‘menyusut’.

2.      Anticipation

Anticipation boleh juga dianggap sebagai persiapan/ awalan gerak atau ancang-ancang. Seseorang yang bangkit dari duduk harus membungkukkan badannya terlebih dahulu sebelum benar-benar berdiri. Pada gerakan memukul, sebelum tangan ‘maju’ harus ada gerakan ‘mundur’ dulu. Dan sejenisnya.

3.      Staging

Seperti halnya yang dikenal dalam film atau teater, staging dalam animasi juga meliputi bagaimana ‘lingkungan’ dibuat untuk mendukung suasana atau ‘mood’ yang ingin dicapai dalam sebagian atau keseluruhan scene.

4.      Straight Ahead Action and Pose to Pose

Dari sisi resource dan pengerjaan, ada dua cara yang bisa dilakukan untuk membuat animasi :

Yang pertama adalah Straight Ahead Action, yaitu membuat animasi dengan cara seorang animator menggambar satu per satu, frame by frame, dari awal sampai selesai seorang diri. Teknik ini memiliki kelebihan: kualitas gambar yang konsisten karena dikerjakan oleh satu orang saja. Tetapi memiliki kekurangan: waktu pengerjaan yang lama.

Yang kedua adalah Pose to Pose, yaitu pembuatan animasi oleh seorang animator dengan cara menggambar hanya pada keyframe-keyframe tertentu saja, selanjutnya in-between atau interval antar keyframe digambar/ dilanjutkan oleh asisten/ animator lain. Cara yang kedua ini lebih cocok diterapkan dalam industri karena memiliki kelebihan: waktu pengerjaan yang relatif lebih cepat karena melibatkan lebih banyak sumber daya.

5.      Follow Through and Overlapping Action

Follow through adalah tentang bagian tubuh tertentu yang tetap bergerak meskipun seseorang telah berhenti bergerak. Misalnya, rambut yang tetap bergerak sesaat setelah berhenti berlari.

Overlapping action secara mudah bisa dianggap sebagai gerakan saling-silang. Maksudnya, adalah serangkaian gerakan yang saling mendahului (overlapping). Pergerakan tangan dan kaki ketika berjalan bisa termasuk didalamnya.

6.      Slow In and Slow Out

Sama seperti spacing yang berbicara tentang akselerasi dan deselerasi. Slow In dan Slow Out menegaskan kembali bahwa setiap gerakan memiliki percepatan dan perlambatan yang berbeda-beda. Slow in terjadi jika sebuah gerakan diawali secara lambat kemudian menjadi cepat. Slow out terjadi jika sebuah gerakan yang relatif cepat kemudian melambat.

Contoh: Dalam gerakan misalnya mengambil gelas. Tangan akan memiliki kecepatan yang berbeda ketika sedang akan menjamah gelas, dengan ketika sudah menyentuhnya. Ketika tangan masih jauh dari gelas, tangan akan bergerak relatif cepat. Sedangkan ketika tangan sudah mendekati gelas, maka secara refleks tangan akan menurunkan kecepatannya (terjadi perlambatan) atau dalam konteks ini kita menyebutnya slow out.

7.      Arcs

Dalam animasi, sistem pergerakan tubuh pada manusia, binatang, atau makhluk hidup lainnya bergerak mengikuti pola/jalur (maya) yang disebut Arcs. Hal ini memungkinkan mereka bergerak secara ‘smooth’ dan lebih realistik, karena pergerakan mereka mengikuti suatu pola yang berbentuk lengkung (termasuk lingkaran, elips, atau parabola). Pola gerak semacam inilah yang tidak dimiliki oleh sistem pergerakan mekanik/ robotik yang cenderung patah-patah.

8.      Secondary Action

Secondary action adalah gerakan-gerakan tambahan yang dimaksudkan untuk memperkuat gerakan utama supaya sebuah animasi tampak lebih realistik. Secondary action tidak dimaksudkan untuk menjadi ‘pusat perhatian’ sehingga mengaburkan atau mengalihkan perhatian dari gerakan utama. Kemunculannya lebih berfungsi memberikan emphasize untuk memperkuat gerakan utama.

Contoh: Ketika seseorang sedang berjalan, gerakan utamanya tentu adalah melangkahkan kaki sebagaimana berjalan seharusnya. Tetapi seorang animator bisa menambahkan secondary action untuk memperkuat kesan hidup pada animasinya. Misalnya, sambil berjalan ‘seorang’ figur atau karakter animasi mengayun-ayunkan tangannya atau bersiul-siul. Gerakan mengayun-ayunkan tangan dan bersiul-siul inilah secondary action untuk gerakan berjalan.

9.      Timing & Spacing

Grim Natwick -seorang animator Disney pernah berkata, “Animasi adalah tentang timing dan spacing”. Timing adalah tentang menentukan waktu kapan sebuah gerakan harus dilakukan, sementara spacing adalah tentang menentukan percepatan dan perlambatan dari bermacam-macam jenis gerak.

Contoh Timing: Menentukan pada detik keberapa sebuah bola yang meluncur kemudian menghantam kaca jendela.

Contoh Spacing: Menentukan kepadatan gambar (yang pada animasi akan berpengaruh pada kecepatan gerak) ketika bola itu sebelum menghantam kaca, tepat menghantam kaca, sesudahnya, atau misalnya ketika bola itu mulai jatuh ke lantai. Spacing (pengaturan kepadatan gambar) akan mempengaruhi kecepatan gerak bola, percepatan dan perlambatannya, sehingga membuat sebuah gerakan lebih realistis.

10.  Exaggeration

Exaggeration adalah upaya untuk mendramatisir sebuah animasi dalam bentuk rekayasa gambar yang bersifat hiperbolis. Dibuat untuk menampilkan ekstrimitas ekspresi tertentu, dan lazimnya dibuat secara komedik. Banyak dijumpai di film-film animasi sejenis Tom & Jerry, Donald Duck, Doraemon dan sebagainya.

Contoh: 1) Bola mata Tom yang ‘melompat’ keluar karena kaget, 2) Muka Donald yang membara ketika marah, 3) Air mata Nobita yang mengalir seperti air terjun ketika menangis.

11.  Solid Drawing

Menggambar sebagai dasar utama animasi memegang peranan yang signifikan dalam menentukan -baik proses maupun hasil- sebuah animasi, terutama animasi klasik. Seorang animator harus memiliki kepekaan terhadap anatomi, komposisi, berat, keseimbangan, pencahayaan, dan sebagainya yang dapat dilatih melalui serangkaian observasi dan pengamatan, dimana dalam observasi itu salah satu yang harus dilakukan adalah: menggambar.

Meskipun kini peran gambar -yang dihasilkan sketsa manual- sudah bisa digantikan oleh komputer, tetapi dengan pemahaman dasar dari prinsip ‘menggambar’ akan menghasilkan animasi yang lebih ‘peka’.

12.  Appeal

Appeal berkaitan dengan keseluruhan look atau gaya visual dalam animasi. Sebagaimana gambar yang telah menelurkan banyak gaya, animasi (dan ber-animasi) juga memiliki gaya yang sangat beragam. Sebagai contoh, anda tentu bisa mengidentifikasi gaya animasi buatan Jepang dengan hanya melihatnya sekilas. Anda juga bisa melihat ke-khas-an animasi buatan Disney atau Dreamworks. Hal ini karena mereka memiliki appeal atau gaya tertentu.

Ada juga yang berpendapat bahwa appeal adalah tentang penokohan, berkorelasi dengan ‘kharisma’ seorang tokoh atau karakter dalam animasi. Jadi, meskipun tokoh utama dari sebuah animasi adalah monster, demit, siluman atau karakter ‘jelek’ lainnya tetapi tetap bisa appealing.