Tuesday 18 December 2012

❤ Apps 4: Types of Interaction ❤

Posted by kErTaS PeNseL at 17:17 0 comments
salam and good morning to all!!!!
sorry yaaa...today br ade kesempatan untuk update my blog yg cantekk niee...hehehe (such a perasan)..huhu  erm after dah study pasal apps 1, 2 amd 3 and now kite masuk for the last apps pulak eh which is apps 4. Apps 4 nie its about types of interaction. as far as i know, we can create such an interaction by using ADOBE FLASH..especially if we want to built up multimedia learning courseware it is better to use ADOBE FLASH as a platform. ok guys, untuk types of interaction nie ade 4 jenis interaction. The types are as stated below:

A- Multiple Choice Question
B- Text Question
C- Navigation Main Menu
D- Drag n Drop

ok, now untuk create setiap intection yang kite nak ade step2 or procedure yang kite perlu ikut satu persatu..so for those yg ase mcm nk try tue boleh la ikut step nie..hehehe step nye ade seperti dibawah..hehehe (aku siap explain detail lagi tau..huhu such a perasan!!! huheuheu)

Task 1: Create a multiple choice questions that will provide a correct or incorrect response upon your answer.

Steps;
1- Name the first layer as question.
2- Choose text tool --> select static text on the properties panel --> typing the question
3- Insert new layer --> name the layer as buttons
4- Create button by using oval tool --> choose appropriate color--> resize the button
5- Choose text tool --> Type 'A' on top of the button which represent as A button
6- Convert button to symbol by select whole button --> click modify --> convert it to symbol --> name the button as A --> select button type --> OK 
7- Step 6 is same goes to others 3 button (B, C, D) --> choose appropriate color and resize each button (same size as A) -->Convert all the buttons to symbol and select button type.
8- Insert new layer --> name it as response
9- Choose text tool --> choose dynamic text --> type response as it variable in the properties panel
10- Insert another layer --> name it as action --> put action script by right click and choose Actions.

The action script:

stop();
var respon;
respon = " "

11-  Since the answer is A --> right click on the button A --> choose actions --> type in the action script below:

The action script: 

on (release) {
 respon = "Congrates, Your answer is correct!";
}

12. Do the same step for button B, C, and D (repeat right click -->choose actions --> type in the action script) --> just edit the respon for the other button according what you want it to be as long as it shows it is the wrong answer because the right answer is A..huhu

13.  Control --> Test movie --> Done or the other alternative just press ctrl+enter..huhu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Task 2: Create one application that allow users to type an input of question provided. 

Steps;
1- Prepare your background as creative as you are..^_^
2- Choose text tool to type in topic for the question about and you have to make sure it is STATIC TYPE by change it in the properties panel --> name the layer as background
3- Insert new layer --> name it as question
4- Choose text tool --> select STATIC TYPE --> type in the question.
5- Then, select rectangle tool and create box shape on the stage
6- Select text tool --> preposition it and you need to change it to INPUT TEXT by changing it in the properties panel
7- Select text tool again --> but now choose DYNAMIC TEXT. This is for our respon to the answer..
8- Insert new layer --> name as buttons
9- From library panel -->choose play button --> drag to stage --> resize the button
10- Insert new layer and name it as stop
11- Right click on first keyframe and choose actions.  Type in the action script below.

The action script:

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

13- Select button --> right click --> choose actions.  Type in the action script below.

The action script:

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";
 }
}

14- In the INPUT text field --> type in 'answer' for it variable
15- In the DYNAMIC text field --> type in 'respon' for it variable
16- Control --> test movie --> Done or other alternative is press ctrl+enter

*you have to make sure that you already uncheck auto-kern..if not, it doesn't work..that's my experience..huhu 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Task 3: Create a Main Menu that contain following actions:
  • A button that navigate form 1 page to another
  • A button that navigate from 1 scene to particular frame of different scene
  • A button that navigate users to other webpage
Steps :

1- Create the background -> insert logo image, header of the site and buttons  (home, about and page). Make sure to convert all the buttons (home, about and page) to symbol by click on modify>convert to symbol>name the button>select button> click 'OK'.

2- Click on the 'Home' button --> go properties --> Type in 'home' in the Instance name field. Repeat this for the other two button, but do change the instance name according to the button name.

3- After that, we need to duplicate scene.  To do this, go to window --> Other panels --> Scene -->Duplicate scene and rename it from Scene 1 to Scene 2 by double click on it.

4- Select Scene 2 -->Choose text tool --> Type in the description of the scene 2..for mine, my scene 2 is 'About'..

5- Do the same as step 4 for Scene 1. 

6- Test the movie.  Here we can see that the description that we create are keep repeating non-stop.  Hence, we insert action script at the button layer on scene 1. 

      Action script : stop ();

7- Insert frame for all the layer (until frame no 15) in Scene 1.  Same goes to the Scene 2.

9- In Scene 2, insert new layer --> name it as about --> go to properties panel --> in the frame field, type 'aboutPage'. On the about layer, it shows the name of frame that we type in.

10- Still in the Scene 2, insert new layer -->name it as stop --> right click on the first frame -->choose actions --> Type action script

action script: 
 'stop ();'.

11- Now, change to Scene 1, right click on the 'About' button -->choose actions. Type in the action script.

12- The action script:
on (release) {
gotoAndPlay("Scene 2", 1);
}
13- Test the movie --> click on the ' About' button, it will show about page.  But when click on the Home button, nothing happen.  It is because we not insert the action script yet.
14- To do this, we change from Scene 1 to Scene 2, then we right click the 'Home' button -->choose actions.  Type in the action script.
The action script:
on (release) {
gotoAndStop("Scene 1", 1);
}
15- Testing the movies again.  Now try click on the home button and novel button.  It will show the pages.
16- To activate button 'About', in Scene 1 --> right click the about button -->choose action. Type in the action script.

on (release)

{

getURL (""http://www.facebook.com/pages/Memorial-Gallery/352337924827038?ref=ts&fref=ts"");

}
17- Repeat step 16 but this time do it in Scene 2..If not only in Scene 1 can navigate to the other webpage..

18- Test movie by press ctrl+enter
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Task 4: Based on your creativity, create a simple flash application that involves drag and drop function.

Steps:

1- name the layer as question..choose text tool and type the instruction
2- insert new layer and name it as rectangle and draw  rectangle shape 
3- Select the rectangle --> click modify --> convert it to symbol --> name as box --> choose graphic type --> OK
4- insert new layer and name it as circle and draw circle by using rectangular tool
5- Select the cicle --> click modify --> convert it to symbol --> name the circle according to color ---> choose movie clip ---> OK
6- Since we want to drag the circles to the rectangle, then, right click on the red circle --> choose actions. Type in the action script below.
The action script:
on (press) {         
 startDrag(this, true);
}
on (release) {
 stopDrag();
}
7-  Repeat step 5 and apply to blue circle.
8-  Control --> test movie --> Done
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Ok guys, since xblh nk upload .swf file kat sini..all of u are pleased to visit my site by click HERE.
Last but not least, u can try it yaa..hehehe and if i've a mistake please correct me..hug n kisses..byeee...

Thursday 6 December 2012

❤ Apps 3: Creating Animation ❤

Posted by kErTaS PeNseL at 18:20 0 comments
hola guyssss!!!
 kali nie aku nk post pasal class activity aku on creating animation..nie adelah apps yang ketiga aku blaja dalam ADOBE FLASH..hehehe untuk activity yang first adalah seperti dibawah;

A. create an animated bouncing ball that could change its positions, colors, 
and size along the preferred timeline. 

so, daripada soalan diatas, aku pun create lah aku punye animated bouncing ball yang tersendiri dengan berpandukan kepada apps3 yang diinstallkan dalam ipad kitorg..hehehe nk tgk hasil aku?? huhu tarraaaaaaaaaaa..


ok, now aku nk explain pulak mcm mane aku buat sampai boleh jadi cantik mcm nie..hehehe such a perasan kan..hehehe step2 yang aku gunekan adalah seperti berikut..

1- create new stage
2- select an oval tool and draw circle shape which is like a ball..
3- select that circle and convert it to a symbol by go to 'Modify' menu and choose 'Convert to Symbol'
4- type name of the symbol and choose as graphic, then click 'OK'.
5- go to frame 10, and right click on it..
6- Choose 'Insert Keyframe'
7- Here, i've change  the position of the ball
8- at this position i've change its size..to change the size, click on the free transform tool, clik on the circle and simply drag into small size..(here is up to u olls la..if nk besar just drag into a bigger size..xkisah lah ape2 pun..asalkan nmpak peubahan size..hehe and paling penting ikut citarasa sedap hati korg ye..hehe)
9- to change the color, its also the same, click on the circle, and look at the properties panel..in properties panel u're able to change its brightness and color..to change the brightness just choose brightness then u may increase or decrease the brightness of the circle..if want to change the color just choose 'Tint' and u can choose the color u want..huhu simple right..
10- after change the position, color and brightness, now we want to create its motion..to create the motion, we can click at any frame in between frame 1 and 10 since i've insert keyframe and make a changes at this frame...
11- so, i choose frame 5..right click on frame 5, and choose create motion tween. 
12- step yang same diulang..terpulang la korang nk buat sampai frame berape pun...hehehe
13- after dah siap, boleh test movie by press ctrl+enter..
 taraaaa...jadilah mcm animation bouncing ball kat atas..
sebelum aku lupe, if nk slow or fast its movement just change pada frame rate je..hehehe yg asal adalah 12fps..so kalo nk its move slower just decrese the rate..hehehe


selain bouncing ball aku jugak buat ayunan pendulum..hehehe step nye lebih kurang je as ape yg aku explain kat atas..


hehehe ok x? boleh lah kan dari xde..hehehehe xpe2..next time aku buat cntik2 lagi ok..hehehe


B. Create a new flash file and change a text form into a star shape.

untuk task yang ini, aku kene create animation yang boleh tukar tulisan kepada bentuk ape2 je..mcm magic tue..hehehe untuk buat nie kite apply shape tween..hehe hasil yang aku buat adalah mcm video kat dibawah..



untuk create animation mcm nie, ade beberapa step yang terlibat..huhu...Procedure untuk create this kind of animation adalah seperti yang berikut; 

1- create a new flash file
2- at frame 1, type text using text tool
3- we need to break apart the text by select the text, click on 'Modify' and choose 'Break Apart' so we can break the text individually.
4- we need to repeat break apart step for once again by select the 'Modify' and click 'Break Apart'
5- Then, on the frame, u may choose any frame u want..as for me i choose frame 25.
6- right click on frame 25, choose insert key frame
7- Delete the text and draw a star shape by using polystar tool..
8- at the properties panel for polystar tool, click 'option' and choose 'star'
9- Draw star at the stage on frame 25..
10- Click on any frame between frame 1 and 25, right click and choose 'create shape tween'..
11- u may repeat this step if u wanna change it back to the text what i did..meaning that from text to shape to text..hehehe


C. Use a motion guide technique to guide the ant move along the tunnel.

untuk task yang seterusnya, aku kene create satu animasi yang menggunakan motion guide untuk menggerakkan sesuatu mengikut laluan yang dikehendaki..as for example nk create layang2 terbang ke, roket terbang ke..hehehe tp untuk task nie minx en.semut berjalan..hehehe bile ckp pasal semut nie aku teringat kat adik aku..bile aku dok bebel2 kan die kan boleh pulak die ckp camni 'adik seperti dengar semut berbisik la..akak dengar x?' dengan muke innocent gile membuatkan aku nk gelak..hahaha miss u laaa adik..huhu ok cukup2..back to my task..aku pun create lah animation about semut berjalan..hasilnye adelah seperti dibawah..



untuk create semut berjalan nie, kene gune motion guide technique..step nye ade diexplain kan seperti dibawah..

1- create a new flash file
2- I draw the ant..after complete draw the ant, by using selection tool, select the ant and click on 'Modify', Choose 'Covert to Symbol' and name it as ant and choose movie clip, then click 'OK'.
3- Delete the ant..on the layer, i choose pencil tool + smooth to draw a tunnel for the ant..name the layer as road..
4- insert a new layer, and name it as ant..drag the ant symbol from the library..
5- at frame 50, right click and insert key frame,
6- move the position of the ant to the end of the tunnel..
7- in the middle of the frame, right click on frame and create a motion tween..
8- then, Click 'new motion guide'
9- Select pencil tool and choose smooth option then start to draw the line guide..
10- Click on the ant, and make sure the draw line is touch at the middle of the box..if not, adjust the line so that, it will touch the middle by using selection tool.
11- on the properties panel, tick on 'Orient to path'..
12- press ctrl+enter to test your movie..
now, u can save it..huhu

*bile nk select pic semut tue, its akan effect die punye tunnel..so ape yg aku dah buat, kat layer tunnel tue aku lock kan..huhu senang keje..hehe


D. Try to animate cartoon's mouth by applying frame by frame technique in adobe flash..

task yg nie senang jugak la..just gerak2 kan mulut cartoon yang kite draw seolah2 menampakkan yang cartoon tue tgh ckp something..hehe contoh nye adalah seperti dibawah..



huhu untuk create animation on cartoon's mouth nie teknik frame-by-frame adalah yang paling sesuai untuk diaplikasikan..hehehe kat bwh nie aq ade list out kan procedure yang aku gune..so korg boleh la try nnt..ok, let explore it..



1- create new flash file
2- draw any shape of mouth such as smile, sad, and so on..
3- convert on what u draw into a symbol.
4- cilck on modify, choose convert to symbol, name it as mouth 1, mouth 2 and so on (name yg korg ase senang nk ingat..), choose graphic and click OK..
5- then, draw the face of the cartoon on frame 1..then after complete ur drawing, right click on frame 1, copy frame, and go to frame to right click and paste frame..the same cartoon will appear on the second frame..
6- just remove the mouth and drag in the new styles of mouth..repeat in frame by frame by exchanging cartoon's mouth style..
7- terpulang lah pada korang bape banyak korang nk buat..huhu aq buat tiga style of cartoon's mouth animation je..hehehe

so, inilah task2 yang aku dah siapka untuk aktiviti kelas aku..hehehe korng boleh try eh..if xfhm boleh tny kat ruangan komen ok..hehehe
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Tuesday 4 December 2012

❤ Developing Web Tadika Annur - Part II ^_^ ❤

Posted by kErTaS PeNseL at 18:17 0 comments
Assalamualaikum and the very good morning ^_^ waaaaaaa baik betul kan aku..hehehe sebagai seorang muslim kite kene mulakan bicara dengan memberi salam..hehehe ^_^ ok u olls...u olls ingat x last entry kite post pasal ape? alaaaaaa xkan xingat kotttt..ingat laaaa..cepat laaa...(hahahaha such a gediks) huhu ok lah...dis entry aku nk sambung story telling pasal project 1 group aku yang develop web untuk tadika kitorg..aicewahh..hehe last entry aku cakap pasal user and page about web punye tadika kan..aku dah sentuh registration, survey yang mane aku apply list/menu and also radio button..then semua data yang dimasukkan tue akan diterima oleh sistem untuk direokdkan dan dapat dilihat oleh admin dalam database..n at last enrty before aku stop, aku ade tinggalkan persoalan mengenai siapa, apa itu admin right? now here, lets the journey begin..hehehe actually admin tue adalah org yang develop a web..dalam kes nie, admin untuk web tadika ni adalah aku, jannah n mas..untuk web nie, admin perlu log in, so that die dpt tgk sume info mengenai murid..boleh delete, dan juga update data murid and boleh juga menambah info dalam web..


kalo perhatikan betul2, dibawah news tue ade link untuk log in kan? ok function log in nie adalah untuk admin log masuk ke web nie for editing, updating, deleting, and so on..after click that link akan keluar page nie..


so, setiap admin akan ade their own username n password...how to create function log in for admin? 
untuk create function log in, step nye adelah seperti berikut;

1- open new php page
2- create table (invisible kan table tue..)
3- Insert text field
4- Insert Button (Login)
5- go to Server Behavior
6- Select User Authentication
7- Choose Log in User
8- so akan keluar new windows for us to fill in..select username and password..
9- after log in where to go? hoho where else to go, just directing it to the admin page..^_^

but, we also set up one page for the unsuccessful login user..same goes with the login page, but juat add on the new text which shows yang salah masuk password ke, salah username ke and so on...it is shown in the picture below..



here, sekiranya login xberjaya due to wrongly enter the password and so on, die akan keluar like abouve page..but if successful log in, akan terus ke admin page..admin page? ape itu admin page? tgk pic kat bawah..


admin page n user page nie same je actually..yang membezakannya adelah menu yang ade pada hujung sudut atas sebelah kanan..itu je yang beza dengan user...xnampak eh? meh aku nk zoom supaya korang nampak dengan jelas dan nyata nye..


kalo tgk kat pic atas neh..nie lah menu untuk admin..then kat bawah box news tue ade satu link untuk admin log out...then, tgk kat menu, untuk user akan ade registration page kan where parent kan register their children to enter this kindergarten right? but it is differ with admin page where dekat admin page akan ade student info...di bahagian student info ni akan paparkan nama murid..so here, admin boleh tgk borang setiap murid, update maklumat murid, dan boleh jugak delete record murid untuk murid yang dah pun tamat tadika or berpindah or anything else..^_^ 


pic kat atas ni shows us page student info..kat page nie akan keluar senarai nama murid yang dah telah berdaftar..so, here, admin boleh update record murid dan akan keluar murid nye profile untuk diupdatekan maklumat. 



pic atas neh adalah page dimana admin boleh update info murid setelah click pada nama murid yang berkenaan..untuk mengemaskini maklumat murid, kitorg create page update, then using the same form (jimat mase..hehehe)..

1- go to server behavior
2- click recordset(query)
3- go to binding, and drag all the info to the related field
4- go to server behavior
5- click update record
6- before apply update record, u need to insert hidden field..

how to insert hidden field?
1- go to insert
2- Click Form
3- Choose Hidden Field

Hidden field nie actually its behind the system..kene insert sbb nnt untuk id kite x update..so that's y kite letak hidden field for id..nie yang aku faham lah...hehe if ade mistake boleh leave ur comment later ok..so after dah edit/update, kite go for deleting process pulak..deleting process nie same jugak caranye mcm nk update..cume beza nye xyah nk create form mcm kite create form utk update record tadi..huhu

ok, now for deleting pulak ok..korg scroll balik tgk pic mengenai student info tadi...pastue korang akan nampak link 'Delete Record' kan? so, for admin untuk delete record pelajar, admin kene click on that particular button then akan appear page seperti pic dibawah..


so, if nk delete record murid, admin just click pada 'cross' button provided..when click on that particular button, akan appear window like this:


the, if u 're sure to delete that particular student's record, u just click ok..if not, just click cancel..so, here, how do we create this delete record page?

1- create new php page n save it as del_form
2- create table for student info
3- go to Server Behavior
4- click on Recordset(query)
5- Go to binding and drag in info to the provided field..
6- Go to Server Behavior
7- Click Repeat Region
8- Then Click also Go to detail page and customize the info needed..
mcm mane aku nk explain eh? erm mcm nie, if nk delete record, kene ade 'Go To Detail Page', so that nnt system akan delete semua data yang berkenaan..so, untuk tu, kite kene create satu page untuk del_form2..dalam page nie as usual just copy the form..do the recordset, then go to server behavior and choose delete record..so pada 'Go To Detail Page' nnt, directing kan pada del_form2..so sume data akan di delete..hehehe 
so, nie lah secara overview kitorg develop kitorng nye web untuk projek 1 kitorng..hehehe xtido mlm kot..punye nk siapkan cepat kitorg sanggup berjaga sampai pagi..at last projek nie siap jugak pukul 5 pagi....pengalaman yang sgt best...kalo belajar xrase sume nie sgt rugiiii..huhu bersama2 merempit dengan my classmate, Jannah pegi ke KTHO sbb mastermind kitorg stay kat KTHO..so buat kat bilik die lah..hehehe ape2 pun..antara moment yang xboleh dilupakan untuk MASTER level..huhu thumbs up to aku n my team project..yiehaaaa!!!!!

Monday 3 December 2012

❤ Developing Web Tadika Annur - Part I ^_^ ❤

Posted by kErTaS PeNseL at 17:53 0 comments
good morning guyssss!!!!!!

ehem2x..testing testing..huhuhu bajet mcm nk nyanyi plak..hehe actually aku tgh amik mood nk menaip neh..mencari2 ayat yang bombastic sket untuk kasi entry kali nie best..hahaha dis week aku agak bz lah sbb siapkan projek web together gether dgn kawan2 aku..mas comel n jannah cantik ..=) kitorg bertiga nie se'group'..project kali ni adelah berkenaan dgn web development..so, untuk menjayakan projek berkumpulan nie..kitorg pun buat lah meeting yang pertama...meeting pertama kitorg discuss nk buat web ape..so mcm2 idealah keluar..nk buat online shopping la for instance, baju, tudung n so on..at last, after usha2 web yang len kat internet, kitorg pun ternampak lah satu web..web berkenaan dgn tadika..hehe so kirog pun design la ape yg patut ade dlm web nie yang memenuhi requirement yang diperlukan..then later, kitorg sepakat nk gune php..sbb salu face problem dgn asp, so we choose php rather than asp..hehehe..
bertungkus lumus menyiapkan semua yang ade..sehari suntuk berkampung di bilik jannah nk siapkan web..pastue berkampung kat bilik mas pulak untuk siapkan for the second phase..at last pukul 5 am, projek siap untuk dihantar..Alhamdulillah..walaupun at first banyak face problem..tanya org tue tanye org nie..mcm2 org lah yang kitorg tny..huhuhu lets go for journey to see my project..hehehe
first of all meh aku story2 sket lah pasal projek besar kitorg neh..hehehe nk kate besar xde lah besar sgt..sket2 tue boleh la..hehehe erm projek kitorg pasal tadika..dalam web nie, user boleh register untuk masuk tadika secara online..so no need for parent nk ke tadika untuk amik borang manually..diorg boleh register secara online je..senang dan mudah.. ^_^


pic atas neh adalah front page web tadika kitorg..kitorang name kan tadika annur..erm nie idea mas..mas nk namekan tadika nie sebagai tadika annur..hehehe so aku pun ok je..nur bermaksud cahaya..hehe so harap2 bercahayalah tadika nie dgn diserikan oleh kanak2 yang comel.. ^_^ (angan2 untuk bukak tadika sendiri..hehehe)..untuk tgk web nie boleh la click kat sini... ^_^

ok guys, untuk template web nie, kitorg amik web template yag sedia ade je..senang..hehe then, kalo korang tgk at the top part, right hand corner, korg akan nmpak link 'Home', 'About', 'Survey', 'Registration'..link nie ade its own function..untuk 'Home', its could be said as a front page for the website..link nie akan ade everything..mcm website kitorg, untuk home, kitorg letak gambar, program, aktiviti2 yang dijalankan dan lain-lain lagi..

For link 'About', page nie akan paparkan semua info berkenaan dengan tadika, huhu page untuk 'About' as shown in the picture below..hehehe nie yang half je..if nk tgk detail, please click here..


For link 'registration' nie, user (untuk web nie user nye adalah parent a.k.a ibu bapa) boleh access untuk register their kids..its easy if can do this secara online..so no need for parent to fill up the form manually..^_^ 



pic atas nie shows the page of registration..untuk page registration nie, kitorg kene create form for parent to fill in through online..untuk form nie kitorg gune php and setup database..so that ape yg diisi oleh parent dlm borang nie akan ade dlm database..as usual kene buat setup MySQL connection untuk connect database..dlm borg nie kitorg jugak apply 'List/Menu' button..tujuan nye untuk buat list..so no need for us untuk senarai satu persatu dalam borang..hehehe leceh..dgn apply this kind of button baru nmpak cantik sket borang.. =) meh aku nk zoom sket 'list/menu' button dlm borang..if nk explore kitorg nye registration form online neh secara detail boleh la tgk sini.. 

yang aku bulatkan tue lah function list menu..
aku caye kalo korg salu isi borang online mesti penah tgk..huhu

selain dr registration secara online, kitorg jugak create survey form secara online..tujuan survey nie adalah untuk mengetahui pandangan pengguna iaitu ibu bapa terhadap tadika serta perkhidmatan yang diberikan..
untuk borang survey, kitorg apply radio button and list/menu button..contoh nye mcm pic kat bwh..


radio button yang mane korang boleh tick pilihan mane yg korang nak..so itu function radio button..so after tick jawapan, just click hantar so everything akan direkodkan dlm database..so admin boleh tau lah pandangan pengguna@ibu bapa..here, admin tue ape pulak? korg nk tau admin tue ape? hehehe itu korg kene tunggu the next entry yaa...aku dah lapar..perut dah berbunyi2..aku nk balik dulu...later aku sambung ok..banyak lagi yang aku nk share..hehehe opsss sebelum terlupa nie link untuk korng tgk online survey form yang aku create..if you want to do so, just click here..
 ok guys...lets go for lunch..nanti aku sambung lagi eh..tunggu tau..hehehe
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Wednesday 28 November 2012

❤ Week 12: Receiving Wacom Digitizing Tablet ^_^ ❤

Posted by kErTaS PeNseL at 17:42 0 comments
yiehaaaaaaa!!!!! im back guys..sorry eh kos dah lame x update blog aku neh..hehehe ok..untuk week nie aku nk story the mory sket..arini ni aq sgt excited gileeeeee bile lecturer aku, dr. Zaida bagi aku and all my friends pinjam WACOM..hehehe tau x WACOM nie ape? wacom nie brand for digitizing tablet...digitizing tablet nie function nye adalah untuk replace 'mouse' to pencil..ye la..its actually agak kekok kan kalo nk lukis gune 'mouse'..so untuk menyenangkan keje drawing, alternative lain adalah menggunakan digitizing tablet..lukis atas tablet then appear kat screen lappy..so its synchronize dgn ADOBE FLASH..=)
dapat je tablet nie aku pun ape lagi, sakan la dok melukis..at first mmg aku akui yang aku agak kekok untuk menggunakan ini tablet..lukisan aku sgt lah huduh..plus aku nie mmg fail bab2 drawing2 nie...dr sejak azali lagi..kalo korg nk tau marks untuk subjek pendidikan seni aku xpenah nye lebih dr B..hahaha paling teruk aku dapat C..kahkahkahkah mmg lah aku nie bukan seorang yang ber'seni'..hehehe korg nk tgk x hasil aku? jeng jeng jenggggggggg.....



amacam, smart x? hehehe nie pic yang aku lukis using digitizing tablet..tp as i told u ollz early, aku nie mmg lah bukan berseni punye orang..mesti korang heran kan mcm mane lak tetibe aku punye pic boleh cntik mcm nie? huhuhu actually aku men tekap je..hahaha tp tekap secara elektronic way..hehe aku gune flash then aku gune onion skin tools...ape? onion skills tool tue mende ape?? eh, aku dah cite lah kat entry yang lepas2..huhu kalo korang terlepas bace, just click here...kalo before nie aku lukis gune 'mouse', rite now aku gune tablet tuk lukis replacement for 'mouse'... ^_^ nnt aku lukis bnyk2 aku upload kat sini eh..hehehe aku tengah berusaha menjadi orang berseni neh..hehehe ok guys..aku nk setelkan project aku dulu..aku ase smpai sini je kot entry aku for this time..nnt ape2 aku update lagi eh..daaaaa ^_^
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Monday 26 November 2012

❤ Tracing real image ❤

Posted by kErTaS PeNseL at 18:13 0 comments
anyohaseyoooo (bajet korea) hahaha 
ok guys, last entry aku ade story mcm mane nk trace image using onion skin tool kan? hehehe tp last time i trace muke upin and ipin..but this time i try trace the real image..hehe
after ditambah, tolak, darab dan bahagi, square root, squared, differentiate, integrate sume at last aku pilih untuk trace pic my en fiancee..hahahaha sbb aku boring lukis muke sendiri..hehehe erm nk tgk x hasilnye? jeng jeng jengggggggg....


betul2 lah aku nie sgt xkreatif melukis..huhhh kene praktise lebih nie..huhu walaupun xok tp ade jugak yang jeles..hahaha 
untuk trace that kind of real image mmg sgt amik ms yang lame n perlu teliti..if not, xcntik la..,untuk trace pic nie aku ambik ms dlm sehari lah jugak dok mengadap..hehehe sorry guys if my drawing sgt xcantik..later aku akan improve lagi ye..hehehe

sekian untuk kali ini..^_^

Sunday 25 November 2012

❤ Tracing An Image Using Onion Skin Tool ❤

Posted by kErTaS PeNseL at 12:42 0 comments
hye there...!!!! ^_^ 
arini aku nk share dgn korang mengenai one of the tools yang ade dalam ADOBE FLASH. Tool yang aku maksudkan adalah Onion Skin..this kind of tools really help us in order to trace any kind of image..and it need such a lot of patience to make it the better one..hehe...for me, since im just a beginner, i took about more than hour to complete my tracing on my image..hehe nk tgk x hasil aku?? hehehe sila lah tgk jeng jeng jeng..


amacam? ok x? cube cr ape perbezaan pic di atas? perbezaan nye adelah aku x trace pun gambar zirafah..hehe sbb nye aku sengaja tinggalkan kos aku buat based on what i want..hehehe ok now, actually bende nie easy je..tp itupun selepas aku belaja lah..hehehe kwn2 aku ade share info kat facebook page kitorg...if korang nk tgk lukisan yang cantik2, korang click lah SINI.. 

untuk step yang aku gunakan untuk trace image di atas adalah seperti berikut :

1) import the image to library 

2) place the image on stage 

3) click on the 2nd frame and insert keyframe 

4) delete image in 2nd frame 

5) click on onion skin tool 

6) start tracing the image..

for tracing process i use pencil tool and selection tool..for make it this process easier, i just 

change the size of stage from 100% to 200% so its easy for me to trace this image..hehehe 

then i use paint bucket tool to color the image..my tracing image not exactly same as the 

original image since i make some alteration on the coloring part..


so dengan menggunakan step yang aku nyatakan di atas..korang boleh la h try pulak ok..

anyhow anyway selamat mencuba... ^_^
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Thursday 22 November 2012

❤ WEEK 11: APPS 2- Drawing in Flash ❤

Posted by kErTaS PeNseL at 23:16 0 comments
wuHahHahaha.. ^_^
hello u ollssss..how r u?? rindu aku x? hehehe saje je nk gedik sket..hehehe guys, kali nie punye entry pulak aku nak share bout drawing in flash..nie apps yang ke 2 yang di'install'kan dalam ipad yang aku pinjam nie..hehehe from dis apps banyak aku belaja mcm mane nk draw dalam flash secara basic..kalo secara advance belum lagi lah..almaklumlah saya budak baru belajar, mana salah tolong tunjukkan..hehehe dalam apps yang ke dua nie banyak info and tutorial mengenai drawing, coloring and so on..

Frontpage for apps 2: Drawing Flash 3..


untuk apps yang kedua nie gives us tutorial on how to draw secara basic dengan menggunakan tools yang ade dalam tools panel mcm yang aku cite kat entry yang sebelumnye...mcm entry yang sebelum nie aku just state tools yg ade dalam flash kan..now dalam apps yang ini pulak ade tutorial mcm mane nk gunekan tools untuk drawing...setelah menelaah dan membuat homework, tgk tutorial akhirnya aku berjaya jugak siapkan task activity 2 aku iaitu drawing in flash..jeng jeng jengggggggg.....taraaaaaaaaaa!!!!! 




hahaha ini lah hasil pertama aku drawing dengan menggunakan flash..cantik x cantik x???? hehehe nie pun setelah sejam aku dok bergodek2 dengan member aku si mas..at first dah siap lukis tp xleh kaler pulak..haa sudaahhh..masing2 panic neh..pastue dok pk nape xleh nk color kat bahagian awan, tanah, laut,..yang object lain mcm sampan, kerusi, bukit bukau tue boleh pulak kaler..pikir punye pikir punye pk..kitorang dapat lah solutionnye..rupenye kene buat rectangular dulu..kire nk jadikan photo frame lah..lepas buat tue baru leh color laut, tanah, awan sume..

untuk lukis pemandangan yang CANTEKKK nie (perasan!! huhu), mengikut tutorial dlm apps yang aku tgk, untuk drawing part just gunekan line tool and selection tool sahaja..line tool kite gunekan untuk draw straight line then selection tool pulak digunakan untuk drag the line turn into curve and drag that particular line ke tempat yang kite nak..korang perasan x dalam pic tue ade 4 kerusi yang size nye same je...untuk buat mcm tue aku just gune line tool untuk draw satu kerusi then aku apply selection tool n aku select kerusi n copy paste it..so dpt lah empat kerusi yang size nye same..cume kalernye je yang beza..hehehe untuk coloring pulak aku gune paint bucket tool..tone color tue aku adjust kat coloring part..so br nmpk ade tone sket..huhuhu 

thanks for reading yaaaa.....

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

❤ WEEK 11: Apps 1-Knowing Flash ❤

Posted by kErTaS PeNseL at 20:25 0 comments
ok guys..the latest entry aku cerita pasal first part class flash kan..so as i promised early, entry nie aku nk story pasal activity2 yang kitorg jalankan dalam kelas..ok 1st activity kitorg kene jwp soalan based on apps 1: knowing flash..before tue meh aku ckp sket..dlm ipad nie dah sedia ade apps yang di'develop' oleh edu research group for ipad in term of learning..so dlm ipad yang diberi pinjam nie dah di'install'kan dengan app mengenai flash..so first act kitorg melibatkan apps 1 iaitu knowing flash..kitorg kene explain our answer regarding to the question and all the answer sume nye dalam apps 1..so kene open apps 1 lah..kalo x mcm mane nk jwp..hehehe ok meh aku explain kat sini pulak about apps 1 eh..so that korg nmpk lah sket apps 1 nie berkenaan dgn ape..let's explore 'our' ipad!!!! =)


FLASH APPS LEARNING PACKAGE ^_^


Frontpage of Flash Apps Learning Package


Dalam learning package nie ade empat apps..yang ade dalam ipad just 2 apps je..maybe yg lain tue after this baru install kot..hehehe we will go through one by one ya..huhu so just click 'enter'..hehehe


APPS 1: KNOWING FLASH

Intro. apps 1.


korang tgk betul2 pic kat atas tue..hehehe pic kat atas neh muka depan untuk apps 1..untuk apps nie banyak give us information about flash..sebagai contoh flash interface..penggunaan flash..aplikasi flash..fungsi flash..n so on..banyak yang kite boleh buat dengan flash..antara nye boleh create animation, movie clip, drawing n etc. before kite learn to draw, basic yang kite kene tau is the flash interface..SO, WHAT is FLASH INTERFACE? 

PART 1

~FLASH INTERFACE~




untuk flash interface actually consists of 5 parts..untuk apps nie if kite nk explore and to know each parts we just need to tab on the red border. but here i'll explain it on my understanding..=) 

~TIMELINE~

for the first part is the TIMELINE..timeline is located at the top part of the interface. dalam timeline actually ade frames untuk animasi..so kite ken control kat timeline tue so that animation kite jln dgn baik...timeline nie jugak ade layer..so kite boleh insert layer kat sini...bile kite set timeline, n kite play animasi nnt the frame red line yg kat timeline tue akan run from left to right..sampai end of our animation...



pic nie tunjukkan timeline dalam flash..sebelah kiri tue layer..so if nk insert layer right click then just insert layer..yg ade red line, number tue ade lah frame scene..dalam flash frame scene is 12frame per second..menaing that 12 frames is equal to 1 second. later kalo nk buat animation so kene control this frame.


~TOOLS PANEL~

next, if we look at flash interface, akan ade tools panel..tools panel is located at the left side of the interface..kalo xcaye korg boleh scroll up then korg cr pic yg mcm kat bwh nie kat flash interface..huhu location untuk panel nie actually x fix..so korg boleh ubah2 ikut yg korang suke..xde mslh..hehehe

Foto Tools Panel


Dalam tools panel nie ade banyak tools yang fungsinya adalah untuk draw or edit objects. so kalo nk lukis atas kertas kite kene gunakan pensil..nak mewarna gunakan pensel berwarna, berus..untuk e-draw nie just gune mouse n click..hehehe so boleh la lukis ikut creativity dengan mengaplikasikan tools yang ade dalam tools panel...dalam tools panel mengandungi lebih kurang 16 tools kesemuanya...16 tools tersebut adalah seperti berikut:

a) Selection tool
b) Subselection tool
c) Free transform tool
d) Lasso tool
e) Pen tool
f) Text tool
g) Line tool
h) Rectangle tool
i) Pencil tool
j) Brush tool
k) Ink Bottle tool
l) Paints Bucket tool
m) Eyedropper tool
n) Eraser tool
o) Hand tool
p) Zoom tool

semua tools yang disenaraikan di atas has its own function..kalo pernah gune ADOBE PHOTOSHOP, tools nye lebih kurg je..hehehe so sume tools nie kite blh apply untuk drawing kite nnt..


~STAGE~

mcm mane rupenye stage tue? ok, stage is located below the timeline..kalo korg tgk kat bwh timeline tue ade rectangle kale putih (mcm pic kat bwh), so itu lah stage..kalo secara fizikal nye drawing block or setengah orang panggil kertas lukisan...huhu 


stage nie boleh dicontrol size nye..kalo nk tukar size stage need to look into the properties panel on the below of stage. kat situ ade button size..so u may change the size u want at that particular button...selain tu, stage nie ade several ways to view..nk kecik ke besar ke..korang just adjust the percentage je..tgk dkt pic on the top right corner..kat situ korang boleh la tukar nk display stage bape percent..kalo nk besar increase percentage..lets say sbg contoh..if nk lukis small objects kat atas lukisan kite kan..just increase the view of stage or zoom in an draw the small object..simple kan..hehehe boleh la kalo nk lukis semut berjalan ke..hehehe


~PROPERTIES PANEL~

erm? ape pulak properties penale neh? ok, let me explain, mengikut kefahaman aku after aku study flash nie,..properties panel nie die actually mengandungi option yang ade untuk setiap tools yang kite pilih..so kalo nk adjust based on tools just change it at the properties panel..aku akan kasi contoh eh untuk korg mudah faham..at first before korng select any tools dekat tools panels, properties panel akan displays seperti gambar dibawah..


ok, properties panel kat pic atas nie shows the properties utk stage kite..so kat sini mcm yg aku ckp nk tukar size stage tue, so boleh buat kat sini lah....and contoh yang relate dgn tools yang kite pilih pulak if i choose brush tool, properties of this tool yang akan displays in the properties panel adalah seperti dibawah..


nahhh, ini dia...hehehe nie lah contoh properties panel for brush tool yang kite pilih..so kat sini korang boleh change smoothing of the brush by click on the arrow button there..


~LIBRARY~

library is located on the right side of the interface..below the color tab..dlm library nie adalah tempat simpan semua media yang diimport such as photographs, clipart, video, and sound files..


if tgk betul2 pic kat atas nie, the library part is at the bottom of the color part..untuk color part, kite boleh adjust type of coloring, change the tone and so on in order to make our images or object is beautiful..huhuhu


PART 2

~APPLICATION OF FLASH~

dah tau sket pasal flash interface, now kite masuk pulak tentang aplikasi..so, ape aplikasi yang boleh kite buat dengan menggunakan flash nie? dalam erti kata lain dalam bentuk ape flash nie dapat diaplikasikan? any idea???? dalam apps 1 nie, terdapat empat aplikasi yang menggunakan flash..antaranya ialah web banner, animation, games, courseware..



~WEB BANNER~

banyak website yang menggunakan banner yang sgt xbest, and x menarik minat untuk aku melihatnya..so how to make it interesting? the answer is by using ADOBE FLASH..dgn mengaplikasi element dalam flash kite dapat menghasilkan web banner yang cantik menarik tertarik kau memang da bomb!!! huhuhu lagi satu reason kenape gune flash sbb nye flash punye presentation is compatible and can play well with any web browser. so no need to worry lah ye...hehehe contoh web banner dalam apps yang dicreate menggunakan flash as a platform ade lah seperti dibawah..


~ANIMATION~

next, korang suke x tgk kartun gerak2x? erm so bende alah tue sume boleh buat gune flash la..hehehe kite draw kartun yang kite nk then adjust frame kat timeline..then bile kite play jadi lah animated cartoon..nie aku just kasi overview je..aku pun xbape terer sgt..later aku akan try buat animated cartoon n akan aku upload dalm blog nie ye untuk tatapan korang sumeee....hehehe


kalo korg tgk pic kat atas tue lalat tue xgerak pun..sepatutnye die gerak and katak tu keluarkan lidah tuk catch the fly..hehehe korg imagine lah ye..so ni la maksud animation..hehehe sort of dynamic la..hehe kalo static die kaku je..hehehe


~GAMES~

selain tue, flash jugak boleh digunakan untuk develop game for online and mobile apps..so dengan flash kite boleh create such an interactive games..contoh games interface yang dibangunkan menggunakan flash adalah seperti dibawah..




~COURSEWARE~


Tahukah korang bahawasanya kite boleh membangunkan learning courseware menggunkana flash untuk dijadikan sebagai teaching and learning aids? flash jugak actually merupakan satu software yang baik untuk dijadikan platform dalam membangun learning courseware yang mane courseware ini lebih menarik dan interaktif  dengan penggunaan elemen-elemen dalam flash yang boleh digabungjalinkan untuk menjadikan courseware yang dibangunkan itu bukan sahaja dapat membantu proses pengajaran guru malah ianya dapat membantu pelajar dalam proses pembelajaran serta lebih efektif. 


PART 3

~TYPES OF INTERACTION~

terdapat jenis-jenis interaksi yang boleh di'create' menggunkana flash..antaranya ialah button&hotspot, text and Drag&Drop..semua jenis interaksi ni dapat berfungsi dengan baik menggunakan flash..so now, kite akan lihat satu persatu dengan ape yang dikatakan dengan interaction..for sure korg mesti suke punye dengan flash..hehehe





~BUTTON & HOTSPOT~



~BUTTON~

kalo korg tgk pic kat bwh, korang akan nampak ade empat simbol button kan? first button symbol untuk prev, then button symbol for play, next is button symbol for pause and last one is button symbol for next..this button will give a respond to a mouse click..meaning to say, kite kene click kat button to baru movie boleh dimainkan..setiap symbol tue has its own function..button nie kite boleh create menggunakan ADOBE FLASH..sgt menarik kann??? hehehe



~HOTSPOT~

next, adalah hostpot..hotspot nie such as bile kite touch on the object it will appear the image..let say aku amik contoh dalam apps 1 nie..soalan ask about person who are inverted peanut butter..if korang perasan di sebelah kanan gambar roti tue ade pic 'light bulb' right? so, bile kite click on the 'light bulb', korang boleh tgk image person yang invented peanut butter tue..best kan dis kind of interaction...kalo gune touch screen pulak, u just touch on that object and the images will appear..if u untouch it the image will disappear n korang akan nmpk 'light bulb'...




~TEXT~

now, kite pegi pulak pada jenis interaksi yang lain..dalam text interaction nie ade tiga jenis...jenis2 serta explanation adalah seperti berikut:

a) static text- static text nie adalah text yang pendek yang digunakan untuk display sahaja dan ianya x berubah..selain tue static text jugak adalah untuk display font yang sometimes jenis font tersebut is not available on most computers..so kalo gune flash n apply static text it is compatible to use in any computer..

b) Input text - yang nie pulak function nye adelah untuk membolehkan user type in the field provided..untuk input text, kite kene gune input text field so that user are able to type in and can capture user input....

c) dynamic text - dynamic text field nie pulak diaplikasikan bila mana kite nak display character yang terkini dan akan berubah form time to time..for example: untuk buat pengumuman ke ape ke..or nk update info2 baru ke..so kene lah gune dis kind of field..



~DRAG&DROP~

interaksi yang nie pulak lagi best woooo...just drag n drop je..kalo untuk learning for kids sgt sesuai..flash ade dis kind of interaction..mcm mane nk develop dis kind of interaction kene explore flash first..menarik kan? teringin pulak aku nk develop apps yang combine all these kind on interaction and elements in flash..hehehe korang tgk contoh bawah..

BEFORE


AFTER..
(aku just touch and drag it..kalo xgune touch screen tue just click gune mouse and drag it lahh)


by the end of the explanation for the types of interaction in flash, maka post aku untuk entry nie pun tamatlah sudah..so overall untuk apps 1 yg ade dalam ipad nie is about introduction of flash..ape yg kite perlu tau mengenai flash..lepas dah tau baru lah mudah untuk explore..sekarang nie aku dah mule cintakan flash..software nie sgt menarik..xkenal maka xcinta..aku dah boleh apply that kind of quote..hehehe so lepas nie boleh la kite start gune flash guyssss.....erm? ape? apps yang ke2??? HoHohohoh itu korang sila bace the next entry ya...dan kemudiannya aku akan show korang my skill drawing and coloring using flash..hehehe
ok..i'll end here..c u @next entry yaa...

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

kErTaS pEnSeL Template by Ipietoon Blogger Template | Gift Idea