Hari ni, DD nak teruskan tutorial ketiga pasal Adobe Flash CS3. Tutorial kali ini, DD nak explain cara-cara memasukkan/import gambar ke dalam Adobe Flash CS3. Langkah-langkahnya...

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) Klik Frame 1 pada Layer 1.

FRAME 1 KAT LAYER 1

4) Klik File > Import > Import to Stage... dan pilih gambar pilihan hati korang. Klik Open.

MEMASUKKAN/IMPORT GAMBAR

5) 'Kertas lukisan' akan kelihatan seperti berikut:

HASIL KAT 'KERTAS LUKISAN'

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

OK...tamat tutorial kali ni. Setelah korang berjaya memasukkan/import gambar ke dalam Adobe Flash CS3, korang boleh try apply teknik 'Motion Tween' yang telah DD explain sebelum ni...kat gambar tersebut.

Ni merupakan contoh flash header yang pernah DD hasilkan dengan memasukkan/import gambar yang dihasilkan 100% kat Adobe Photoshop CS3.




Harus DD ingatkan kat korang, jangan terlalu banyak memasukkan/import gambar ke dalam Adobe Flash CS3 sebab ia akan mengakibatkan flash file korang lambat loading. Especially, kalau korang upload flash file tu...letak kat blog korang. Flash header yang DD hasilkan kat atas ni...bersaiz 288 KB! Sangat lambat loading kat blog customer DD tu.. :(

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

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

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!

• TUTORIAL ADOBE FLASH CS3: PENGENALAN

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

Atas permintaan ramai, DD akan memberikan tutorial percuma berkaitan flash kat blog ni. Pertama sekali, DD nak bagitau...DD menggunakan Adobe Flash CS3 Professional untuk ajar korang pasal flash ni. Kenapa CS3...bukan CS5? Sebab DD dah terbiasa menggunakan Adobe Flash CS3 Professional dalam kesemua hasil karya flash DD selama ini.

OK...kita mulakan tutorial sekarang. Sila tekan butang MULA untuk memulakan tutorial, tekan butang segi tiga ke kanan untuk NEXT, tekan butang segi tiga ke kiri untuk PREVIOUS, dan tekan butang SEMULA untuk memulakan kembali tutorial...(^_^)







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

Dek kerana enchek Wan Hazel beria-ia minta DD siapkan tutorial dan freebies pasal Butang Flash Home, so...DD dengan penuh bersemangat waja...membanting tulang empat kerat (ayat tak boleh blah)...berusaha menyiapkan tutorial dan freebies ni. Kecian DD...kena buli ngan echek Wan Hazel...uwaaaaa.

Hehehe...gurau aje la. Actually, enchek Wan Hazel selalu tolong DD. Terima kasih enchek wan Hazel yang baik hati. Alhamdulillah...berjaya...dah complete semua...\(^_^)/

AMARAN: JANGAN MENGAKU NI FREEBIES KORANG. Nanti DD sumpah jadi batu...hahaha (gelak jahat)!

• Sign in ke dalam akaun Blogger korang.
• Pada bahagian Dashboard, klik Design > Edit HTML > Expand Widget Templates.
• Tekan Ctrl + F dan cari <data:homeMsg/>.
• Gantikan coding tersebut dengan coding freebies.
• Klik SAVE TEMPLATE.

BUTANG 1
(letak cursor kat atas laman utama untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2116_1-bfh-1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 2
(letak cursor kat atas laman utama untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2117_1-bfh-2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 3
(letak cursor kat atas laman utama untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2118_1-bfh-3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 4
(letak cursor kat atas laman utama untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2577_1-bfh-4.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 5
(letak cursor kat atas laman utama untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2120_1-bfh-5.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>



p/s: Tutorial telah diculik DENGAN IZIN dan diubah suai DENGAN IZIN daripada blog ~ ALIEN ~

Sebelum ni, DD dah buat tutorial dan bagi freebies pasal Butang Flash Older Posts. Ape? Tak baca lagi? It's OK...pasni baca tau. Hari ni, DD nak sambung pasal Butang Flash Newer Posts pulak. Baca jangan tak baca...(^_^)

AMARAN: JANGAN MENGAKU NI FREEBIES KORANG. Nanti DD sumpah jadi batu...hahaha (gelak jahat)!

• Sign in ke dalam akaun Blogger korang.
• Pada bahagian Dashboard, klik Design > Edit HTML > Expand Widget Templates.
• Tekan Ctrl + F dan cari <data:newerPageTitle/>.
• Gantikan coding tersebut dengan coding freebies.
• Klik SAVE TEMPLATE.

BUTANG 1
(letak cursor kat atas hello kitty untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2109_1-bfnp-1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 2
(letak cursor kat atas bola sepak untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2110_1-bfnp-2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 3
(letak cursor kat atas kasut untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2111_1-bfnp-3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 4
(letak cursor kat atas smiley untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2112_1-bfnp-4.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 5
(letak cursor kat atas not muzik untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2113_1-bfnp-5.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>



p/s: Tutorial telah diculik DENGAN IZIN dan diubah suai DENGAN IZIN daripada blog ~ ALIEN ~

Dah jadi trend sekarang, semua blog sibuk nak bagi freebies...semua blog sibuk nak buat tutorial. DD pun nak gak. Tapi...DD nak buat style yang berbeza...tak nak sama ngan blog lain...(^_^)

So, buat julung-julung kalinya, DD nak bagi freebies FLASH kat korang. Keistimewaan freebies ni...apabila korang letak cursor kat atas gambar, tulisan akan bergerak-gerak. Tapi, sebelum tu...sila baca tutorial kat bawah kalau korang nak guna freebies ni.

AMARAN: JANGAN MENGAKU NI FREEBIES KORANG. Nanti DD sumpah jadi batu...hahaha (gelak jahat)!

• Sign in ke dalam akaun Blogger korang.
• Pada bahagian Dashboard, klik Design > Edit HTML > Expand Widget Templates.
• Tekan Ctrl + F dan cari <data:olderPageTitle/>.
• Gantikan coding tersebut dengan coding freebies.
• Klik SAVE TEMPLATE.

BUTANG 1
(letak cursor kat atas hello kitty untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2098_1-bfop-1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 2
(letak cursor kat atas bola sepak untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2101_1-bfop-2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 3
(letak cursor kat atas kasut untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2103_1-bfop-3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 4
(letak cursor kat atas smiley untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2105_1-bfop-4.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>


BUTANG 5
(letak cursor kat atas not muzik untuk melihat perubahan)
<embed wmode="transparent" src="http://www.imagedoll.com/images.php/i2106_1-bfop-5.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="50"></embed>



p/s: Tutorial telah diculik DENGAN IZIN dan diubah suai DENGAN IZIN daripada blog ~ ALIEN ~

Semalam ade sorang blogger tanya kat DD...flash header tu ape? Camne DD nak explain ye? DD try explain seringkas yang mungkin.



1) STATIC HEADER

• Takde pergerakan.
• Dihasilkan dengan menggunakan Adobe Photoshop, Paint, dll.
• Contoh:-

Static Header yang Tak Transparent (blog DD)

Static Header yang Transparent (blog Lixora)

2) FLASH HEADER

• Ade pergerakan.
• Dihasilkan dengan menggunakan Adobe Flash.
• Contoh:-

Flash Header yang Tak Transparent (blog DD)

Flash Header yang Transparent (blog Lixora)