WEEK 5 : Drag & Drop

Lets try this simple activity..

WEEK 5 : Dialog Box

The next task is to create a dialog box question.

1.  Create this layout using Text Tool (T)

2.  Then, click Window ----> components ----> combo box

3.  Rename the combo box by name box

4. Click Window ----> Component Inspector

5. Choose Data

6. Key in the above data

Behind the button submit, insert this action script

on (press) {
    if (box.getValue() == "pertama") {
        respon = "kurang tepat. sila cuba lagi!";
}
if (box.getValue() == "kedua") {
        respon = "Tahniah!Jawapan anda betul";
}
if (box.getValue() == "ketiga") {
        respon = "kurang tepat. sila cuba lagi!";
}
if (box.getValue() == "keempat") {
        respon = "kurang tepat. sila cuba lagi!";
}
if (box.getValue() == "kelima") {
        respon = "kurang tepat. sila cuba lagi!";
}

gotoAndStop(2);

}

 Insert stop action on the first frame.

On the frame 2, create this layout.

For the dialog box, make sure to use Dynamic Text and Var : respon

Link the back button to the frame 1.

WEEK 5 : Multiple Choice Question

The next task is about multiple choice question.

STEP 1

1.  Insert the question and answers as below using Text Tool (T)

STEP 2 (To create the buttons for all answers)

1. Create a new layer and rename it as button.

2.  Click insert ----> new symbol ----> name : buttonA, type : button ----> ok

     3.  Then the new layout appear. 

     4.  Using Oval Tool (O), draw a red circle.

     5.  Using Text Tool (T), write the letter A.

6. Now the A button is done, click Scene 1 to go back to the previous layout.

7.  Drag the A button from library to the button layer.

8.  Right-click ButtonA, then click duplicate

9.  This pop-up will appear. Put name : buttonB and type : button.

10.  double-click on the buttonB

11. This layout will appear. Delete the letter A and replace it with the letter B then go back to the Scene 1

    12.  Repeat the same step until u got all 4 button (A, B, C, D)

STEP 3 (memasukkan action script agar soalan dan jawapan tidak loop)

1. Create a new layer and rename it as stopQA
2. Right-click on the frame 45, go to action and put this coding stop();
3. The purpose of this coding is to avoid the written "question and answer" from looping.

STEP 4 (memasukkan action script stop untuk menentukan jawapan betul atau salah)

1. Create a new layer and rename it as 'respon'.
2. Clik on the frame 50, insert a new keyframe or click F6.
3. Insert 'well done' image that you can download it from google.
4. Then, clik on the frame 60, insert a new keyframe or click F6.
5. Insert "inccorrect' image.
6. Next, create a new layer and rename it as 'stopcorrect'.
7. On the frame 50, insert action script stop(); to stop the respons.
8. Then, create a new layer and rename it as 'stopincorrect'.
9. On the frame 60, insert action script stop(); to stop the respons.

STEP 5 (Memasukkan action script untuk setiap button)

1.  Right-click on the buttonA, pilih action.
2. Masukkan coding berikut.

     3.  Repeat this step to other 3 buttons.
     4.  We know the correct answer is B.
     5.  So, in the coding, change the 60 to 50 as the correct respon is in the frame 50.


 STEP 6 (action stop untuk keseluruhan flash file)

1. Create a new layer and rename it as stop.
2. On the last frame (frame 65), put action script for stop.

Now, your multiplechoice question is ready to be use.

WEEK 5 : Text Entry Question

This week task is to create a Text Entry Question.

1.  Create this layout with the question like above unsing Text Tool(T).

2.  Using Text Tool, create an input box as above. Put the variable as answer

3. Next, using Text Tool, insert a Dynamic Text Box. Set the variable as respon and check the Auto Kern.

4. Insert 2 button. Pause and Stop.

5.  Insert this script behind the pause button.

on (release, keyPress "<Enter>") {if (answer == "carbon monoxide and other hydrocarbons")
{respon="Correct";
    }else{
        respon="Incorrect. Your answer " +answer+ " is incorrect";
}
}

6.  Insert this action scrip behind the end button.

on (release) {gotoAndPlay("Scene 1");

}

Farm Activity Tutorial

WEEK 4 : Scene by Scene

Assalamualaikum dan Selamat Sejahtera..
Pada tugasan kali ini, saya diminta untuk menghasilkan 1 flash file yang mengandungi beberapa scene.
Berikut adalah flash file saya hasil gabungan beberapa scene.

Aktiviti 1


Aktiviti 2


Untuk menghasilkan flash file yang sebegini, beberapa langkah harus diikuti..

1. SCENE 1

interface untuk scene 1

  
     Bahagian 1 (menghasilkan huruf bergerak)

1. Setelah anda membuka aplikasi flash file anda, anda akan berada di Layer 1 dan frame 1.
2. Rename kembali Layer 1 anda kepada perkataan Banner.
3. Dengan menggunakan Rectangle Tool, lukis segiempat seperti yang dikehendaki.
4. Seterusnya, masukkan layer baru.
• Insert ----> Timeline ----> Layer    

                                             atau

 

klik pada button Insert Layer

       5.  Rename kembali Layer 2 anda kepada perkataan Learning.
       6.  Dengan menggunakan Text Tool (T) , taipkan huruf pertama pada perkataan yang ingin ditulis.

• contohnya: anda ingin menulis perkataan Learning. 
• Taipkan huruf 'L'

       7.  Kemudian masukkan new keyframe

• Insert ----> Timeline ----> Keyframe

                                       atau

• tekan kekunci F6 pada keyboard

        8.  Ulang langkah 6 dan 7 sehingga selesai semua huruf yang diinginkan.


     Bahagian 2 (menghasilkan background oren bergerak)

1. Masukkan Layer baru.
2. Rename Layer 3 kepada textbg.
3. Pada frame 1, lukiskan satu bulatan dengan menggunakan Oval Tool (O)
4. Kemudian, masukkan keyframe pada keyframe 20.
5. Padamkan gambar bulatan dan gantikan dengan gambar splash.

• gambar splash boleh dihasilkan dengan menggunakan konsep Tracing Images With The Onion Skin Tool.

      6. Klik mana-mana frame antara keyframe 1 hingga 20.
      7. Kemudian

• right-click -----> create shape twin

     Bahagian 2 (menghasilkan perkataan yang boleh di link ke scene lain)

1. Masukkan Layer baru.
2. Rename Layer 4 kepada addition.
3. Dengan menggunakan Text Tool, taip perkataan 'topic 1 : addition' .
4. Seterusnya, anda harus menukarkan perkataan tersebut ke dalam bentuk button.

• right-click pada perkataan 'topic 1 : addition'----> convert to symbol ----> namakan sebagai addition dan pastikan anda memilih type : button ---->ok

      5.  Ulang langkah 1 hingga 4 untuk perkataan 'topic 2 : subtraction' dan 'topic 3 : multiplication'.
      6.  Masukkan action script untuk setiap button seperti berikut :
                        on (release) {gotoAndPlay("Scene 2",1);
                                              }
     
     Bahagian 3 (menghasilkan imej papan hitam bergerak)

1. Masukkan Layer baru.
2. Rename Layer 7 kepada image.
3. Pada frame 1, Import image dari save file.
• file ----> import ----> import to stage 

     4.  Klik pada frame 10, masukkan keyframe (F6), ubahkan posisi imej papan hitam condong ke kiri. 
     5.  Klik pada mana-mana frame antara frame 1 hingga frame 10, right-click dan create motion tween.
     6.  Ulang langkah 4 pada frame 20 dan condongkan papan hitam ke kanan pula.
     7.  Ulang langkah 5 antara frame 10 hingga  frame 20.


     Bahagian 4 (menghasilkan button end)

1.  Masukkan Layer baru.
2. Rename Layer 8 kepada stop button.
3. Pada frame 1, Import image dari save file.
• file ----> import ----> import to stage 

4. Seterusnya, anda harus menukarkan imej tersebut ke dalam bentuk button.

• right-click pada imej tersebut----> convert to symbol ----> namakan sebagai end dan pastikan anda memilih type : button ---->ok

     5.  Masukkan action script untuk button tersebut seperti berikut :

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

2. SCENE 2

• Untuk memasukkan scen baru:-
• windows ----> Other Panels ----> scene

• Scene baru akan muncul dengan nama Scene 2

• Masukkan imej dan perkataan seperti berikut menggunakan teknik-teknik yang dipelajari pada kelas sebelum ini.
• Setiap motion dibuat dalam layer yang berbeza.

       Bahagian 1 (menghasilkan button back)

1. Masukkan Layer baru.
2. Rename Layer tersebut mengikut nama yang sesuai.
3. Pada frame 1, Import image dari save file.
• file ----> import ----> import to stage 

4. Seterusnya, anda harus menukarkan imej tersebut ke dalam bentuk button.

• right-click pada imej tersebut----> convert to symbol ----> namakan sebagai back dan pastikan anda memilih type : button ---->ok

     5.   Masukkan action untuk membolehkan button back berfungsi.

• right-click ----> action ----> masukkan coding berikut :

                      on (release) {gotoAndPlay("Scene 1", 1);
                       }
     6.  Untuk mengelakkan scene dari looping, action stop harus dimasukkan.

• create new layer ----> righ-click atas mana-mana frame ----> action ----> masukkan coding berikut :

                      stop();

     7.  Drag icon stop sehingga ke frame terakhir.

3. SCENE 3 & SCENE 4

scene 3

scene 4

1. Untuk Scene 3 dan  Scene 4, langkah seperti scene 2  diulang.

4. SCENE 5

Add caption

1. Untuk scene ini, anda perlu menggunakan animation technique.

• insert ---->  new symbol ----> name : rabbit , type : movie clip 
• file ----> import ----> import to stage ----> ambil 1 saja gambar rabbit ----> ok
• kembali ke scene 5 ----> drag movie clip rabbit from library
• gerakkan rabbit menggunakan motion tweening

WEEK 3 : Animation in Flash

Cut-Out Animation



To create this, first of all we need to have a sequel of image.

STEP 1

1. Insert ----> new symbol ----> name: rabbit, type : movie clip ----> ok

2. Then a new layout will appear.


3.  File ----> import ----> import to stage ----> choose the first rabbit pic ----> ok

4.  Click Scene 1 as above

5.  Drag rabbit (in movie clip format) to the layout

STEP 2
 
6.  The next step is to make motion to the rabbit.
7.  Insert new key frame at frame 15.
8. Drag the rabbit to anywhere you like.
9. Right click at any frame between frame 1 to 10.
10. Insert motion tween.

Motion Guide Animation



Traditional Animation