Prototyping with SketchFlow: Module 4

Adding SketchStyle Controls to Enhance a SketchFlow Layout

In this module, you discover how to add some interactive form controls to your SketchFlow project.

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 module02_guide folder. Open the folder and then open the snowboard online folder contained within.
2. Double-click on the Blend file named snowboard_online. The project is opened in Expression Blend.
3. In the SketchFlow Map panel, double-click on the Boards screen to open it.
   
   
   
   
   You will be adding three divisions to this page using the Rectangle-Sketch object. The rectangle will be used to indicate where listboxes and other controls will be added later on in the project.
4. Click the Assets panel, then click Styles > SketchStyles. Choose the style named Rectangle-Sketch, then click and drag on the artboard to create three rectangles, two approximately the same size, and one smaller rectangle underneath Cart.
   
   
   
   
   
5. Now select the Button-Sketch object from the SketchStyles list, and click and drag a button out on the artboard.
   
   
   
   
   Note: Any size is fine for these objects, but if you are working on a real project, you should consider having the Properties panel open, where you can view dimensions of selected objects in the Layout pane.
6. Double-click the text in Button and replace it with the text Checkout.
   Keep in mind, that what you have created so far is simply a prototype of a finished application, but some of these items, the button for instance, is an interactive control that you can use to simulate what you want to occur in the actual application.