← BACK

You can add six different Buttons to your project—Go to Scene, App Store, Replay, Close, Open URL, and Android Share Button—which are special kinds of tap gestures with predefined functionality. For example, you may want to use the App Store Button to add a call to action (CTA) throughout the project.

Tip: For some buttons, such as Go to Scene and Replay, you may consider adding tap gestures instead, for example, if you want to use multiple transitions or perform advanced logic. 

You need to add Button elements over images or text that serve as button labels to the user. Those text or image labels are typically “baked” in video assets. If not, you can add an image asset or a Text Area element separately to the scene. You can then simply drag the appropriate Button element over the image or text as described in Add Simple Tap Buttons below.

Sometimes, you may want to treat image and Button elements as a single layer. In this case, you need to use a Container as described in Add Buttons with Containers below. If needed, see also Containers.

Tip: You may also make certain buttons, such as CTA, persistent. For details, see Reuse Existing Layers.

Add Simple Tap Buttons

  1. Go to Scenes and select a scene where you want to add a button.
  2. (Only if there’s no text or image “baked” in the video asset) Go to Assets and drag the desired image to the canvas, resize and place it as needed.
    If you don’t have an image for the button, go to Elements, drag Text Area instead, and type the button label Text in the Text Properties.
  3. Go to Elements, drag the appropriate Button element to the desired location on the canvas, and resize its bounding box to cover the text or image.
    To preview the video and see where to add the button, click Play at the bottom of Canvas View.
  4. In the Properties panel, enter a descriptive, easy-to-recognize Name for the button.
    The name of the button element in the Layers panel updates accordingly.
  5. Depending on the selected Button element, in the Properties panel, select the appropriate scene to move to, enter a URL, or provide an ID. For details, see Button properties.
  6. Save the project.

Add Buttons with Containers

Containers are typically used for adding buttons and other elements that you want to nest and treat as a single layer. For details and tips, see Containers.

To add a container with a Button element and an image asset:

  1. Go to Scenes and select a scene where you want to add a button.
  2. Go to Elements, drag Container to the canvas, and resize it to fit the   screen.
  3. In the Properties panel, enter a descriptive, easy-to-recognize Name for the container.
    The name of the container element in the Layers panel updates accordingly.
  4. Go back to Elements, drag the desired Button element to the container on the canvas, and resize it as needed.
  5. In the Properties panel, define the appropriate Button properties.
    You don’t need to rename the Button and Image Element layers, unless you have multiple buttons of the same kind in your demo.
  6. From the Assets panel, drag the desired image to the container on the canvas, resize and place it on top of the Button element.

    Tip: If you don’t have an image for the button, go to Elements, drag Text Area instead, and type the button label Text in the Text Properties.

  7. Go to Layers, select Show All, and expand the Container drop-down list. If needed, see the video below.
  8. Drag the Image layer inside the Container list, then the Button layer.

    Important: Make sure the Button layer is at the bottom of the list. For details, see Layer Order.

  9. If there are any visible interactive elements like gestures are listed above the Container you have just added, drag them under the Container in the list and save the project.
Updated May 14, 2019
Tags: