Hello and Hai,
After having some fun with Activity 3, this week i spending my time with beloved Activity 4. Activity 4 come along with Apps 4. As usual, we are doing our lesson through the apps that had been provide to us. There are four apps at all so that mean this week we got our last apps. This lesson was so fun and i am very enjoyed. Before proceed with the handout on Activity 4, first I have to watch videos that related to the task in Activity 4. After watching the video, I try to do the task and it take me hours to complete. But, it is ok. As long as i can complete the task and understand the whole process of developing interactive application.
In Activity 4, i have learn about how to create main menu, steps in creating multiple choice question and text entry question. Apart from that, i learn about basic of drag and drop. Actually, it is not a very complicated process if i fully understand the tutorial.
Main menu button is important for interactive website to navigate from one page to another. As an example, in this task i had develop simple main menu about teddy store. Teddy store is an online shop that selling teddy bear. Before proceed to the product page, user will be directed to main menu or homepage. If she or he wish to see the product user need to choose product button and the button will navigate the user to product page.
Please click this link to see my simple main menu on teddy store: http://www.swfcabin.com/open/1365022614
Picture above show Scene 1 of Teddy Store. It has 3 layers which are button_layer, teddy_store and background layer.
Picture above show the flash interface for development of main menu of Teddy Store. It is in Scene 2. As seen there are 5 layers. From top: stop layer, product layer, button_layer, teddy_store and background layer. Now, its time to explain steps involve in this development.
Steps:
2. Rename layer 1 to background. Import picture that will be used as a background into library.
File > Import > Import to Library
3. Lock the layer so that changes cannot be made in background layer.
4. Add another layer by pressing insert layer button which located under layer column.
5. Rename the layer as teddy_store. This layer will keep the store's name. Type Teddy Store using text tool.
6. Then add another layer and rename the layer to button_layer. This layer consist of button that will be used to navigate visitor to other page. Use Rectangle Primitive Tool and create rectangle button. Convert the rectangle to graphic. Modify > Convert to Symbol > Rename the symbol as button_1 and choose button for graphic type.
7. Double click on the button. It will direct you to another window. Insert new layer and rename the layer to label_home. Use text tool and type Home in the button. Picture below show the window of button_1.
8. Duplicate the button. Rename it as button_2 and button_3. Repeat step 7 and set the second button as About and the third button as Product.
9. Duplicate Scene 1. Go to Window > Other Panels and choose Scene. A small window will appear and click duplicate scene button. The button located at the bottom left of the window. Picture below show the pop-up window after you had choose Scene. Rename the duplicate layer as Scene 2.
10. Go to Scene 2. At button_layer layer, type Welcome, comfort yourself and enjoy selecting our product using text tool. So, you will have different interface from Scene 1.
11. Go to Scene 1 and use text tool to type Welcome to Teddy Store. Test movie by pressing CTRL+ENTER. You will see the text from scene 1 and scene 2 keep on blinking. It happen because there is no stop command so it do not know where to stop.
12. Insert the command below to the button_layer first frame. Right click on the frame and choose action.
stop( );
13. Now, go to Scene 1.First of all, insert Frame into every layer. Right click on frame 15 and insert frame. Do the the same to every layer in Scene 2.
14. In Scene 2, insert new layer which is product_layer and stop layer. On properties, name the frame as product_page.
15. Go to Scene 1. Here, we want to insert a actionscript to Product button so that it able to navigate visitor to other page. Right click on product button and choose action. Type the actionscript as shown below.
on(release)
{
gotoAndPlay ("Scene 2", 1);
}
Scene 2 is the product page. 1 is the first frame.
16. Go to Scene 2 and insert actionscript to Home button.
on(release)
{
gotoAndStop ("Scene 1", 1);
}
17. Test the movie. CTRL+ENTER.
Now, I want to share how to move from one scene to certain frame on the scene itself. Go to Scene 2.
18. As seen in picture there is a Latest Product button. Create the button by using Rectangle Primitive tool. Convert the rectangle to symbol.
19. Click on frame 10 of button_layer and insert keyframe. On properties, name the frame as latest.
20. Insert the information under the Latest Product button. Use text tool and type "Let see our latest Product". On properties name the instance of the button as latest_button.
21. Insert actionscript to Latest Product Button.
on(release)
{
gotoAndStop("Scene 2", "latest");
}
Now, I have 1 last button. I want to use this button to navigate visitor to teddy store website.
22. Go to Scene 1 and right click on About button then choose Action. Insert actionscript. Do the same to the About button in Scene 2.
on(release)
{
getURL ("http://www.bigteddybear2u.com");
}
Then, test your movie.
Multiple Choice Question.
Please click this link for example: http://www.swfcabin.com/open/1365022048
As seen in the picture, there are 6 layers at all. From top were action layer, respon layer, button layer, question layer, text and graphics layer and background layer.
1. Prepare your desired background.
2. Add new layer and name it as text and graphics layer. Use text layer to type the title of the question that is TEXT AND GRAPHICS.
3. Add new layer and name it as question. This layer will hold the question. Use text tool and type the question.
4. Next, insert new layer and rename it as button. Here I will create button for the answer. Use oval tool to create a circle. Duplicate it until you get four circle which represent 4 options.
5. Use text tool and type in A to first circle. Type B, C and D to the other three circles.
6. Now, modify the circle into symbol. Modify> Convert to symbol > Rename the symbol as Button_A and choose button for type. Do the same for the other three circle. Rename the symbol as Button_B, Button_C and Button_D.
7. Now use text tool to type the answer.
8. Add new layer and name it as respon. Choose text tool and on properties choose Dynamic text. In Var insert respon.
9. Add new layer and name it as action. Here insert the Actionscript command.
stop();
var respon;
respon = ""
10. Now insert actionscript to Button_A, Button_B, Button_C and Button_D. The correct answer is A so insert the command as shown below.
on(release)
{
respon = "Yeah, your answer is correct!";
}
Button _B:
on(release)
{
respon = "Your answer is wrong, try again.";
}
Button_C
on(release)
{
respon= "Your answer is wrong.";
}
Button_D
on(release)
{
respon = "Please try again";
}
Lastly, test the movie.
Text Entry Question
This link will take you to my simple text entry question: : http://www.swfcabin.com/open/1365037548
As seen in picture, there are 4 layer at all which are background, stop, button and question layer.
Steps:
1. Prepared your desired background in background layer. Lock it so that change cannot be made on this layer.
2. Insert new layer and name it as question. Use text tool to and type your question. Make sure you have choose the static tool.
3. Now, use rectangle tool and create a rectangle on the stage.
4. Choose text tool and choose input text . Re-position the text in the rectangle that you have create before. This space is for user to type in their answer.
5. Select tool text again and choose dynamic text. Repostion it under the rectangle. This text will return the result for the answer that had been type in.
6. Insert new layer and name it as button. Here, I have create my own play button. Do not forget to convert the play image into symbol. This play button will return a result after user click on it.
7. In the play button, insert Actionscript command.
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.";
}
}
8. For input text variable name it as answer whereas for dynamic text variable name is respon.
9. Test your movie.
Drop and Drag
Click this link for my simple drop and drag: http://www.swfcabin.com/open/1365037914
This is my flash interface for drag and drop application development. In this development, I had use apple tree image that imported to library. Apart from that, I draw the apple and convert it into movie clip symbol.
This is the apple tree image that I used in this development. Convert this image to symbol. Modify> Convert into symbol> Rename symbol and choose movie clip as symbol type.
Next, draw the apple and convert into movie clip symbol. Duplicate the symbol up to your desired amount. Here, I have four apples.
In this application I have two layer which are apple layer and tree layer. Make sure your apple layer is on top of tree layer so that when you drag the apple to the tree, the apple can be placed on top of the tree image. To enable the apple to be drag and drop, insert the following actionscript command.
on(press)
{
startDrag (this, true);
}
on (release)
{
stopDrag();
}
Insert this command to every each of the apple. Now, test the movie by pressing key CTRL+ENTER.
Hope I can remember all the step that involve in developing interactive application. Practice make perfect.
Love,
-Vicki-
0 comments:
Post a Comment
If you have any questions please comment below.