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 Grants 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 Grants
  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)