← BACK

Elements allow you to add areas with predefined functionality on the screen, such as gestures, text, and buttons. For a complete list of individual elements, see Elements Panel.

When added to a scene, elements get organized as layers, which appear over the background video on the screen. Some layers, like images and text, are visible in the demo. Others, like gestures and containers, are not visible. Instead, Gesture elements define gesture recognition areas, while Container elements allow nesting or grouping other elements. Buttons are also invisible and can be paired with a video sequence or added image.

Each element in a scene is automatically added as a separate layer in the Layers panel. Image assets are also added as layers. You can change their default names in the Properties panel

Note: You can’t add any elements or layers to Logic-Only scenes. If you set an existing scene as Logic-Only in the Properties panel, all elements and assets added to it will be removed from the scene.

With each scene transition within a project, all non-persistent layers in the preceding scene get hidden. It is important to be aware of this when defining advanced transition logic, for example, to avoid flickering on the screen if you need to return to a previously displayed scene. For details, see Logic-Only scenes.

Layers in Canvas View

In Canvas View, layers appear as bounding boxes with no visible content other than images or text.  Each box is color-coded to help you distinguish between the different types of layers, as shown in the image below.

Gesture Areas (A) appear as dark, semi-transparent boxes with a blue border.  Containers (B) are displayed with a yellow border. Text boxes (C) appear with a read border and default text. All Button layers (D) are shown with an orange border. Image bounding boxes (E) have a green border and display an image inside.

 

Tip: If you need to distinguish between invisible layers while working with them in Canvas View, you can add background fill color in the respective Properties panel to make them visible while troubleshooting. Remember to remove the fill color for the final output.

Layer Order

Important: In the Layers panel, all elements and image assets appear in the order you created them, with the layer at the very bottom of the list appearing as the frontmost layer on the screen during the demo.

It is helpful to think of layers as transparent sheets, often of different sizes, stacked on top of each other. They may or may not overlap. If overlapping layers don’t have text, images, or fill color, the user can see through them to the background video behind them. The user can interact only with the top (frontmost) layers on the screen.

The layer order becomes particularly important for interactive elements like gestures or buttons. For example, if you place an image element under the App Store Button element  in the Layers panel, and the two elements overlap on the canvas, the user will not be able to access the App Store by tapping the image button because the interactive Button element will be covered by the image layer.

Tip: To re-order the layers in the Layers panel, select the Show All checkbox and then drag the layers in the list as needed.

Managing Layers

You can move, resize, and multi-select layer bounding boxes as needed in Canvas View.

To delete multiple layers, use Shift+click to select them on the canvas or in the Layers panel and press Delete. 

You can also use keyboard shortcuts to copy (Command+C) and/or cut (Command+X) the selected single or multiple layers on the canvas and paste (Command+V) them to the same location on the canvas with the same properties in another scene. You can also use the Duplicate icon in the Layers panel, especially if you want to keep the copied data on the clipboard.

To define any additional properties for each type of layer, select the layer in the Layers panel or on the canvas and use the Properties panel displayed on the right. See also Containers and Gestures.

Tip: You can reuse the same layer in different scenes by making it visible in those scenes instead of adding new identical layers. For details, see Reuse Existing Layers.

Updated June 10, 2019