Flash Prototyping Workbook - Part 1 and 2

2 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

You create actors…

While you work through this tutorial, you can download the files for Part 2 and 3 if you haven’t already: http://uxweek.com/slides/FlashWorkshopFiles.zip

The purpose of this initial exercise is to get you comfortable with the Flash metaphor: You create actors. You place them on the stage. You tell them what to do.

Create an animated actor (symbol)

01. Create a new Flash File that uses ActionScript 2.0.

02. From the menus, choose Window > Workspace > Default so we’re all using the same Workspace. (You can close the Color and Swatches panel on the right.)

03. Right-click or Ctrl+click in the empty Library panel and choose “New Symbol…”

04. Name the new symbol, “Bug” and make “Movie Clip” is selected. Press “OK.”

05. Notice that the breadcrumbs in the Edit Bar/Navigation Bar tell you that you’re currently viewing the stage and timeline for “Bug.”

06. On the stage that appears, use the drawing tools on the left to draw a bug. (You’ll probably use the Shapes/Oval Tool, Pencil and Line/Fill Colors to draw it.)

ActionScript 2.0 is more direct and intuitive for non-programmers than the latest version, ActionScript 3.0 When working in ActionScript 2.0, you’ll want to make sure that tutorials and scripts you find are compatible. Symbols are objects that can be used and reused. They are similar to Shapes in Visio and Stencils in Omnigraffle. You can name symbols anything you want—case does not matter. Movie Clips are objects that act independently of the main Flash movie. A movie clip has its own timeline, which is independent of the main Flash movie’s timeline. The Edit Bar (Navigation Area) indicates which timeline you are currently viewing.

The Stage is your visual workspace or canvas. This is where you specify where objects will appear. The Timeline is where you define when objects appear or disappear from the stage. The timeline contains frames and keyframes which can be on multiple, independent layers. Frames are displayed as blocks. They are grey when they contain content and white when they are empty. Keyframes are frames marked with circles or dots. A keyframe is a frame where a change can occur without affecting the previous frames. Changes made on keyframes persist until the next keyframe unless tweening is used to fill in the blanks.

Quick and Easy Flash Prototyping | Alexa Andrzejewski | 3

07. You’ve just created the first keyframe of your bug actor. To animate your bug, you’re going to add another keyframe with the bug in a slightly different pose. In the Timeline, right-click or Ctrl+click on the second frame and select “Insert Keyframe.”

08. The new keyframe should now be selected, and by default, it contains a copy of whatever was in the previous frame. (It’s like cellular division.) But since this is a new keyframe, you can change the graphic here without affecting the previous frame. Using the white pointer tool (the Subselection Tool), select each of your bug’s legs and use the pointer to change each leg’s position.

09. Click on the first frame in the timeline, and you should see your bug’s legs are still in the original positions. Click the second frame again to see the new position.

10. To preview your animation, open the Control menu and make sure “Loop Playback” is checked.

11. Press the Enter/Return key to play the animation. Press again to stop.

12. Click “Back” in the Navigation Bar to return to the main stage and timeline.


You place them on the stage…

Add an instance of your actor to the main stage

13. Notice that your “Bug” appears in the Library Panel.

14. Drag an instance of “Bug” onto the main stage.

15. In the Properties Panel, where it says <Instance Name>, give this unique instance of your bug a unique and proper name, for example: “Bob”

You tell them what to do…

Make your actor move across the stage

16. Move “Bob” into his starting position—in the off-stage area to the left of the stage.

Instances are unique occurrences of symbols in your Flash movie. You can place as many instances of a library item into your movie as you would like. If you update the library item, all of its instances will be updated as well, although the size and position may vary.

The Properties Panel is context-sensitive—it shows and allows you to set properties for the last frame or instance that you selected. The Properties Panel is where you can assign frame labels to frames and instance names to instances.


17. Next you’re going to insert a keyframe that represents Bob’s final position. You want there to be some time between the starting position and final position, so Right-Click or Ctrl+Click on approximately the 50th frame and choose “Insert Keyframe.”

18. Making sure this new keyframe is selected, move Bob into his final position—off-stage, to the right.

19. Press the Enter/Return key to play the animation. Your bug should pause and then jump to the final position for a moment. Press again to stop.

20. Flash can automatically create a transition between keyframes for you. Filling in the frames between two points is called “Tweening.” Select the first keyframe, and in the Properties Panel, from the Tween menu select “Motion.” In the timeline, an arrow should now span the gap between the starting keyframe and the ending keyframe.

21. Press the Enter/Return key to play your movie. Bob should glide smoothly from his starting point to his ending point.


22. What about the moving legs? Pressing “Enter” only plays the current timeline. To view your movie as your audience will see it, with both timelines running independently and simultaneously, press Ctrl+Enter on PC, +Enter on Mac.

Make your actor respond to user input

23. Now you’re going to add some interactivity to Bob. You’re going to make him stop moving across the stage when pressed and start again when released.

24. Select the first keyframe and select the bug on the stage, “Bob.”

25. Open the Actions panel by going to "Window > Actions.”

26. When adding interactivity to an object, you want to ask yourself three questions.

• WHEN do you want something to happen? (You want something to happen when the user presses or releases the bug.)

• WHICH object or timeline do you want it to happen to? (You want the main timeline and stage, which he moves across, to be affected.)

• WHAT do you want to happen? (You want the main timeline to stop playing when the bug is pressed and to start playing when the bug is released.)

27. To specify WHEN actions should occur, add the following bits of code, called “Event Handlers,” to “Bob” using the Actions panel:

on(press) { } on(release) { }

28. To specify WHICH timeline you want to stop, in our case, the main timeline, which is referred to as “_root,” type its “Target Path” within the event handler’s curly braces:

on(press) { _root. } on(release) { _root. }

29. To specify WHAT should happen, add the following keyword commands, called “Functions,” to the ends of the target paths:

on(press) { _root.stop() } on(release) { _root.play() }

The Actions Panel is context-sensitive—it shows and allows you to add scripts to the last frame or instance that you selected. Look at the tab name near the bottom of the Actions Panel to verify what you are adding actions to.

Event Handlers are used to specify behaviors that trigger actions. Actions contained within an event handler’s curly braces will be triggered only when the event preceding them occurs (e.g., when an button is pressed and when it’s released). Target Paths are like web URLs or file paths, only they use dots (.) instead of slashes to indicate hierarchy. Functions are built-in actions that you can call on using keywords. These commands are keywords followed by parentheses in which specific details can be added when necessary or relevant.


30. Finally, end every “phrase” of code with a semicolon (generally used at the end of every line of code) so that your final script reads as follows:

on(press) { _root.stop(); } on(release) { _root.play(); }

31. Test your movie (Ctrl+Enter on PC, +Enter on Mac) and try pressing and holding your bug. Then try releasing your bug.

32. If you additionally want to make Bob’s legs stop moving when pressed, you can add an additional line of code to each Event Handler. This code uses a Target Path to address Bob’s timeline and tell it to stop as well:

on(press) { _root.stop(); _root.Bob.stop(); }

on(release) { _root.play(); _root.Bob.play(); }

33. Test your movie (Ctrl+Enter on PC, +Enter on Mac) again when finished.

Congratulations! As silly as this tutorial may seem, the basics you’ve just covered are all you need to know to create a basic click-through prototype using Flash!



Setting Up Your Prototype

Getting started…

34. Open FlashPrototyping_WorkshopTemplate.fla

35. Notice that numbered screen images from Facebook have been placed on the “Wireframes” layer in the Timeline, one per keyframe. If you select each keyframe, you’ll see a different image. An additional layer, “Interaction,” with one blank keyframe per wireframe has been added.

36. Select one of the keyframes on the “Wireframes” layer. Look at the Properties Panel and note that it’s been given a label.

Add script to the first frame to keep the movie from automatically playing

37. Insert a new layer and rename it, “Frame Actions.”

38. Open the Actions Panel (Window > Actions) if it’s not already.

39. Select the first keyframe in this new layer.

40. With the first keyframe selected, type the following function in the Actions Panel:

stop();

Create an invisible, reusable button

41. Right-click or Ctrl+click in the empty Library panel and choose “New Symbol…”

42. In the dialog that appears, name it "invisibleButton" and choose the type "Button."

43. Notice in the Edit Bar that you are now editing “invisibleButton.”

Frame Labels can be assigned to keyframes so that they can be referred to using ActionScript. It is generally better to refer to frame labels in ActionScript than to frame numbers because frame numbers are subject to change as you add or remove frames.

Frame Actions are attached to keyframes and are triggered when that frame is reached.


44. Notice that this button’s “timeline” consists of four labeled frames. Each frame represents a unique button state. Typically, a button has three visible states—up (normal), over (rollover) and down (pressed)—plus an invisible state, called “Hit,” which you use designate the clickable area of a button. To make a button invisible, you’ll only create this invisible state.

45. Right-click or Ctrl+click (Mac) on the frame labeled, “Hit” and choose “Insert Keyframe.”

46. Using the Rectangle Tool and Fill Color picker if necessary, draw a solid-colored, button-sized box on this keyframe.

47. In the Edit Bar, click the Back Arrow or "Scene 1" to go back to the main movie.

48. Your "invisibleButton" symbol should appear in the Library Panel.

Create a Basic Click-through

Create a basic click-through using invisible buttons

49. Make sure the Wireframes and Frame Actions layers are locked.


50. Select the first keyframe of the Interaction layer.

51. Drag an instance of the invisibleButton onto the stage and drop it over the “Edit” button in the first wireframe. It should appear as a transparent, blue area. Use the Free Transform Tool to make it cover just the area that should be clickable.

52. Next you’re going to make the button interactive. Remembering the questions your script needs to answer (WHEN? WHICH? WHAT?), type the following script in the Actions Panel:

on(release) { _root.gotoAndStop(“W02”); }

53. Note that the function that tells Flash to go to the frame specified in parentheses—gotoAndStop(“FRAME LABEL”)—is placed inside of the event handler—on(release) { }


54. Test your prototype (Ctrl+Enter on PC, +Enter on Mac). You should be able to click on the invisible button go to frame W02.

55. For the next several keyframes, through W08, wherever you see a green, “go to X” callout, add an invisible button with the appropriate script. You can copy and paste the button you’ve already created, simply changing the destination frame label in the Actions Panel.

56. Test your prototype (Ctrl+Enter on PC, +Enter on Mac). You should be able to follow the trail of green callouts.

Simulating Error Handling with Conditional Buttons

Add a checkbox from the components library and give it a name

57. Select the keyframe in the “Interaction” layer above the frame labeled “W05.” (Technically, frame labels apply to all layers.)

58. Open the Components library (Window > Components).

59. In the “User Interface” folder, you’ll find the CheckBox component. Drag it onto the screen and place it on top of the check box in the wireframe.

60. In the Properties tab, give the Instance Name, “termsBox” to this checkbox.

The Components Panel contains a special library of user interface objects, such as radio buttons and combo boxes, that have customizable properties. These properties can be edited in the Parameters tab of the Properties Panel and/or changed using ActionScript.


61. With the check box selected, in the Properties Panel, click the Parameters Tab. Select the “Label” field in the Parameters Tab and delete the label text.

Create an invisible button that checks whether the checkbox is selected or not and sends the prototype to a confirmation or error screen accordingly

62. Drag an invisible button over the "Upload Picture" button on frame “W05.”

63. Select this button, and in the Actions Panel, add an event handler:

on(release) { }

64. Within this event handler, you’re going to add a conditional statement, an “If Statement,” that checks whether “termsBox” is selected.

on(release) { if(CONDITION) { // If the condition in parentheses is met // perform all actions in curly braces. } else { // Otherwise // do these actions. } }

65. Place your cursor between the parentheses in the IF statement. (Delete the word “CONDITION” if you typed it here.)

66. To address the checkbox you created, you will need to use its target path. Rather than typing it in, you can press the “Insert Target Path” icon in the Actions Panel to see the named elements of your movie listed in hierarchical order. Select “termsBox.”

67. Choose “Absolute,” not “Relative,” to inset the complete path. Press “Ok.”

68. “_root.termsBox” should have been inserted into your IF statement, as shown:

if(_root.termsBox) {

The Parameters Tab of the Properties Panel is where you can edit the special properties of components. Each property is listed on a separate line.

The If Statement describes a condition that must be met for certain action(s) to be performed. It can optionally be followed by an “else” statement specifies what to do otherwise.

Target Paths are like web URLs or file paths, only they use dots (.) instead of slashes to indicate hierarchy.


69. Look again at the Parameters tab in the Properties panel. Notice that there are several special properties of Combo Box components, including “label,” which you edited earlier, and “selected.” You can have Flash find out what the current value is of any of these properties by adding the appropriate keyword to the path. To have Flash find out whether “selected” is true or false, simply add “selected” to the end of the path, as in:

if(_root.termsBox.selected) {

70. You want to check whether “selected” is currently “true” or not. To test whether something is equal to something else, you’ll use the “equals” operator, which consists of two equals signs. Your condition will read:

on(release) { if(_root.termsBox.selected == true) { } else { } }

71. Finally, add the actions that should happen when the condition is met and the actions that should happen otherwise, as shown:

on(release) { if(_root.termsBox.selected == true) { _root.gotoAndStop("W07"); } else { _root.gotoAndStop("W06"); } }

Repeat these steps on W06 with a new checkbox and button, making sure the actions go on the button, not the checkbox

72. Go to keyframe “W06”—the error state page—and add a new checkbox component.

73. Give this checkbox the instance name “termsBox2.”

74. Add another invisible button over the “Upload Picture” button.

75. Add the following script to this button (remember, the script goes on the button, not the checkbox!). You don’t need an “else” statement since if the condition isn’t met, you just want it to stay on this error page.

on(release) { if(_root.termsBox2.selected == true) { _root.gotoAndStop("W07"); } }

76. Test your prototype (Ctrl+Enter on PC, +Enter on Mac).

Properties of an object are special keywords that Flash recognizes. They are case sensitive. You can evaluate or change properties of an object using ActionScript.

Operators are used in If Statements to compare one value to another in the format, “if(x OPERATOR y).” Common operators are: == equals > is greater than < is less than != is not equal to <= is less than or equal to >= is greater than or equal to



Independent Movie Clips

Create a flyout menu using a new, independent movie clip

Using what you’ve learned so far, you’re now going to create a new, independent “actor”—just like Bob, with his independently moving legs—featuring a working flyout menu. This menu actor should:

• Highlight upon rollover.

• Open when pressed.

• Close if it is open and then pressed.

• Close and send the main movie to a certain frame if a specific item is pressed.

77. Use “Insert > New Symbol…” to create a new “Movie Clip” symbol called “friendsMenu.”

To begin, you’re going to give this movie clip three labeled keyframes, one for each state of the menu.

78. Select the first keyframe, the default keyframe, and in the Properties Panel, assign the frame label “normal” to this keyframe. In the Actions Panel add the action:

stop();

79. Insert a second keyframe on Frame 5 by right-clicking or Ctrl+clicking (Mac) on Frame 5 an choosing “Insert Blank Keyframe.” Label this keyframe “highlight”

80. Insert a third keyframe on Frame 10 and label it “menu”

81. Right-click on frame 15 and choose “Insert Frame” (not keyframe) to add some blank space after frame 10 so that you can read its label.

Next you’re going to add the appropriate artwork to each keyframe:

82. On the first keyframe, drag the image “friendsmenu1.png” from the library onto the stage. In the Properties Panel, change both its X and Y coordinates to “0” so it is placed right in the corner.

83. On the second keyframe, “highlight,” drag “friendsmenu2.png” onto the Stage and change its coordinates to 0,0.

84. On the third keyframe, “menu,” drag “friendsmenu3.png” onto the Stage and change its coordinates to 0,0.

Movie Clips are objects that act independently of the main Flash movie. A movie clip has its own timeline, which is independent of the main Flash movie’s timeline.


Add a trigger button that controls the menu

To make this menu interactive, you’re going to add a button to it that toggles between the states you created when the user interacts with it.

85. Insert a new layer called, “Trigger.”

86. Drag an invisible button onto the first keyframe of the “Trigger” layer—over the menu label area.

Notice that this button’s appearance spans multiple keyframes in the other layer, which means it will persist, along with its code, while the artwork changes underneath.

So WHEN do you want this trigger to respond and WHAT do you want to happen?

• If the user mouses over this trigger—on(rollOver)—you want the Movie Clip to go to the “highlight” state—gotoAndStop(“highlight”);

• If the user’s mouse leaves the trigger—on(rollOut)—you want it to return to the “normal” state—gotoAndStop(“normal”);

• If the user clicks the trigger—on(press)—you want it to go to the open “menu” state—gotoAndStop(“menu”);

What about the “WHICH” part? It is not needed, because whenever you add actions WITHIN a movie clip, they will act on the local timeline by default, NOT the main, _root timeline. In fact, wherever you add actions, there is always a default target, so if you are certain that the default is correct, you don’t need to add a target path.


87. Select the button, and in the Actions Panel, add the following script:

on(rollOver) { gotoAndStop(“highlight”); } on(rollOut) { gotoAndStop(“normal”); } on(press) { gotoAndStop(“menu”); }

When the menu is open, you want the interactions to change slightly. When the menu is showing, you want pressing the button to make it go away.

88. Insert a keyframe in the “Trigger” layer above the frame labeled “menu.”

89. Select the invisible button and replace the existing script with the following script (remember, since this is a new keyframe, deleting the script here won’t affect previous frames):

on(press) { gotoAndStop(“highlight”); }


90. On this same keyframe, drag an invisible button over the “All Friends” option in the menu. Select this button, and in the Actions Panel add the following script:

on(press) { gotoAndStop(“W09”); }

91. Add a target path to the action so that Flash knows you’re addressing the MAIN timeline, not this movie clip’s timeline:

on(press) { _root.gotoAndStop(“W09”); }

92. There is one action that you might want to happen on the local timeline, however—when you select an item, you want this menu to go away. So you can additionally add the local action:

on(press) { _root.gotoAndStop(“W09”); gotoAndStop(“normal”); }

Actions triggered within a Movie Clip act on the local timeline, not the main timeline, unless otherwise specified using target paths.


93. Return to the main movie by clicking “Scene 1” or the Back Arrow in the Edit Bar.

Add an instance of your FriendsMenu to the main timeline/stage

Now that you’ve created your movie clip, you want to add it to the main stage.

94. Drag an instance of “FriendsMenu” onto the main stage on the “Interaction” layer, frame “W08,” positioning it so that it overlays the Friends Menu in the wireframe.

95. Test your prototype (Ctrl+Enter on PC, +Enter on Mac). Click through the prototype, and when you get to frame “W08,” test the Friends Menu.

Creating a Combo-Box Toggle

Add and customize a combo box component

Next you’re going to create a combo box that can be used to toggle between frames.

96. On your main timeline, insert a new layer called “Combo Box.” Insert a keyframe on frame “W09” of this layer.

97. From the Components Panel, drag a “Combo Box” component onto the stage and position/resize it using the Free Transform tool so that it covers the “Show: All Friends” combo box in wireframe W09.


98. With this combo box selected, open the “Parameters” tab in the Properties Panel.

99. To define the combo box options, double-click on the field labeled, “Labels.” A dialog should appear that lets you set values for these labels.

100. Enter the following labels, one per row (use the “+” button to add additional rows)—All Friends; Recently Updated; Recently Added; Online Now—and press “OK.”


Add interactivity to your combo box

So what do you want the combo box to do? Ask yourself the three questions.

• WHAT do you want to happen? You want to find out which item is selected and to send the main movie to the appropriate frame.

• WHICH movie do you want to be affected? The main movie—_root—not the combo box itself—which is actually a fancy movie clip.

• WHEN should it happen? Whenever the user selects an item from the combo box—on(change) { }

To do this, you’re going to use if statements to evaluate the “selectedIndex” property of the combo box, just like you used an if statement earlier to see whether a checkbox was selected or not. “Selected Index” refers to the row number of the label, starting with 0.

• If the selected index is equal to 1, which corresponds with “Recently Updated,” you want to tell the main movie—_root—to go to “W10.”

• If the selected index is equal to 0, which corresponds with “All Friends,” you want the main movie to go to “W09.”

101. With the combo box selected, add this script to it using the Actions Panel:

on(change) { if(selectedIndex == 1) { _root.gotoAndStop(“W10”); } if(selectedIndex == 0) { _root.gotoAndStop(“W09”); } }

102. This combo box should only appear until Frame 11, so insert a blank keyframe on the “Combo Box” layer above frame “W11” to end the combo box’s appearance on the stage appropriately.

103. Test your prototype (Ctrl+Enter on PC, +Enter on Mac). Click through the prototype, and when you get to frame “W09,” test out the combo box. When you select “Recently Updated,” it should go to “W10,” and when you select “All Friends,” it should return you to “W09.”


Simulating Type-Ahead Search

Adding a text field that spans multiple wireframes

104. Add a new layer (“Fields 1”) and insert a keyframe above “W13.” Drag a Text Input component over the College/University text field in the wireframe. In the Properties Panel, name this instance of the component, “collegeText.”

105. If you click through the next few frames, you'll see that this field persists while the wireframes in the background change but appears out of place on “W22.” Insert a blank keyframe at “W22” to end its appearance here.

Creating a type-ahead effect

Dynamically displaying recommendations as a user types has become increasingly popular in rich internet applications. Simulating this involves the following interactions:

1. As the user types each character of a particular word, the suggestions are narrowed.

2. As the user backspaces characters, the suggestions are broadened.

3. If the user presses “Enter” when the desired result is highlighted, the field is populated and the suggestions disappear.

4. If the user clicks a result, the field is populated and the results disappear.

To simulate this, you’ll need to have chosen the word the user should be typing and created screens showing each state of the results. (How would it appear after the first letter? The second letter?)

Then, to simulate the first two interaction requirements, you need to add a script to the text field that tells the main movie (_root) to go to appropriate frame depending on what has been typed.To do this, you’re going to use a series of “if statements” to check if what the user has typed—the “text” property of text fields—matches certain triggers. It should check every time the value of the text field changes—on(change).

• The most specific statement should be first—if the user has typed “carn” or anything more specific (two pipes—“||”—mean “or” in ActionScript), then have the main movie—_root—go to “W18.”

• Otherwise (“else” means “otherwise” in ActionScript), if the user has typed “car,” the next most specific statement, then have the main movie go to “W17.”

• Otherwise, if the user has typed “ca,” then the main movie should go to “W16.”

• Otherwise, if the user has typed “c,” then the main movie should go to “W15.”

• Otherwise, if the user has typed nothing or anything other than the aforementioned triggers, the main movie should go to “W14.”

106. Go to any frame where the text field appears and click on it. Remember that any changes you make to this text field will apply for the duration of the text field’s appearance on the stage.


107. In the Actions pane, add this script:

on(change) { if (text == "carn" || text == "carne" || text == "carneg" || text == "carnegi" || text == "carnegie" || text == "Carnegie Mellon") {

_root.gotoAndStop("W18"); } else if (text == "car") { _root.gotoAndStop("W17"); } else if (text == "ca") { _root.gotoAndStop("W16"); } else if (text == "c") { _root.gotoAndStop("W15"); } else { _root.gotoAndStop("W14"); } }

To simulate the third interaction requirement—“if the user presses “Enter” when the desired result is highlighted, the field is also populated”—you’ll need to add another part to this script. This script should instruct the movie to go to “W19” and change the text to the words “Carnegie Mellon” when the user presses “Enter”—as long as the user has typed enough appropriate characters.

Add below the existing script:

on(enter) { if (text == "carn" || text == "carne" || text == "carneg" || text == "carnegi" || text == "carnegie") { text = "Carnegie Mellon"; _root.gotoAndStop("W19"); } }

To simulate the final interaction requirement—if the user clicks a result, the field is populated and the results disappear—you’re going to return to the “Interaction” layer. Add an invisible button on frame “W18” that, when clicked, changes the text property of the text field (which you named “collegeText”) to “Carnegie Mellon” and sends the main movie to frame “W19.”

108. Click on frame “W18” in the “Interaction” layer.

109. Drag and resize/position an invisible button over the highlighted recommendation.

You can not only evaluate properties of objects using ActionScript, the way you did with the checkbox earlier, you can actually change properties. In this case, you’re going to change the “text” property to the completed phrase. But you can also change X/Y coordinates, colors, and other properties of objects simply by using the property name and a single equals sign. Use the Flash documentation to learn about available properties.


110. Add this script to the invisible button. Since the invisible button is independent of the text field, you’ll need to target the text field specifically, using its instance name as the path, in order to change the value of its “text” property.

on(release) { collegeText.text = "Carnegie Mellon"; gotoAndStop("W19"); }

111. Test the movie. As you type (or backspace) "carnegie" (in all lowercase letters), the type-ahead should appear to be working. When you press enter or click on the recommendations area, it should change the text to "Carnegie Mellon."

Adding a few finishing touches

First, add another combo box that loads a particular frame, just as you did above:

112. Add a new layer (“Fields 2”) and insert a keyframe above “W19.” Drag a Combo Box component over the “Attended For” field.

113. In the Parameters Panel, double-click on the “Labels” field and add three rows/labels: A blank row, “College,” and “Graduate School.”

114. Add an action to the combo box that instructs the main movie—_root—to go to frame “W20” if the third item (selectedIndex == 2, which corresponds to “Graduate School”) is selected. To do this, with this combo box selected, go to the Actions pane and add this script:

on(change) { if (selectedIndex == 2) { _root.gotoAndStop("k"); } }


Finally, add a few more text fields. While these fields don’t really do anything, they add to the realism of the prototype.

115. On the “Fields 2” layer, frame “W21,” add a text field component for “Concentration” and insert a blank keyframe at “W22” to end its appearance.

116. The final text field, for “Second Concentration,” appears on only one frame, so you can add it to the “Interaction” layer. On the “Interaction” layer, go to frame “W21” and add this final text field.

117. Test your movie. You should be able to complete all of the annotated steps!

Exporting your prototype

To make a version of the prototype that is not annotated, you’ll need to have created another set of wireframe images with the exact same filenames as the annotated versions. To import these replacement wireframes:

118. Go to “File > Import > Import to Library” and import all of the final wireframe images—from the folder SourceImages_Final—at once (use Shift+select, Ctrl+A, or +A [Mac]) to select all). Since the names of these wireframes match the names of the wireframes you imported previously, Flash will ask you whether you want to replace the existing items. Since this is exactly what you want, select “Replace existing items” and press “OK.”

119. Go to File > Publish Settings. Choose “Windows Projector” or “Macintosh Projector” (or both), enter a file name, and press “Publish” to create a standalone, self-executing file of your prototype. It will be created in whatever folder the Flash file is in.

Congratulations! Using only the principles learned in this tutorial, you can create quite robust prototypes. All it takes is resourcefulness, creativity and experimentation. Happy prototyping!

Date post:	17-Oct-2014
Category:	Technology
View:	3,780 times
Download:	0 times

Flash Prototyping Workbook - Part 1 and 2

Technology