[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 letter_spacing= » » css= ».vc_custom_1474972425643{margin-bottom: -10px !important;} »]

Créer des actions sur la scène

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

Scroll-to (ancres), plein écran, bouton sur la timeline…

Avec cette méthode, apprenez comment créer rapidement des ancres sur votre projet, jouer avec la timeline ou mettre en place un bouton de plein écran.[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »60px »][vc_column_text letter_spacing= » » css= ».vc_custom_1474972483925{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= » »]

1. Premièrement, définissez une taille de scène. Ici, nous allons utiliser un format vertical qui marchera aussi au scroll.

Une fois vos médias importés dans la librairie, nous pouvons les importer sur la scène.

2. Ici, nous utiliserons deux calques « hotlink » et « hotlink2 » pour notre exemple.
3. Ajoutez une action « click/tap » sur votre première ancre (ici « hotlink1 »).

Tips : Cette méthode fonctionne avec tous les types de contenus : vidéos, images, calques d’action, boutons…[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5602″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463660369032{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_empty_space height= »15px »][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Désormais, positionnons nos blocs de texte sur la scène dans le rendu souhaité, ici, hotlink1 ira plus bas dans mon projet, au niveau de hotlink 2.

Ajoutez une action au clic/tap sur hotlink1 : l’objectif est de permettre au clic de hotlink1 (qui nous permettra de naviguer), d’aller automatiquement à la fin du chapitre (hauteur de hotlink2).

Appliquez l’action sur la sc?ne avec comme param?tre « scroll vertical ». Choisissez « hotlink2 » comme valeur, puis validez.

Et voila ! Vous venez de cr?er un scroll vertical sur la sc?ne, au clic de hotlink 1, elle se d?placera jusqu’? hotlink2 ![/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5605″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463660389038{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_empty_space height= »15px »][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Paramètres et valeurs de la scène dans l’onglet d’action :

• Dans l’onglet paramètres, en choisissant le scroll vertical, la scène se déplacera de haut en bas ou de bas en haut.
• En choisissant le scroll horizontal, la scène se déplacera de gauche à droite ou de droite à gauche.
• Enfin, le scroll double axe, vous permettra de réaliser des déplacements verticaux.

Dans l’onglet « valeur », vous retrouverez tous vos calques, permettant ainsi de se rendre à celui sélectionné. Vous pouvez également choisir « min » ou « max », ce qui aura pour effet de vous placer au début de la scène, ou à la fin.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

Exemple de la fonction scroll-to?(ancre)[/vc_column_text][/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 letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Pour créer un bouton de plein écran :

1. Ajoutez une action au « clic/tap » sur un élément.
2. Appliquez sur la scène, puis choisissez « plein ?cran » dans les paramètres.

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

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Pour créer un bouton play sur la timeline :

1. Ajoutez une action « clic/tap » sur un élément
2. Appliquez sur la scène, puis choisissez un paramètres de timeline : lecture, pause, lecture/Pause, aller-à…

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5611″ img_size= »full » css= ».vc_custom_1463660437989{margin-right: 5% !important;} »][/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= » »]

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

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