#14 APPS 4 : TYPES OF INTERACTIONS


Hi guys! What a tired week. Tiap-tiap hari pon ada assignment nak kene siapkan. huhu. Mungkin memang macam ni la kan gaya hidup student di akhir-akhir semester. So, be positive ! hehe. Okay untuk minggu ini kami diberikan 4 aktiviti yang perlu diabuat di dalam kelas.

Aktiviti 1 : Develop a motion tween animation of pendulum

http://www.youtube.com/watch?v=_jNkzlQhr5E

Aktiviti 2: Upload a morphing animation of butterfly life cycle. Start from lava to butterfly.

http://www.youtube.com/watch?v=cAvtj5I6kxk&feature=youtu.be

Aktiviti3: Implementing frame-by-frame skill, sketch a cartoon and animate it.

http://www.youtube.com/watch?v=eF9ykG0DCkY&feature=youtu.be

Aktiviti 4: Animate the process of pollinating agent.

http://www.youtube.com/watch?v=lHOFU3TT_-w&feature=youtu.be


Pada akhir kelas, kak farhana telah menginstallkan kami apps 4 untuk ipad dan kami juga diberi tugasan bagi apps 4 untuk dibuat dan diupload pada google site. Berikut merupakan tugasan bagi apps 4...

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


  1. Name layer as Question.
  2. Choose text tool -->choose static text-->start typing the question
  3. Insert new layer-->name layer as buttons
  4. Create button using oval tool-->drag it on stage-->choose appropriate color-->resize the button
  5. Choose text tool-->Put 'A' on top of the button
  6. Select whole button-->click modify-->convert it to symbol-->name the button as button A-->choose button type-->OK
  7. Same goes to others 3 button (buttonB,buttonC,buttonD)-->choose appropriate color and resize each button(same size as buttonA)-->convert all the buttons to symbol and choose button type.
  8. Insert new layer-->name as respon.
  9. Choose text tool-->choose dynamic text-->put respon as it variable
  10. Inser another layer-->name 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-->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 buttonB,C and D (repeat right click-->choose actions-->type in the action script-->just edit the respon according what you want it to be.
    13. Control-->test movie-->done.

TASK 2 : Create one application that allows user to type an input of question provided.
Steps:

  1. Prepare your background
  2. Choose rectangel tool-->fill with color-->drag on to the stage
  3. Choose text tool to type in topic question by make sure it is static type-->name layer as background
  4. Insert new layer-->name as question
  5. Choose text tool-->choose static type-->type in questions
  6. Then, select rectangle tool and create a box on stage
  7. Select text tool-->preposotion ir and make sure selecting input text in the properties
  8. SElect text tool again-->but now choose dynamic text
  9. Insert new layer-->name as buttons
  10. From library paner-->choose play button-->drag to stage-->resize the button
  11. Insert new ;ayer and name it as stop.
  12. Right click on first keyframe and choose actions.Type in the action script below.
         The action script:
         stop();
         var answer;
         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,kerPress"<Enter>"){if(answer=="print client"){respon="Correct!";}
         else{
         respon ="Incorrect,your answer"+anwser+"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.

TASK 3: Create a Main Menu that contain following actions:
  • A button that navigate from one page to another.
  • A button that navigate from one scene to particular frame of different scene.
  • A button that navigate users to other webpage.
  1. Create the background-->insert logo image,header for the website and button(home,the novels and about)
  2. Next, click on the 'Home' button--> go to 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. Duplicate scene. To do this, go to window-->other panels-->scene--> rename it from scene1 to scene2
  4. Select scene2-->choose text tool-->type in the description
  5. Do the same step 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 the action script at the button frame.
            Action script : stop();
     7.  Testing again.
     8.  Before we do that, we insert frame for all layer (until frame no 15) in scene1. Same goes to scene 2.
     9.  In scene 2, insert new layer-->name as novel-->go to properties-->in the same field, type 'novel'. On            the novel layer, it shows the name of frame that we type in.
     10.  Still in the scen2, insert new layer-->name as stop-->right click on the first frame-->choose actions--type action script 'stop();'.
     11.  Now, change to scene 1, right click on the 'The novels' button-->choose actions. Type action script:
     12.  The action script :

              on (release){
     gotoAndPlay("Scene2", 1);
                     }  

     13.  Test the movie-->click on the'The novels' button, it will show novel 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 1, then we right click the 'home' button-->choose      actions. Type in the action script.
             on(release){
                    gotoAndStop("Scene1", 1);
              }

     15. Testing the movie 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.jemariseni.com/");
          }

TASK 4 : Based on your own creativity, create a simple flash application that involves drag and drop function.
Steps:

  1. Draw 3 rectangle named red, yellow and blue.
  2. Select the rectangle-->click modify-->convert it to symbol-->name as redrec-->choose movie clip type-->ok
  3. Repeat step 2 for each rectangle.
  4. Insert new layer-->name as round
  5. Draw 3 circle-->select the image-->convert it to symbol-->name as redround,yellowround and blueround-->choose movie clip-->ok.
  6. Since we want to drag the circle to the rectangle, then, right click on the redround-->choose actions. Type in the action script below.
  7. The action script : on (press) { startDrag(this,true);} on (release) { stopDrag(); }
  8. Repeat step 5 and apply to yellowround and blueround.
  9. Control-->test movie--> done.
You can access my .swf file by go to my site. :)

#13 ANIMATION

Helloooo! Untuk minggu ke-13 ni kami mula belajar untuk apps 3 di dalam Ipad yang diberi. Kami diberi tugasan atau aktiviti untuk dilakukan didalam kelas dengan menggunakan apps 3 tersebut. Berikut merupakan hasil tugasan yang saya lakukan berserta langkah-langkahnya sekali :)

Task 1 : Motion tweening



Steps :
1. Draw a circle. double click it to make sure the shape and the stroke is together.
2. Go to frame 25 and insert keyframe. Drag the circle to the place that u want to move it.Resize the circle if u want. You also can change the alpha, brightness and many more to change the color of the circle.
3. Repeat step 2 according to the number of times you want to move the circle.
4. Go to any frame between 1 to 25; for example  12, then right click and select create motion tweet. Repeat this step at every range of frame that you have done.
5. Next, click control on the menu bar and select test movie to view your animation.
6. Finally, you can save your animation.

Task 2 : Shape Tweening



Steps:
1.Type the text you want using text tool.
2. Go to modify and then click break apart.
3. Repeat step 2.
4. Go to frame 25 and insert keyframe.
5. Delete the text.
6. Draw the star using polystar tool. Double click at it to make sure the shape and the stroke are together.
7.Go to the center between frame 1 until 25, for example frame 12; then go to properties and click tween and change it to shape.
8. Next, click control on the menu bar and select test movie to view your animation.
9. Finally, you can save your animation.

Task 3 : Motion Guided






Steps:
1. Draw the ant.
2. Convert the ant to movie clip.
3. Choose a key frame (example: keyframe no.50)
4. Place the and at the new position at keyframe 50.
5. Right click between the keyframe and create motion tween.
6. Rename the layer as ant.
7. Create motion guide.
8. Use pencil to draw the guide
9. Select first key frame and click the ant at the cente and move it at the starting point of the guide.
10. For the last key frame, move it at the last point of the guide.
11. Use transform tool to adjust the position for certain keyframe,
12. Tick the orient to path at the first key frame.
13. Test movie.




Task 4 : Frame by frame






Steps:

1. Design the cartoon (same cartoon) with different expression..
2.Save every image in the library by convert it to symbol.
3.Put the first image in keyframe 1..
4.For next keyframe which are keyframe 2 and so on, insert another image.
5. Test movie.
6. Save.




#12 WACOM : DIGITAL DRAWING TABLET

Hai2! Minggu ni lambat sikit update sebab buzy sikit dengan assignment yang semuanya dah menghampiri due date. hehe. Lepas tu demam pulak sehari. Mungkin tak cukup rehat kot. huhu. Okay untuk minggu ni Dr.Zaida telah memberi kami wacom drawing tablet sorang satu untuk memudahkan proses kami melukis di dalam adobe flash ini. Haaa...ni la dia rupa WACOM digital drawing tablet tu....



Maka, pada minggu ini kami pun mula belajar dan menyesuaikan diri melukis dengan menggunakan WACOM ini. Pada yang tidak mahir dan tidak pernah menggunakan WACOM seperti saya ini agak sukar ye untuk melukis menggunakan WACOM ni. hehe.Tapi, bak kata orang "practices makes perfect". Jadi saya perlu banyak praktis lagi untuk menjadikan lukisan saya lebih cantik dan sempurna. Rasanya itu sahaja yang ingin saya kongsikan unutk minggu ini. Dibawah ini merupakan contoh gambar yang saya lukis dengan menggunakan WACOM ini. Saya cuba melukis burung twitter kerana saya adalah pengguna tegar twitter! hehehe


Ouh ya. Minggu lepas Dr.Zaida ada buat competition untuk siapa yang dapat lukis gambar sendiri samaada menggunakan onion skin tool atau menggunakan tablet serta menjelaskan langkah-langkah yang digunakan untuk melukis gambar tersebut. Saya terfikir untuk join the competition. Due date untuk penghantaran gambar adalah pada 1 Disember 2012 sebelum jam 4petang. Tetapi malangnya saya tidak sempat unutk menyiapkan drawing muka saya tuhh. huhu sedey. Jadi saya hanya mampu upload gambar tersebut kat sini je. Susah juga ya nak buat gambar ni berhari2 baru siap. huhuu. Dan ini lah hasilnyaaaa. Saya rasa saya nampak tuaaa :( Saya tak berapa nak pandai lukis muka siap ada shadow2 macam dewi dan idi. Cuba untuk buat tp kurang berjaya nampaknya. huhu. 

Ini adalah hasil lukisan saya...


Dan ini adalah gambar asal...




up