Upgrade your Internet Experience
Welcome Sign in
|
Microsoft.com
|
Expression Product Site
|
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. 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.

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

 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 Expression 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 which is triggered upon reaching a state), or independently of them (for example, when an animation is triggered by an action).

For more information about creating animations in Expression Blend, see Animating objects.

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.

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.

Ee341387.df44ecfb-df4c-40c8-aefb-16243eeea90b(en-us,Expression.30).pngEe341387.02c55e22-17c4-404d-90a4-2fd308993ad7(en-us,Expression.30).pngEe341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(en-us,Expression.30).pngEe341387.914aa328-b7ca-4484-82a6-b6a5b8c24d84(en-us,Expression.30).pngEe341387.fba8a139-19c5-4a84-b0d2-1bce67266301(en-us,Expression.30).png

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 AnimationEe341387.d68c6600-ebf7-4b74-8416-6179ce5ad38e(en-us,Expression.30).png to create a new SketchFlow animation. A new frame appears in the SketchFlow Animation panel.

    Ee341387.alert_note(en-us,Expression.30).gifNote:

    If you can't see the SketchFlow Animation panel, in the Window panel, 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 StateEe341387.46bc69ec-93a3-4f56-a3d2-9de601ada74d(en-us,Expression.30).png 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."

    Ee341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(en-us,Expression.30).png

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

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

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

SketchFlow Animation toolbar

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

Ee341387.1afe5d56-20d8-400a-b643-13577ae593cd(en-us,Expression.30).png

Go to first frame.

Ee341387.0272e62e-0ad4-43ab-b0ac-f0767907e63b(en-us,Expression.30).png

Play animation.

Ee341387.d2d47333-c15d-4aa0-9633-95f39cb96ae0(en-us,Expression.30).png

Pin time editors.

Ee341387.1ebe2b0a-5891-47f3-be05-fa90157b9312(en-us,Expression.30).png

Turn Fluid Layout on or off.

For more information, see Transition between layout changes smoothly.

Ee341387.3308f172-fdae-40f8-ba84-17b679e94134(en-us,Expression.30).png

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.

Ee341387.c83900c7-5245-4075-8cbf-99e9015f234b(en-us,Expression.30).png

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.

Ee341387.c91a4238-54c4-43ac-b09b-3407eaf58d4e(en-us,Expression.30).png

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 Adding behaviors to objects.
 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 Expression 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.

Page view tracker