UNIVERSITY OF WEST INDIES
FACULTY OF SCIENCE AND AGRICULTURE
DEPARTMENT OF MATHEMATICS AND COMPUTER SCIENCE
COMP3220 HCI: Tutorial 4 – States, Animations and Behaviors
Working with States in SketchFlow
Modeling interactivity (the interaction between the user and an application) helps demonstrate the various
ways in which a user might interact with an application. Microsoft Expression Blend provides many different tools to demonstrate the interactive behavior of your prototype. For example, you can do any of the
following:




Simulate interactive behavior by using animation.
Add navigation to elements in your prototype.
Create prototypes of data-driven user interfaces using sample data and data binding.
Apply behaviors to elements in your prototype.
Visual states
You can demonstrate interactivity in your prototype by using visual states to define different design alternatives for a single screen. There are many different scenarios in which having multiple states of a single
screen may be useful for creating a prototype, including the following examples:


A screen in an application may display different user interface (UI) elements depending on
whether a user is logged in. You can use visual states to create two display options of a single
screen in your prototype: one in which the user is logged in, and one in which the user is not
logged in. There may be different design alternatives for a given screen in a prototype. You can
create a state for each of these different design alternatives in the same screen.
Because states can contain animations, you can create different states for the same screen, and include animations. The animation in a state can then be triggered by displaying the state of the
screen that contains the animation.
When you run a SketchFlow project in the SketchFlow Player, states appear as separate commands in the
Navigate panel. In the following image, Transitions is the state group, and Close and Open are two different states defined for the screen.
Because you can use commands to navigate between states, you don't have to create triggers to switch
between states that you have created on the artboard.
Defining different visual states for a control
You can create interactivity in your application by defining a different visual appearance for each visual
state that your UserControl control, Window control, Page control, or control template can be in, and then
adding behaviors or code to switch between those states based on user interaction. You can modify the
transition between two state combinations, even creating animations that will run when a state is first entered.
July 13, 2017
1 of 6
State groups
A state group contains any visual states that are part of the same logical category, and that cannot be displayed at the same time. Only one state in a state group can be displayed at a time, but a state from one
group can be displayed at the same time as a state in another state group.
For example, if you were working with a UserControl control that represented a playing card, you might
have a state group named SideDisplayed that included states that display the card face-up (FaceUp) and
face-down (FaceDown). You might also have a state group named MouseInteraction that included states
that change the appearance of the card when the pointer is over the card (MouseOver), and when the card
is clicked (Click). A card can be face-up and have the pointer move across it at the same time, so those
states are in different state groups. However, the card cannot be face-up and face-down at the same time,
so those two states can be in the same state group.
Define different visual states and transition times for a user control
When you create your own user control, you can add custom states and state groups to define a different
appearance for each state of your user control. For example, if your user control represents a playing card,
you might want to have a FaceUp and FaceDown state.
1. If you do not already have a user control, you can create a new user control in your project, and
open the XAML file for editing. To create an empty user control:
a) Open a project.
b) On the File menu, click New Item (CTRL+N).
c) In the New Item dialog box, select UserControl.
d) Next to Name, type a descriptive name for your user control.
e) If you want a code-behind file to be generated for this user control, select Include
code file (You will need a code-behind file if you want the user control to respond to user interaction, or if a developer will be creating custom behavior for
the user control).
f) Click OK to close the dialog box and open the user control for editing. You can
now design the look of your user control.
July 13, 2017
2 of 6
2. The States panel shows the default appearance of the objects in your user control. You can select
Base whenever you want to exit state-recording mode, such as when you want to add more objects to
your document.
3. Under States, click Add state group
.
A new state group is added, and the name is highlighted so that you can enter a new name.
You can now add states to the state group, or add more state groups.
To add states to a state group
1. Next to the name of a state group under States, click Add state
.
A new state is added to the state group, and the name is highlighted so that you can enter a new
name.
2. Select the state to turn on state recording. Changes you make to the appearance of objects in your
document will be recorded for the selected state.
July 13, 2017
3 of 6
When you select a state, state recording is turned on, and any changes that you make will be recorded for
that state. To turn off state recording, click the recording button , or select Base in the States panel. If
you want to change the appearance of a state in one state group while also viewing the control in the state
of another state group, you can pin a preview of the second state while in recording mode for the first
state. To change between states, you can use the GoToStateAction behavior, or you can write code in an
event handler.
SketchFlow Animation
SketchFlow animations are storyboard-style walkthroughs that can be created quickly and easily in the
SketchFlow Animation panel. SketchFlow animations help demonstrate user interaction. In a
SketchFlow animation, you use the SketchFlow Animation panel to create a sequence of snapshots by
adding a new frame to the panel and then adjusting the "scene" on the artboard for that frame. You can
easily adjust the transition times between and hold times for each frame. You can play the animation
sequence directly in the document window by clicking Play in the SketchFlow Animation panel, or you
can build and run the project by clicking F5, and then play the animation in the SketchFlow Player.
The following is an example of a SketchFlow animation. In the following frames, the pointer moves from
the lower right to the Halo 2 image, and then a clicking action is simulated with a red star. The Halo 2
image then moves to the left, and the pointer moves to the right.
July 13, 2017
4 of 6
To create this SketchFlow animation
1. Open the screen to which you want to add an animation. In the SketchFlow Animation panel,
click New SketchFlow Animation
to create a new SketchFlow animation. A new frame
appears in the SketchFlow Animation panel (If you can't see the SketchFlow Animation panel, in
the Window panel, click SketchFlow Animation).
2. In this example, the Base state (the normal state of the screen) is the same as the first frame.
3. Add a new frame by clicking Add State
in the first frame.
4. Select the object that you want to move, and move it to where you want the object to appear. In
this example, the pointer moves from the lower right to the letter "o" in "Halo."
5. You can modify the hold time (the period of time for which the current state is displayed) for a
frame by hovering the pointer over the frame until the Edit hold time dialog box appears. You can
double-click inside the frame and type a new value, or click once and use the UP ARROW and
DOWN ARROW keys to increase or decrease the hold time.
6. You can modify the transition time between frames (the period of time that it takes for the
transition from one frame to the other to finish) by clicking the Edit transition time dialog box
between frames. You can double-click inside the frame and type a new value, or click once and
use the UP ARROW and DOWN ARROW keys to increase or decrease the transition time.
7. Once you have completed your SketchFlow animation, you can preview it by doing one of the
following:



Clicking Play in the SketchFlow toolbar.
Right-clicking the artboard, clicking Play SketchFlow Animation, and then selecting
the animation that you want to play.
Building and running the project by pressing F5, and then viewing your animation in
the SketchFlow Player.
Behaviors
Behaviors are built-in pieces of code that you can quickly and easily apply to an element to create interactivity. Behaviors can be as simple as actions that are triggered when an event occurs (for example, when a
button is clicked, an animation begins), or can encapsulate multiple events triggered by multiple actions.
Behaviors are powerful tools for building prototypes. For example, you can add a control to a screen, and
then apply a behavior to that control. You can then build and run the project (F5), and the control to
which you added the behavior will behave in the screen as it would in a final application.
Built-in SketchFlow behaviors include Back and Forward navigation, and also a Navigate to behavior that
can be applied to a control in SketchFlow.
To add interactivity to your application without having to write code, you can drag a behavior from the
Assets panel onto an object in your application and then set properties of the behavior.
To add a behavior to an object
1. From the Assets panel, in the Behaviors category, drag the behavior that you want onto an object
on the artboard or in the Objects and Timeline panel.
For example, if you want a Button object to control a Storyboard object, drag the ControlStoryboardAction behavior onto the Button object.
July 13, 2017
5 of 6
The behavior appears as a child of the object in the Objects and Timeline panel.
2. In the Objects and Timeline panel, select the behavior.
3. In the Properties panel, set the properties of the behavior.
For example, in the ControlStoryboardAction behavior, you could set the following properties:
To add a new storyboard
1. In the Objects and Timeline panel, click New
.
2. The Create Storyboard Resource dialog box appears.
3. In the Name (Key) field, type a name for the storyboard, and then click OK. The new storyboard
opens in recording mode.
o
o
o
o
July 13, 2017
SourceName If you did not drag the behavior onto the Button object, you could set the
SourceName property to the name of the Button object to make sure that the behavior
was applied to the Button object. By default, SourceName is set to the parent object (the
object to which the behavior is applied).
EventName Set this property to the name of the event that you want to trigger the behavior. In this case, you want the Click event of the Button object to trigger the action of
the behavior.
ControlStoryboardOption Set this property to the Storyboard action that you want the
behavior to trigger. In this case, you want the Button object to play the Storyboard object,
so the property is set to Play.
StoryBoard Set this property to the name of the Storyboard object that you want to play
when the button is clicked.
6 of 6