Working with objects and controls

  • Article

An object is anything that you can position on the artboard. After you add a visual element (for example, an image, media file, control, or 3D object) to the artboard, it becomes an object in your prototype. Objects work the same way in SketchFlow prototypes as they do in other Microsoft Expression Blend projects.

Working with objects

There are several ways to add objects to a prototype. You can draw objects directly on the artboard, add objects from the Tools panel, or insert objects that you have imported into Expression Blend. Once you have added objects to the artboard, you can modify or arrange the objects to best suit your needs.

For more information, see Drawing objects.

Working with controls

Controls (or UI design elements) are the visible components of a prototype. You can add controls directly to the artboard, including custom controls. You can also convert existing objects into controls.

You can create a UserControl from an object or a group of objects on the artboard, and then add it as a component node to the application flow. This is especially useful if you have a UserControl (for example, a navigation bar) that you want to use on several different screens.

For more information, see Create content on the artboard and Choosing and using interactive controls.

To create a component screen from objects on the artboard

  1. Select the object or group of objects that you want to convert into a component screen.

    Note

    To select a group of objects, drag a bounding outline around it. You can also select objects directly in the Resources panel.

  2. Right-click the selection, and then click Make Into Component Screen.

    Note

    A component screen is a type of UserControl that appears in the SketchFlow Map panel.

  3. In the Make Into Component Screen dialog box, in the Name box, type a name for the UserControl.

  4. Select Add to SketchFlow Map, and then click OK.

    The UserControl appears as a component node in the application flow in the SketchFlow Map panel.

SketchFlow styles

SketchFlow includes a set of skins for controls that give them a hand-sketched look. Sketch styles, because of their unfinished look, can help reviewers focus on the interactive design of the prototype instead of on the visual design.

Sketch-style controls are available both under Styles in the Assets panel and on the Control tab.