Working with State Transitions
The States panel allows you to control not only the appearance of states but the transition between them. For example, if you wanted to create a chat window that faded onscreen gradually rather than popping up, you can do so easily.
Return to SketchFlow and the States Panel. Locate the Default Transition line and specifically the value which is 0s or zero seconds.
Click inside this default transition field and type 1 and then press return. This enables a transition of 1 second.
The default transition setting is a global setting for all state transitions. For example when the Chat window fades in it will take 1 second and when it fades out it will also take 1 second. Tip: As you create more sophisticated state groups you will want more control of your transitions, you can set the individual transitions for states by clicking on the “Add Transition” button within a particular state.
Within the States panel, click the Base state at the top of the panel to exit the state recording.
Press F5 to build your project. Navigate to the Bindings page and click the ChatAppear_On state. Your Chat Window will now fade in over a period of 1 second.
Close the SketchFlow Player. You’ll now hook up the Live Chat button so that it triggers the fade-in.
Activating States with a Button
Although viewing the different states of a screen using the Navigate panel can be useful, there are times when you will want to more closely replicate user behavior. This is a simple matter to do in SketchFlow by using the “Activate State” feature.
Return to SketchFlow and right-click the Live Chat button on your Bindings screen.
From the context menu that appears choose the Activate State option at the very bottom, then choose the Bindings/ ChatAppear_On state.
Press F5 and navigate to the Bindings page. Now click the Live Chat button to activate the State.
Keep in mind that the two methods of activating states are not an either/or situation. You might choose to have multiple states in the Navigate tab but your preferred flow enabled onscreen,