Minggu 14: Drag & Drop Activity

Selasa, 18 Disember 2012 - Bismillahirrahmanirrahim...Nampak tak banyaknye donut kat atas tu..yummy. Minggu ni merupakan minggu yang terakkhir kelas diadakan Prof telah bermurah hati hati membelanjakan semua pelajar MPT 1193 donut BIG APPLE dan air kotak sebagai tanda kasihnya Prof kepada semua kalian pelajar. Semoga kami semua dapat menjawab final exam dengan sebaik-baiknya...Amin

Prof ada memberikan amanat dan jadual waktu peperiksaan untuk subjek Authoring System MPT 1193. Setakat hari ini mengikut jadual asal adalah

 11 January 2013 (Monday)

2.30 pg - 5.30 ptg

Bilik Seminar (Sebelah Bilik Dekan)

Perut pun dah kenyang jom sambung semula aktiviti kelas yang diberikan oleh Prof. Kali ini tutorial menggunakan action script untuk drag and drop objek ke dalam koordinat yang telah ditetapkan.

Dibawah adalah contoh script yang perlu dimasukkan ke dalam objek (circle dan rectangle) yang ingin di drag. Skrip boleh dicopy dari FB yang telah dimasukkan oleh Cik Farhana.

On(press){
startDrag(this);
}
On(release){
stopDrag();
if((this._x>=* lowest value for x in the box*)&(this._x<=*the highest value for x)&(this._y>=*the lowest value for y)&(this._y<=*the highest value for y))
{
_root.box1.gotoAndStop (2);
}else{
_root.box1.gotoAndStop (1);
this._x=*the origin of x-default location*
this._y=*the origin of y*
}
}

Bagaimana untuk kita mengetahui koordinat sesuatu objek? Caranya mudah sahaja alihkan objek ke kawasan yang ingin ditetapkan. Secara  langsung Flash akan memaparkan koordinat objek tersebut. Rujuk rajah di bawah.

Koordinat paling tinggi

Koordinat paling rendah

Ulangi langkah yang sama untuk objek ke dua (rectangle). Setelah mengetahui nilai-nilai koordinat masukkan di dalam script tadi. Untuk peringkat pertama lakukan pada objek circle diikuti dengan objek rectangle. 

Hasil aktiviti boleh dirujuk dipautan di bawah.

Hasilnya

Minggu 13 : Types of Interaction

Selasa, 13 Disember  2012 - Bismillahirrahmanirrahim....pada kali ini kami dikehendaki membuat latihan interaktif iaitu Flash boleh memberi respond pada pengguna. Berikut adalah aktivitti-aktiviti yang dipelajari berserta dengan cara kerja.

Aktitiviti 1 : Mutiple choice question

Langkah-langkah:
1. Buatkan satu fail baru
2. Pada Layer 1 taipkan soalan dalam mode 'static text'
3. Masukkan layer baru dan buatkan Butang A,B,C and D dan convert kesemua butang kepada Symbol
4. Buatkan satu layer Respon dan masukkan textfiled dan pilih Dynamic Text dan pada Var taipkan respon
5. Buatkan satu lagi layer Action dan masukkan actionscript seperti dibawah

stop ();

var respon;

respon = ""

6. Jika jawapan yang betul adalah butang A untuk masukkan actionscript ini

on (release) {

respon = "Congratulation,your answer is correct!";

}

7. Bagi butang B, C, dan D iaitu jawapan yang salah copy and paste actionscript dari butang A dan tukar ayatnya seperti dibawah

on (release) {

respon = "Your answer is wrong!";

}

8. Tekan Ctrl + Enter untuk melihat hasilnya

Contoh
_________________________________________________________________________

 Aktitiviti 2 : Text Entry Question

Langkah-langkah:
1. Buatkan satu fail baru

2. Pada layer 1, buatkan latar belakang dan masukkan teks untuk topik dan pastikan ia adalah berjenis static text. Kemudian namakan sebagai background
2. Tambah satu layer baru dan namakan layer tersebuat sebagai question dan taipkan soalan dan pastikan ia berjenis static text.
3. Pilih rectangle tool dan lukiskan kotak teks jawapan 

4. Pilih text tool dan lukiskan di atas kotak jawapan dan setkan sebagai input text serta setkan var answer

5. Pilih text tool lagi sekali  untuk paparkan jawapan dan lukiskan di bawah kotak jawapan, setkan sebagai dynamic text serta setkan sebagai respon.
4. Tambahkan layer baru untuk membina butang. Anda boleh pilih untuk membina butang sendiri atau pilih dari library button.
5. Tambahkan layer baru dan namakan layer tersebut sebagai stop. Kemudian masukkan actionscript seperti berikut 

stop ();
answer var;
var respon;
answer = ""
respon = ""

6. Manakala pada butang masukkan actionscript seperti dibawah untuk menyemak sama ada jawapan betul atau salah. Pengguna boleh memilih untuk menggunakan mouse atau keyboard untuk menyemak jawapan.

on (release) {

if (answer == "print client") {respon = "Correct!";}
            else {
            respon = "Incorrect, Your answer "+ answer +" is wrong";
            }
            }

            on (release, keyPress "<Enter>") {if (answer == "print client") {respon = "Correct!";}
            else {
            respon = "Incorrect, Your answer "+ answer +" is wrong";
            }
            }

7. PASTIKAN ANDA UNCHECK PADA AUTO KERN
8. Tekan Ctrl + Enter untuk melihat hasilnya

Contoh 

----------------------------------------------------------------------------------------------------------------------------- 

 Aktitiviti 3 :Drag & Drop

 Langkah-langkah:

1. Buatkan satu fail baru

2. Pada layer 1, lukiskan jalan menggunakan rectangle tool, impor gambar kereta dan bahagian badan kereta yang telah dipotong kepada 3 bahagian utama.

3. Tukarkan kesemua bahagian badan kereta kepada movie clip dan masukkan actionscript di bawah pada setiap bahagian badan kereta.

 on (press){
startDrag(this,true);
}

on(release){
stopDrag(); 

} 

4. Tekan Ctrl + Enter untuk melihat hasilnya

Contoh
____________________________________________________________________________ 

Aktiviti 4 : Main Menu

Langkah-langkah

1. Bina fail baru
2. Buat layout berserta dengan butang "Utama","Sukan" dan "Online"
3. Kemudian duplicate scence 1 menjadi scence 2 menggunakan arahan Window>Other Panel.Scence>Duplicate Scence
4. Pada scene 1 masukkan maklumat yang dikehendaki. Kemudian test movie tersebut, anda akan melihat movie akan berklip-klip tanpa henti. Maka anda perlu masukkan arahan actionscript stop(); pada scence 1
5. Ulangi proses di atas pada scene 2 masukkan maklumat yang dikehendaki dan masukkan arahan actionscript stop(); pada scence 2
6. Tambakan keyframe di setiap layer sehingga frame 10 pada kedua-dua scene.
7. Pada scence 1 buatkan pautan kepada scence 2 dengan menggunakan arahan action script

on (release){
gotoAndPlay("Scene 2",1);
}

9. Pada scence 2 buatkan pautan kepada scence 1 dengan menggunakan arahan action script

on (release){
gotoAndStop("Scene 1",1);
}

10. Butang Online merupakan pautan kepada laman web yang lain.Masukkan actioscript di bawah ini

on (release){
getURL("http://www.sungainyior.blogspot.com");
}


11. Tekan Ctrl + Enter untuk melihat hasilnya

Contoh

Minggu 13 : Animation

Selasa, 4 Disember  2012 - Bismillahirrahmanirrahim....I'm back to scholl again. Kali ini kami ditugaskan untuk menyiapkan aktiviti yang diberikan dalam Apps 3 - Creating Animation. Di sini saya masukkan video hasil ciptaan yang telah disiapkan dengan serba ringkas dan mudah kerana kesuntukan masa pada sejak akhir tahun ini. Semoga penerangan dan video dapat membantu rakan-rakan yang lain.

Task 1 : Bouncing Ball

1. Create New File Flash
2. In Layer 1 at Frame 1 draw ball using Oval Tool and put color
3.Go to Frame 20 move a ball below the floor
4.Go to Frame 40 move a ball up the floor
5. Finally test movie and convert to *.avi format

Task 2 : Text to Image (Harimau Malaya)

I use text tool to type HARIMAU MALAYA" and go to Modify > Break Apart (repeat again). After that go to Import Image To Library. Convert to Symbol > Graphic. Now go to Bitmap > Trace Bitmap. Press F6 at frame 40 and place image here. Select tween by shape and see the result...HARIMAU MALAYA BECAME A TIGER.

Task 3: Ant and Fish

  

I used 4 layer to do this animation. Below is description about the layers
Layer 1: I draw a bone fish using Line Tool
Layer 2: I draw a tunnel
Layer 3: I tracing image an ant using onion skin and color it using Paint

Bucket. After that i use motion guide to make a path and I make animation path by path and angel to make an ant moving look a real.
Layer 4: I use Text Tool and use Brightness to control the text.

That's All...Hope your enjoy it...:D

 Task 4 : A Cat

Layer 1 : I draw a cat
Layer 2 : Draw a mouth and animate mouth by applying frame-by-frame

Kesimpulan darila

Minggu 12 : Onion tracing

Ahad, 2 November 2012 - Bismillahirrahmanirrahim....pada minggu ini saya tidak dapat hadir ke kelas kerana isteri saya telah sarat mengandung untuk melahirkan seorang bayi. Oleh itu kami terpaksa bergegas ke Hospital Besar Melaka untuk membuat persiapan kelahiran. Isteri saya telah dimasukkan ke wad pada hari Isnin 26.11.2012 pada jam 9.00 pagi..setelah lama menunggu akhir seorang bayi perempuan telah dilahirkan pada jam 4.51 petang. Bayi seberat 3.2kg telah dinamakan Zuyyin Nur 'Aisy Binti Wan Mohd Hazani dan telah didaftarkan di JPN Melaka.

Inilah foto anak saya yang comelkan...hehe

Pada minggu ini, saya dimaklumkan kuliah berkenaan melukis menggunakan teknik Onion Skin. Teknik ini digunakan untuk meniru atau menoreh imej (Tracing image) yang asal ditukar kepada imej grafik. Untuk menggunakan fungsi ini.

1. Create New File
2. In Layer 1 > Import Image to Stage 
3. Press F6 frame 2
4. Click Onion Skin icon and remove the original image
5. And start tracing image

Saya telah mencuba untuk menggunakan teknik ini untuk anak saya. Wow..hasilnya seakan-akan menjadi walaupun saya bukanlah pandai sangat melukis ni..huhuhu. Prof telah membuat satu pertandingan untuk menguji kemahiran pelajar untuk melukis gambar sendiri tapi sayang saya tidak sempat mengambil bahagian pada kali ini. Mungkin rezeki saya di lain masa (ayat sedih..hihi). Prof juga turut meminjamkan Digitizing Tablet Wacom untuk melukis imej selain menggunakan mouse.

Minggu 11 : Flash Basic

Selasa, 20 November 2012 - Bismillahirrahmanirrahim....minggu ni minggu pertama belajar flash. Prof bermurah hati memberi pinjam ipad kepada semua pelajar untuk digunakan dengan sebaik untuk pembelajaran flash.TERIMA KASIH PROF.....

So berbalik kepada Adobe Flash CS3....Prof mengedarkan soalan-soalan mudah untuk menguji tahap pengetahuan pelajar tentang flash, tidak lupa juga latihan untuk memantopkan lagi kemahiran pelajar. Lagi banyak latihan lagi bagus ini kerana benda-benda kemahiran perlu dipraktikan selalu kalau tak lupa.

 

Di dalam flash mempunyai beberapa bahagian fungsi2 iaitu:-

1. Layers - merupakan lapisan untuk kita menyusun kedudukan objek di dalam flash
2. Tools - merupakan alatan-alatan yang digunakan untuk melukis, mewarna dan macam-macam boleh digunakan dalam bahagian ini.
3. Library - merupakan bahagian pustaka yang menyimpan koleksi imej
4. Properties - merupakan bahagian untuk mengubahsuai fail Flash.

To be continue...

Minggu 10 : Cuti Semester

Isnin, 19 November 2012 - Bismillahirrahmanirrahim...cuti semester sudah habis pejam celik dan sampai seminggu. Masa cuti digunakan untuk membuat review dan jugak assignment.

Untuk untuk projek (asp+dreamweaver) kali ini saya dan Azizul bercadang untuk membangunkan satu sistem mini yang mudah dan apa yang telah dipelajari sepanjang 9 minggu kuliah berlangsung. Sistem yang dimasukkan adalah SISTEM TEMPAHAN GAS PETRONAS.

Idea ini saya dapat ketika menonton cerita Bedah Tong Gas dari TV3. Ceritanya kelakar dan boleh la layan.

Kami telah membahagikan sistem ini kepada dua bahagian untuk dibangunkan iaitu part saya adalah bahagian sistem itu sendiri termasuk (login,pendaftaran,tempahan,kemaskini dan padam rekod) ianya melibatkan bahagian user dan admin. Manakala part Azizul adalah bahagian main page, survery dan forum.

So...Bagaimana sistem ini berfungsi?

Sistem ini berfungsi mudah sahaja, pengguna perlu register kemudian membuat tempahan penghantaran. Manakala admin pula menguruskan tempahan tersebut. Mudah je kan...tapi proses membangunkan amat mencabar jugak.

Di sini dilampirkan beberapa screen capture yang telah dibangunkan

 

 Login Pelanggan

 Maklumat Tempahan

 Bahagian Admin

Minggu 9 : Survey Form & Flash CS3

Selasa, 6 Nov 2012 - Minggu ini merupakan minggu yang terakhir saya dan kawan2 belajar Dreamweaver + PHP + MySql, rasa sedih sebab pasni akan tinggalkan benda tu semua lagi pun assignment Projek 1 blom siapkan lagi, Tapi dalam kesedihan ada kegembiraan bak kata pepatah "Patah Tumboh Hilang Berganti"... yang berganti adalah Adobe Flash CS3. Wow ini merupakan salah satu yang saya tunggu-tunggu untuk belajar selama ini...sebab selama ini tak sempat nak belaja.

Pada minggu ini juga, saya dia ajar cara membuat Survey Form atau dalam bahasa Melayu borang soal selidik. Untuk membuat borang survey ini boleh digunakan beberapa element seperti :

1. Text Fields
2. Multiline Text Fields
3. Radio Buttons
4. Check Boxs
5. Drop-down Lines

Tapi pada kali ini Prof mengajar menggunakan Radio Buttons sahaja yang lain kena explorer sendiri,la itu kan yang lebih afdal. Seperti biasa untuk membuat Survey Form kena ada database + fail php. So kena create dahulu database di dalam phpMyAdmin.

SQL query:

CREATE TABLE `projek2`.`soalselidik` (

`id` TINYINT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`gender` TINYINT NOT NULL ,
`edu` TINYINT NOT NULL ,
`q1` TINYINT NOT NULL ,
`q2` TINYINT NOT NULL ,
`q3` TINYINT NOT NULL ,
`q4` TINYINT NOT NULL ,
`q5` TINYINT NOT NULL

) ENGINE = MYISAM

Kemudian barulah pergi dekat Dreamweaver untuk membuat form survery. Masukkan dahulu soalan dan diikuti dengan Radio Group ini untuk memudahkan menyusun antara soalan dengan jawapan. Langkah yang perlu diikuti adalah untuk membuat Radio Group adalah pergi ke:-

Menu > Insert > Form > Radio Group

Persoalan di sini kenapa perlu pilih Radio Group bukannya Radio Buttons? Jawapannya adalah Radio Buttons menyediakan user untuk membuat pilihan di dalam pelbagai pilihan dan hanya satu sahaja dibenarkan untuk dipilih. Radio Buttons mesti diletakkan di dalam group, dalam hanya satu sahaja jawapan yang akan dipilih berdasarkan soalan yang diberikan dalam satu-satu masa.

Setelah siap membuat soalan dan pilihan jawapan, simpan fail tersebut dan buat connection database(jika perlu) dan Server Behavior > Insert Record. Seperti di dalam rajah di bawah

Pastikan setiap jawapan berada pada Radio Group yang betul untuk mengelakkan jawapan yang diberikan adalah salah dan jangan lupa untuk memasukkan Submit Button untuk menghantar dan menyimpan data di dalam database di dalam table 'soalselidik'.

Contoh Borang Survey

Hasil jawapan survey di dalam database

Adobe Flash CS 3

Flash..oh..Flash..satu perisian yang amat menarik untuk dipelajari. Prof sempat berpesan supaya ahli kelas cuba mengambil kesempatan cuti sem untuk mengeksplor perisian ini. Untuk kelas ini bahagian yang digunakan adalah Flash Action Script 2.0 kerana lebih mudah dan sesuai untuk new user macam saya.

Daripada sumber-sumber yang dipercayai...perisian flash awalnya telah dikeluarkan oleh syarikat Macromedia dan merupakan sebuah perisian animasi yang berunsurkan web. Di dalam flash kita boleh membuat pelbagai rekabentuk animasi yang lebih interaktif berbanding dengan Power Point, Authorware mahupun Director.

Kelebihan utama pada flash adalah ianya menggunakan grafik vektor yang berfungsi untuk menjaga kualiti imej walaupun dikecilkan atau dibesarkan saiznya tidak seperti imej dalam format *.jpeg dan *.gif yang akan pecah bila dibesarkan saiznya.