Monday, May 12, 2014

WEEK13: CREATING INPUT & OUTPUT FIELDS IN FLASH

hiii...pada kelas kali ne kami telah diajar bagaimana untuk membangunkan jenis2 soalan menggunakan flash yang merangkumi:
  • multiple choice questions
  • text entry questions
  • drag and drop questions

DEVELOPING MULTIPLE CHOICE QUESTIONS

1. buka flash cs3 > new > pilih Flash file (Actionscript 2.0) > lengkapkan seperti di bawah:


pastikan properties pada text 'A', 'B', 'C' dan 'D' adalah Static text.

3. untuk membina feedback pada jawapan yang dipilih, pergi pada text tool dan bina satu ruang feedback seperti gambar di atas >  pergi pada properties pilih: Dynamic Text, var: respon 


4. pergi pada button A > klik kanan > pilih Actions dan taip seperti dibawah (ulang pada jawapan yang salah iaitu pada button C dan D :



5. pergi pada button B > klik kanan > pilih Actions dan taip seperti dibawah:


dan hasilnya
p/s:printskrin je mampu sebab video xboleh nak upload :P :

hasil berikut seperti anda menjawab soalan objektif dan terus mendapat feedback jawapan 




Done!!

=====================================================

DEVELOPING TEXT ENTRY QUESTIONS

1. buka flash cs3 > new > pilih Flash file (Actionscript 2.0) > lengkapkan seperti di bawah dengan menggunakan text tool:
2. Pada kotak kedua dibawah, pergi pada text tool > jadikan seperti dibawah, iaitu sebagai ruang jawapan yang akan diisi oleh pengguna > pergi pada properties, pilih: Input Text, dan Var: answer

3. bina button seperti dibawah, pastikan properties pada text adala Static Text.:


4. highlight semua button > klik kanan pilih Convert to symbol.. > tick button > OK.
5. klik kanan pada button tersebut > pilih Actions > taip actionscript seperti dibawah:


pastikan variable answer , huruf dan ejaannya sama supaya actionscript ini boleh memanggil balik variable ini apabila button Check answer ditekan:

on (release) { if (answer == "24") {respon="correct!";
} else {
  respon = "Incorrect.Your answer" + answer + "is incorrect";
  }
  }
  on (release, keyPress "<Enter>") { if (answer == "24") {respon = "correct!";
  } else {
  respon = "Incorrect. Your answer " + answer + " is incorrect";
  }
  }
  
6. bina ruang dengan memilih text tool yang seterusnya di bawah button. ia adalah untuk paparan feedback setelah button check answer ditekan:

7. klik pada kotak feedback > pergi pada properties, pilih: Dynamic Text, dan Var: respon.


pastikan variable respon, huruf dan ejaannya sama supaya actionscript ini boleh memanggil balik variable ini apabila button Check answer ditekan.

lihat hasilnya (ctrl dan Enter):
apabila jawapan yang dimasukkan betul:


apabila jawapan yang dimasukkan salah:


Done!!!

developing drag and drop questions will be coming soon~~~ 

Saturday, May 10, 2014

WEEK 12 : Basic Timeline Action - goto, Play, Stop etc

hii..minggu ne kami belajar tentang Actionscript iaitu goto, play dan stop.kami hanya menggunakan actionscript 2.0 kerana lebih mudah dari actionscript 3.0 yang mana, ia lebih complex codingnya..
apa itu actionscript??

actionscript merupakan bahasa programming untuk flash.selain daripada actionscript ne, bahasa programming yang saya tahu dan pernah belajar semasa degree dahulu adalah C++ (subjek paling xsuka sbb susah gilerr) dan javascript (okla dari C++)

jika dalam kelas lepas, Dr Asykin telah ajar salah satu cara untuk menggunakan actionscript supaya kita dpt mengaplikasikan ke dalam coursework.

tapi tutorial kali ne saya akan tunjukkan bagaimana membangunkan Actionscript iaitu goto, play dan stop menggunakan button play, pause dan stop..

1. lukis apa2 bentuk yg anda suka > klik kanan pada bentuk tersebut > pilih Convert to symbol.. > tick Graphic simbol.

2. pergi pada timeline > klik kanan pada mana2 frame, e.g: 40 > insert keyframe (ctrl F7) > gerakkan simbol tadi pada mana2 tempat, kekanan contohnya, ini adalah untuk melihat pergerakan yang berlaku nanti.

3. pergi pada timeline > klik kanan pada mana2 frame antara 1 - 40 > pilih Create shape tween

4. pergi pada timeline > insert new layer > buat bentuk baru (utk button) >klik kanan pada bentuk tersebut > pilih Convert to symbol.. > tick Button simbol.

5. copy dan paste button tadi sebanyak 2 kali.e.g:


6. klik pada Text tool, pastikan pda bahagian properties Text tool adalah Static Text > taip 'Play' , 'Pause' dan 'Stop' pada button masing2:



7. klik pada Play button > klik kanan > pilih action (masukkan actionscript), akan keluar paparan seperti berikut:


8. masukkan actionscript pada ruang tersebut:



untuk melihat error pada actioncript anda, klik pada butang , jika tiada error pada actionscript anda, paparan seperti dibawah akan keluar, jika ada error berlaku, akan diberitahu:


9. seterusnya, klik pada button Pause, dan ulang langkah yang sama seperti di atas:


10. seterusnya, klik pada button Stop, dan ulang langkah yang sama seperti di atas:



11. klik pada frame pada mana2 layer > ,masukkan actionscript:


Done!!

klik ctrl dan enter untuk melihat hasilnya~~~

atau boleh lihat tutorial disini

Monday, May 5, 2014

WEEK 11 : ONION SKIN

hiii...minggu ne kami belajar lukis2 je..hihihi dan dapat WACOM!!..yehett~~ tapi takdela excited sangat sebab bukan jenis orang berseni yang pada waktu lapang menghabiskan sisa2 hidup dengan melukis..banyak asemen lain nak buat hoiii..tapi jakonla sekejap..
ini wacomnya..


wacom ini kegunaannya adalah:

  • pressure sensor - seperti pensil dan berus, anda boleh mengawal kadar penekanan.
  • pemadam - ada pemadam di hujung pensil/stylus, dan boleh jugak terbalikkan pensil tersebut untuk memadam
  • tiada bateri - sambungkan dengan menggunakan USB
  • Left & Right click - terdapat butang pada stylus ini, jadi anda boleh gunakan ia bagi menggantikan mouse anda itu
  • zoom in & out - terdapat satu "toggle" untuk zoom in dan zoom out
  • 4 butang tambahan - butang ini boleh diubah fungsi mengikut keselesaan anda sendiri. 
  • sesuai untuk semua software -adobe photoshop, flash, illustrator dan banyak lagi.
sumber: http://sembangkomputer.com/reviu-wacom-bamboo-pen-tablet/



inilah hasil lukisan menggunakan wacom (xdela lukis sangat..guna teknik tekap je..)

bagaimana menggunakan teknik tekap dalam flash? 

1. copy apa2 gambar ke dalam stage:


2. pergi pada timeline > klik pada mana2 frame e.g: ke 10 > insert keyframe > klik pada butang onion skin (sebelah line merah, ada 2 petak bertindih dan belakang petak tu warna putih) > dan klik butang Del untuk padam gambar tersebut :


anda akan dapati gambar anda akan kelihatan seperti berikut:


jadi anda bolehla melukis mengikut gambar tersebut. tujuannya adalah supaya kita boleh mengambil objek tanpa copyright. 

hasilnya:


anda boleh gunakan kembali gambar yang telah anda lukis dengan copy sahaja kesemua gambar tersebut.

Done!!



 fungsi onion skin sebenarnya adalah supaya memudahkan kita untuk melihat pergerakan objek yang dibuat supaya kelihatan lebih smooth dan cantik. anda bolehla klik ini untuk mengetahui lebih lagi megenai fungsi onion skin.

WEEK10: SOUND into FLASH & Basic Interactivity (button)

Insert Sound


hii readers....
sebuah montage yang menarik selain daripada videonya, tentula audionya..jika tiada unsur audio dimasukkan tentulah montage tersebut sangatlah bosan dan tidak menarik perhatian.

dalam flash, audio digunakan untuk menarik perhatian pengguna selain mempunyai fungsi2 tertentu seperti bunyi untuk button dan sbgnya..

format audio yang sesuai adalah:

  • AAC (Advanced Audio Coding)
  • AIFF (Audio Interchange File Format) - Mac only ?
  • MP3 (Moving Pictures Expert Group Level-Layer-3 Audio)
  • AVI (Audio Video Interleave)
  • WAV (Waveform Audio Format)
  • AU (Sun)
(Some formats may depend on whether QuickTime is installed on your computer).
best bet is to use MP3 format, since it is very popular. E.g. it is easy to find music or sound textures on the Internet.
Flash CS3 and CS4 provide some sounds in a library (Menu: Window -> Common Libraries -> TNT sounds). CS4 has a much better choice...

sumber:http://edutechwiki.unige.ch/en/Flash_sound_tutorial

mari kita lihat proses bagaimana ingin memasukkan audio ke dalam flash..

1. buka Adobe Flash CS3 Professional > pada create new pilih Flash File (ActionScript 2.0) > File > Import > Import to Libary. dan anda akan lihat pada library anda akan ada lagu yang ada masukkan tadi:


2. drag lagu pada library tersebut ke stage dan pergi pada timeline > klik kanan > insert frame pada mana2 frame yang anda suka:


3. pergi pada properties, anda boleh edit mengikut citarasa anda. pergi pada properties > Edit... > akan keluar paparan seperti dibawah:


====================================================

Basic Interactivity (Button)



1. buka Adobe Flash CS3 Professional > pada create new pilih Flash File (ActionScript 2.0) > pergi pada tool > pilih Oval tool > lukis pada stage (reka button mengikut kreativiti anda)



2. klik kanan pada setiap bentuk> klik Covert to Symbol... > tick movie klip > name: mc view > ulang pada EDIT dan INSERT.

3. selepas itu, ulang kembali step tadi, klik kanan pada setiap bentuk > klik Covert to Symbol... > tick button > name: btn view > ulang pada EDIT dan INSERT.

pastikan pada library anda seperti gambar dibawah:




4. klik pada VIEW button sehingga keluar seperti dibawa:



5. klik pada over > klik kanan > pilih insert keyframe > klik balik pada view > pergi pada filter > pergi pada simbol '+' > pilih glow (ikut citarasa anda). setelah melihat perubahan yang berlaku pada button anda, klik Ctrl dan Enter untuk melihat hasilnya..
p/s: videonya tak boleh upload kat sini tak taula kenapa.. :(

jangan lupa save semua kerja anda!!

anda boleh lihat contoh tutorial disini:





Sunday, April 20, 2014

WEEK 9 : ANIMATION in FLASH

MOTION TWEEN


1. File > new > pilih Flash File (ActionScript 2.0) > OK.


3. convert to symbol > pilih Type: Movie Clip, Name: tembikai.
4. pergi pada timeline > klik kanan pada frame ke 45 > insert keyframe. 


dan akan keluar simbol seperti ini:


5. klik timeline frame ke 45 dan ubah kedudukan tembikai tadi kerana kita ingin membuat pergerakan pada tembikai itu. klik Shift dan pada frame yang sama gerakkan kekanan (klik shift agar pergerakkan tersebut sekata)
6. klik pada tembikai dan pilih Free Transform Tool > dan gerakkan tembikai arah clockwise (nak menampakkan kesan bergolek pada tembikai tersebut)


7. pergi timeline klik pada mana2 frame antara 1 hingga 45 > pilih create motion tween.


pastikan simbol anak panah muncul selepas itu. pergi pada properties > tick pada orient to path.


pergi pada Control > Play untuk melihat hasilnya...

============================================================

SHAPE TWEEN

1. File > new > pilih Flash File (ActionScript 2.0) > OK.
2.pilih Polystar Tool pada toolbar > lukis pada stage


3. pergi pada timeline dan pada frame yg ke 45, klik kanan > pilih insert blank keyframe


4. pada frame tersebut, buat bentuk yang lain pula, iaitu pilih bentuk bulat pula pada Oval Tool


5. pergi pada timeline, dan klik mana2 frame 1 hingga 45dan klik kanan > pilih create shape tween.
dan anda akan lihat simbol seperti ini akan keluar:


pergi pada Control > Play untuk melihat hasilnya...

===========================================================




WEEK 9 : INTRO to SYMBOLS

Graphics, Button & Movie Symbols

objek yang kita gunakan dalam Flash dipanggil simbol. simbol tersebut boleh dijadikan sebagai grafik, button dan movie simbol.

mengapa kita menggunakan simbol????
| automatik akan tersimpan dalam library dan boleh digunakan berulang2 kali tanpa memberi kesan pada size fail flash kita. |
| boleh digunakan dengan segera dan menjimatkan masa |


bagaimana ingin menukar setiap simbol ini menjadi simbol grafik, button dan movie?

untuk simbol grafik
1. file > new > pilih Flash File (ActionScript 2.0) > OK.


2. copy apa2 gambar dan paste ke dalam flash. 


3. klik kanan > pilih convert to symbol.

 
4. keluar popup seperti dibawah, isikan Name: e.g: Flower, Type: Graphic > OK.


5. anda boleh melihat perubahan pada library setelah anda menukar kepada simbol Graphic. 



 ulang langkah yang sama untuk simbol  button dan movie

=========================================================


Saturday, April 19, 2014

WEEK 8: BERMULALAH PENGEMBARAAN FLASH..

Hii semua..berakhirnya pembelajaran Dreamweaver pada kelas yang lalu bersama bersama Prof Zaidatun, pada kelas kali ini kita akan belajar Flash pula dimana saya akan menggunakan Adobe Flash CS3 Professional sepanjang pembelajaran nanti. 


INTRODUCTION ADOBE FLASH CS3 PROFESSIONAL

~ Flash is a multimedia software that is used to design user interfaces and applications. 
~ Flash packs a lot of functionality into one easy-to-use program that can:
- create animated movies from scratch
- import graphic content created in other programs and use Flash to animate it.
- how the site will function and appear regardless of the browser used.

INTERFACE ADOBE FLASH CS3 PROFESSIONAL




Toolbar 
~ contains all the tools you need to draw and edit objects.
~ every symbols have their own functions.
~ that are option that can modify how the tools function.


The Tools panel displaying the four sections:

Tool - Contains drawing, painting, and selection tools.
View - Contains zooming and panning tools.
Colors - Contains tools for setting stroke and fill colors.
Options - Displays options for the selected tool that affect the tool's painting or editing operations.

Timeline
~ contains the frames of the animation and will display them in sequences from left to right.
~ when your animation is viewed, the viewer will see the frames in sequential order starting at frame 1.

Panel
~ Flash screen elements that give you easy access to the most commonly used features in Flash. 
~ help you view, organize, and change elements in your Flash document. 
~ can have different appearances or states and are categorized into different types based on function.

Properties Panel
~ contains the options you have for the tool/object you are working with.

Stage
~ display your animations, images, and other content.
~ the ares visible to users after you publish/export a finished project.

setelah mengenali interface, mari kita lihat hasil dibuat:


Garden Screen




No.
Tool Name
Fuction
Object
1
Selection tool
Selects, moves, and edits shapes and drawings.
Tree/flowers/clouds/hill
2.
Subselection tool
Modifies the anchor points and tangent handles of a shape’s path or outline.
Tree/flowers/clouds/hill
3.
Free transform
-Freely transforms objects, groups, instances, or text blocks.
-Can move, rotate, scale, skew, and distort individual transformations or combine several transformations all at once.
Tree/flowers/clouds/hill
4.
Line tool
Draws the straight  line
Hill
5.
Oval
Creates circles and ovals composed of fills and strokes, just fills, or just strokes
Hill
6.
Rectangle
Creates rectangles and squares composed of strokes and fills, just strokes, or just fills.
Grass
7.
Pain bucket
Adds a fill inside a shape and can change the color of a fill.
Tree/flowers/clouds/hill/grass


selamat mencuba!!