Table of Contents
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.
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
- Right-click any image or video in the active scene and select
the menu option Set as background
- Right-click on an empty area of the scene and select Set image background or Set video background.
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.
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.
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.
- 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.
- For more about the "Fill Behavior" property, see this article.
- 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,
- None items do not have a shadow
- Rectangle a rectangular shadow is displayed
- Drop shadow a drop shadow is displayed
- Item shadow effect defines the shadow effect around assets in the Scene (For more about asset shadows, see this page).
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
- 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
- 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
- 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.
- Create asset when snapshot is taken
- 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.
- 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
- Detects a gesture
- 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 is taken
- Detects an input tag
- Detects a visual tag down
- Detects a visual tag move
- Detects a visual tag up
- Has been active
- Has been inactive
- Timer has elapsed
- Is double tapped
- Is tapped
- 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
- Create asset
- Hide asset
- Show asset
- Take snapshot
Text input keyboard
- Rotate by
- Rotate to
- Move by
- Move to
Visibility and effects
- Apply background effect
- Tip of the Month: Getting Answers To Your IntuiFace Questions
- Tip of the Month: Little Known Features of IntuiFace
- Tip of the Month: Experience Design Choices to Optimize Performance
- Tip of the Month: Using Out-of-the-Box Interface Assets to Incorporate Real-time Information
- Tip of the Month: Use Design Accelerators to Improve Appearance and Functionality
- View all (6 more)