Tuesday 18 December 2012

❤ Apps 4: Types of Interaction ❤

Posted by kErTaS PeNseL at 17:17
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...

0 comments:

Post a Comment

 

kErTaS pEnSeL Template by Ipietoon Blogger Template | Gift Idea