Prototyping with SketchFlow: Module 7

Working with States in SketchFlow

In this module, you discover how to work with States in SketchFlow to create an Interactive Chat Window in your prototype.

The Role of States in Interactive Applications
Interactive applications are becoming more and more the norm these days and so a prototyping application should be able to reproduce the various states that are possible with AJAX websites or Silverlight applications. This is something that is typically difficult to do with traditional sketches: how does one illustrate a transition or animation for example?

SketchFlow solves this problem by allowing you to record the various states of a screen. You will be working with a simple example of a chat window. The default state is a screen in which the chat window is not visible. The next state is the screen where the chat window appears after the user clicks on a button. Although these are simple examples you can easily imagine more sophisticated examples. A state in which the layout of the page changes from horizontal to vertical, for example, is something that could be accomplished using the Fluid Layout feature in SketchFlow.

Creating an Animated Chat Window Using States
In this exercise, you will create a simple animation that displays a chat window when the user clicks on a Live Chat button.

1. With Expression Blend 3 open, choose File > Open Project/Solution and browse to the folder associated with this module. Open the folder and then open the snowboard online folder contained within.
2. Double-click the Blend file named snowboard_online. The project is opened in Expression Blend.
3. In the SketchFlow Map panel, double-click the Bindings screen to open it.
   Locate the LiveChat component within the SketchFlow Map panel and drag it on top of the Bindings screen.
   
   
   
   
   The Live Chat component is now visible on your Bindings screen. (To learn more about components and how to make them, please see “Module 05, Working with Components”).
4. Click and drag the Live Chat component over to the right hand of the screen immediately above the Live Chat button.
   
   
   
   
   
5. You will now set the default State for this screen. This means you need to hide the chat window initially. You’ll do this with Opacity. With the chat component still selected, locate the Opacity value within the Appearance panel and change it from 100% to 0% by typing 0 and pressing return.
6. Choose Window > States if the States panel is not already open. Then click the New State Group button and name this State group ChatAppear.
   
   
   
   
   A State Group is collection of states that defines the appearance of your screen based on some sort of user interaction. You’ll now add the first state.
7. Click the Add State button and your state recording will turn on (Be careful at this point because any changes you make to the appearance of your screen will be recorded!)
   Type default, then click the Add State button again. Name this state ChatAppear_On.
8. Return to the Properties panel and change opacity to 100% by typing 100, then pressing return.
9. Within the States Panel, click the default state and the ChatAppear_On state a few times to toggle the visibility a few times.
10. Press F5 to open the project in the SketchFlow Player, Navigate to the Bindings screen and within the Navigate panel, click the default state. Technically, this is the same as the Base state so nothing will change.
11. Click the ChatAppear_On state and the Chat Window will appear. Controlling the states in the Navigate panel is useful because it allows you to experiment with different views of the same screen.