Video Tutorial - How to use Interactions

Knowledge Base

Intro

Welcome to this Barisco tutorial! In this tutorial we are going to have a look at the interactions in Barisco. Interactions give you the ability to trigger an action. For example by clicking on an object you can make another object appear. This tutorial will guide you through the basic steps on how to get started with interactions.

The interactions in Barisco can be managed from the Property Panel. At the bottom of the Property Panel you will find the Interactions section. Every interaction that is triggered from the selected object can be found here.

 

Tutorial

In order to demonstrate how interactions work, we will use these 4 red buttons that will trigger the interactions.

The first button brings the green rectangle to 50% opacity. The second button will rotate the green rectangle to 45 degrees. The third button will hide the green rectangle. And the Fourth button will restore the green rectangle to its original state, by using 3 actions, which will basically undo all the actions that were performed by the other 3 buttons.

The first button has been select and you can see that an interaction has been added to the button. When you double click on the interaction, the interaction dialog will open. Here you will be able to see exactly which interactions are triggered by the button. The interactions dialog also gives you the ability to add additional interactions and manage existing interactions.

The interactions dialog has been divided into 3 major sections: the Interaction, the target and the actions. The Interaction is what the user needs to do. For example: a mouse click or mouse over. The Action is what will be done after the Interaction has been triggered. In this case the opacity action has been enabled and set to 50%. The duration has been set 1 second. This means that the transition from the current opacity to the new opacity value should take 1 second. The delay has been set to 0 seconds. This means that the action will be triggered immediately.

The Target is where the action will be applied to. For example, in this case: Target Green is the target. Let’s do a little exercise so that you can see how to add interactions. We will use the green button as the trigger for the interactions; and Target blue and Target Orange will serve as the targets.

The first thing that is important; is that Target Objects all have been named correctly, so that you will be able to distinguish them when you need to select them from the list of targets. Now let’s start by adding an interaction with 2 actions that will be applied to Target Blue: opacity and rotation.

First we need to select Target Blue as the target. And then we will enable the opacity and rotation. Next we need give the opacity property a value. So let’s use 25%. And the rotation property we will set to 120 degrees.

When we start the preview and click on Button Green; you can see that Target Blue is changing to 25% opacity and rotating to 120 degrees. Let’s add another interaction, but now for Target Orange. This time we will add an interaction with opacity and when the opacity transition is finished, we will make Target Orange invisible.

To do this we need to add a delay to the Visibility action. So first we will set the target to Target Orange. Then we will enable the opacity action and the Visibility action. The opacity property we will set the 25%; with a duration of 6 seconds. Then we will set the delay property of the visibility action to 6 seconds.

The reason for why we need the delay to be 6 seconds is because we want the visibility to change after the opacity’s transition has been completed. When we apply the interaction and look at the interactions section at the property panel, you can see that there are now 2 interactions that have been added to the list of interactions.

Let’s have a look at the preview to see how this looks like. When we click on Button Green, you will see that both Target Orange and Target Blue start at the same time. Target Orange is transitioning slower than Target Blue and after 6 seconds it disappears.

There are many more things that you can do with interactions, which have not been featured in this tutorial. If you want to learn more about interactions, please refer to the documentation. Also please note that some interactions cannot be tested in the page preview – such as the Navigate to Page interaction.

We hope that you have been able to learn from this tutorial. Please also have a look at our other tutorials.

Leave a Reply