Apps 4 : Interaction in Flash

Assalamualaikum & Good Day Everyone! ^_^

In the previous entries we have discussed on how to build simple animation in Flash. So, in this entry, we will be learning on how to build a simple application in Flash. There are 4 types of interaction that we will be creating that is Multiple Choice Question, Text Entry Question, Main Menu Application, and Drag & Drop.

Multiple Choice Question

Step 1 : Create a new Flash file. Rename your Layer 1 as question. In question layer, select Text Tool, and start typing your question. Don't forget to set the text type as Static Text in the Properties panel.

Step 2 : Create a new layer and name it as button layer. In the button layer, we want to create 4 buttons that is Button A, Button B, Button C, and Button D. 

Step 3 : Select Oval Tool draw a circle. Select Text Tool and draw an A on the top of the circle. Select both circle and A, convert it to button symbol by pressing F8. Set the properties as below:

Step 4 : Repeat Step 3 for button B, C, and D. After you're done, you can see the buttons that you've just created in the Library panel.

Step 5 : Drag your buttons to the stage. Select Text Tool (set text type as Static Text) and type answer besides each button as follow:

Step 6 : Insert a new layer and name it as respond. Select Text Tool draw your text area in the stage. In the Properties panel set the text type as Dynamic Text. Adjust your text area. This is where you will tell the user whether their answer is correct or wrong.

Step 7 : Insert a new layer and name it as action. Right click on the 1st frame and select Actions. Type in the codes below:

Step 8 : Now, we want to add actionscript to each button. In this case, Button C is the correct answer. Right click on the Button C and select Actions. Type in the codes below:

The code shows that when users click on the C button, it will be display 'Congrats, your answer is correct!' in the Dynamic Text area that we created in Step 6

Step 9 : Repeat Step 8 to the other 3 buttons but change the respond that shows the answer is wrong or incorrect.

Test you movie. It should work.

Here are the Multiple Choice Question that I have created --> Multiple Choice Question


Text Entry Question

Step 1 : Create a Flash file. Type in your title.

Step 2 : Create a new layer and rename it as question. Select Text Tool and select Static Text in the Properties panel. Start typing your question.

Step 3 : Select the Rectangle Tool and create a box on your stage.

Step 4 : Select the Text Tool and reposition inside the box that you just created. Make sure that you change the text type to Input Text in the Properties panel.

Step 5 : Select the Text Tool again set the text type as Dynamic Text in the Properties panel. Place it below the box.

Step 6 : Create a new layer and name it as button. From the Library panel, choose a Play button and drag it to your stage.

Step 7 : Insert another layer and name it as stop. Right click at the 1^st frame and choose Actions. Type in the codes below:

Step 8 : Right click on the play button and choose Actions. Type in the codes below:

Step 9 : In your Input Text field, set the variable as answer and in your Dynamic Text field, set the variable as respon. Test your movie.

Here are the links to the Text Entry Question that I have created. Click Here.

Main Menu

Step 1 : Create a new Flash file. Design your homepage by drawing the buttons, names of the main menu and etc. Here is the interface of my homepage of my main menu.

Step 2 : Click on Home button, and in the Properties panel, change its Instance Name. Below is the Instance Name that I set for each button.

Step 3 : We want to create a page that is the food page (when user click on the Foods button, they will be directed to the Foods page). We want all the pages have the same design, so, we just duplicate the Scene 1. Go to Windows > Other Panels > Scene. The Scene window will appear.

 At the bottom of the Scene window, click on the Duplicate scene button. Now you have two scenes.

Double click on your Scene 1 and rename it as Home and your Scene 1 copy as Foods. 

Close your Scene window.

Step 4 : Select your Foods Scene and replace the text with a box and foods menu.

Don’t forget to assign your button an Instance Name.

Test your movie. You will see that these two scenes are kept on blinking.

Step 5 : Select your Home scene, right click on the 1^st frame of your buttons layer, and click on Actions. in the Actions – Frame window, type the following codes:

Test your movie again.

Step 6 : Select you Home scene. Now, we want to activate the Foods button so that when users click on it, they will be directed to the Foods Scene. Now, insert new frame in each layer on the 15^th frame.

Do the same on the Foods scene.

Step 7 : Now, we will insert a new layer at Foods scene. Rename the layer as foods and on the Properties panel, set your Frame Label as food_page.

Step 8 : We will insert a stop action so it won’t play along the timeline. Insert a new layer and rename it as ‘stop’. Right click on the 1^st frame of the stop layer, and click Actions and type the codes below:

Step 9 : Go to Home scene, right click on the Foods button, and click Actions. Type in the codes below:

Test your movie. You can now click on the Foods button and it directs you to the Foods page. Now we will activate Home button in the Foods page.

Step 10 : In Foods scene, right click on the Home button, and choose Actions. Type in the codes below:

Test your movie.

Step 11 : Now, we want to activate the button in the Foods scene. These buttons will navigate to this scene but in different frame.  Select the foods layer. Right click on the 5^th frame and insert a new keyframe. In the Properties panel, name the frame as ‘rice’ on Frame Label.

Step 12 : Select Text Tool and write the name of the rice menu as below:

Set your button Instance Name as riceBtn. Right click on the Rice button and select Actions. Type in the codes below:

Test your movie. It should be working.

Step 13 : Repeat the Step 3 until Step 12 to create the Beverages page and test your movie to see if they are all working as you want them to be.

Step 14 : Now we want to navigate the About Us button to a website. Go to Home Scene, right click on the About Us button, and click Actions. Type in the codes below:

Test your movie. Here are the Main Menu that I've created --> Main Menu

Drag & Drop

Step 1 : Create a new Flash file. Draw a tree or you can import tree picture by selecting File > Import > Import to Library. Rename your Layer 1 as tree.

Step 2 : Convert you tree to movie symbol by pressing F8. A Convert to Symbol window will appear and set the properties as below:

Step 3 : Insert a new layer and rename it as apple. Draw your apple or alternatively, import an apple image into your Library. Convert your apple to movie symbol and set the properties as below:

Step 4 : Right click on the tree on the stage and select Actions. Insert the codes below:

Step 5 : Repeat Step 4 for the apple.

Test your movie by pressing 'Ctrl+Enter'. Here is the Drag & Drop that I've created --> Drag & Drop

That's it for Interaction in Flash.. ^_^