Créer un 360° Product Viewer (visualisation et rotation produit à 360°)
Avec un 360° Product Viewer, votre produit sera magnifiquement mis en valeur et parfaitement optimisé pour chaque appareil. Avec PandaSuite, vous pouvez créer une visualisation 360° entièrement sur-mesure à partir d'images fixes ou d'une vidéo. Intégrez-le au sein d'une page web ou exportez-le en tant qu'application.
Dans cette vidéo, vous apprendrez comment :
- créer une visualisation produit à 360° grâce à une séquence d'images à 360°
- permettre à l'utilisateur de manipuler le produit grâce à la zone de défilement
- créer un curseur sur-mesure
- utiliser l'accéléromètre pour faire pivoter le produit
- créer des vignettes (thumbnails)
- déclencher l'affichage d'une annotation grâce à un marqueur de position
Durée : 8:47 minutes
[TRANSCRIPT]
Avec une visionneuse de produits à 360°, votre produit sera magnifiquement mis en valeur et parfaitement optimisé pour chaque appareil... Avec PandaSuite, vous pouvez créer une visionneuse de produits à 360° entièrement personnalisée pour votre site e-commerce ou un catalogue sans aucun codage. Intégrez-le partout ou exportez-le en tant qu'application.
Dans cette vidéo, nous allons voir comment construire cette rotation à 360° d'un objet Dark Vador.
Tout d'abord, vous devez photographier votre produit. La plupart des rotations de produits à 360° sont photographiées ou filmées depuis un plateau tournant. Veillez à capturer tous les angles de votre produit dans la vidéo. Dans PandaSuite, vous pouvez créer une visionneuse de produits à 360° à partir d'une séquence de photos ou d'une vidéo.
Importez vos photos ou vidéos dans PandaSuite Studio. Dans cet exemple, nous avons 125 photos.
Sélectionnez toutes les photos et choisissez Créer une séquence.
Attendez que la séquence soit traitée.
En l'ajoutant à votre écran, un composant Séquence est automatiquement créé. Vous pouvez aussi insérer un composant Séquence et choisir sa source manuellement. Si vous avez une vidéo, importez-la en tant que vidéo et ajoutez-la comme source de la Séquence pour la transformer automatiquement.
Double-cliquez dessus pour voir le 360° produit qui a été automatiquement créé. Vous pouvez le prévisualiser à l'aide des boutons Lecture et Arrêt. Les photos ont été transformées en frames.
La qualité est automatiquement optimisée pour chaque appareil. Dans les propriétés, choisissez la durée de la séquence, qui correspond au temps nécessaire pour passer de la première à la dernière image.
Vous pouvez ajouter une répétition pour recommencer la séquence une fois qu'elle a atteint la dernière image. Assurez-vous de choisir un numéro spécifique lorsque votre séquence est synchronisée avec un autre composant.
Si vous souhaitez faire jouer automatiquement ce spin produit 360°, sélectionnez Lecture auto dans les propriétés. Comme dans une vidéo, les utilisateurs n'ont rien à faire pour voir le produit.
Si vous souhaitez que les utilisateurs fassent glisser le produit pour le faire pivoter, désélectionnez Autoplay et quittez le composant Séquence. Ajoutez un composant de zone de défilement. Placez-le au-dessus du composant Séquence. Il n'est pas nécessaire d'ajouter quelque chose à l'intérieur, il est transparent. Placez-le au-dessus de la séquence d'images. Dans les propriétés, choisissez Horizontal pour que les utilisateurs puissent tourner de droite à gauche et de gauche à droite. En termes de largeur, plus la zone est large, moins le contrôle sera sensible. Cachez la barre de défilement.
Ajoutez un composant Synchronisation pour synchroniser la séquence de rotation et la zone de défilement. Ajoutez les deux composants et dans les propriétés de la synchronisation, cochez Position horizontale et Frames.
Les utilisateurs peuvent maintenant manipuler ce produit à 360° avec le doigt ou la souris.
Maintenant si vous voulez ajouter un curseur à la place, concevez la barre de défilement, ajoutez une zone de défilement et à l'intérieur ajoutez un curseur.
Si vous voulez savoir en détail comment construire ce curseur, jetez un coup d'œil aux tutoriels vidéo : Créer un lecteur audio + barre de progression dans notre chaîne Youtube
Synchronisez ce curseur avec la séquence en les ajoutant dans le même composant de synchronisation.
Vous pouvez également faire en sorte que les utilisateurs fassent pivoter le produit en inclinant leur appareil iOS ou Android. Pour cela, vous allez utiliser l'accéléromètre de l'appareil. Ajoutez un capteur de mouvement, définissez ses propriétés et choisissez l'axe horizontal ou vertical. Synchronisez à nouveau la séquence et le capteur de mouvement pour obtenir cet effet de mouvement.
Vous pouvez également ajouter des vignettes qui font automatiquement pivoter le produit. Ajoutez les images des vignettes et créez des marqueurs sur la séquence. Pour ajouter des marqueurs, entrez dans la séquence. Faites-la jouer et mettez-la en pause quand vous le souhaitez. Cliquez sur le bouton Ajouter des cadres pour créer le marqueur. Vous pouvez ajuster le cadre que vous souhaitez en cliquant sur le bouton Paramètres .
Sélectionnez l'image et choisissez un événement déclencheur. Choisissez Interagir avec un composant > Séquence > Modifier le cadre et sélectionnez le cadre souhaité.
Avec le marqueur, vous pouvez également définir le cadre par défaut de la visionneuse de produits à 360°. Ajoutez un marqueur et cliquez sur l'icône de l'épingle pour le rendre par défaut.
Avec les marqueurs, vous pouvez afficher des annotations en fonction de la rotation de l'objet. Tout cadre peut déclencher un changement de Multi-état pour afficher ou masquer une annotation. Préparez un Multi-state qui comprend 2 états pour cacher ou afficher le contenu. Sélectionnez la séquence et ajoutez une action. Comme événement déclencheur, choisissez l'un des marqueurs que vous avez définis. Puis ajoutez l'action : Interagir avec un composant
Vous pouvez faire presque tout ce que vous voulez avec cette visionneuse de produits à 360°.
Une fois qu'il est terminé, vous pouvez l'intégrer dans un site e-commerce, le partager avec un lien, l'ajouter à un catalogue de produits ou comme application. Elle est automatiquement disponible au format web, iOS et Android.
Via PandaSuite Studio, vous pouvez également utiliser des objets 3D, des images à 360° et des vidéos. Nous verrons des astuces et des exemples dans d'autres tutoriels vidéo, abonnez-vous à notre chaîne YouTube pour rester informé !