The interaction in Racontr will allow you to create buttons and especially animate your page, create transitions but also interact with images, sounds and videos.
First step: Kinds of interactions
In Conventional navigation with a mouse, we have three types of interaction, click, roll-out and roll-over.
With tablet navigation we have six types: Swip left, right Swip, Swip top, Swip bottom, Pinch in and Pinch out.
Interaction with a mouse. The user can trigger actions in three ways:
- Clik / Tap:
When clicking or touching on the selected item.
- Roll over / roll out
During a roll over of the selected element, that is to say, when the mouse cursor is out of the selected element.
In an roll out of the selected item with the mouse.
- Scroll in / Scroll out:
Add actions during scrolling to create interactivity.
The interaction tab
You are in the window interactions Clik / Tap.
Start by clicking Add Action. A line appears with the following criteria:
- Add Action :
Choose from the drop down the element on which to apply the interaction menu. An element can trigger animations on itself and all other page element.
- Parameters :
Select the setting of the target element who will be modified by the interaction (cf. list of available parameters below).
- Value :
Depending on the setting, change its value. The interaction triggers the change in value of the element of its value on the scene at the value you enter in this window.
- Lenght :
Choose the time at which the interaction runs.
- Delay :
Choose the delay with which to run the interaction.
- Easing :
Apply an effect to the interaction (linear interaction, with acceleration, with run-up, with deceleration, elastic, rebound).
- Back :
If you check this case, a second interaction (a second click?) will put the target element to its original setting.
- Delete :
You can remove an effect by clicking on the cross.
- Apply :
List of parameters
Parameters common to all media
- X : Changing the position of the target element in the abscissa (horizontal)
- Y : Changing the position of the target element in ordinate (vertically)
- Current position +X : Horizontal increment, every click you add the value of displacement X
- Current position +Y : Same as X but vertically in Y
- Width : Change the width of the target element
- Height : Change the height of the target element
- Background color : Change the color of the target element (except video and audio)
- Rotation : Make a rotation of the target element
- Opacity : Change the opacity of the target element
- Scale : Change the proportions of the target item (item 1.5 to enlarge by 50%)
- Depth : Change the order of the target element in the layers stack. Therefore can be used to move an object in the foreground to give it value 1
- Dispatch roll-over : Triggers the action roll-over of another button
- Dispatch clic : Triggers the action click of another button
- Dispatch roll-out : Triggers the action roll-out of another button
Specific parameters of the video and sound
- Play : triggers the playback of the video / audio
- Pause : triggers pause video / sound
- Play/Pause : a first interaction triggers the reading, a second interaction triggers the break, and so on
- Seek to : allows to move to a specific second of video or audio. Very useful part for chapters video or sound
Parameters specific to the scene
Finally, you can animate the scene of your page through settings Scroll. You can build a large page, larger than the window in which you deliver your project. Thus, with the scroll, you can move on this great page and give the impression that the page moves before the eyes of the user.
- In actions, choose “Scene”
Then the kind of movement on the scene :
- Horizontal Scroll : the scene joined the X coordinate of the target element
Vertical Scroll : the scene joined the Y coordinate of the target element
Scroll dual axis : the scene joined the X and Y coordinates of the target element
- Finally give a value. Here, our value is comparable to a target, we can use an image as a hotlink target, the screen will be positioned on their top and left edges.