Prototyping with SketchFlow: Module 9

Working with Behaviors

Expression Blend allows you to add pre-existing, or imported behaviors, into your SketchFlow project. Using new features in Expression Blend 3 you can add interactivity to your prototype without all of the time-consuming hand-coding.

About Behaviors
Behaviors in SketchFlow are packages of reusable code that can be applied to objects in your prototype. Typically, a behavior enables some form of interactivity in your prototype that would be difficult or time-consuming to do by hand. Examples of behaviors include hooking up a button to navigate to a specific page or playing an animation as a page is loaded.
Opening an Existing Project
To get started, you will open an existing project.

1. With Expression Blend 3 open choose File > Open Project/Solution and browse to the module09_guide folder. Open the folder and then open the snowboard_online folder contained within.
2. Double-click on the Expression Blend file named snowboard_online and open it in Expression Blend.
3. In the SketchFlow Map panel, double-click on the Boots screen to open it.
   You will be adding a behavior to several buttons in your prototype. Behaviors are small pre-packaged code files that can be applied to objects in your prototype in order to create some sort of action. For example, this first behavior will activate the checkout button so if a user clicks on it, they will be sent to the ReviewCart page.
4. Right-click on the checkout button and from the resulting menu choose navigate to > ReviewCart
5. Double-click on the ReviewCart screen in the SketchFlow Map panel and then right-click the Back button and choose Navigate.
6. Right-Click on the Confirm button and choose Navigate To > Checkout.
7. Press F5 and test these buttons. The behaviors are what enable the back button to remember what page the user came from and the code involved to make this work is not trivial.

Even those these behaviors you added were accessed through a context menu, they could also have been added another way: through the Behaviors category in the Assets library. You’ll take a look at this now.