Scenes

Table of Contents

    Introduction

    Scenes are similar to the concept of a slide in Microsoft PowerPoint. Navigating from one scene to another in a running experience is accomplished through the use of navigation actions, such as forward, backward or go to scene.

    The order of scenes in the Scenes panel does not force a particular sequence unless you choose to use the Next and Previous actions as these particular actions are designed to follow the order of scenes in the Scenes panel.

    The contents of a scene can be placed into any of three layers - referred to as the Back layer (i.e. farthest from the user), Middle layer and Front layer (i.e. closest to the user). Scenes can also be organized into sequences to help an experience designer organize their work.

    ScenesList.jpg

    Setting The Scene Background

    The background of a scene can be set to a color, an image, a video or rendered completely transparent.

    To configure the background of a scene you can either :

    • Left-click an empty area of the current scene. Open the Properties panel - either by right-clicking and selecting the "Show properties" link or clicking the "Properties" button in the top right of Composer - and then modify the "Background" property
      OR
    • Right-click any image or video in the active scene and select the menu option Set as background
      OR
    • Right-click on an empty area of the scene and select Set image background or Set video background.

    SceneBackground.gif

    If modifying the "Background" property directly, you can choose between

    • Color   assign a color and an opacity
    • Image   assign an image
      • For a perfect fit, the image must have the same dimensions as the target display. For example, if the display dimension is 1920 pixels x 1080 pixels then for a perfect fit the image must also be 1920 x 1080.
      • Use the "Fill Behavior" property to configure how an image larger or smaller than the scene should be displayed. For details about the "Fill Behavior" property, see this article.
      • To specify the color that will be displayed outside a background image smaller than the scene, first set the "Background" property to Color and select your color. Then set the "Background" property to Image and specify what you want to show.
    • Video   assign a video that can either play once or loop
      • For a perfect fit, the video must have the same dimensions as the target display. For example, if the display dimension is 1920 pixels x 1080 pixels then for a perfect fit the video must also be 1920 x 1080.
      • Use the "Fill Behavior" property to configure how a video larger or smaller than the scene should be displayed. For details about the "Fill Behavior" property, see this article.
      • To specify the color that will be displayed outside a background video smaller than the scene, first set the "Background" property to Color and select your color. Then set the "Background" property to Video and specify what you want to show.
    • Transparent   (for Windows OS only) render the background invisible so the desktop and running third party applications can be seen. In addition, optionally, you can enable users to interact with your running experience and running third party applications at the same time. For details, see this article.

    If you are working with measurements other than pixels in your graphic design tool, determine the target display size in pixels and use your graphic design tool to translate that value into your preferred measurement. Traditionally, Microsoft computers default to a pixel density of 96 pixels per inch / 38 pixels per cm while Apple computers default to 72 per inch / 28 per cm. Today's modern displays often have greater densities - i.e. more pixels per inch/cm.

    Multi-Selecting Design Elements

    Assets, collections and controls in a Scene can be multi-selected. Multi-selected items can be aligned, distributed, grouped, rotated, resized and bulk edited as well as the traditional copy, cut, move and delete.

    There are a variety of ways to multi-select items in a scene:

    • Click Ctrl+a to select every item in the scene
    • Left-click-and-drag your mouse to lasso all the items you wish to select
    • Hold down the Shift or Ctrl key while left-clicking each item you wish to select

    You also have the option of multi-selecting items in the Scene Content panel using the Shift-and-hold or Ctrl-and-hold method described above. use Shift-and-hold to select a list of items; use Ctrl-and-hold to select individual items.

    Locking Design Elements

    All items in a scene can be locked. If locked, assets, collections and controls cannot be selected and manipulated while in Edit Mode. (Selection can still be made in the Scene Structure panel.) Locking is useful if you wish to limit changes to your experiences when sharing them with colleagues and/or third parties who will be using Composer.

    To lock an item in a Scene, select one or more items in the Scene or Scene Content panel and then click the lock icon found to the left of one of those items in the Scene Content panel.

    Lock.jpg

    Properties

    Appearance Properties

    • Background Appearance   defines what will be used as the scene's background
      • Color   use the revealed Color property to define a background color for the scene
      • Image   use the revealed Image property to select an image for the background and the "Effects" section to manipulate that image.
      • Video   use the revealed Video property to select a video that will run in the background and the "Effects" section to manipulate that image.
        • For more about the "Fill Behavior" property, see this article.
        • "Volume" and "Play loop" properties also appear.
      • Transparent &nsbp; render the background transparent. Details are here.
    • Item Appearance   defines the background appearance of the Scene:
      • Item shadow effect   defines the shadow effect around assets in the Scene (For more about asset shadows, see this page).
        • None   items do not have a shadow
        • Rectangle   a rectangular shadow is displayed
        • Drop shadow   a drop shadow is displayed

    Behavior Properties

    Scene-behavior.jpg

    Item Soft move

    • Allow soft move   allows content items to come to rest gracefully when they are moved
    • Soft move linear speed   defines the soft move speed when items are moved horizontally, vertically or diagonally
    • Soft move angular speed   defines the soft move speed when items are rotated

    Item behavior

    • Show usage animation   if true, each pinnable asset in the scene - when pinned - will briefly display a graphic illustrating how to interact with it. For a Video asset, this property - when true - will cause display of the play or pause icon when it is pinned.
    • Background filter on maximize   defines the way items in the background are displayed when an asset is maximized:
      • None   no background filter is applied
      • Hide items   background items are not visible
      • Fade items   background items are faded
      • Blur items   background items are blurred

    On enter

    • Reset all asset properties   when selected, each time the Scene is displayed, all assets will be reset to their initial set of properties defined in the Composer.

    Snapshot

    • Create asset when snapshot is taken

    Drawing tools

    Scen-drawing-tool.jpg

    • Show drawing tools   if true, a button will be displayed in the Scene at runtime (or preview) so that the user will be able to open the drawing tools. The size and location of the button can be modified with corresponding properties below.
    • Available colors   add, delete, reorder and modify the colors that will be available in the drawing palette at runtime.
    • Available widths   add, delete, reorder and modify the stroke widths that will be available in the drawing palette at runtime. You are limited to a maximum of 4 widths in the drawing tool.
    • Show drawing grid   if selected, a grid will be displayed when the drawing mode is activated
    • Show drawing mode label   if selected, text will be displayed on the upper left corner of the Scene while in drawing mode.
    • Drawing mode label text   text that will be displayed in the upper left corner of the Scene, while in drawing mode, if the previous option is selected.
    • Erase All label text   confirmation text displayed after the user presses the Erase all button in the drawing palette while in drawing mode.
    • Drawing mode mask   set color and transparency of the overlay displayed while in drawing mode.
    • Drawing tool location, X   defines the X coordinate for the upper-left corner of the Drawing Tools button
    • Drawing tool location, Y   defines the Y coordinate for the upper-left corner of the Drawing Tools button
    • Drawing tool icon width   defines the width of the Drawing Tools button
    • Drawing tool icon height   defines the height of the Drawing Tools button

    NOTE: For the list of available Drawing Mode actions, see the page How to Work with the Drawing Tool.

    Text input keyboard

    Use these properties to globally configure the appearance of keyboards put onscreen by either the Web Browser asset or the Text Input control.

    Scene6text_input.jpg

    • Allow move   toggle whether user can move the keyboard around the display
    • Allow rotate   toggle whether the user can rotate the keyboard; useful for table-mounted displays
    • Allow close   toggle whether the user can manually close the keyboard
    • Show/Hide with animation   toggle whether the keyboard should display and hide with a fade effect
    • Center, x coordinate   on-screen location of the keyboard on the x axis, in pixels
    • Center, y coordinate   on-screen location of the keyboard on the y axis, in pixels
    • Scale factor   size of the keyboard

    Triggers and Actions

    See Triggers Overview and Actions Overview to get details of common triggers and actions shared by all assets

    Triggers

    • Gestures

      • Detects a gesture
    • Scene

      • Is being entered   Triggered before visual elements are rendered so typically only used to call interface asset actions. To use with visual elements, precede the first action with a short delay - e.g. 0.1 seconds - to permit visual elements to render.
      • Has been entered   Triggered after visual elements are rendered
      • Is being left
      • Has been left
    • Snapshot

      • Snapshot is taken
    • Tags

      • Detects an input tag
      • Detects a visual tag down
      • Detects a visual tag move
      • Detects a visual tag up
    • Timers

      • Has been active
      • Has been inactive
      • Timer has elapsed
    • Touch

      • Is double tapped
      • Is tapped

    Actions

    • Drawings

      • Change stroke
      • Turn drawing mode on
      • Turn drawing mode off
      • Erase all drawings
      • Turn drawing mode off
      • Turn erase mode off
      • Turn erase mode on
    • Scene

      • Create asset
      • Reload
      • Hide asset
      • Show asset
    • Snapshot

      • Take snapshot
    • Text input keyboard

      • Rotate by
      • Rotate to
      • Move by
      • Move to
    • Visibility and effects

      • Apply background effect