NIGURUTAM

Bab Satu: Pengenalan Kepada Macromedia Flash MX

Apakah itu Macromedia Flash MX

Secara ringkasnya, Macromedia Flash MX merupakan satu perisian komputer yang biasanya digunakan untuk menghasilkan produk-produk multimedia seperti Courseware, Multimedia Presentation, Website, Computer Game dan Animation. Pada masa ini, ia merupakan antara perisian multimedia yang paling popular kerana ia mudah dipelajari dan memiliki ciri-ciri yang membolehkan penggunanya menghasilkan satu hasil kerja yang menarik dan berkualiti.


Antaramuka Macromedia Flash MX (Main Application Interface)

Rajah 1: Antaramuka Flash MX
Rajah 1 di atas menunjukkan antaramuka Flash MX. Jika anda perhatikan, antaramuka tersebut boleh dibahagikan kepada 4 bahagian utama yang ditandakan oleh kekotak berwarna merah. Kekotak tersebut tidak akan kelihatan pada komputer anda. Ia sengaja dilukis pada Rajah 1 di atas untuk memudahkan anda melihat bahagian-bahagian tersebut.
Kotak 1 merupakan bahagian yang dipanggil sebagai Toolbox. Di dalam Toolbox, terdapat beberapa "perkakasan" atau tools yang mempunyai fungsi-fungsi tertentu. Setiap tools tersebut mempunyai nama tersendiri. Untuk mengetahui nama bagi setiap tools tersebut, arahkan mouse pointer [ ] anda ke atas mana-mana tools tersebut dan biarkan ia untuk beberapa saat dan nama untuk tool tersebut akan dipaparkan seperti Rajah 2 di bawah:

Rajah 2: Nama tools
Jika anda perhatikan dalam Rajah 2 di atas, nama untuk tool tersebut iaitu Arrow Tool diikuti oleh satu huruf besar V yang dikurung oleh "(" dan ")". Ini bermaksud bahawa untuk mengaktifkan Arrow Tool, anda boleh menekan kekunci V pada papan kekunci (keyboard) anda. Secara amnya, ini merupakan shortcut key yang boleh digunakan untuk mengaktifkan sesuatu tool selain daripada mengklik pada icon tool tersebut.
Kotak 2 adalah bahagian yang dipanggil Timeline. Di dalam bahagian ini, kita boleh menyusun semua objek yang akan digunakan di dalam produk multimedia kita mengikut layer tertentu dan juga menentukan perlakuannya (behaviour) mengikut perjalanan masa. Jangan bimbang sekiranya anda tidak faham pernyataan ini, anda akan dapat melihatnya dalam bab berikutnya. Bagi tahap asas, anda perlu mengenalpasti dua bahagian penting di dalam Timeline iaitu LAYER dan FRAME. Kedua-dua konsep ini merupakan konsep yang paling penting untuk membolehkan anda mengetahui bagaimana mengawal perlakuan (behaviour) objek-objek di dalam movie anda (hasil kerja flash yang melibatkan animasi biasanya dipanggil sebagai movie).

Rajah 3: Timeline
Dalam Rajah 3 di atas, LAYER merupakan bahagian yang ditandakan oleh kekotak merah 1 manakala FRAME pula ditunjukkan oleh kekotak merah 2.
Kotak 3 dipanggil sebagai stage. Stage merupakan kawasan di mana anda akan menentukan susun-letak atau kedudukan objek-objek yang digunakan di dalam movie anda.
Kotak 4 pula terdiri daripada Action Panel dan Properties Panel. Action Panel digunakan untuk menentukan penggunaan Action Script tertentu di dalam movie anda. Properties Panel pula digunakan untuk menentukan ciri-ciri sesuatu objek atau movie yang akan kita hasilkan.

Bab Dua: Motion Tweening

Apakah itu motion tweening

Motion tweening merupakan satu teknik animasi yang selalu digunakan di dalam flash. Seperti namanya, motion tweening merupakan animasi yang melibatkan perubahan kedudukan sesuatu objek di dalam movie anda.


Langkah-langkah untuk menghasilkan animasi motion tweening
Pertama sekali, kita perlu ada satu objek di atas stage. Dalam kes ini, kita akan menggunakan satu teks sebagai objek. Untuk itu, klik pada Text Tool (lihat Rajah 4) atau tekan kekunci T pada keyboard anda. kemudian klik pada mana-mana kedudukan di atas stage anda. Selepas itu taipkan apa-apa perkataan. Dalam kes ini saya akan taipkan "Motion Tweening...". Lihat Rajah 5.

Rajah 4: Text Tool

Rajah 5: Objek teks di atas stage
Mungkin anda tidak berpuas hati dengan jenis font dan saiz yang digunakan. Untuk mengubah ciri-ciri font tersebut, select atau highlight teks terbabit dan klik pada Properties panel. Anda akan melihat beberapa pilihan untuk ciri-ciri teks tersebut yang boleh anda ubah (lihat Rajah 6). Ubah mana-mana ciri tersebut dan lihat hasilnya.

Rajah 6: Properties Panel menunjukkan ciri-ciri teks tersebut yang boleh diubah
Setelah selesai membuat perubahan kepada teks tersebut, klik semula Properties panel. Ini akan menyebabkan panel tersebut tersembunyi semula dan memberikan lebih banyak ruang untuk anda melihat stage.
Seterusnya, anda perlu mengubah jenis objek teks ini kepada Graphic Symbol. Untuk melakukan tugas ini, klik pada Arrow Tool [ ] atau tekan kekunci V pada keyboard anda. Kemudian klik pada objek teks tersebut untuk mengaktifkanya. PERINGATAN: Objek teks tersebut sepatutnya berada di dalam satu segiempat berwarna biru (Rajah 7) sekiranya ia telah diaktifkan. Ini penting kerana kita hendak mengubah teks tersebut. Oleh itu, teks itu perlu diaktifkan terlebih dahulu.

Rajah 7: Teks yang telah diaktifkan
Kemudian, klik pada menu [Insert], kemudian [Convert to Symbol] (Rajah 8). Untuk cara yang lebih pantas, anda boleh klik kekunci F8 di atas keyboard anda. Satu tetingkap (window) Convert to Symbol akan terpapar di atas skrin komputer anda. Taipkan nama yang bersesuaian dan klik pada pilihan Graphic. Kemudian, klik OK (Rajah 9).

Rajah 8: Convert to Symbol

Rajah 9: Tukar Objek teks kepada Graphic Symbol
Sekiranya langkah-langkah di atas telah berjaya dilaksanakan, sepatutnya ada satu tanda + di tengah-tengah objek teks tersebut yang menandakan bahawa objek teks tersebut telah menjadi Graphic Symbol dengan nama teks_motion dalam kes ini (Rajah 10).

Rajah 10: Objek teks telah menjadi Graphic Symbol
Sebelum kita ke langkah yang berikutnya, cuba perhatikan pada Timeline anda. Keadaannya adalah seperti dalam Rajah 11 di bawah.

Rajah 11: Timeline
Daripada Timeline tersebut, kita tahu bahawa ada satu LAYER dengan nama Layer 1 dan pada LAYER tersebut, ada satu KEYFRAME pada FRAME 1. KEYFRAME ditunjukkan oleh segiempat berwarna kelabu dengan satu titik hitam di atasnya. Jangan bimbang sekiranya anda tidak tahu apa itu KEYFRAME. Konsep ini akan diterangkan selepas ini. Garisan menegak berwarna merah tersebut menandakan kedudukan FRAME mana yang sedang aktif. Anda boleh mengubah nama LAYER tersebut dengan cara double-click pada nama tersebut dan kemudian taipkan nama yang dikehendaki (Rajah 12).

Rajah 12: Ubah nama LAYER
Seterusnya, right-click pada FRAME 10. Daripada menu yang terpapar, klik [Insert Keyframe] (Rajah 13).

Rajah 13: Insert Keyframe
Keadaan Timeline anda sepatutnya berubah seperti (Rajah 14) di bawah. Perhatikan bahawa ada satu lagi KEYFRAME di FRAME 10.

Rajah 14: Satu Keyframe baru di FRAME 10
Seterusnya, dengan KEYFRAME pada FRAME 10 masih dalam keadaan aktif (INGAT bahawa frame yang aktif adalah frame yang diselect (berwarna hitam) dan berada di dalam garisan merah menegak), alihkan kedudukan teks tadi ke kedudukan yang lain (Rajah 15).

Rajah 15: Kedudukan teks pada FRAME 10 telah diubah
Kemudian, right-click di antara kedua-dua KEYFRAME tersebut dan daripada menu yang terpapar klik [Create Motion Tween] (Rajah 16).

Rajah 16: Create Motion Tween
Timeline anda sepatutnya akan menjadi seperti Rajah 17 di bawah.

Rajah 17: Timeline setelah Create Motion Tween
Tahniah! anda baru saja selesai menyiapkan satu animasi mudah motion tweening menggunakan flash. Untuk melihat hasilnya, Klik pada menu [Control], kemudian [Test Movie]. Hasil untuk kes ini adalah seperti Rajah 18 di bawah.

Rajah 18: Animasi motion tweening yang telah siap
Sekarang saya akan menerangkan apa itu KEYFRAME. Biasanya dalam penghasilan satu animasi, pereka animasi akan menentukan pergerakan-pergerakan utama animasi tersebut. Sebagi contoh, dalam satu animasi sebiji bola yang melantun ke atas, pergerakan-pergerakan utama bagi bola tersebut adalah:
1. Pada masa bola itu masih di bawah
2. Pada masa bola itu sudah berada di atas

(1) (2) (3)
Oleh itu, KEYFRAME bagi animasi tersebut adalah (1) dan (2). Setelah menentukan KEYFRAME bagi animasi tersebut barulah animasi di antara kedua-dua KEYFRAME tersebut dihasilkan (3). Di dalam animasi motion tweening flash, kita cuma menentukan KEYFRAME sahaja. Animasi di antara kedua-dua KEYFRAME tersebut dihasilkan oleh flash apabila kita memberikan arahan Create Motion Tween (Rujuk Rajah 17).
Mari kita lihat semula animasi motion tweening kita yang telah siap di atas. Animasi tersebut boleh dijadikan supaya lebih menarik dengan menambahkan effect transparent. Untuk menambah effect tersebut, klik pada FRAME 1 dan kemudian Klik teks tersebut. Seterusnya, Klik Properties Panel dan ubah senarai Color kepada Alpha. Ubah nilai Alpha kepada 0. Sila Rujuk Rajah 19 di bawah.

Bab Tiga: Scene

Apakah itu Scene

Mungkin anda pernah mendengar perkataan ini di dalam proses pembikinan sesebuah filem. Di dalam konteks perfileman, scene bermaksud bahagian-bahagian kecil di dalam filem tersebut. Sebagai contoh, di dalam sebuah filem mungkin ada scene di dalam rumah, scene kemalangan, scene pertempuran dan sebagainya. Di dalam flash, maksud scence tidak jauh bezanya dengan konteks di atas. Scene adalah bahagian-bahagian kecil di dalam flash movie.
Bagaimana mewujudkan scene di dalam flash
Jika kita lihat kembali hasil kerja motion tweening di bab sebelumnya, sebenarnya animasi tersebut dilakukan di scene 1. Lihat pada kekotak merah bernombor 1 di dalam Rajah 21 di bawah. Pada kekotak merah bernombor 2 pula akan dipaparkan senarai scene yang ada di dalam movie kita dan kita boleh memilih scene untuk diedit daripada senarai ini. Memandangkan dalam animasi motion tweening ini cuma terdapat satu scene sahaja maka hanya satu scene disenaraikan.

Rajah 21: Animasi motion tweening di dalam scene 1
Mari kita tambah satu lagi scene di dalam movie ini. Untuk melakukan tugas ini, pergi ke menu [Modify], seterusnya [Scence] atau anda boleh menekan kekunci SHIFT dan F12 serentak (Rajah 22).

Rajah 22: Menambah scene ke dalam movie
Satu window dengan nama Scene akan terpapar di skrin komputer anda. Pada window tersebut akan dipaparkan scene yang telah sedia ada di dalam flash movie anda.

Rajah 23: Scene window
Untuk mengubah nama sesuatu scene, double-click pada nama scene tersebut dan taipkan nama yang baru. Jika anda perhatikan, terdapat 3 pilihan butang atau button di dalam scene window ini. Butang duplicate scene adalah untuk membuat satu salinan bagi scene yang sedang aktif (scene dengan highlight berwarna biru). Butang add scene adalah untuk menambah satu scene baru. Butang delete scene adalah untuk membuang mana-mana scene yang tidak diperlukan. Sekarang kita akan menambah satu lagi scene ke dalam flash movie kita dan menamakannya sebagai scene no 2. Scene 1 tadi telah diubah namanya kepada scene no 1. Scene yang baru dibuat biasanya akan menjadi scene yang aktif untuk diedit.

Rajah 24: Scene baru ditambah dan scene lama diubah namanya
Sekarang buat satu lagi animasi motion tweening di dalam scene no 2. Sebelum itu pastikan bahawa anda sedang bekerja di dalam scene yang betul (Rujuk Rajah 21). INGAT bahawa kekotak merah bernombor 1 menunjukkan scene yang sedang aktif untuk diedit. Kekotak merah bernombor 2 pula adalah untuk menukar kepada scene yang hendak diedit. Setelah anda siap membuat satu animasi motion tweening di dalam scene no 2, lihat hasil flash movie anda. Rajah 25 berikut merupakan hasil kerja di atas.

Rajah 25: Flash Movie dengan scene no 1 dan scene no 2
Perhatikan bahawa flash movie anda akan bermula pada scene no 1 dan kemudian terus ke scene no 2. Anda boleh mengubah susunan ini dengan mengubah susunan scene di dalam scene window. Scene yang berada di kedudukan yang paling atas akan dimainkan terlebih dahulu diikuti dengan scene di kedudukan bawah.
Simpan fail anda.


Rajah 19: Pada KEYFRAME 1, teks adalah transparent
Hasil perubahan ini adalah seperti dalam Rajah 20 di bawah.

Rajah 20: Effect transparent
Animasi pertama anda telah siap. Simpan fail anda.

Bab Empat: Button

Apakah itu button

Dalam Skop Pengkomputeran, button merujuk kepada satu bahagian dalam satu perisian yang akan menjalankan sesuatu tugas bila diklik. Dalam perisian multimedia, button banyak digunakan untuk proses navigation. Navigation di sini bermaksud perpindahan dari satu bahagian ke bahagian yang lain dalam perisian multimedia tersebut. Di dalam flash, untuk melakukan tugas ini, kita akan memberikan satu arahan kepada button untuk dijalankan bila ianya diklik. Arahan ini adalah dalam bentuk action script.


Bagaimana menggunakan button di dalam flash
Jika anda lihat kepada animasi yang anda lakukan sebelum ini, animasi tersebut akan terus berjalan berulang-ulang tanpa henti. Kita akan menambahkan dua button untuk mengawal pergerakan animasi tersebut. Satu button di dalam scene no 1 dan satu lagi di dalam scene no 2.
Kita mulakan dengan scene no 1. Sebelum membuat button, kita perlu membuat satu LAYER baru di dalam Timeline bagi scene no 1. Untuk membuat satu layer baru, klik pada ikon (perhatikan kedudukan mouse pointer) seperti yang ditunjukkan pada Rajah 26 di bawah. Ubah nama LAYER tersebut kepada button_1.

Rajah 26: Menambah LAYER ke dalam Timeline
Seterusnya kita akan meletakkan button di dalam LAYER button_1. Anda boleh membuat button sendiri untuk diletakkan di dalam LAYER tersebut tetapi buat masa ini anda akan menggunakan button yang telah disediakan oleh flash. Untuk mendapatkan button yang telah sedia ada di dalam flash klik pada menu [Window], [Common Libraries] dan kemudian [Buttons] (Rajah 27).

Rajah 27: Mendapatkan Buttons yang telah sedia ada di dalam flash
Seterusnya anda akan melihat satu window Library-Buttons.fla. Di dalam window ini terdapat pelbagai jenis buttons. Pilih mana-mana button yang sesuai dan kemudiah drag button tersebut ke atas stage. Sebelum itu, pastikan bahwa LAYER button_1 telah aktif terlebih dahulu.

Rajah 28: Menggunakan button sedia ada
Setelah proses di atas selesai dijalankan, sepatutnya akan kelihatan satu button di atas stage dan terdapat satu KEYFRAME di dalam LAYER button_1, FRAME 1 di Timeline anda (Rajah 29). Walaupun hanya terdapat satu KEYFRAME, button tersebut akan dapat dilihat pada FRAME 1 hingga FRAME 5 kerana FRAMES tersebut berwarna kelabu. Ini bermaksud FRAMES tersebut tidak kosong.

Rajah 29: Button telah berjaya dimasukkan ke dalam flash movie
Walaupun kita telah mempunyai sebuah button di atas stage, button tersebut masih belum boleh berfungsi kerana kita belum lagi memberikan arahan atau tugas yang perlu dijalankan bila ia diklik. Dengan lebih tepat, kita belum meletakkan sebarang action script pada button tersebut.
Untuk button ini, kita mahu supaya bila ia diklik, ia akan memainkan animasi kita di dalam scene no 1 bermula dari FRAME 1. Right-Click pada button tersebut. Satu senarai menu akan terpapar seperti dalam Rajah 30. Klik pilihan [Actions].

Rajah 30: Meletakkan action script pada button
Seterusnya, Action Panel akan terpapar. kemudian klik [Actions] - [Movie Control] dan kemudian double-click pada [goto]. Paparan Action panel akan menjadi seperti dalam Rajah 31 di bawah. Ubah settings atau tetapan mengikut paparan di bawah. Arahan ini membawa maksud bahawa bila button tersebut diklik, perjalanan animasi akan pergi ke scene no 1 dan mula memainkan animasi pada FRAME 1.

Rajah 31: Penetapan settings untuk action script bagi button
Setelah itu, Klik semula Action Panel pada tajuknya [ ] untuk mengecilkan kembali panel tersebut. Lihat hasil flash movie anda dengan klik pada menu [Control], [Test Movie] atau menekan kekunci CTRL dan ENTER pada keyboard anda serentak.
Jangan terkejut sekiranya flash movie anda akan terus bergerak seperti asalnya walaupun button tersebut telah disediakan. Ini kerana kita belum menambahkan satu lagi action script untuk membolehkan flash movie kita berhenti dan hanya berjalan bila button tersebut diklik.
Kembali ke ruang kerja anda dan buat satu lagi LAYER di atas LAYER button_1 tadi. Namakan LAYER itu sebagai action. Lihat Rajah 32 di bawah.

Rajah 32: Satu LAYER dengan nama action ditambah
Kemudian right-click pada FRAME 1 dalam LAYER action tersebut. Daripada paparan menu yang timbul pilih [Actions].

Rajah 33: Meletakkan action script pada FRAME 1
Sekarang kita akan meletakkan satu arahan stop pada FRAME 1 tersebut. Ini kerana kita mahu animasi kita berhenti dahulu sebelum pengguna menekan button yang telah kita sediakan. Apabila pengguna telah mengklik button tersebut barulah animasi kita dimainkan bermula dengan FRAME 1. Caranya sama seperti mana kita meletakkan action script pada button tadi. Bezanya, double-click pada [stop]. Sepatutnya, anda akan melihat satu tanda seperti huruf kecil 'a' di dalam FRAME 1, LAYER action sekiranya anda telah menambahkan action script dengan betul (rujuk Rajah 34 di bawah)

Rajah 34: Arahan stop pada FRAME 1
Lihat hasil flash movie anda semula. Sepatutnya animasi anda tidak akan berjalan selagi button tidak diklik.
Sekiranya segalanya berjalan dengan lancar. Teruskan untuk menambahkan button pada scene no 2.
Selepas itu, simpan fail anda.
Untuk pengetahuan anda, hanya dengan teknik dan pengetahuan ini sahaja anda boleh membuat satu presentation untuk menggantikan penggunaan Microsoft Powerpoint. Bersama-sama dengan nota ini saya sertakan dengan satu contoh mudah presentation dan juga workspace yang digunakan di dalam tutorial ini. Untuk menguasai flash, anda perlu banyak berlatih menggunakannya. Cuba lakukan explorasi pada tools yang lain, properties serta action script yang lain dan rajin-rajinkanlah membuat rujukan dari buku atau internet. SELAMAT BELAJAR...
Workspace yang digunakan di dalam tutorial ini terletak di dalam folder TUTORIAL dan sample untuk satu presentation terletak dalam folder SAMPLE.