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.


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.”

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()
}


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.

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.”


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


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


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 {
}
}

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) {
}
}

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


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.


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 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.
}

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) {
gotoAndStop(“normal”);
}


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) {
}
if(selectedIndex == 0) {
}
}

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") {
}
else if (text == "car") {
}
else if (text == "ca") {
}
else if (text == "c") {
}
else {
}
}

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";
}
}

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!


Flash Prototyping Workbook - Part 1 and 2

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

Similaire à Flash Prototyping Workbook - Part 1 and 2

Similaire à Flash Prototyping Workbook - Part 1 and 2 (20)

Dernier

Dernier (20)

Flash Prototyping Workbook - Part 1 and 2