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

Créer des actions

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

Créer des actions pour générer de l’interactivité avec Racontr

Dans ce tutoriel, nous allons apprendre à créer quelques actions très simplement à l’aide de Racontr, comme dans l’exemple ci-contre. L’interactivité est le cœur de l’outil, elle permet de simuler de l’interaction et de rendre vivants vos médias.[/vc_column_text][vc_column_text letter_spacing= » »][/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text letter_spacing= » » css= ».vc_custom_1474971308021{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= » »]Pour notre exemple, nous avons importé deux images : « A » (le carré bleu) et « B », le carré noir.

C’est à partir de ces deux médias que nous allons travailler.

L’objectif est de comprendre comment créer des actions très simplement entre différents éléments sur Racontr.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5631″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463664709864{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= »30px »][/vc_column_inner][/vc_row_inner][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= » »]Choisissez l’élément qui sera cliquable et qui va générer de l’action.

Nous allons donc configurer les actions qui auront lieu au « clic » ou au « tap » de « A ».

Ici, nous allons appliquer une action sur « A » qui changera l’opacité de « B » à 20%.

1. Cliquez sur « A », puis, dans le panneau d’action(la petite main), sélectionnez Click / Tap (ajout d?une action au click/tap sur « A »).
2. Créez votre action : ici, nous appliquons sur « B » un paramètre d’opacité de 20%, d’une durée de 0,6 secondes avec une action de retour (la case « back » cochée permet de répéter l’action dans le sens inverse).

Une fois votre action créée, pensez à valider.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5625″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463664726031{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_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= » »]Le principe est le même que pour ajouter une action au clic !

1. Cliquez sur l’élément de votre scène auquel vous voulez ajouter une action de survol (ici, l’élément « B »), puis dans les paramètres, sélectionnez « roll-over ».
2. Dans notre cas, nous allons appliquer sur l’élément « B? » (donc sur lui-même) une action de « rotation » de -4%, d’une durée de 6 ms, avec un effet de retour. Nous appliquons également une action sur « A », d’échelle, d’une valeur de 1.04x, d’une durée de 6ms, avec un effet de retour.
3. Vous pouvez ajouter également des actions au roll-out (lorsque la souris n’est pas sur l’élément).

Vous n’avez plus qu’à valider et lancez votre aperçu !

Vous pouvez désormais imaginer pleins de façons de créer de l’action sur vos médias : opacité, positionnement, échelle, rotation et bien plus encore ![/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5628″ img_size= »full »][/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= » »]

• Charger des médias
• Préparer ses médias
• Remplacer un média
• Supprimer un média

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

• Importer une vidéo
• Importer un son
• Importer une image
• Créer un calque d?action

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