Gambar Bergerak: Cara Buat Animasi Bingkai Demi Bingkai

Nak buat gambar bergerak sendiri? Di WigglyPaint, anda cuma perlu lukis beberapa keping gambar (kita panggil gambar ni frames atau bingkai). Setiap frame ada beza sikit je. Bila WigglyPaint mainkan gambar-gambar ni ikut susunan, lukisan anda akan nampak hidup dan bergerak!

Semuanya anda lukis sendiri. WigglyPaint tak guna AI, tak tukar gambar jadi animasi secara automatik, dan tak buat video. Tutorial ni akan tunjuk cara mudah dari lukisan pertama sampailah jadi animasi GIF yang lengkap.

Apa itu animasi bingkai demi bingkai?

Bayangkan satu frame tu macam satu helai kertas lukisan. Animasi bingkai demi bingkai (frame-by-frame) maksudnya kita susun banyak lukisan untuk nampak macam ia bergerak. Ini adalah asas animasi 2D!

Contohnya, frame pertama lukis mata terbuka. Frame kedua lukis mata tertutup. Bila dimainkan laju-laju ikut susunan, muka tu nampak macam tengah berkelip.

WigglyPaint buat lukisan anda nampak hidup melalui dua cara:

1. Garisan berus akan bergetar (wiggle) sendiri secara automatik.
2. Panel frame akan mainkan lukisan anda ikut susunan.

Anda boleh guna cara ni untuk buat watak melambai, bunga kembang, bola melantun, atau muka yang berubah reaksi.

Apa yang boleh saya buat di WigglyPaint?

WigglyPaint ni laman web percuma untuk buat animasi. Ia buka terus kat browser (pelayar web) anda, jadi tak payah install apa-apa software pun.

Anda boleh:

• tambah frame baru;
• salin (copy) frame;
• padam (delete) frame;
• tengok bayang lukisan sebelum ni sebagai panduan (onion skin);
• mainkan animasi berulang-ulang (loop);
• eksport animasi tu sebagai fail GIF; dan
• kongsi GIF yang dah siap ke Komuniti WigglyPaint.

Ia memang sesuai sangat untuk lukisan animasi ringkas, sticker, reaksi, dan test pergerakan mudah. Tapi, ia tak direka untuk buat filem panjang atau projek besar yang perlukan banyak editing.

Sebelum anda mula

• Guna komputer atau laptop untuk tutorial ni. Skrin besar senang sikit nak nampak butang.
• Mula dengan benda simple, macam muka berkelip atau bola melantun.
• Guna dua atau tiga warna je. Lukisan yang ringkas lebih senang nak dianimasikan.
• Tak payah lukis cantik-cantik sangat. Pergerakan yang jelas lagi penting dari garisan yang kemas.

Cara buat animasi langkah demi langkah

1. Mula lukisan baru

• Buat: Buka WigglyPaint dan klik butang Click to start drawing.
• Apa yang keluar: Anda akan nampak kanvas lukisan yang besar dan alat melukis.
• Seterusnya: Pilih berus dan warna kegemaran anda.

Lukis benda yang besar dan senang. Muka orang, bintang, atau bola memang pilihan yang paling best untuk mula.

2. Buka panel Animation

• Buat: Klik bar Animation kat bahagian bawah skrin.
• Apa yang keluar: Satu barisan kotak frame kecil, butang Play, butang onion skin (gambar hantu), dan butang tambah (+) yang besar.
• Seterusnya: Pastikan kotak frame pertama dah dipilih.

Frame yang ada kotak pilihan tu maksudnya frame yang anda tengah lukis sekarang. Kalau nak ubah lukisan lain, klik je pada frame tu.

3. Lukis bingkai pertama

• Buat: Lukis kedudukan mula untuk objek atau watak anda.
• Apa yang keluar: Lukisan tu akan muncul kat kanvas besar dan juga dalam kotak frame kecil yang pertama.
• Seterusnya: Siapkan bentuk utama dulu sebelum tambah frame lain.

Untuk muka berkelip, lukis muka dengan mata terbuka. Untuk bola melantun, lukis bola kat bahagian atas kanvas.

4. Salin frame atau tambah frame kosong

Kalau lukisan seterusnya hampir sama, salin (copy) je frame tu. Lepas tu, padam dan lukis balik bahagian yang bergerak je.

• Buat: Klik butang salin (ikon dua kertas) kat sebelah kotak frame.
• Apa yang keluar: Frame kedua akan muncul dengan lukisan yang sebiji macam frame pertama.
• Seterusnya: Ubah sikit je, contohnya padam mata terbuka dan lukis mata tertutup.

Guna butang tambah (+) yang besar kalau nak frame kosong. Ini berguna kalau lukisan seterusnya memang berbeza sangat.

5. Hidupkan ‘onion skin’

Onion skin ni macam kertas surih. Ia tunjuk bayang kelabu lukisan dari frame sebelum ni supaya anda tahu kat mana nak lukis. Bayang ni takkan masuk dalam fail GIF nanti.

• Buat: Klik butang onion skin (ikon hantu).
• Apa yang keluar: Anda akan nampak lukisan frame sebelum ni bertukar jadi warna kelabu kat belakang lukisan sekarang.
• Seterusnya: Lukis pergerakan baru dekat-dekat dengan bayang kelabu tu supaya animasi nampak lancar.

Ubah sikit-sikit je kalau nak pergerakan nampak smooth. Kalau nak nampak laju, jarakkan sikit lukisan tu.

6. Mainkan animasi

• Buat: Klik butang Play (ikon segi tiga).
• Apa yang keluar: WigglyPaint akan mainkan semua frame anda ikut susunan secara berulang (loop).
• Seterusnya: Tengok betul-betul pergerakan dari frame terakhir bila ia patah balik ke frame pertama.

Kalau animasi nampak macam melompat pelik, bandingkan lukisan last dengan lukisan pertama. Ubah lukisan last tu supaya lebih dekat dengan yang pertama, atau tambah satu lagi frame kat tengah-tengah.

7. Jadikan frame tayang lebih lama

Sekarang ni, WigglyPaint takde butang untuk ubah kelajuan (FPS) setiap frame. Tapi jangan risau, kalau nak satu lukisan tu tayang lama sikit kat skrin, salin je frame tu banyak kali.

• Buat: Pilih frame yang anda nak tayang lama, lepas tu klik butang salin dua atau tiga kali.
• Apa yang keluar: Anda akan nampak beberapa kotak frame dengan lukisan yang sama.
• Seterusnya: Klik Play dan tengok sama ada ia berhenti cukup lama.

Contohnya, salin frame mata terbuka tiga kali. Frame mata tertutup biar satu je. Nanti muka tu akan buka mata lama sikit dan berkelip laju. Senang kan? Tak payah pening pasal setting FPS yang rumit.

8. Eksport gambar bergerak

• Buat: Bila animasi dah nampak cantik, klik Export.
• Apa yang keluar: Pilihan untuk simpan atau kongsi hasil kerja anda.
• Seterusnya: Simpan gambar bergerak ni sebagai fail GIF, atau kongsi terus ke Komuniti WigglyPaint.

Buka fail GIF yang dah save tu. Pastikan lukisan jelas dan takde pergerakan yang melompat-lompat.

Contoh animasi mudah: buat muka berkelip

Muka berkelip ni projek first yang paling best sebab banyak bahagian tak payah gerak pun.

1. Lukis muka dengan mata terbuka.
2. Salin frame tu.
3. Kat frame baru, padam mata dan lukis mata separuh tertutup.
4. Salin frame tu pula, dan lukis mata tertutup rapat.
5. Salin frame mata separuh tertutup tadi, dan letak selepas frame mata tertutup rapat.
6. Klik Play. Susunannya mesti: buka, separuh tutup, tutup rapat, separuh tutup.
7. Kalau ia berkelip laju sangat, salin frame mata terbuka banyak kali.

Anda boleh guna idea yang sama untuk buat bunga kembang, bintang berkelip, atau watak tengah tarik nafas.

Tip mudah untuk animasi yang lebih lancar

• Ubah satu bahagian je pada satu masa.
• Bahagian yang tak gerak, biar je kat tempat sama.
• Buka onion skin sebelum lukis frame baru.
• Rajin-rajin klik Play lepas buat dua tiga frame. Jangan tunggu siap semua baru nak test.
• Salin frame kalau nak pergerakan tu pause sekejap.
• Lukis bentuk yang simple supaya senang nampak walaupun saiznya kecil.

Jika ada masalah (Troubleshooting)

Saya tak jumpa panel Animation

Mula-mula klik Click to start drawing. Lepas tu cari bar Animation kat bawah skrin dan klik untuk buka.

Animasi laju sangat

Salin frame yang anda nak tayang lama. Buat dua tiga salinan untuk jadikan ia pause sekejap.

Lukisan gerak jauh sangat antara frame

Buka onion skin. Guna bayang kelabu tu sebagai panduan, dan lukis pergerakan baru dekat-dekat sikit.

Animasi melompat kat hujung

Bandingkan frame last dengan first. Ubah bagi nampak nak sama, atau tambah satu frame kat tengah-tengah.

Nampak satu lukisan je bila tekan Play

Tambah atau salin frame, lepas tu ubah sikit lukisan kat frame baru tu. Animasi perlukan sekurang-kurangnya dua lukisan berbeza untuk nampak bergerak.

Apa yang WigglyPaint boleh buat sekarang

Ciri-ciri	Boleh buat tak?
Lukis setiap frame sendiri	Ya
Tambah, salin, dan padam frame	Ya
Tengok frame sebelum ni sebagai bayang kelabu	Ya
Mainkan animasi berulang (loop)	Ya
Eksport animasi GIF	Ya
Kongsi ke Komuniti	Ya
AI tolong buat animasi	Tidak
Tukar gambar atau video jadi animasi automatik	Tidak
Set masa berbeza untuk setiap frame	Belum lagi; salin frame sebagai ganti
Ubah kelajuan (FPS)	Belum lagi
Eksport video	Belum lagi
Edit frame kat aplikasi telefon (mobile app)	Panduan ni untuk versi web je

Soalan Lazim (FAQ) Gambar Bergerak

Macam mana nak buat animasi?

Lukis gambar pertama, salin atau tambah frame, dan ubah sikit lukisan baru tu. Tambah lagi frame kalau perlu. Klik Play untuk test pergerakan, lepas tu eksport sebagai animasi GIF.

WigglyPaint ni percuma ke?

Ya, ia alat melukis dan animasi percuma kat browser web. Boleh buat animasi pendek tanpa install apa-apa.

Kena download software animasi ke?

Tak payah. Boleh lukis terus kat laman web WigglyPaint. Dah siap, download je animasi anda sebagai GIF.

Boleh ke guna rujukan masa melukis?

Boleh. Fungsi onion skin akan tunjuk bayang kelabu dari frame sebelum ni. Guna bayang ni macam kertas surih masa lukis frame baru.

WigglyPaint guna AI ke?

Tak. Anda lukis sendiri setiap frame. WigglyPaint cuma bagi berus yang bergetar automatik, panel frame, onion skin, butang Play, dan eksport GIF.

Berapa banyak frame nak kena buat untuk orang baru?

Mula dengan tiga hingga lima frame je. Dah cukup untuk buat mata berkelip atau bola melantun.

Boleh ubah kelajuan animasi?

Belum ada butang FPS lagi. Kalau nak lambatkan, salin je frame tu banyak kali supaya ia tayang lama sikit kat skrin.

Animasi ni berulang (loop) ke?

Ya. Bila tekan Play, ia akan ulang dari awal supaya anda boleh tengok pergerakan dari frame last bersambung ke frame first.

Boleh eksport fail apa?

WigglyPaint eksport gambar bergerak sebagai fail GIF. Tak boleh eksport video.

Buat gambar bergerak pertama anda

Mula dengan tiga frame dan satu perubahan kecil. Lukis muka, salin, ubah mata, dan klik Play. Bila dah jadi, tambah lagi frame untuk cantikkan pergerakan.