TUTORIAL ADOBE FLASH CS3: BOLA BERGERAK (TEKNIK MOTION TWEEN)

21 November 2011

TUTORIAL ADOBE FLASH CS3: BOLA BERGERAK (TEKNIK MOTION TWEEN)

Hari ni, DD nak teruskan tutorial kedua pasal Adobe Flash CS3. Tutorial kali ini, DD nak explain salah satu teknik asas untuk menghasilkan sesuatu pergerakan dalam Adobe Flash CS3.

NAMA TEKNIK: MOTION TWEEN
FUNGSI: Menghasilkan pergerakan dalam 1 GARIS LURUS sama ada menegak, melintang, atau menyerong.

OK, DD nak ajar cara-cara menghasilkan bola bergerak. Kenapa bola? Sebab DD terlalu excited tahap gaban...PASUKAN BOLA SEPAK MALAYSIA BERJAYA MEMENANGI PINGAT EMAS untuk Sukan Sea 2011 sekitar pukul 11.30 malam sebentar tadi. First time DD tengok match bola sepak yang sangat sengit. Mula-mula seri dengan 1 gol (jaringan gol penyamaan oleh Asraruddin Putra pada minit ke-35). Kemudian berlanjutan kepada masa tambahan selama 30 minit. Kemudian berlanjutan pulak kepada penentuan sepakan penalti. Aduhhhhh...boleh heart attack DD dibuatnya. Alhamdulillah...kesudahannya MALAYSIA MENANG dengan 4-3...menerusi jaringan Mahali Jasuli, Fandi Othman, Fadhli Shas, dan Baddrol Bakhtiar. Serius sangat berdebar-debar time tengok bola sepak tu bergolek-golek masuk pintu gol akibat penjaga gol team Indonesia gagal menangkap bola dengan kemas ketika sepakan penalti yang paling last.

PENENTUAN SEPAKAN PENALTI

OK, cukup. Kembali kepada tutorial...hehehe. Langkah-langkahnya...

BOLA BERGERAK (TEKNIK MOTION TWEEN)

1) Double-click ikon Adobe Flash CS3. Kemudian, klik File > New... > General > Flash File (ActionScript 2.0) > OK. Korang akan lihat paparan tetingkap seperti berikut:-

PAPARAN TETINGKAP ADOBE FLASH CS3

2) Tekan Ctrl+S kat keyboard korang untuk Save. DD tak nak ade yang meraung kalau tiba-tiba elektrik takde. So, wajib save hasil kerja korang terlebih dahulu.

3) Pilih warna bola yang korang suka dengan mengklik butang Fill Color. DD pilih warna biru gelap...(^_^)

KLIK BUTANG 'FILL COLOR'

4) Klik anak panah kecil pada butang Rectangle Tool. Kemudian, pilih Oval Tool untuk melukis bentuk bulat.

PILIH 'OVAL TOOL'

5) Klik Frame 1 pada Layer 1. Sekarang boleh mula melukis bola kat atas 'kertas lukisan'. Klik...tarik (jangan lepas butang mouse)...lepaskan butang mouse. Dah siap sebiji bola.

LUKIS SEBIJI BOLA

6) Klik Frame 40 pada Layer 1. Kemudian, tekan F6 kat keyboard korang untuk menambah keyframe.

TAMBAH KEYFRAME

7) Klik Frame 40 pada Layer 1 lagi. Kemudian, klik bola yang telah dihasilkan tadi...drag (jangan lepas butang mouse)...bawa bola tu ke penjuru lain 'kertas lukisan'...lepaskan butang mouse. Pastikan kedudukan bola yang baru ni, berbeza berbanding kedudukan asal seperti berikut:

KEDUDUKAN BARU BAGI BOLA

8) Right-click mana-mana frame di antara Frame 1-39 pada Layer 1. Kemudian, pilih Create Motion Tween.

CREATE MOTION TWEEN

9) Layer 1 akan kelihatan seperti berikut:

HASIL TERAKHIR PADA LAYER 1

10) Tekan Ctrl+S kat keyboard korang untuk Save. Kemudian, tekan Ctrl+Enter kat keyboard korang untuk melihat hasilnya.

OK...tamat tutorial kali ni. Harap korang faham baca tutorial panjang berjela ni. Honestly, DD rasa...Adobe Flash CS3 lebih mudah dipelajari melalui paparan video. Agak sukar untuk explain setiap langkah dengan menggunakan ayat. Kalau korang faham langkah-langkah ni...syukur alhamdulillah...\(^_^)/

Ni merupakan contoh flash header yang pernah DD hasilkan dengan menggunakan teknik 'Motion Tween'. Perhatikan pergerakan tulisan 'The Little Note' dan kedua-dua doodle tu.

Ni pulak rupa bentuk muka bumi kesemua layer dan frame yang DD gunakan untuk menghasilkan flash header kat atas ni. Jumlah Layer = 10 dan Jumlah Frame = 105!

* SENARAI TUTORIAL YANG LEPAS *

TUTORIAL ADOBE FLASH CS3: PENGENALAN

TERIMA KASIH...JUMPA LAGI UNTUK TUTORIAL AKAN DATANG...(^_^)

Kategori: TUTORIAL

9 Tukang Kata:

Arif Addeen said...: tuto anda hebakk :)
Aku DD to RayQuaz said...: trima ksh. pasni, blh la awk try bt tuto gak...(^_^)
NA said...: waa...dh lama x buat...lps nie blh la buat..
Arina Shamsul said...: Waaa nak cuba la,so kalau contohnya da siap buat header kan(kononla padal belum apa2 lagi..ngeee)pas tu nak save camne?camna nak pasang kat header?katner nak ambik code tu cikgu?nge3..
Arina Shamsul said...: icon2 tu kena lukis sendiri ke?atau boleh open dari mana2 file cikgu?hehe
Aku DD to eiraabdullah said...: try la bt...kasi refresh ilmu yg ade...gd luck...(^_^)
Aku DD to Arina Shamsul said...: wow! semangat nyer awk ni...bagus3. DD try jwb seringkas yg mungkin. nanti dlm tuto akn dtg...DD explain lebih2 pulak, ok...hehehe

1) klu awk dh tekan Ctrl+Enter kat step last skali, automatic file flash awk dh d save dlm bentuk .swf

2) klu nak pasang kat header...kena upload .swf td kat file hosting dulu. pastu kena tempek code kat 'Add a Gadget'. cara nyer agak leceh brbanding nak upload header .jpg atau .png

3) code akn automatic generate kat file hosting. mcm awk upload .jpg kat photobucket akn ade code yg muncul kan? camtu gak klu awk upload .swf

4) icon...sboleh2 lukis sendiri supaya header tu ringan. boleh aje klu nak open dr mana2 file...tp, header jd berat la nak load kat blog nanti.

hrp awk faham jwpn DD ni...peace...(^_^)
Arina Shamsul said...: ngeee..faham2..terima kasih manyak2 cekgu..
tapi tak tahu nak upload katner,guna file hosting apa ye.boleh sy tahu??
ngeeee..peace..(^_^)V utk cekgu DD..
Aku DD to Arina Shamsul said...: sm2...(^_^)

ade bbrp file hosting yg awk blh gunakn:-

1) imagedoll.com
2) webs.com
3) swfcabin.com
4) bla bla bla...hehehe

DD biase guna 3 jenis tu aje. ade bbrp lg file hosting. tp...DD x pernah guna. awk try ye? caiyok2...(^_^)

TUTORIAL ADOBE FLASH CS3: BOLA BERGERAK (TEKNIK MOTION TWEEN)

9 Tukang Kata:

ARTIFAK SEJARAH

SIAPA DD?

PENGIKUT

BAYAR HUTANG PTPTN

TUKANG KATA

CARTA BLOG