Exemples – Réaliser une vidéo interactive
Définition
3WDOC vous permet de faire interagir une vidéo avec des éléments externes. Nous vous proposons de faire apparaître des éléments au fur et à mesure de la vidéo, en fonction des réponses de la personne interviewée. Pour ce projet, nous avons pris comme support une vidéo, sur laquelle viennent s’ajouter petit à petit des images (chaussures, jupes, sacs…). A chaque ajout une petite étiquette apparaît un court instant, on peux ensuite la faire apparaître à tout moment en survolant une image.
Vous pouvez voir ce projet sur sa page de publication.
La page Média
Vous voyez ici les médias uploadés pour ce projet
La page Editeur
Dans la timeline, on peux constater la succession des éléments au fil du temps. En premier lieu, on trouve la vidéo, puis le fond sur lequel viendront s’incruster les images, et enfin les images et leur étiquette associée.
Les deux dernières pistes ne sont pas obligatoires, la première permet de remplacer la vidéo lorsqu’elle se termine par une image fixe, la deuxième permet de disposer d’un arrière plan noir pour ne jamais avoir de blanc apparent au chargement de la vidéo notamment.
Pour ce projet nous avons beaucoup joué avec la superposition des pistes, jeter un coup d’oeil ci-dessous pour mieux comprendre.
L’image de remplacement de la vidéo est tout en dessous ensuite nous avons logiquement la vidéo puis le fond pour les images. Les images viennent ensuite puis enfin chacune des étiquettes associées aux images.
La petite subtilité vient du fait que les images elles même se chevauchent.
Le deuxième élément important de cette séquence ce sont les actions. Chaque image déclenche une étiquette au survol de la souris, nous devons donc paramétrer un événement “Show” à l’entrée de la souris sur l’image, et cela pour chacune de ces images.
La page Projet
Pour ce projet, il était utile de mettre cette séquence en autoplay, nous avons donc, après avoir déposé notre séquence dans le Storybuilder, coché l’Autoplay.
Le projet est maintenant publié, nous pouvons le partager ou l’intégrer dans votre site grâce aux différents du types d’exportation disponibles. Dans cette page par exemple, nous avons choisi d’inséré cette création à l’aide d’une iframe.
Pour en savoir plus sur l’utilisation de ces codes d’exportation, vous pouvez consulter cet article.
