← 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 top 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, simply click and drag the layer to the desired place in the list.

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.

Grouping Layers

Grouping elements by creating a container is instrumental in creating Calls to Action, or CTAs, by grouping gestures and buttons with images and text elements.

There are three ways to group multiple elements within a scene to create a container:

  1. Simply click and drag within the canvas view over the entirety of the elements you’d like to group, right click over them to open up the context menu and select group (or use the shortcut command+g/ control+g). 
  2. Hold Shift while selecting the elements in the Layers panel you’d like to group, right click and select Group (or use the shortcut command+g/ control+g). 
  3. Click and drag a Container element from the Elements panel. Manually group the desired elements by clicking on the drop down arrow of the container in the Layers panel and dragging the desired elements into the Container. 

See Containers for more information on how to create groups.

Global Layers

If you wish to reuse an element across multiple scenes, simply select the world icon next to it in the layers panel. The element will be viewable in every scene. If you wish to hide this specific element in other scenes, simple press the eye icon in those scenes. 

Global elements will appear within their own section at the top of the layers panel. This means that they will exist on top of, and thereby cover, any other element beneath it. Elements that are not global will appear in the “Scene Layers” section in the Layers panel. 

Was this helpful?

Updated August 15, 2019