In my last blog post, we looked at the basic functionality of the SketchFlow Map editor (create and connect new nodes, add transitions, etc). In this post, we will examine some details of the SketchFlow player. With this, we will be in good shape to build a full prototype in a future posting.

If you wish to examine the SketchFlow player first hand, launch Expression Blend, and then load the PCGamingSketch sample application.

Let's test the prototype using the SketchFlow Player by pressing the Ctrl+F5 (or F5) key. Since PCGamingSketch is a Silverlight prototype, you will find the player will load into your browser, at which point the node marked as Startup will appear as the active screen.

The left hand side of the player user interface consists of two key areas. On the top, you find the navigation pane, which can be used to display screens based on the connections and transitions you created back on the SketchFlow map. Recall that from the Start screen, the user can navigate to four outbound screens (Version 1, Version 2, Version 3 and Approved Version). If you wish, you can also click on the Map button to display a read-only display of this same map:

Take a few moments to click around each screen link in the NAVIGATE panel, or alternatively by clicking on a node in the SketchFlow map.

Once you are on a given screen, you may notice that the Navigation panel displays some transitional behaviors or animation sequences which can be started when clicked. These effects were added to the screen using various SketchFlow behavior objects and custom animations, using the Blend IDE. The following figure shows the transitions found on the Version 2 screen.

Remember, the main purpose of the SketchFlow player is to provide a way for clients to provide useful feedback on the prototype. To facilitate this, clients can make use of the MY FEEDBACK panel mounted on the lower left of the player. Here, a client can enter textual input, as well as select from a set of drawing tools (ink, highlighting and an eraser) to draw and annotate portions of a screen. Furthermore, when the client selects the ink or highlight tools, they have various options to configure the size and color of the visual annotation. For example:

Client feedback is saved automatically, and you can leave both text and ink feedback on each screen throughout the prototype. When you have finished adding feedback, you can save the feedback via the Folder button on the MY FEEDBACK area. For this example, use the text and graphics tools to author some basic feedback on a few screens, similar to what you saw in the previous figure . Once you have done so, elect to export your feedback (see next figure) as a file named MyFeedback, saved to your Windows desktop.

To view feedback back within the Blend IDE, you first must activate the SketchFlow Feedback option located under the Windows menu:

Once you have done so, the SketchFlow Feedback panel will become active within the IDE. To add the XML data to this viewer (and thus on the artboard for a given page), click on the plus button and locate the exported file.

At this point, you will see rendered feedback appear on the artboard. The SketchFlow Map will display a light bulb icon for each screen that contains client input:

Before we turn our attention to creating a prototype from the ground up, I'd like to point out that the Blend SketchFlow IDE also provides a way to generate a Microsoft Word document which captures each screen and stakeholder annotation in the prototype. As you might guess, this can document can serve as a beginning template for the produce documentation. Generating this documentation is no more complex than activating the File | Export to Microsoft Word menu option:

SketchFlow ships with its own Microsoft Word template, however as you can see below, you are free to specify a custom template, as well as configure a few additional options (most importantly, including stakeholder feedback).

That wraps up all the "intro matter" regarding the SketchFlow utility. The next few posts will walk you through the process of building a Silverlight prototype from the ground up.