[vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1446742643158{margin-bottom: -10px !important;}”]

Interaction management

[/vc_column_text][vc_column_text css=”.vc_custom_1446742783190{margin-right: 5% !important;}”]

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.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1446742753674{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]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:

1. Clik / Tap:
   When clicking or touching on the selected item.
2. Roll over / roll out
   Roll Over:
   During a roll over of the selected element, that is to say, when the mouse cursor is out of the selected element.
   Roll Out:
   In an roll out of the selected item with the mouse.
3. Scroll in / Scroll out:
   Add actions during scrolling to create interactivity.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5643″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463666141728{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_single_image image=”496″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446743522144{margin-right: 5% !important;}”][vc_column_text]You are in the window interactions Clik / Tap.

Start by clicking Add Action. A line appears with the following criteria:

1. 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.
2. Parameters :
   Select the setting of the target element who will be modified by the interaction (cf. list of available parameters below).
3. 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.
4. Lenght :
   Choose the time at which the interaction runs.
5. Delay :
   Choose the delay with which to run the interaction.
6. Easing :
   Apply an effect to the interaction (linear interaction, with acceleration, with run-up, with deceleration, elastic, rebound).
7. Back :
   If you check this case, a second interaction (a second click?) will put the target element to its original setting.
8. Delete :
   You can remove an effect by clicking on the cross.
9. Apply :
   Apply interactions.

[/vc_column_text][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”2/3″][vc_column_text letter_spacing=””]Parameters common to all media

1. X : Changing the position of the target element in the abscissa (horizontal)
2. Y : Changing the position of the target element in ordinate (vertically)
3. Current position +X : Horizontal increment, every click you add the value of displacement X
4. Current position +Y : Same as X but vertically in Y
5. Width : Change the width of the target element
6. Height : Change the height of the target element
7. Background color : Change the color of the target element (except video and audio)
8. Rotation : Make a rotation of the target element
9. Opacity : Change the opacity of the target element
10. Scale : Change the proportions of the target item (item 1.5 to enlarge by 50%)
11. 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
12. Dispatch roll-over : Triggers the action roll-over of another button
13. Dispatch clic : Triggers the action click of another button
14. Dispatch roll-out : Triggers the action roll-out of another button

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”499″ img_size=”full”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”2/3″][vc_column_text]Specific parameters of the video and sound

1. Play : triggers the playback of the video / audio
2. Pause : triggers pause video / sound
3. Play/Pause : a first interaction triggers the reading, a second interaction triggers the break, and so on
4. Seek to : allows to move to a specific second of video or audio. Very useful part for chapters video or sound

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”502″ img_size=”full”][/vc_column_inner][/vc_row_inner][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]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.[/vc_column_text][vc_single_image image=”505″ img_size=”full”][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text letter_spacing=””]

1. In actions, choose “Scene”

Then the kind of movement on the scene :

2. 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
3. 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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]