Flash Prototyping Workbook - Part 1 and 2

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) ActionScript 2.0 is more direct 01. Create a new Flash File that uses ActionScript 2.0. and intuitive for non- programmers than the latest version, ActionScript 3.0 When 02. From the menus, choose Window > Workspace > Default so we’re all using the same working in ActionScript 2.0, Workspace. (You can close the Color and Swatches panel on the right.) you’ll want to make sure that tutorials and scripts you find are compatible. 03. Right-click or Ctrl+click in the empty Library panel and choose “New Symbol…” Symbols are objects that can be 04. Name the new symbol, “Bug” and make “Movie Clip” is selected. Press “OK.” 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) 05. Notice that the breadcrumbs in the Edit Bar/Navigation Bar tell you that you’re indicates which timeline you are currently viewing the stage and timeline for “Bug.” currently viewing. The Stage is your visual 06. On the stage that appears, use the drawing tools on the left to draw a bug. (You’ll workspace or canvas. This is probably use the Shapes/Oval Tool, Pencil and Line/Fill Colors to draw it.) 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. 2 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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. Quick and Easy Flash Prototyping | Alexa Andrzejewski | 3

You place them on the stage… Add an instance of your actor to the main stage Instances are unique 13. Notice that your “Bug” appears in the Library Panel. occurrences of symbols in your Flash movie. You can place as many instances of a library item 14. Drag an instance of “Bug” onto the main stage. 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 15. In the Properties Panel, where it says <Instance Name>, give this unique instance of context-sensitive—it shows and your bug a unique and proper name, for example: “Bob” allows you to set properties for the last frame or instance that you selected. The Properties Panel is where you can assign You tell them what to do… frame labels to frames and instance names to instances. 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. 4 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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. Quick and Easy Flash Prototyping | Alexa Andrzejewski | 5

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.” The Actions Panel is context- 25. Open the Actions panel by going to "Window > Actions.” sensitive—it shows and allows you to add scripts to the last frame or instance that you 26. When adding interactivity to an object, you want to ask yourself three questions. selected. Look at the tab name near the bottom of the Actions • WHEN do you want something to happen? Panel to verify what you are adding actions to. (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.) Event Handlers are used to 27. To specify WHEN actions should occur, add the following bits of code, called “Event specify behaviors that trigger Handlers,” to “Bob” using the Actions panel: actions. Actions contained within an event handler’s curly braces will be triggered only on(press) { when the event preceding them occurs (e.g., when an button is pressed and when it’s released). } Target Paths are like web URLs on(release) { or file paths, only they use dots (.) instead of slashes to indicate hierarchy. } Functions are built-in actions 28. To specify WHICH timeline you want to stop, in our case, the main timeline, which is that you can call on using referred to as “_root,” type its “Target Path” within the event handler’s curly braces: keywords. These commands are keywords followed by parentheses in which specific on(press) { details can be added when _root. necessary or relevant. } 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() } 6 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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! Quick and Easy Flash Prototyping | Alexa Andrzejewski | 7

8 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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. Frame Labels can be assigned 36. Select one of the keyframes on the “Wireframes” layer. Look at the Properties Panel to keyframes so that they can be and note that it’s been given a label. referred to using ActionScript. It is generally better to refer to frame labels in ActionScript Add script to the first frame to keep the movie from automatically playing than to frame numbers because frame numbers are subject to change as you add or remove 37. Insert a new layer and rename it, “Frame Actions.” frames. 38. Open the Actions Panel (Window > Actions) if it’s not already. 39. Select the first keyframe in this new layer. Frame Actions are attached to 40. With the first keyframe selected, type the following function in the Actions Panel: keyframes and are triggered when that frame is reached. 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.” 10 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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. Quick and Easy Flash Prototyping | Alexa Andrzejewski | 11

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) { } 12 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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). The Components Panel contains a special library of user interface objects, such as radio 59. In the “User Interface” folder, you’ll find the CheckBox component. Drag it onto the buttons and combo boxes, that screen and place it on top of the check box in the wireframe. have customizable properties. These properties can be edited in the Parameters tab of the Properties Panel and/or changed using ActionScript. 60. In the Properties tab, give the Instance Name, “termsBox” to this checkbox. Quick and Easy Flash Prototyping | Alexa Andrzejewski | 13

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. 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. 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) { } The If Statement describes a 64. Within this event handler, you’re going to add a conditional statement, an “If condition that must be met for Statement,” that checks whether “termsBox” is selected. certain action(s) to be performed. It can optionally be followed by an “else” statement on(release) { specifies what to do otherwise. 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.) Target Paths are like web URLs 66. To address the checkbox you created, you will need to use its target path. Rather than or file paths, only they use dots typing it in, you can press the “Insert Target Path” icon in the Actions Panel to see (.) instead of slashes to indicate hierarchy. 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) { 14 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

69. Look again at the Parameters tab in the Properties panel. Notice that there are several Properties of an object are special properties of Combo Box components, including “label,” which you edited special keywords that Flash earlier, and “selected.” You can have Flash find out what the current value is of any of recognizes. They are case sensitive. You can evaluate or these properties by adding the appropriate keyword to the path. To have Flash find out change properties of an object whether “selected” is true or false, simply add “selected” to the end of the path, as in: using ActionScript. if(_root.termsBox.selected) { 70. You want to check whether “selected” is currently “true” or not. To test whether Operators are used in If Statements to compare one something is equal to something else, you’ll use the “equals” operator, which consists value to another in the format, of two equals signs. Your condition will read: “if(x OPERATOR y).” on(release) { Common operators are: if(_root.termsBox.selected == true) { == equals > is greater than } < is less than else { != is not equal to <= is less than or equal to >= is greater than or equal to } } 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). Quick and Easy Flash Prototyping | Alexa Andrzejewski | 15

16 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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. Movie Clips are objects that act 77. Use “Insert > New Symbol…” to create a new “Movie Clip” symbol called independently of the main Flash “friendsMenu.” movie. A movie clip has its own timeline, which is independent of the main Flash movie’s To begin, you’re going to give this movie clip three labeled keyframes, one for each state timeline. 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. 18 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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. Quick and Easy Flash Prototyping | Alexa Andrzejewski | 19

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”); } 20 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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 Actions triggered within a Movie Clip act on the local timeline, not this movie clip’s timeline: timeline, not the main timeline, unless otherwise specified using on(press) { target paths. _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”); } Quick and Easy Flash Prototyping | Alexa Andrzejewski | 21

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. 22 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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.” Quick and Easy Flash Prototyping | Alexa Andrzejewski | 23

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.” 24 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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. Quick and Easy Flash Prototyping | Alexa Andrzejewski | 25

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. 26 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

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"); } } Quick and Easy Flash Prototyping | Alexa Andrzejewski | 27

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! 28 | Quick and Easy Flash Prototyping | Alexa Andrzejewski

Flash Prototyping Workbook - Part 1 and 2

by Alexa Andrzejewski

Accessibility

Categories

Upload Details

Usage Rights

Statistics