Creating buttons

A button component is an add-in that allows you to easily add buttons to an interactive video. In the example below we show different button component styles. These are only examples of the varieties of styles. The style of a button component is freely customizable.

Add

You can add a button component in the components menu. You can drag the component button to your timeline or to the canvas. You can also press the three dots located to the upper right of the window, after which you would have to click ‘place element’.  

Positioning

The button can easily be moved across the canvas by dragging it with the cursor. You can change the size of the button with the transform tool (see toolbar, located on the left side). By holding shift while enlarging or shrinking, the initial proportions will be preserved. Position the button on the desired location on the timeline to determine the moment it will appear. 

Enter text and style

You can adjust the text of a button in the Button Style section. You can find this section in the options menu. This will appear automatically when the element has been selected. You can customize the button using many different styles, including font styles, text-decorations, different colors, borders and mouse-over transitions. 

Adding interactions

Interactions are configured by selecting the desired button and by adding the interactions of your choice in the interactions menu. Click on the round blue button, located in the interactions window, to create a new interaction.

• Related Articles

• Videotutorial: Disable pressed button

  How to disable a button once it has been pressed In this tutorial I will show you 2 ways in which you can disable a button once it has been pressed, so it can only be pressed once. I will also quickly explain how to do this with variables and add ...

• Adding Hover state to an image

  When you use your own assets to create custom buttons, it is useful to work with a so-called ‘hover state’. This is a variant of the image that will be shown as soon as the user(s) hover their mouse over the concerning image (mouse-over). This form ...

• Importing data

  Ivory Database is the part of Ivory Studio where you can store the data that you wish to use in your videos. By linking a database to your video, you can use its stored data to dynamically personalize and / or segmentize your videos. You can store, ...

• Preloading in the Ivory Player

  Preloading To make the transitions from one clip to another as smooth as possible, the Ivory Player tries to preload as much as it can. With a lot of clips and time jumps, it is important to know in which ways the preload processes work so you can ...

• Animate using keyframes

  Keyframes are the set-up positions of elements on their specific moments on the timeline. By using more than one keyframe, it is possible to linearly animate elements. Working with keyframes allows you to have elements move over the screen on the ...