Add interactivity

Modeling interactivity (the interaction between the user and an application) helps demonstrate the various ways in which a user might interact with an application. Blend for Visual Studio 2012 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.

For more information about adding interactivity to a SketchFlow project, see Getting Started with SketchFlow.

Animation

It is sometimes useful to add animated sequences to a prototype to demonstrate interaction. You can use keyframe animation tools such as those in the Objects and Timeline panel, use the States panel, or use the SketchFlow Animation panel to create a simple animated sequence.

For more information about using states, see "Visual states," later in this topic.

Keyframe animation

You can use the keyframe animation tools in Blend to create animated sequences in any of the screens in your SketchFlow project. You can use keyframe animations in conjunction with visual states (for example, an animation that is triggered on reaching a specified state), or independently of them (for example, when an animation is triggered by an action).

For more information about creating animations in Blend, see Animating objects [BlendforVS_Blend4].

In Windows Presentation Foundation (WPF) applications, you can also use motion paths to create animated sequences. For more information, see Create, modify, or delete a motion path [BlendforVS_Blend4].

SketchFlow animation

Keyframe animations can be very useful. However, keyframe animations can also be very detailed, and beyond the scope of a prototype project. SketchFlow animations are storyboard-style walkthroughs that can be created quickly and easily in the SketchFlow Animation panel. Like keyframe animations and states, 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.

To create this SketchFlow animation

1. Open the screen to which you want to add an animation. In the SketchFlow Animation panel, click the New  button to create a new SketchFlow animation. A new frame appears in the SketchFlow Animation panel.

   Note

   If you can't see the SketchFlow Animation panel, in the Window menu, click SketchFlow Animation.

   In this example, the Base state (the normal state of the screen) is the same as the first frame.

2. Add a new frame by clicking Add State in the first frame.

3. 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."

   

4. Optionally, you can do any of the following:

   • Edit Hold time   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 or Down Arrow key to increase or decrease the hold time.

   • Pause and resume   You can add pause-and-resume functionality to your animation by using the Pause on button in the SketchFlow Animation panel. The animation will pause when it reaches the frame in which the pause-and-resume functionality has been added. You can resume the animation by clicking the animation title in the Navigate panel in the SketchFlow Player.

     The Pause on button appears next to the Edit Hold time box when you hover your pointer over an animation frame. When the **Pause on ** button is clicked, the Edit Hold time box becomes unavailable.

     The EditHoldTime box and Pause on button in an animation frame

     

   • Edit transition time   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 or Down Arrow key to increase or decrease the transition time.

   • Transition effects   You can apply a built-in TransitionEffect to a SketchFlow animation when the transition time is greater than 0. In the SketchFlow Animation panel, click TransitionEffects , and then select the transition effect that you want in the TransitionEffect drop-down list. You can also modify the transition time for the TransitionEffect.

     For more information about, see Apply a transition effect to a visual state change.

   • Easing function   You can also apply a built-in EasingFunction by clicking EasingFunction , and then selecting the easing function that you want from the EasingFunction drop-down list.

5. Once you have completed your SketchFlow animation, you can preview it by doing one of the following:

   • Clicking Play in the SketchFlow toolbar.

     Note

     If you have used the pause-and-resume functionality in a SketchFlow animation, the pause is replaced with a 1-second hold time when you preview your animation in the SketchFlow Animation panel.

   • 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.

SketchFlow Animation toolbar

You can use the SketchFlow Animation toolbar to do the following in the SketchFlow Animation panel:

	Go to first frame.
	Play animation.
	Pin time editors.
	Turn Fluid Layout on or off. For more information, see Transition between layout changes smoothly.
	Use the arrows to open a SketchFlow animation from a drop-down list. Use the plus-sign icon to add a new storyboard. Use the single arrow to create, delete, or close storyboards.
	Use the scrollbar to move through the animation frames.

Visual states

You can also 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.

For more information about visual states, see Defining different visual states for a control.

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.

For more information, see Working with built-in SketchFlow behaviors.

Navigation and state changes

When viewing a prototype in the SketchFlow Player, you can navigate between screens and trigger state changes by using the Navigate panel. This functionality means that you can navigate through your prototype without adding any additional code or UI elements, even if it consists of only a few rough sketches.

You can also quickly and easily add SketchFlow behaviors to UI elements that you have drawn on your artboard, and that enable you to navigate between screens or play animations that you have added to your prototype.

To add a Play SketchFlow animation behavior to a control

• Right-click the control to which you want to add a Play SketchFlow animation behavior, click Play SketchFlow animation., and then click the animation that you want to play when the control is clicked.

Sample data

Many applications rely on databases for generating information. It can be difficult to model data-driven behavior without real data to prototype with. With Blend, you can now create a sample data source, and then bind that data to controls. You can use sample data in your prototype to model data-driven user interfaces that mimic the dynamic nature of real, data-driven user scenarios.

For more information, see Creating sample data.