[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_1448447338440{margin-bottom: -10px !important;} »]

Le menu des interactions

[/vc_column_text][vc_column_text letter_spacing= » » css= ».vc_custom_1474970482097{margin-right: 5% !important;} »]

L’interaction dans Racontr va vous permettre de créer des boutons et surtout d’animer vos pages, créer des transitions, mais aussi d’interagir avec vos images, sons et vidéos.

[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text letter_spacing= » » css= ».vc_custom_1474970530172{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 letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]En navigation classique avec une souris, nous avons trois types d’interactions, le click, le roll-out et le roll-over.
En navigation tablette nous en avons sept : Tap, Swip left, Swip right, Swip top, Swip bottom, Pinch in et Pinch out.

1. Clik / Tap 
   Lors d’un clic sur l’élément sélectionné.
2. Roll over / roll out
   Roll Over:
   Lors d’un roll-over de l’élément sélectionné, c’est-à-dire lorsque le curseur de la souris survol l’élément.
   Roll Out:
   C’est-à-dire lorsque le curseur de la souris sort de l’élément.
3. Scroll in / Scroll out:
   Ajoutez des actions sur la scène au scroll de celle-ci.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5644″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463668348142{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 letter_spacing= » »]

[/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 letter_spacing= » »]Pour appliquer des interactions à un objet ( images, sons, textes, rectangles ou vidéos ) commencer par choisir le type d’interaction souhaité. Ici nous avons choisi les interactions de « Click / Tap ». Une fenêtre s’ouvre. C’est dans cette box que vous allez paramétrer vos interactions.

1. Ajoutez une action :
   Vous êtes dans la fenêtre des interactions Clik/Tap.
2. Paramètres :
   Choisissez le paramètre d’animation de l’élément cible qui sera actionné par l’interaction (cf : liste des paramètres disponibles ci-dessous).
3. Valeur :
   Selon le paramètre choisi, changez sa valeur. L’interaction déclenchera le changement de valeur de l’élément de sa valeur sur la scène à la valeur que vous aurez renseigné dans cette fenêtre
4. Durée :
   Choisissez la durée avec laquelle s’exécute l’interaction
5. Délai :
   Choisissez le délai avec lequel s’exécute l’interaction.
6. Effet :
   Appliquez un effet à l’interaction (interaction linéaire, avec accélération, avec élan, avec décélération, élastique, avec rebond).
7. Retour :
   Si vous cochez cette case, une deuxième interaction (un deuxième clic, un roll-out dans le cas d’un survol) rendra à l’élément cible son paramètre d’origine (c’est a dire avant action ).
8. Supprimer :
   Vous pouvez supprimer un effet en cliquant sur la croix
9. Appliquer :
   Appliquez les 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 letter_spacing= » »]

[/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]

Plus de
tutoriels :

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

• Propriétés du scénario
• Propriétés de la scéne

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

• Propriétés de la timeline
• Utiliser le scroll timeline

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