Reflection: Week 14

Reflection Week 14


Assalamualaikum

Minggu ini kelas kami dimulakan dengan membuat 4 aktiviti di facebook iaitu:


Aktiviti 1
Develop a motion tween animation of pendulum

Aktiviti 2
Develop a morphing animation of butterfly lifecycle. Start from lava to butterfly.

1. Sketch the egg, caterpillar, pupa and butterfly using onion skin tool.
2. On first layer, type the text, box and arrows.
3. Create a new layer.
4. Import egg,caterpillar, pupa and butterfly image to library. Then convert to graphic symbol.
5. On frame 1 insert egg graphic, then break apart. Next insert keyframe on frame 25, add caterpillar graphic and break apart. Create motion tween between the frames.
6. Next continue insert keyframe on frame 50,add pupa graphic and break apart. Create motion tween between the frames.
7. Then add butterfly graphic on frame 75 and break apart. Create motion tween between the frames.
8.Lastly, add egg graphic on frame 100 and dont forget to break apart. Create motion between the frames.
9. Save your file and test movie.


Aktiviti 3
Implementing frame by frame skill, sketch a cartoon and animate it.

1. Sketch animated panda by using onion skin tool.
2. Then insert the panda sequence images from frame 1 until frame 20. Dont forget to insert keyframe for each image.
3. To make panda moving, we must insert motion tween between the keyframes.
4. Thats all, save and test movie =D

This is another frame by frame movie

Aktiviti 4
Animate the process of pollinating agent


Seterusnya, kami diberi tugasan App 4 untuk disiapkan dan dimuat naik di dalam google sites.Sebelum itu, mari kita lihat apa yang terdapat dalam App4.

Terdapat empat types of interaction dalam flash iaitu:

1. Creating Main Menu

Creating main menu buttons is essential for interactive website to navigate from one page to another.

2. Multiple Choice Questions

This type of applications allow students to get interactive feedbacks from the content. Users could also could create flash-based quizzes with multimedia elements, such as images, sounds, narrations, movies and so on.

3. Text Entry Questions

Allow users to develop quizzes and allow interactive communication between the user and the content. 

4. Drag and Drop

It is another applications that users could build in flash to make learning activities more fun and interesting.

Aktiviti 4

Seperti biasa kami akan diberikan aktiviti setelah habis kelas. Aktiviti 4 ini boleh dilihat dari google site saya nadeeya.Berikut merupakan hasil aktiviti yang telah saya lakukan:

Question 1

Creating Multiple Choice Questions

1. Rename the layer as question > select text tool > change to static text at properties windows > type your question.
2. Insert a new layer named buttons > create four oval tool (A,B,C,D)  > Then convert to symbol as button > OK.Then click text tool > type the answer.
3. Create a new layer renamed as response. In the layer, select text tool > change to dynamic text at properties windows.
4. Create another layer named as actions, write this command at actions script.

         stop();

         var response

         response = “ “

    5.  On the right answer button, write this command at actions script.

         on(release)  

        {respon = “Congrates, your answer is correct”);}

    6.  Do the same command to other buttons but this time change the respon as below:

         on(release)  

        {respon = “Your answer is wrong”);}

    7. Test your movie and finished!!!

Inilah hasilnya selepas mengikuti langkah-langkah dalam Apps 4.

Paparan skrin ini menunjukkan apabila pengguna memilih jawapan yang tepat.

Manakala, paparan skrin tersebut akan keluar jika pengguna memilih jawapan yang salah.

Question 2

Text Entry Question

1. Create a layer named background, make sure that the topic as static text.
2. Insert a new layer and named as question, type the questions. Draw a text tool as input text for the user to input the answer. Then draw another text tool under it as dynamic text.
3. After that, create a new layer named as button. Then choose a playback button from the library and create besides the text.
4. Create a stop layer, type this command to the actions script.

         stop();

         var answer;

         var respon;

         answer = “ “

         respon = “ “

     5. Select the playback button, right click and type this command to the actions script.

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

         } else {

         respon = “Incorrect. Your answer “+ answer +” is incorrect.”;

         }

         }

         on (release, keyPress “<Enter>”) {

         if (answer == “print client”){ respon = “Correct!”;

         } else {

         respon = “Incorrect. Your answer “+ answer +” is incorrect.”;

         }

         }

     6. In the input text field, type the var as answer meanwhile in the dynamic text field as respon.       

              Don’t forget to untick Auto kern in the window properties.
          7. Test your movie by press Ctrl+ Enter and done!!!!

Inilah hasilnya selepas mengikuti langkah-langkah dalam Apps 4.

Paparan skrin ini menunjukkan apabila pengguna memilih jawapan yang tepat.

Manakala, paparan skrin tersebut akan keluar jika pengguna memilih jawapan yang salah.

 Question 3

Creating Main Menu

1. Create the basic interface such as insert logo image, header for the website and button          (home, about us and services).
2. For each button, field the instance name. For example, the home button will named as home in the instance button. And goes to another buttons.
3. Create a new scene for another section, by click Windows > Other Panels > Scene> Scene Windows will appear. Click duplicate symbol to copy a new scene. Rename the scene as Scene 2 and close the Window.
4. Insert some text in Scene 1 and Scene 2 to differentiate the scene. Then test the movie to see whether the scenes are different.
5. Put stop(); command in actions script in the buttons layer so that the two scenes will not keep on blinking.
6. Insert frame at frame 15 for each layer so that if we click the button, it will direct to the required scene.  Do this on Scene 1 and Scene 2.
7. In Scene 2, create a new layer and named it as about us. Then, renamed the frame as aboutpage. Create another layer for stop command in actions script.
8. Go back to Scene 1, right click on about us button and click actions.Type

         on(release)  

         {gotoAndPlay (“Scene 2”, 1);}

     9. To make the the home button activated, go to scene 2 and right click on home button to write       

         command in actions script.

         on(release)  

         {gotoAndStop (“Scene 1”, 1);}

   10. Press Ctrl+Enter to test the movie, you can see that if you click Home button, it will go to   

         Scene 1 and Scene 2 if you click About Us button.

        11.  Create a new button in Scene 2 for more information about the library. On the frame 10 in
              about us layer,named the frame as moreinfo. Then type text for the more information. After
              that, renamed the more button as moreBtn.

        12.  Right click on the More button, then add command actions script.

         on(release)  

        {gotoAndStop (“Scene 2”, “moreinfo”);}

        13. Lastly, steps on how to navigate the Services button to other website. Go back to Scene 2,
             then add actions script in Services button. Repeat step 13 for Scene 2.

        on(release)  

        {getURL (“http://web.utm.my/psz/”);}
   14. Test your movie whether it is working or not and finished!!!

Inilah hasilnya selepas mengikuti langkah-langkah dalam Apps 4. Paparan skrin ini menunjukkan pengguna berada di skrin home.

 

Manakala paparan skrin ini menunjukkan pengguna berada di skrin about.

Apabila pengguna tekan button more, paparan skrin ini akan keluar.

Seterusnya, pengguna akan ke website lain jika menekan button service.

Question 4

Drag and Drop

1. Create your interface by insert 3 rectangle named as dog,cat and rat in the rectangle layer. Then convert them to symbol as movie clip.

         2.   Then insert another layer and named as pictures. Insert the image of dog,cat and rat to the
              stage. Convert them to symbol as movie clip.
         3.  Next step, right click on the dog rectangle shape and insert this command.Repeat this step for    
              another rectangle shape and pictures.

        on (press)  {

        startDrag(this,true);

        }

        on(release) {

        stopDrag();

        }
    4. Don't forget to test your movie okay =D

Inilah hasilnya selepas mengikuti langkah-langkah dalam Apps 4. Pengguna boleh menggerakkan gambar haiwan tersebut ke tempat jawapan yang disediakan.

Paparan ini menunjukkan jika pengguna sudah selesai menjawab soalan.

Akhir sekali, ini merupakan paparan apabila saya telah memuat naik aktiviti-aktiviti tersebut di dalam Google Site =D

Reflection: Week 13

Reflection Week 13

Assalamualaikum

Kelas pada minggu ini lebih mencabar dari sebelum ini sebab kita dh start untuk buat animation. Creating animation ini dijelaskan lebih lanjut dalam Apps 3. Terdapat dua jenis dalam menghasilkan animation iaitu types of symbol dan types of animation.

Types of Symbol:

1. Graphic - A static images that are used mainly to create an animation.

2. Button - The only interactive symbol that can detect mouse events in Flash.

3. Movie Clip - Consist of one or more graphic / button symbols, they are flash movie inside your flash project.

Types of Animation:

1. Motion Tweening 

    i. Object Motion Position

       One of the method that allows objects to be change to different position.

   ii. Brightness & Color

       Allow users to change the brightness & colors of the tweened objects.

  iii. Object size

       Allows users to manipulate the size of their tweened objects.

2. Shape Tweening

    i. Object to object - Allows users to change the objects from it's original shape to a new shape.

   ii. Text to object - Allows text to be transform to an object.

  iii. Image to image - Apply in transforming one image to another different image.

3. Motion Guide

4. Frame by frame

Aktiviti 3

1. Motion Tweening

1. First layer named as stair, draw a stair
2. Then insert a new layer named as ball, draw a ball

3. Then convert ball to symbol as graphic
4. Insert keyframe at frame 15 and frame 30 Go back to frame 15 and moved your ball as required
5. Don’t forget to Create Motion Tween between frame 15 and frame 30
6. Repeat the steps to another ball movement at different frame
7. Besides that, we also can change brightness and the size of the ball

8. I add some blur effect when the ball reach the floor by click Insert > Timeline Effects > Effects >Blur

9. Test your movie and done!!!!

2. Shape Tweening

1. Use text tool > CONVERSE 

2. Modify > Break Apart (repeat again)

3. After that go to frame 25 and draw a star

4. Go to frame 12, select tween by shape

5. Go to frame 35,select File > Import >Import to stage > select shoe picture > open

6. Lastly, press Ctrl+Enter to test your movie

3. Motion Guide

Allows users to move an objects on predefined path, such as in circles or curves.

1. On the first layer, create a chocolate box. Rename as ground

2. Then, erase the path using the eraser

3. After that, create a new layer and rename as ant

4. Insert the ant image

5. Create motion tween between the frames

6. Add guide motion, draw the path using pencil tool

7. On the ant layer, drag the ant at the beginning of line in frame 1, meanwhile drag the ant at the ending of the line in last frame

8. Lastly, test your movie

4. Frame by Frame
Frame by frame animation is similar with traditional cel-styles in animating a cartoon by drawing different movements in each frame.

1.       The first layer you renamed as animation. Go to File > Import > Import to Stage > Select hello kitty > OK.
2.       Then right click on frame 5 for adding some movement to hello kitty and insert  keyframe. In this frame you can adjust your image as required. For inserting text, I use Text Tool to write hungry.
3.       Then continue adding some movement by just right click on another frame and insert keyframe. Make sure you are not adding frame very close because when you test the movie, it will run too fast and people cannot see it clearly.
4.       Insert a new layer and named as rat. This layer where you put rat image. For my exercise, I insert keyframe at frame 16 and end at frame 64. Between this frames, you right click and select Create Motion Tween. The result is you can see that the rat will move from frame 16 and end at frame 64.
5.       But then I want the rat not to move in straight line. So I must Add Motion Guide in same frame as rat layer. So that it will synchronized with the rat movement. After you add motion guide, draw the path using pencil tool.
6.       On the rat layer, drag the rat at the beginning of line in frame 16, meanwhile drag the rat at the ending of the line in frame 64.
7.       Test you movie whether it is working or not and finished.

Reflection: Week 12

Reflection: Week 12

Assalamualaikum

Minggu ini kami dikejutkan lagi apabila Prof Zaida ada memberikan WACOM digital drawing tablet tu hehehe.. Jadi masa dalam kelas tu kami semua pon mencuba la untuk menggunakan WACOM tersebut.agak susah menggunakan WACOM ni sebab cursor akan bergerak-gerak apabila kita tengah tracing image.Tetapi kalau kita memang  pandai melukis, memang sangat senang ada WACOM ni. Ini kerana pelukis akan rasa seperti melukis menggunakan pencil di atas kertas.Di bawah menunjukkan WACOM untuk tatapan kepada sesiapa yang tidak pernah lihat.

Dr Zaida juga ada buka pertandingan untuk melukis diri sendiri di Facebook tetapi apa kan daya kerja bertimbun-timbun jadi tak dapat la saya menyertai pertandingan tersebut. Tahniah kepada Idi, Dewi dan kak Azizah sebagai pemenang.. They desserve to win because lukisan dia orang sangat cantik.