[vc_row][vc_column][vc_empty_space height= »50px »][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][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 css= ».vc_custom_1478085278414{margin-bottom: -10px !important;} »]

Créer une photo interactive avec un volet retractable

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

Ce tutoriel inclut des vidéos, faites un clic droit et choisissez  « play »  pour pouvoir les visionner.

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

1. Pour importer la première image du projet nous allons cliquer sur le symbole « + » dans la barre d’outils à gauche de l’interface.
2. La liste des éléments importables sur la scène apparaît, cliquez sur « ajouter une image ».
3. La bibliothèque d’images vous laisse la possibilité de sélectionner la où les images de votre choix, un contour bleu vous indiquant quelles images sont sélectionnées.
4. Une fois votre choix effectué, cliquez sur « appliquer » pour placer l’image sur la scène. Pour cet exemple commencer par la photo nette.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »1/3″][vc_single_image image= »839″ img_size= »full » onclick= »link_image »][/vc_column_inner][vc_column_inner width= »1/3″][vc_single_image image= »875″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447774152814{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]Positionner ses images sur la scène

Pour placer un élément sur la scène vous pouvez cliquer sur lui, laissez enfoncer le bouton gauche de la souris et le déplacer où bon vous semble.
Si vous voulez être plus précis, vous pouvez rentrer directement des valeurs pour sa position horizontale et verticale.
Dans le cas présent, l’image faisant la taille de ma scène, je peux directement la placer à 0 en horizontal et à 0 en verticale, l’origine de la scène étant son coin supérieur gauche.
Une troisième possibilité s’offre à vous pour déplacer subtilement un élément : sélectionnez-le et utilisez les touches fléchées de votre clavier pour le déplacer de pixel en pixel, maintenez la touche majuscule enfoncée et utilisez les flèches pour le déplacer de 10 pixels en 10 pixels.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]Procédez de la même manière pour placer les deux images flous par dessus la première.
Pour aller plus vite cette fois-ci, sélectionnez la première dans la bibliothèque, puis en maintenant la touche majuscule enfoncée, sélectionnez la seconde puis validez.
Pour placer rapidement un élément sur un autre, « cliquez-déplacez le » sur le premier, lorsque vous vous approcherez de l’un de ses angles, un magnétisme vous aidera à le placer précisément.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

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

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text]Les calques d’action s’apparentent à des boutons transparents sur lesquels vous allez pouvoir ajouter des actions qui contrôleront l’animation d’autres éléments. Bien sûr, pour pouvoir les manipuler, ils ne sont pas totalement transparents dans l’administrateur, mais ils seront invisibles lors de la publication. Vous pouvez également les rendre invisibles dans l’aperçu en dépliant le menu sous la barre d’adresse de votre navigateur et en cliquant sur « cacher les calques d’actionsé.

Créez un premier calque d’action en cliquant sur le « + » puis sur « calque d’action ». Renommez-le dans la fenêtre qui s?affiche.
Redimensionnez-le en « cliquant / déplaçant » l’un des ses coins, puis disposez-le sur le personnage de gauche.

Vous pouvez par la suite utiliser la rotation, dans les propriétés du calque d’action, pour recouvrir au mieux le personnage.
Les propriétés d’un élément affichent lorsqu’on le sélectionne ou en cliquant sur l’icone de roue crantée dans la barre d’outil.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

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

Ajouter des actions au survol

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text]Vous allez enfin pouvoir rajouter de l’interactivité !
Ce que nous voulons faire pour donner l’impression que la photo se floute lorsque l’on passe sur un personnage, c’est de faire apparaître l’image floutée par dessus l’image nette en jouant sur son paramètre d’opacité. On obtiendra le même effet que lorsque l’on joue avec la glissière opacité du panneau propriété comme on peut le voir dans cette vidéo.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]Deux choix s’offrent à vous pour ajouter une action à un élément.

1. Le premier consiste à sélectionner l’élément
2. puis cliquer sur l’icone de main de la barre d’outil,
3. enfin sur le type de déclencheur qui lancera l’action à savoir le clic, le survol ou la fin de survol.
4. Le second en passant par le menu contextuel accessible en sélectionnant l’élément,
5. et en sélectionnant le type de déclencheur.

Sélectionnez le calque d’action, puis ajouter une action lors du survol.
Une fenêtre s’ouvre vous permettant d’ajouter une action. Une ligne est créée avec différents paramètres à renseigner. Imaginez le tout comme une série de questions.[/vc_column_text][/vc_column_inner][vc_column_inner width= »1/3″][vc_single_image image= »827″ img_size= »full » onclick= »link_image »][/vc_column_inner][vc_column_inner width= »1/3″][vc_single_image image= »830″ img_size= »full » onclick= »link_image »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

1. Appliquer : Les éléments que vous allez faire agir ou animer.
2. Paramètres : Quelle propriété de cet élément voulez-vous faire varier dans le temps ?
3. Valeurs : Quelle valeur voulez-vous donner à la propriété à la fin de l’animation (sa valeur initiale tant celle que vous lui avez attribué sur la scène) ?
4. Durée : En combien de temps la propriété change-t’elle de son état initial à celui que vous lui donnez lors de l’interaction ?
5. Délai : Le délai correspond au temps avant lequel l’action doit se déclencher.
6. Effet : Vous pouvez rajouter un effet à une animation comme un effet de rebond par exemple
7. Retour : Cocher cette case vous évite de définir le comportement de l’élément pour la fin de survol dans le cas d’un survol et lors d’un second clic dans le cas d’un clic. Dans les deux cas l’action se jouera alors à l’envers.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »833″ img_size= »full » onclick= »link_image »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]Dans notre exemple nous voulons agir sur l’élément right-blur.jpg(1) (la photo dont le côté droit est floue), faire varier son opacité (2) à 100% (3) sur une durée de 600 ms (4), sans délai (5), sans effet (6) et avec un retour (7) pour que l’image re-disparaisse à la fin du survol.

Il ne vous reste plus qu’à valider notre action en cliquant sur « Appliquer » dans le coin inférieur droit de la fenêtre (8).[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

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

1. Commençons par créer un rectangle en ouvrant la barre d’outil
2. puis en cliquant sur le bouton « rectangle »
3. Une fois le rectangle sur la scène le panneau propriété s’ouvre automatiquement, réglez l’opacité à 75%.
4. Modifiez sa position et sa taille comme suit : position horizontale 550 px,
5. position verticale 0 px,
6. largeur 410 px,
7. et hauteur 542 px.
8. Créez ensuite un bloc texte en ouvrant la barre d’outil
9. puis en cliquant sur le bouton « rectangle ».

[/vc_column_text][/vc_column_inner][vc_column_inner width= »1/3″][vc_single_image image= »839″ img_size= »full » css= ».vc_custom_1447775063492{margin-right: 5% !important;} »][/vc_column_inner][vc_column_inner width= »1/3″][vc_single_image image= »842″ img_size= »full » onclick= »link_image »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

10. Déplacez le bloc texte par dessus le rectangle et redimensionnez le pour obtenir des dimensions légèrement inférieures à celles du rectangle.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »1/3″][vc_single_image image= »845″ img_size= »full » css= ».vc_custom_1447775343263{margin-right: 5% !important;} »][/vc_column_inner][vc_column_inner width= »1/3″][vc_single_image image= »848″ img_size= »full » onclick= »link_image »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

Double cliquez sur le bloc texte pour pouvoir l’éditer. Tapez votre texte ou copiez-collez le depuis une application de votre choix.
Ensuite sélectionnez le titre et puis choisissez une police de caractère et une taille de votre choix. Vous pouvez aussi charger d’autres polices de caractères à dans l’onglet projet.

Sélectionnez ensuite le texte courant, appliquez une autre police de caractère et enfin en sélectionnant l’ensemble du texte, passez le en blanc.

Pour sortir du mode d’édition de texte, double cliquez à l’extèrieur du bloc de texte.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

1. Créez ensuite un calque d’action et positionnez le au dessus et aux dimensions de l’image du bouton.
2. Nous allons maintenant ajoutez un lien menant vers le site de l’artiste. Cliquez sur l’icone en forme de chaîne
3. puis dans la fenêtre qui s’ouvre, indiquez « nouvelle page »
4. ce qu’il y aura comme effet d’ouvrir un nouvel onglet plutôt que de remplacer le contenu de la fenêtre actuelle.
5. Sélectionnez ensuite « page web « et renseignez le champ du dessous en y entrant l’url de votre choix.
6. Il ne vous reste plus qu’à valider le lien.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »854″ img_size= »full »][/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]

Créer les actions lors du clic sur le calque d’action.

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text]

Sélèctionnez ensuite le calque d’action recouvrant le personnage, puis effectuez un clic droit afin d’afficher le menu contextuel et ajouter une action de clic.

Nous allons tirer partie d’une particularité de RacontR, en effet lorsque nous ajoutons des actions puis sélectionnons un élément le logiciel nous indique comme valeurs par défaut celles qu’il a sur la scène.

?tant donn? que nous avons placer les ?l?ments sur la sc?ne dans la position ouverte de notre volet d?information, les valeurs par d?faut seront celles que nous voulons.

Une fois les actions enregistr?es, nous pourront replacer l?ensemble des ?l?ments dans leur position ferm?e. Ainsi, l?animation se fera bien de la position ferm?e ? la position ouverte.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »857″ img_size= »full » onclick= »link_image »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]Sélectionnez tous les calques composant notre volet latéral via la palette des calques puis déplacer en dehors de la scène.

Dès lors, lorsque nous arrivons sur la scène, ce volet est caché et lorsque l’on clic sur le calque d’action, le volet sort.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/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= »10px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

Refermer le menu

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text]

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]Dès que l’internaute clic sur le calque d’action du personnage, le volet latérale se déplace de droite à gauche. De la même manière, nous allons par le biais des actions, déplacer de droite à gauche le calque d’action pour refermer le volet. Pour cela, sélectionnez le calque d’action qui recouvre le personnage et ajoutez une action de clic.

1. Dans la fenêtre qui s’ouvre, rajoutez
2. une cinquième action sur hotlink-back,
3. laissez « x » en paramètre et « 0 » en valeur
4. puis validez.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »890″ img_size= »full » onclick= »link_image »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]Désormais, ajoutons les actions sur le « hotlink-back » pour replacer ce dernier et tous les éléments du volet en dehors de la scène.
Plaçons déjà le « hotlink-back » en dehors de la scène. Puis, exactement de la même façon que nous l’avons fait pour ouvrir le volet, ajouter des actions sur tous les éléments du volet toujours avec le paramètre « X » et en laissant les valeurs que le logiciel nous propose maintenant que les éléments sont dans leur position fermée.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][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″ margin_bottom= »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]

• 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]

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

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