The SketchFlow Conversations – Structure of a SketchFlow Project

  • Article

Also in this series:

SketchFlow projects can be either in WPF of Silverlight. Let’s focus on a Silverlight version here and look at the differences of a SkechFlow project between other ‘normal’ Silverlight projects.

The project on file

A Silverlight SketchFlow project (solution) consists of two projects on file:

  • A Silverlight application project that loads up the SketchFlow player UI
  • A Silverlight library project with all the screens, compiled into an assembly dll. These screens are loaded by the above application.
image

 

Silverlight project containing the SketchFlow player

Silverlight library project referenced by the player project

The SketchFlow player is set as the RootVisual of the Silverlight application (in App.xaml.cs):

 private void Application_Startup(object sender, StartupEventArgs e)
{
   this.RootVisual = new Microsoft.Expression.Prototyping.Workspace.PlayerWindow();
}

When you add screens, all this is done in the library project since the base Silverlight (SketchFlow) project calls these screens automatically.

The work area in Expression Blend

Let’s review the main task panes and elements we use in Expression Blend when working on SketchFlow projects.

image

Note: Your own workspace might differ from this one since all task panes can be moved around or hidden as you wish.

  1. The SketchFlow base project with the player.
  2. The Silverlight Library project with all the screens. Notice the file Sketch.Flow corresponds to the SketchFlow map information in pane 6. The SketchStyles.xaml file is already included in the project so that you can use the typical Sketchy styles when inserting content on your screens.
  3. Feedback pane – in this pane you can import SketchFlow Feedback files saved by stakeholders and make them visible on the map and screens (in overlay).
  4. SketFlow Animation pane: you can use this pane to create custom animations which will become available in the player. You can also use actions to call an animation upon a click for example.
  5. Main artboard: the actual screens
  6. SketchFlow Map: probably the most important pane in a SketchFlow project. Here you can create your flow, screens, composition screens and the links between them.

Feedback files

A project reviewer or stakeholder can give feedback by adding comments through the SketchFlow player. When importing the feedback into Expression Blend, the feedback file itself is imported into the “Feedback Files” directory in the screens project.

Using the Feedback pane you can choose which feedback file details to view and whether or not ink feedback should be overlaid on the screens.

image

After a few versions of feedback, you might want to clean out feedback files. You can do this by simply deleting the physical file from the Feedback Files directory.

Packaging a SketchFlow project

When the application is ready to be shown to the stakeholders you package it and distribute it.

For a Silverlight application this can be a directory that you host on a web site, making the application available online. Another option is to create a zip file with the package and transfer that to the stakeholders.

If you .zip the whole directory and send it to end users make sure the full directory contents are unzipped before they run the application.

To package the application from within Expression Blend choose File > Package SketchFlow project and choose a destination folder. The end user can access the TestPage.html to load the project.