Creating buttons

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

    • 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, ...
    • 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 ...
    • 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 ...
    • In-video scoring through interaction

      You can save scores using variables. Variables are elements that can assume a certain value. A variable consists of a key and a value. The key is the ‘label’ of the variable, and is used to identify the variable. The value is the meaning or merit ...