Modul 4: Animasi Dan Padanan.

A. Animasi Ringkas.

Mula-mula kita buka satu fail baru bagi Perisian Macromedia Autoware. Masukkan satu ikon Display dan taipkan teks: Welcome ! di hujung atas kiri paparan kosong itu. Namakannya sebagai Paparan 1.

Ubahsuaikan saiz teks itu dengan mengaktifkan teks itu dan seterusnya mengklik menu Text > Size > Other. Apabila tetingkap seperti rajah berikut dipaparkan, tukarkan Font Size : 10 20.

Simpan fail tersebut dengan nama Modul 4 Animasi.

Masukkan satu lagi ikon Motion dan namakannya sebagai Gerakan 1 seperti rajah berikut.

Klik berganda pada ikon Gerakan 1 dan satu tetingkap seperti rajah berikut akan dipaparkan. Buatlah pilihan dan ubahkan nilai-nilai seperti rajah berikut.

Prepared by Lu Cheng Soon 1

Seterusnya, klik pada tag Layout, apabila tetingkap seperti rajah berikut dipaparkan, klik pada teks Welcome ! (dalam Paparan 1) dan tarik tanpa lepas teks Welcome ! itu dari hujung atas kiri ke hujung kanan bawah secara perlahan-lahan. Kemudian, klik butang OK.

Simpan fail itu lagi dan klik pada ikon Restart untuk melihat hasilnya. Apakah perasaan anda ?

Untuk memantapkan fahaman anda dengan ciri-ciri pergerakan, anda digalakkan untuk mencuba semua jenis pergerakan tersebut. Berikut merupakan keterangannya.

Direct to Point – Ia menggerakkan objek di sepanjang satu garis lurus yang telah anda tetapkan.

Direct to line – Ia menggerakkan objek dalam satu garis lurus yang telah anda tetapkan. Dengan menetapkan nilai atau pembolehubah yang mewakili titik akhir, anda menentukan jarak bagi sesebuah objek untuk bergerak. Ia amat berguna bagi menghasilkan pergerakan sesebuah objek dalam jarak sempadan yang tertentu.

Direct to Grid – Ia menggerakkan sesebuah objek ke satu lokasi pada grid mengikut nilai X dan Y yang telah ditetapkan.

Path to End – Ia menggerakkan objek dalam laluan garis lurus atau lengkungan atau bulatan berdasarkan titik-tititk yang ditentukan.

Path to Point – Ia menggerakkan objek dalam laluan garis lurus atau lengkungan ke satu lokasi (point) berdasarkan titik-titik yang ditentukan.

B. Padanan.

Prepared by Lu Cheng Soon 2

Bina satu lagi aplikasi baru Macromedia Authoware yang mempunyai saiz paparan 640 x 480. Masukkan dua ikon Display ke dalam aplikasi. Namakan ikon Display pertama sebagai Square dan Circle bagi ikon Display kedua seperti rajah berikut.

Simpan fail tersebut sebagai Modul 4 Padanan. Buka ikon Square dan lukiskan satu segi empat di atas hujung kiri. Buka ikon Cirlce dan lukiskan satu bulatan di bawah hujung kiri seperti rajah berikut.

Masukkan satu ikon Interaction dan namakannya sebagai Padanan. Masukkan satu lagi ikon Display di bawah ikon Interaction Padanan dan namakannya sebagai Square OK seperti rajah berikut.

Pilih Response Type : Target Area seperti rajah berikut. Kemudian, klik butang OK.

Prepared by Lu Cheng Soon 3

Masukkan satu lagi ikon Display di sebelah kanan ikon Display Square OK dan namakannya sebagai Square Tak OK seperti rajah berikut.

Klik berganda pada ikon Square OK dan taipkan Tahniah! Jawapan anda betul !. Klik berganda pada ikon Square Tak Ok dan taipkan Haraf Maaf ! Jawapan anda salah !

Klik berganda pada ikon interaction Padanan. Lukiskan satu objek square dan satu lagi objek circle. Taipkan satu baris teks: Sila padankan objek-objek di sebelah kiri dengan objek-objek di sebelah kanan seperti rajah berikut.

Heretkan segi empat bergaris putus-puts (Square OK) ke kanan untuk memenuhi ruangan segi empat tersebut seperti rajah berikut.

Prepared by Lu Cheng Soon 4

Heret pula objek segi empat bergaris putus-putus (Square Tak OK) ke hujung atas kiri dan besarkannya supaya memenuhi keseluruhan skrin paparan seperti rajah berikut.

Tutupkan tetingkap tersebut (Presentation Window) , simpan fail tersebut dan klik ikon Restart untuk melihat hasilnya.

Apabila tetingkap seperti rajah berikut dipaparkan, klik pada objek segi empat di sebelah kiri ( Perhatian: Bukan bergaris putus-putus !) dan heretkan objek segi empat itu ke kanan untuk menutupi segi empat di kanan.

Prepared by Lu Cheng Soon 5

Didapati segi empat bergaris putus-putus akan melompat bersama-sama ke segi empat kanan itu tersebut. Tukarkan pilihan On Drop : Leave at Destination kepada Snap to Center.

Klik pada tag Response dan tukarkan Status: Not Judge kepada Correct Response seperti rajah berikut. Kemudian, klik pada butang OK.

Tetingkap yang sama akan dipaparkan bagi objek Square Tak OK. Klik pada butang Cancel. Klik ikon Restart dan tetingkap yang sama dipaparkan semula. Klik pada segi empat di sebelah kanan tanpa lepaskan dan heretkannya ke tengah-tengah segi empat yang bergaris putus-putus seperti rajah berikut.

Tukarkan juga pilihan On Drop : Leave at Destination kepada Put Back dan seterusnya klik pada tag Response untuk menukarkan pilihan Not Judge kepada Wrong Response.

Ulangi langkah-langkah di atas bagi objek kedua, iaitu Circle.

Prepared by Lu Cheng Soon 6

Masukkan dua lagi ikon Display ke dalam aplikasi. Pertama, namakannya sebagai Circle OK dan Kedua, namakannya sebagai Circle Tak OK.

Klik berganda pada ikon Circle OK dan taipkan teks Tahniah ! Jawapan anda betul !. Tutup tetingkap tadi dan klik berganda pula pada ikon Circle Tak OK. Taipkan teks Haraf Maaf ! Jawapan anda salah !

Tutup tetingkap tadi dan simpan fail lagi.

Ubahsuaikan saiz segi empat Circle OK (bergaris putus-putus) dan heretkannya untuk menutupi bulatan di kiri seperti rajah berikut.

Ubahsuaikan kedudukan atau saiz (sekiranya perlu) segi empat Circle Tak OK (segi empat bergaris putus-putus) supaya menutupi keseluruhan skrin (atau bertindih dengan segi empat Square Tak OK yang bergaris putus-putus) seperti rajah berikut.

Tutup tetingkap tadi dan klik pada ikon Restart untuk langkah-langkah seterusnya.

Apabila tetingkap Properties: Response dipaparkan, klik pada objek Circle di kanan itu. Didapati segi empat bergaris putus-putus (Circle OK) akan melompat dan melekat pada bulatan (Circle) kanan itu seperti rajah berikut.

Prepared by Lu Cheng Soon 7

Herefkan objek bulatan kanan (Circle) (Perhatian: Bukan segi empat bergaris putus-putus itu) ke kanan untuk menutupi bulatan kanan itu. Didapati segi empat bergaris-garis putus-putus juga mengikutinya.

Pada tag Target Area, buatlah pilihan On Drop : Snap to Center. Pada tag Response, buatlah pilihan Status: Correct Response. Kemudian, klik butang OK.

Apabila tetingkap yang sama dipaparkan bagi Circle Tak OK, klik pada butang Cancel.

Klik butang Restart lagi. Apabila tetingkap yang sama dipaparkan, klik pada bulatan kiri tanpa lepas dan heretkannya ke tengah-tengah skrin dan lepaskannya.

Pada tag Target Area, buatlah pilihan On Drop: Put Back. Pada tag Response, buatlah pilihan Status: Wrong Response dan seterusnya klik butang OK.

Tutup tetingkap itu dan aplikasi anda sepatutnya kelihatan seperti rajah berikut.

Klik pada ikon Restart untuk melihat hasilnya. Adakah hasil anda memuaskan ?

Prepared by Lu Cheng Soon 8