The last several blog posts have walked you through the construction of a simple Silverlight prototype created with SketchFlow. Here, we will wrap up the example by examining how to add interactivity to a prototype.

The SketchFlow IDE provides a lightweight version of the Blend animation editor, which can be used to incorporate interactivity to a given prototype. For our example, let's add some interactivity to the Checkout screen. Begin by opening the Checkout Artboard, and add a Block Arrow Up - Sketch shape to the existing layout, which will represent (in exaggerated terms) the mouse cursor of the user:

Now, locate the SketchFlow Animation editor mounted (by default) at the top of the designer. Next click on the Plus icon to create a new SketchFlow animation which will be added to the XAML of the active Artboard (see the next figure). Once you have done so, rename this animation to AnimateArrow via the dropdown list mounted to the bottom of the SketchFlow animation editor.

Similar to the full-blown Blend animation editor, the lightweight SketchFlow animation editor is based on changing the state of elements on a keyframe-by-keyframe manner. To add new keyframes to the animation sequence, select a given keyframe and click on the + button (or use the ? button to delete the selected keyframe) located in the upper right of the selected keyframe.

In the next figure, you can see I have added three keyframe to this animation. The first keyframe simply captures the default screen state. The second frame relocates the mock-mouse cursor over the Button control, while the third frame changes the Button's background color to signify the idea of clicking the button:

If you take a moment to examine the SketchFlow animation tool, I am sure you will feel right at home (at least if you have used the Blend the animation tools). For example, notice that you can assign animation easing effects, transition effects and change timing to each frame:

Once you have tinkered with various animations effects, run the prototype once again. If you navigate to the Checkout screen, you will be able to play your animation via the NAVIGATE editor:

If you would like to start this animation (or any animation) via user input, you can make use of the PlaySketchFlowAnimationAction behavior, which can be located within the Behaviors | SketchFlow area of your Assets Library. Select this element, and drag it to the Objects and Timeline panel, specifically on top of the [UserControl] tree node for the Checkout screen:

Now, select this element and use your Properties panel to configure a trigger for the Loaded event which starts the animation in question (see next figure). If you run your prototype and navigate to the Checkout screen, you should now see your animation start automatically.

So there you have it! You have completed your simple prototype using various aspects of the SketchFlow IDE. To be sure, our example prototype is much simpler than you would find on a real-world software project, however I do hope you feel comfortable with the overall process of generating prototypes with SketchFlow, how to capture user comments, export these comments to a dedicated Microsoft Word document and manage the SketchFlow Map panel. To complete this set of blog posts, next week I?ll address:

• How to package a prototype to use the standalone SketchFlow Player.
• How to use your prototype as the starting point for a production application.

See you then!