Creating User Interface (UI) Interactions with Flash

1. Creating User Interface (UI) Interactions with Flash Designing the PromptsSelecting the UI ComponentsNaming the InstancesWriting the ActionScriptTesting the Feedback

2. Interacting with Users • Create the frame that will prompt the user for input. • Create any feedback frames that you can anticipate needing. • Give each User Interface (UI) component a logically meaningful instance name. • Use ActionScript for the branching.

3. Creating the Layers • Create the following three layers: • a “text” layer that will contain the text; • a “buttons” layer to contain the buttons; • an “actions” layer that will contain the ActionScript.

4. Designing the Prompt • In this example, we create a multiple choice question. • The prompt will include the following UI components: • One radio button for each choice. • A submit button.

5. The Question FrameMake this be Frame 1: Who is buried in Grant’s tomb? ◦Beethoven ◦Grant ◦Mozart

6. Feedback for a Wrong AnswerMake this be Frame 3: No, that is not correct. Think about the name onthe tomb, which is Grant.

7. Feedback for a Correct AnswerMake this be Frame 5: Correct! Grant is indeed buried in Grant’s tomb. Nice work!

8. Naming the Instances • Name the radio buttons: • Beethoven • Grant • Mozart • Name the submit button: • submit_btn • Name the try again button: • retry_btn

9. Submit button ActionScriptPut this in Frame 1: stop(); submit_btn.onRelease = function () { if (Grant.selected) { gotoAndStop(5); } else { gotoAndStop(3); } };

10. Retry button ActionScriptPut this in Frame 3: retry_btn.onRelease = function () { gotoAndStop(1); };