RacontR

You can also visit our further tutorial about the “interactions” menu to complete the course.

Here are the different options offered by RacontR covered in this section :

- Preparing your scene
- Add a click/tap action
- Add a rollover/rollout action

For our example, we imported two images: “A” (the blue square) and “B”, (the black square). We are going to work with these two medias.

The goal is to understand how to create a very simple interaction between different elements in RacontR.

Add an action at the click of the mouse (or tablet tap)

Select the item which will be clickable and will generate some action.

We will set up the actions that will take place on “click” or “tap” to “A”.

Here we will apply an action to “A” that will change the opacity of “B” to 20%.

Click “A”, then in the action panel (the little hand), select “Click / Tap” (adding an action to click / tap on “A”).

Create your action : here we apply to “B” a 20% opacity setting, with a duration of 0.6 seconds with a return action (case “back” checked to repeat the action in reverse).

1. Click “A”, then in the action panel (the little hand), select “Click / Tap” (adding an action to click / tap on “A”).
2. Create your action : here we apply to “B” a 20% opacity setting, with a duration of 0.6 seconds with a return action (case “back” checked to repeat the action in reverse).

Once you have created an action, click "Apply".

Add an action to the rollover / rollout

The principle is the same as adding a click action :

Click on the item of your scene you want to add a rollover action on (here, the “B” part), then in the settings, select “roll-over”.

In our case, we will apply the item “B” (on itself) an action of “rotation” of 4%, for a period of 6 ms, with a return effect (tick "back"). We also apply an action to “A”, scale, a 1.04x value of 6ms duration, also with a return effect.

You can add roll-out actions with this tab.

1. Click on the item of your scene you want to add a rollover action on (here, the “B” part), then in the settings, select “roll-over”.
2. In our case, we will apply the item “B” (on itself) an action of “rotation” of 4%, for a period of 6 ms, with a return effect (tick "back"). We also apply an action to “A”, scale, a 1.04x value of 6ms duration, also with a return effect.
3. You can add roll-out actions with this tab.

You just have to "Apply" and launch your preview !

Now you can imagine lots of ways to create actions on your media : opacity, position, scale, rotation, and more...