Adding online controls
Adding text and combo boxes
Simulating a form
Prototyping with SketchFlow: Module 12
Exporting Your SketchFlow Project
In this module, you discover how to package your SketchFlow project to a standalone HTML and Silverlight folder, as well as how to export to Microsoft Word.
Packaging your SketchFlow project
Packaging your SketchFlow project creates a separate version of your prototype that can then be sent to a client or team member so they can run it locally or placed online so it can be accessed via the web.
With Expression Blend 3 open, choose File > Open Project/Solution and browse to the module12_guide folder. Open the folder and then open the snowboard online folder contained within.
Right-click the Blend file named snowboard_online and open it in Expression Blend 3.
Choose File > Package SketchFlow Project. The Package SketchFlow Project window appears. In the Folder Name field type snowboard_online_v2 and then press the Browse button. Create a new folder on your desktop, name it Snowboard_online_v2 and then press Select Folder. Then click OK.
SketchFlow will take a few moments to build the package and when complete, a window will appear showing you the new package and its contents.
Within this Explorer window, locate the document TestPage and double-click it to open the prototype in the SketchFlow Player.
This Folder is now a self-enclosed package that contains everything needed for a third party to review the prototype and leave feedback.
Creating a Light Version of Your SketchFlow Player
You may have noticed that there are a larger number of files inside this packaged folder. It’s quite possible that for someone new to the SketchFlow process that this could be overwhelming and/or confusing. It’s possible to create a stripped down version of this player using only two files; however there are potential pitfalls that you should be aware of.
Within the Explorer Window of the SketchFlow project, locate the two following files: TestPage.Html and snowboard_online.xap. The Snowboard_Online.xap file is actually a Silverlight application and the testPage.html is simply embedding this application. In most cases, you can copy these two files and place them in a separate folder to create a more lightweight folder to deploy online.
Ctrl-click testPage.html and snowboard_online.xap to select them, then right-click and choose Copy.
On your system desktop, create a new folder and name it snowboard_online_light, then paste the two files into this folder.
The folder that contains these files can now be deployed or shared in the same way that the larger folder created in Step 1 can.
Double-click the testPage document in this light folder to test it. Warning! In more sophisticated or larger SketchFlow projects this process may remove functionality within the prototype so it is highly advised that you test each screen in your prototype! If time prevents you from testing this, you should stick with the larger folder created in the initial packaging process.