Assignment 1: Flash oh Flash..

Assalamualaikum.. ok entry kali ni nak reflect balik process mase nak siapkan project 1 untuk authoring ni.. maap la rumah dh siap tapi pahat masih berbunyi,,eehhh sesuai ke peribahasa ni??hehe..sebenarnye nak ckp yg project dah lama siap tapi baru nak reflect kat sini..almaklumlah before ni x tersempat nak reflect hihi..

ok, saya & my partner azu dah decide nak buat mini project iaitu multimedia edu courseware pasal Sceince form1 (World of Science)..kami pilih topik states of matter..Dalam courseware kami ini, terdapat 6 bahagian iaitu montage, home, lesson, song, exercises, and ending part.


1. MONTAGE
Bahagian montage ni macam nak bagi user rase teruja sikit utk explore courseware ni tapi disebabkan kami masih amatur lagi so x la berapa nak teruja sgt montage kami ni hehe..kami masukkan sound dan ade la sikit motion tweening yang diaplikasikan kat bahagian montage ni.. enter button tu akan link ke home @ introduction of the courseware.

2. HOME
Page ni ala-ala introduction yang meletakkan semua button untuk link pada bahagian-bahagian lain dan juga explain pasal topic yang akan dipelajari.. kami ada apply shape tweening & motion guide dalam pembinaan page home ni..

3. LESSON
Ada 4 pages untuk lesson part ni.. start with what is matter?, then masuk sekali solid, liquid and gas untuk page yang seterusnya..kami duplicate scene mcm yang Dr. Zaida ajar dalam kelas untuk supaya interface dalam  lesson ni sama dan x memeningkan user nanti.. button 'next' and 'back' diletakkan bagi memudahkan user untuk go through lesson ni mengikut cita rasa mereka.. 'home' button pon diletakkan supaya user boleh link ke home page semula..
 

4. SONG
To make it fun, kami masukkan jugak lagu 'Three States of Matter' supaya user dapat belajar sambil berhibur kui3.. lagu dan lirik nye kami masukkan dalam page ni..

4. EXERCISES
Page exercise adalah page bagi user mencabar kefahaman mereka dengan latihan dalam bentuk text entry, multiple choice question dan drag and drop..

Exercise 1 : Multiple choice question

Kalau jawapan betul >>

Tapi kalau jawapan yang user tekan salah>>

Exercise 2 : Text entry question

Respon sekiranya jawapan yang dimasukkan betul>>

Respon sekiranya jawapan yang dimasukkan adalah salah>>

Exercise 3 : Drag and drop

Respon sekiranya jawapan betul>>

Tapi kalau salah, object akan kembali ke pangkuan asalnya..>>

5. ENDING PART

Dah berhempas pulas siapkan project ni, nak la juga glam2 sket kan.. so kami letakkan nama kami berdua pada bahagian ending part ni ngeh3.. dan jugak ucapan "Thank You" kepada user yang telah sudi meninjau2 courseware kami ni hehe.. 

mula2 kami apply motion tweening utk buat mcm gear2 solid, liquid, gas tu semua berputar2..x nampak real sgt la huhu..

then baru la keluar nama2 kami..nak jugak interframe hehe..

kami masukkan juga music untuk menambah kesan dramatic pada ending part ni kui3.. propa sgt kan.. 

Lots of things that i learned from this project.. i learned how to plan, how to organize, how to work with my patner.. mmg sgt serabut pada mulanya but when i look at the positive side, this is a beautiful learning process actually.. of coz fb discussion helps me a lot.. thanks to all my classmate, fana, and of course Dr. Zaida.. ~Terima kasih ku ucapkan padamu..~  

WEEK 10:The similarities & differences of ASP and PHP

ASP (Active server pages) and PHP (Hypertext preprocessor) are both programming languages.

PHP is capable of being installed quickly and easily with many tools server side which can include image manipulation, uploading, email systems and much more.  ASP is designed to require registration of components and modules to make each tool possible.  ASP will usually require paying for each component upgrade as well.

ASP tends to be slower and can handle a low amount of requests before accessibility starts to lag and become labored on the server.  PHP tends to be much faster and can handle thousands of requests before strain begins to become an issue.  

When connecting to a database, ASP will tend to work better with SQL Servers and Access.  Although it is capable of running MySQL, it is more difficult to get working on just any server.  PHP has better accessibility to MySQL and other options for database connectivity.

If the server is Microsoft based, then the use of ASP with options such as SQL Server should be considered.  On the other hand, if the server is Linux, BSD, or any form of Unix, then the use of a PHP and MySQL configuration is best suited.

When using ASP it is important to remember that costs behind hosting and all components that are needed can be exceedingly high for most budgets.  PHP is much more versatile in terms of budget constraints and has a variety of free and opened sourced tools available for use alongside the commercial products as well.  Whatever the case is for power and function, both ASP and PHP can perform well under their optimal configurations with a server.

WEEK 9: Semesterbreak

WEEK 8: Drag & Drop Activity

Saya dtg lambat utk kelas petang tadi huhu.. Nasib baik pengetua bagi keluar meeting awal sket, kalau x maybe x dpt la nak men'drag & drop'..tq so much Pn. Sallina.. tq jugak pada Dr. Zaida yg x denda saya sbb dtg lewat hehe..sebab kan dah lewat tadi, so parking pon sesuka hati..maka dapat la saya surat cinta yg terselit cantik kat wiper kereta huk3

So sorry =( ..my mistake huhu.. 

Orait, kelas arini still discuss pasal drag & drop tapi advance sket la compare dgn yang ada dalam apps4 before ni.. Lets check this out =)

1. First, create a movie symbol. Go to 'insert', 'new symbol' and select 'movie clip'.

2. Draw a rectangle in the first frame and insert stop actionscript on the frame.

3. Insert a new keyframe in frame 2 and add stop actionscript on that frame. Put the red line for the correct respon as follows:

4. Go back to scene 1, insert a new layer and name it as 'response'. Drag the rectangle into the stage and name the instance box as box1. Drag the same rectangle again to the stage and name the instance name as 'box2'.

5. Insert a new layer and draw/import images in the same layer and convert the images to 'movie clip' symbol.

6. Insert a new layer and insert stop actionscript.

7. Now, click on the cat symbol and insert the actionscript as below:

on(press){

startDrag(this);

}

on(release){

stopDrag();

if ((this._x>=256.1)&(this._x<=429.9)&(this._y>=245.3)&(this._y<=273.9)){

_root.box2.gotoAndStop(2);

}else{

_root.box2.gotoAndStop(1);

this._x=132.1;

this._y=120.0;

}

}

[x and y values depend on the coordinate of your rectangles' position]

8. Next, click on the flower symbol and insert the actionscript as below:

on(press){

startDrag(this);

}

on(release){

stopDrag();

if ((this._x>=55.4)&(this._x<=225.3)&(this._y>=239.3)&(this._y<=273.9)){

_root.box1.gotoAndStop(2);

}else{

_root.box1.gotoAndStop(1);

this._x=384.9;

this._y=115.9;

}

}

9. For the 'next' button, insert the following actionscript to load your .swf movie into flash.

on(release) {loadMovieNum("video.swf",0);

}

But for my 'next' button, I want it to link to my previous drag & drop movie flash that I already uploaded in SwfCabin.

on(release) {

                getURL("http://www.swfcabin.com/swf-files/1364913896.swf");

          }

10. Save your file and test the movie. Try it yourself ok!

Try to drag and drop here. =D

WEEK 7 : Types of Interaction

TASK 1: CREATE MCQ

1. Typing the questions as static text.

2. Insert a new layer and named it as 'buttons', create a buttons using oval tool for A, B, C and D options.

3. Insert a new layer and named it as 'respon'. Put a dynamic text on the stage and named the variable as 'respon'.

4. Insert a new layer and rename it as action, right click on it and type the action script:

stop( );
var respon;

respon = " "

5. Right click on the right answer button and type the action script:

on(release){

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

}

The example if the user click on A button =)

6. Right click on the other three button of the wrong answer and type the action script:

on(release){
respon = "Your answer is incorrect.";
}

The example when the user click on the wrong answer

http://www.swfcabin.com/swf-files/1364913397.swf

TASK 2: TEXT ENTRY QUESTIONS

1. Set the background of the questions and name the layer as background.

2. Insert a new layer and name it as question and write the question as a static text.

3. Create a rectangle on the stage. Put the 'input text' on the rectangle. Type in 'answer' for it variable.

4. Put the 'dynamic text' as a respond to user's answer. Type in 'respon' for it variable

5. Insert a new layer and name it as 'button'. Choose 'play button' from the library.

6. Insert a new layer and name it as 'stop'. Right click on the frame 1 and insert the action script:

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

7. Right click on the play button and insert the action script:

       on(release){ if(answer =="print client") {respon="Correct!";

       } else {
         respon ="Your answer "+answer+" is incorrect.";
         }
         }

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

        respon ="Your answer "+answer+" is incorrect.";

         }

        }

The example when the user key in the correct answer.. =)

The example when the user key in the wrong answer.. =( hehe

http://www.swfcabin.com/swf-files/1364913761.swf

TASK 3: CREATING MAIN MENU

We will learn on how to navigate the button to other pages or website..

1. In my previous entry, I already explain on how to create a button symbol. Lets say we have a homepage like the following;

2. We need to name the 'instance name' for example 'home', 'news' and 'about' for the buttons.

3. Click on 'Window', go to 'other panel' ans go to 'scene'. Duplicate the scene 1 and rename it as scene 2.

4. Right click on frame 1 of button layer, go to 'Action' and type "stop ();".

5. Insert frame by right click on frame 15, and 'Insert frame' for every layer in scene 1 and scene 2.

6. Add a new layer to scene 2 and rename it as 'news'. Rename the 'frame label' too as 'newspage'.

7. Insert a new layer in scene 2 and name it as 'stop' and go to 'Action' and type "stop ();"

8. Right click on news button in scene 1, go to 'Action' and type:

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

9. So now, your news button link to scene 2.
10. Go to scene 2, right click on home button go to 'Action' and type:

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

11. We add 'Latest news' button on scene 2, insert keyframe on frame 10 of news layer, named it as 'latestNews' on frame label, and type the text on stage. Dont forget to put the instance name of the latest  news button as 'latestButton'.
12. Right click on latest news button, go to 'Actions' and type:

on(release){

gotoAndStop ("Scene 2", "lastestNews");

}

13. Go to scene 1, right click on about button, go to 'Actions' and type:

on(release) {

         
          getURL("http://www.one-school.net/");
          }

http://www.swfcabin.com/swf-files/1364960380.swf

TASK 4 : DRAG AND DROP

1. Type the static text on the stage as the question or direction.

2. Insert a new layer and draw / import the tree image. Convert it to 'graphic' type.

3. Repeat the same step for the apple image. Convert it to 'movie clip' type.

4. Right click on the apple and insert the action script:

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

5. Copy and paste the apple in the stage.

Now you can drag the apples to the tree!!! =)

http://www.swfcabin.com/swf-files/1364913896.swf

Alhamdulillah.. at last I've completed the task given..Many things dat I've learned thru the activities, sometimes I'm getting down because I tried so many times but still the application is not functioning well, but failure is not the end...there are no shortcuts to the way of success.. Impossible is just a big word.. Believe in yourself ok!! =) HAPPY TRYING!!

See you in the next entry..daaaa

cont' WEEK 6 : Motion Guide & Frame by Frame

MOTION GUIDE

Kali ni lebih exciting sebab nak create animation paper airplane yang sedang berterbangan *teringat plak lagu kapal terbang kertasku*..hah sabar2 kak jah oii, nak tunjuk la ni..

1. Draw a airplane and turn on the 'Snap to object' option.

2. Convert your airplane image to movieclip by click on 'Modify', 'Convert to symbol' and choose movieclip.
3. Right click on frame 50 and 'Insert keyframe'. Now you can drag to change the position of the airplane.
4. Right click on any frame between frame 1 and frame 50, select 'Create Motion Tween'.
5. Click on 'Add motion guide' and select the 'Pencil tool' to draw the motion guide.
6. Click on frame 1 of the paper airplane layer as the beginning of the motion guide and click on frame 50 and placed the airplane image to the end of the motion guide.
7. Rotate the airplane image by click on frame 1 and select 'Free transform tool' to rotate the paper airplane.
8. Do the same step for frame 50.
9. Lastly, click on frame 1 again and tick on 'Orient to path'.
10. Double click on 'Frame rate' and change to 48 for example.

Macam x realistic sgt motion kapal terbang kertas ku huhuhu

I do the same steps for the following animation:

ACTIVITY 3: NO 3

The ant move along the tunnel

FRAME BY FRAME

For animation by using frame by frame technique, I try to animate the cartoon's mouth.

1. Draw the face of the cartoon completely without its mouth.

2. Draw various type of mouth,including smile, sad, etc. Convert each of the mouth to graphic symbol.

3. Insert keyframe on frame 1, and drag the smile mouth (for example) to the stage.

4. Insert keyframe on frame 2, and drag the sad mouth (for example) to the stage.

5. Repeat this step for getting the animated cartoon's mouth that you need.

ACTIVITY 3: NO 4

At last, dapat jugak menyiapkan semua task..I have learned so many things through this activity, really appreaciate it.. *lega*

WEEK 6 : Button & Animation

No class for this week 4, tapi ade ipad kan, so self-learning la guna apps yang dah ade dalam ipad tu, no excuse ok.. kalau ade problems boleh terus post kat fb group sebab ramai yang sudi membantu kat sana..TQ kak fana & kawan2 =)

Ok, previous entry x sempat nak story pasal button.. button ni elemen yang sangat penting as a function to allow the content in flash to interact..  For drawing a button, we can use various shape from the rectangle primitive or oval primitive tool..  yang paling penting sekali bila dah siap button mengikut bentuk dan warna kesukaan, kita mesti convert to symbol.. Tau x nak convert macam mane?? Kalau x tau saya tunjukkan ye hehe..

Click ‘Modify’, then choose ‘Convert to symbol’..senang je kan..

Kita boleh jugak tukar warna button bila cursor roll over the button, atau warna button jugak boleh ditukar bila kita click pada button tersebut..ala macam button dalam laman web ataupun cdrom yang kita selalu tengok tu..

1. Double click pada button, timeline akan muncul ‘Up’ , ‘Over’ , ‘Down’ and ‘Hit’.
2. Bila kita nak tukar warna button bila cursor roll over it, insert keyframe pada ‘Over’ state then boleh la tukar warna yang disukai.
3.  Untuk tukar warna bila kita click pada button tersebut, insert keyframe pada ‘Down’ state dan tukar warna button.‘Hit’ state pulak kita guna untuk limit kan kawasan yang boleh di click oleh mouse. Hand cursor hanya muncul pada kawasan yang dihadkan pada ’Hit’ state
4. Kita boleh try tengok hasil kerja kita dengan cara;                                                                                     

     Click ‘Control’ and choose ‘Test Movie’.

Ini contoh button saya =)

Nampak x warna button bertukar bila cursor digerakkan pada button, tapi hand cursor tak dapat di print screen plak, so x nampak la hand cursor kat button tu.. kalau nak nampak tu you olls kena try sendiri la gamak nya hehe..

Ok untuk apps3 pulak, kita explore macam mane nak create animation.. first of all, kena tau yang ade tiga jenis symbol iaitu graphic, button and  movie clip..

macam mane nak create graphic symbol?? ade dua cara, sama ade draw sendiri atau pun import je daripada file kite yang sedia ade.. nampaknye pilihan yang mudah ialah import daripada file yang dh ade la kan, almaklumlah, tangan masih kaku untuk melukis sendiri hehe.. ok check this out ok..

1. Click 'File', select 'Import' and select 'Import to stage'.

Ini graphic symbol saya =)

2. Choose the image from your file, then click 'Open'.
3. Now your image is already on the stage.
4. Next, click 'Modify' and select 'Convert to symbol'
5. Choose 'Graphic' as symbol type, and click 'Ok'
6. Lastly, try to do it by yourself k, jangan bace je hehe..



Next, nak explain on how to create a button symbol..

1. First, click 'Insert', then select 'New symbol'.
2. Boleh pilih shape, color and of course text untuk button tu.

Kita boleh jugak tukar warna bila cursor roll over the button, atau warna button jugak boleh ditukar bila kita click pada button tersebut. Step2 nya dah saya explain awal2 entry ni, so sama je step nya ok..

Movieclip symbol? Dengar nya macam susah dan gerun kan.. xpe2, ini la nama nye cabaran, kalau senang je bukan learning process la kan.. fighting2 =D.. So untuk movie clip ni, nak buat butterfly yang sedang mengepak2 kan sayap nya, *serius ni*

1. Click 'Insert', select 'new symbol', change the type to 'Movie clip' and click 'Ok'.
2. Select 'Oval tool', and start drawing the body of your butterfly.
3. Ok next, we will draw the left wing of the butterfly, so click 'Insert layer'.
4. Choose 'Rectangle tool' to draw the left wing. Use 'Selection tool' to modify the wing shape.

5. Complete the wing by using 'oval tool' to draw the lower part of the left wing.
6. Select all for the left wing and click on 'Modify', 'Convert to symbol', choose 'Graphic' and click 'Ok' to convert the left wing to graphic symbol.
7. Right click on the timeline and 'Insert frame' to frame 60 for each layer.
8. Copy frame 1 and paste it to frame 10, 20, 40 and 60 for example.
9. Click on frame 10 and shrink the wing.
10. Right click any frame between 1 to 10, then click on 'Create Motion Tween'.
11. Copy frame 10 and paste it to frame 30 and 50. Don't forget to 'Create Motion Tween'.
12. Insert a new layer, and drag the left wing graphic to the stage. Choose 'Free transform tool' and change the rotation for your right wing.

13. Do the same steps for your right wing on the frames.

14. Test your movie clip by click 'Control' and 'Test movie'. 

See..my butterfly is flipping its wings ok hehe *excited*!!!! 

MOTION TWEENING

Masuk bab Motion Tweening Object plak ok.. kali ni nak discuss macam mane nak wat motion contoh nya bouncing ball..

1. Draw a circle using 'Oval tool' and convert it to graphic symbol.

2. Click on frame 10 and 'Insert keyframe' and drag your circle downward to change its position.

3. Click on any frame between frame 1 and 10, right click and choose 'Create Motion Tween'.

4. Repeat the steps by changing the circle's position at frame 20, 30 and 40.

4. Now you will have a bouncing ball movieclip..

*Really excited..Finally I did it hehe*

Next, Object brightness and colors.. 

There are 4 option of color which are brightness, tint, alpha and advanced.

For an example, we wanna change the brightness of our ball when it is bouncing, the steps are:

1. Select the frame, for example I select frame 10. Then change the color to 'Brightness' on the properties panel. Repeat the step for frame 30 or any frame that you like.. You can also try to use the other option tint, alpha and advanced *I have tried myself*... Happy trying ok ;)

Beside the color options, we can also change the object size of our graphic..

1. Select your desire frame, then click on 'Free transform tool' and just resize your ball. Its easy right?? 

ACTIVITY 3: NO 1

*Now its your turn to enjoy changing colors and resizing your ball hehe..*

SHAPE TWEENING

Object to object. We can change the shape of a object to another shape. Paham x?? Mesti x paham kan hehe..for example, we can change the rectangle shape to star shape by the following steps:

1. Draw a rectangle on the first frame, and draw another shape (for example a star) on the frame 25.

2. Click on any keyframe between frame 1 and frame 25, then select the tween from 'none' to 'Shape'.

3. Test your movie to see the transition of your shape.

Its really amazing!!! have a try ok.. =)

Now, how to change a text to an object?

1. First, type your text on the stage.

2. Click on 'Modify' and select 'Break apart' like the following.

3. Click on 'Break apart' once again.

4. Right click on frame 25, then 'Insert keyframe'.

5. On frame 25, delete the text and draw a shape.

6. Right click any frame between frame 1 and frame 25, choose tween form 'None' to 'Shape'.

7. Your text now is transform to an star shape.

ACTIVITY 3: NO 2

See..the flash text transform to star shape..amazing rite? 

Lastly, image to image..
1. Import a image to stage.
2. Click on the image to convert it to vector image, click on 'Modify', select 'bitmap', 'trace bitmap' and 'Ok'.
3. Choose frame 20 and insert keyframe.
4. On frame 20, delete the existing image and import a new imageand again convert it to vector image.
5. Click any frame between frame 1 and frame 20, then choose 'Shape' for the tween option.
6. Now, your first image is changing to the second image.

I'm done..how about yours??? Happy tweening k hehe =D

I'll continue the Motion Guide and Frame by Frame in the next entry k.. My eyes need a rest hehe.. daaaaa