DEMO: 5 gotchas combining SketchFlow, Visual Design and Silverlight Banners

Recently we created a demo. It was in SketchFlow, but it was not really a sketchy demo. Some screens are in the typical SketchFlow look, but for three important scenarios we’ve created a Visual Design. For the Homepage and a Product page in the demo we even created a Silverlight Banner, including the navigation inside the banner.

We’ve actually presented it inside the SketchFlow Player with panels collapsed. We gained the ease with which to connect the screens, in combination with the Behaviors the make parts of the demo interactive. And we combined real Silverlight applications inside the SketchFlow demo and they worked just fine. This is a demo that is meant to impress a customer.

I’ve collected some some gothas we run into when creating this demo:

  1. Large images are not include as a Resource, but as Content. In the Blend Options screen you’ll find a slider setting the limit for large images. You’ll get a warning when you import an image larger than that limit. You can choose to include the image as Content, not as Resource. This will result in the image not showing in your SketchFlow Player. So be sure to include all images in a subfolder in the MyProject_Screens folder and make sure the path in the Image Source is correct. When images show up in the root of a deployed SketchFlow project, you’re in trouble…
  2. When you use a Silverlight application inside a SketchFlow Page, you can use the NavigateToScreenAction inside your UserControl, but screens will not show up in the list in the Properties Panel. It has no use to create a reference to the SketchFlow project. You can add the correct path manually. You can find the names of the Screens in the Projects Tab.
    <i:EventTrigger EventName="MouseLeftButtonDown">
        <pi:NavigateToScreenAction TargetScreen="MyProject_DemoScreens.Screen_1"/>
  3. You can use Components as Masterpages. Remove all elements in the Visual Design that change between pages and put the rest in a Component screen. This allows you use this UserControl as the first element of a page. You can create separate boxes with content on the page to link to different pages in the prototype.
  4. Alternatively, use HyperlinkButtons with NavigateToScreenActions Behaviors to create “HotSpots” on a background image if you want to navigate to different screens. You’ll have to edit the HyperlinkButton ControlTemplate to remove the FocusVisual that appears when you click the control. Then they are invisible, but still catch the Click Event for the NavigateToScreenAction. It will navigate to the screen you enter as a Target.
  5. Use SketchFlowAnimation or GoToStateAction Behaviors for interactive elements on the page. This way you can use highlights and let pop-ups appear and disappear. SketchFlow Behaviors rock!


SketchFlow Behavior CheatSheets

Personally, I think that not enough Behaviors for Blend and SketchFlow are available, but luckily Christian Schormann recently presented some SketchFlow Behaviors that make Conditional Navigation and Global States possible in SketchFlow prototypes. For my workshop on SketchFlow for PICNIC09, I created two CheatSheets in SketchFlow, because working with Behaviors is too complex to explain quickly in a workshop. Since the workshops are done, I’d like to share these CheatSheets with you so you can learn quickly how to use the behaviors Christian created.

ConditionalNavigationCheatSheet GlobalStateCheatSheet

The Conditional Navigation behaviors enables you to navigate to a different screen based on a TargetScreen variable that is set using events in the interface.

The Global State behavior is similar but makes it possible to navigate to a screen that shows a particular state, depending on a GlobalState variable, setting the state.

If you can’t reach a result using these cheatsheet, please read the explanation from Christian on his blog. Check out the CheatSheets and enjoy using SketchFlow!