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:
- 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…
- 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"/>
</i:EventTrigger> - 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.
- 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.
- 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!
Njoy!