<< retour

Exemples – Réaliser un slideshow vidéo

demos . Etudes de cas . Tutoriels SaaS . . . . . . . . . . Ecrit par :
0
Commentaire
18 juil 2012

Définition

Ce slideshow est un défilement de quatre vidéos avec une navigation entre ces vidéos.

Vous pouvez voir ce projet sur sa page de publication.

La page Média

Vous voyez ici les vidéos uploadées pour ce projet

exemple_slideshowVideo_media

La page Editeur

Sur cette page vous pouvez voir le fonctionnement du slideshow
En haut à gauche, dans le Média grabber, nous retrouvons les vidéos uploadées dans le gestionnaire de médias.
A droite le Positionner montre que la vidéo est en arrière plan et dessus sont posés les boutons de navigation.

La Timeline nous permet de bien distinguer les vidéos, symbolisées par une icône de caméra et une couleur rouge, et les boutons de navigation réalisés grâce à des Articles, icônes de stylo et couleur violette.
Les vidéos se succèdent dans le temps, alors que les boutons de navigation s’étendent sur toute la durée de la timeline.

Pour que les boutons de navigation apparaissent bien au-dessus des vidéos, dans l’onglet Position, nous avons indiqué un z-index très important (le slider à droite).

slideshowVideo_editor

La page Projet

Pour cette page nous avons ajouté une image dans notre Média manager, pour pouvoir intégrer une image de Cover. Il est nécessaire que cette image est au maximum la taille de base du projet (ici 960×540). Nous avons aussi choisi de mettre ce projet en plein écran, la petite case Plein écran est cochée, elle est rose.

Avant de publier, nous avons glissé notre séquence du réservoir de séquence dans le Storybuilder, et nous avons coché la case Autoplay pour que la lecture se fasse automatiquement.

exemple_slideshowVideo_project

Le projet est maintenant publié, nous pouvons le partager ou l’intégrer dans votre site grâce aux du types d’exportation disponible.
Pour plus de détail sur l’utilisation de ces codes d’exportation, consulter cet article.

Articles similaires :

Aller à une autre séquence (goto)
3WDOC - Aide - Publication, modification et enchaînement de deux séquences d'un projet
3WDOC - Aide - Publier un projet afin de voir l'action de clic sur un article transparent
3WDOC - Aide - Redimensionner les images, mode player, mode éditeur, manipuler la tête de lecture
3WDOC - Aide - Ajouter une image avec une opacité réduite sur une video en fond d'écran
Lire... Une année d’apprentissage de la lecture au CP - Une expérience interactive enrichie sur l'ap...