Creating storyboards

A storyboard is frame-by-frame depiction of a user scenario that consists of sequentially numbered frames on a timeline. You can create the frames in your storyboard by using existing artifacts, such as sketches, parts and images, or by using drawing elements from the storyboard palette. A thumbnail version of each frame is displayed in a numerical sequence at the bottom of the editor. You can add frames in the sequence that inherit the elements of existing frames in the sequence.

About this task

To watch a movie that shows you how to create a storyboard, click here.

When you duplicate a frame and add the copy to the scenario sequence, the copy inherits the contents of the previous slide. If you add an element to a frame in an inheritance sequence, the change is propagated to all subsequent duplicates in the sequence. For example, if you have six frames that you created by using the Duplicate Frame option and you add or modify an element in the first slide, the change displays in slides 2-6. If you change an element in slide 3, the change displays in slides 4-6.

Procedure

To create a storyboard using a sketch, complete the following steps:

  1. Select File > New > Storyboard.
  2. In the New Storyboard window, type a name for the storyboard. This name can include uppercase and lowercase characters and spaces.
  3. Browse to a project and a folder for the new storyboard.
  4. (Optional) Add a tag to the new storyboard.
  5. (Optional) Select a template for initial content for the new storyboard.
  6. (Optional) Click Next and select the attribute groups that you want to apply to the storyboard.
  7. Click Finish. The storyboard frame list appears. The frame list offers a quick way to outline the frames that you anticipate using in the storyboard, along with links to any sketches that are used in the frames.
  8. In the frame list, click Enter Frame Title and type a description for the frame. Press Enter when complete. Press Enter again to create another frame list item and frame thumbnail. Repeat this to outline the whole story. The outline includes the list of frames and corresponding blank thumbnails in the timeline.
  9. To add graphical content to a frame, double-click the thumbnail in the timeline. In an empty frame, you can drag drawing elements into the editor. You can use one of these click or drag options to create content from the following sources:
    • Create from previous frame in the storyboard sequence. (This connects the frames in an inheritance chain.)
    • Create from an earlier frame in the storyboard sequence. (This connects the frames in an inheritance chain.)
    • Create from an existing sketch. (The frame inherits all the properties from the frame you select.)
  10. You can drag a user interface sketch, part, or graphic from the Project Explorer to a storyboard frame. The artifact is displayed in the editor and a numbered frame is displayed in the storyboard timeline. The frame that is added to the frame list includes a link to a user interface sketch, if a sketch is included in the frame.
  11. To hide the timeline to provide more room for working in the editor, click the Click to collapse timeline control at the upper edge of the timeline. collapsed storyboard image Click the control again to redisplay the timeline.
  12. To create a copy of a frame in the timeline, right-click the frame and click Duplicate Frame. The subsequent copy inherits the contents of the previous frame. Inheritance is marked by an inheritance chain below the thumbnails:
    inheritance chain image
  13. To create a frame with new content, right-click the thumbnail in the timeline and click New Empty Frame.
  14. To return to the frame outline, in the upper-left corner of the editor, click Go to Frame List.
  15. Continue to create and modify subsequent frames to demonstrate how the interface changes as a user interacts with it.
  16. Click File > Save.

What to do next

When the frames in your storyboard are complete, you can play back the storyboard by clicking on each frame in numerical order, or by highlighting the first frame and pressing the page down key (PgDn) to display next frame in the sequence of frames.

Feedback