PackshotViewer Guide utilisateur v1.23 www.packshot-creator.com
Pour commencer 1. 2. 3. Insérez le CD d installation dans votre lecteur de CD. Cliquez sur Installer PackshotViewer et suivez les instructions à l écran. Entrez le numéro de série à 16 chiffres. Le numéro de série se trouve sur la pochette du logiciel. 4. Sélectionnez la langue du logiciel. Vous avez le choix entre l anglais et le français. PackshotViewer Guide utilisateur - page 2
5. 6. Suivez les instructions à l écran. Après l installation, lancez le logiciel depuis votre Bureau. Avant d utiliser le programme, vous devez entrer le code d activation à 8 chiffres pour activer le logiciel. Si vous n avez pas de code d activation, cliquez sur S enregistrer maintenant. 7. Sur l interface d enregistrement, entrez vos informations de contact pour recevoir le code d action par email. Ce code expire dans les 24 heures suivant la demande d enregistrement. Une fois ce délai passé, vous devrez réitérer votre demande. Vous disposez de 3 licences et vous pourrez donc vous enregistrer jusqu à 3 fois, afin de pouvoir installer le logiciel PackshotViewer sur différents postes. Note : vous n avez pas besoin de connecter votre équipement PackshotCreator pour utiliser PackshotViewer. PackshotViewer Guide utilisateur- page 3
8. Insérez le code d activation à 8 chiffres reçu par email dans l interface principale. Cliquez ensuite sur Go pour accéder à l interface principale. PackshotViewer Guide utilisateur - page 4
Composer des animations 1. Depuis l interface principale, cliquez sur Composer une animation. Vous accédez à l interface ci-dessous. 2. Avant de composer votre animation, vous devez indiquer l emplacement du dossier contenant vos images sources. Cliquez sur Sélectionner la source et sélectionnez le dossier. Les images à utiliser doivent suivre une norme de nommage définie dans le chapitre «Norme de nommage des fichiers». Note: les images doivent être classées de façon à suivre le sens de rotation horaire. PackshotViewer Guide utilisateur- page 5
3. 4. 5. Spécifiez le préfixe et l index exact de votre série d images. Exemple: pour une série d images chaussure_01, chaussure_02... le préfixe à indiquer sera «chaussure_» et l index «01». Voir «Norme de nommage des fichiers» pour plus d information. Cliquez sur Emplacement de destination pour définir le dossier dans lequel sera sauvegardé l animation. Ce dossier contiendra tous les fichiers nécessaires à la visualisation de votre animation. Vous pouvez également personnaliser votre animation en cliquant sur Plus d options. L interface suivante apparaît. Espace de présentation : Ratio : sélectionnez le ratio de votre présentation. Couleur de fond : sélectionnez la couleur de fond de votre animation; celle-ci doit être de la même couleur que le fond de votre image. Nous vous conseillons de sélectionner blanc. Taux de compression: Un taux de compression bas vous permet d obtenir des images de meilleure qualité mais des fichiers plus lourds. Pour vos projets web, nous vous recommendons de toujours sélectionner un taux de compression élevé. Echelle de zoom : Définit le niveau de zoom de votre animation. Nous vous recommendons de laisser les valeurs par défaut. Type d affichage : Définit la manière dont l animation s affiche sur la page. Statique: le produit s affiche de façon statique, sans tourner sur lui-même. Roll-in: le produit tourne une fois sur lui-même puis s arrête. Rotation: le produit tourne en continu. Marge Cochez Marge auto pour que le produit apparaisse au centre de la fenêtre de visualisation, à la taille maximale. Note : vous disposez de nombreuses autres possibilités de personnalisation de l animation. Voir le chapitre Enrichir les animations pour plus d information. PackshotViewer Guide utilisateur - page 6
6. Cliquez sur Composer une animation pour générer l animation. La fenêtre suivante apparaît. A la fin du processus, cette fenêtre apparaît. Vous aurez le choix entre Voir l objet 3D (Voir l objet 3D) ou de fermer la fenêtre (OK) pour revenir à l interface principale du logiciel. Cliquez sur Voir l objet 3D pour visualiser l animation HTML5 dans votre navigateur. Pour faire tourner le produit : faites un cliquer-glisser avec votre souris pour faire tourner le produit sous tous les angles. Pour naviguer dans le produit : cliquez sur l icône main et faites un cliquer-glisser avec la souris. Pour zoomer : utilisez la molette de la souris. Cliquez sur la flèche orange située au bas à gauche pour afficher les fonctionnalités d enrichissement de l animation. Voir le chapitre Enrichir les animations. PackshotViewer Guide utilisateur- page 7
Norme de nommage des fichiers Pour les animations 360 : Votre fichier image doit se nommer comme suit : votreimagex.jpg X représente le numéro de l image dans la séquence (vous pouvez mettre jusqu à 150 images). Exemple: chaussure1.jpg, chaussure2.jpg,... chaussure150.jpg Pour les animations 3D hémisphériques : Votre fichier image doit se nommer comme suit : Ny-xx.jpg. y représente le numéro de la rangée verticale = 1, 2, 3, 5. xx est un nombre à deux chiffres représentant le numéro de l image dans la série = 01, 02,... 24. Exemple: N1-01.jpg, N1-02.jpg,..., N1-24.jpg N2-01.jpg, N2-02.jpg,..., N2-24.jpg N3-01.jpg, N3-02.jpg..., N3-24.jpg... N5-01.jpg, N5-02.jpg,..., N5-24.jpg Pour les animations 3D sphériques: Votre fichier image doit se nommer comme suit : Ny-xx.jpg (pour la partie supérieure) et Sy-xx.jpg (pour la partie inférieure). y représente le numéro de la rangée verticale = 1, 2, 3, 4 ou 5. xx est un nombre à deux chiffres représentant le numéro de l image dans la séquence = 01, 02,... 24. Exemple: N1-01.jpg, N1-02.jpg,..., N1-24.jpg N2-01.jpg, N2-02.jpg,..., N2-24.jpg N3-01.jpg, N3-02.jpg..., N3-24.jpg S1-01.jpg, S1-02.jpg,..., S1-24.jpg S2-01.jpg, S2-02.jpg,..., S2-24.jpg S3-01.jpg, S3-02.jpg..., S3-24.jpg Seul PackshotViewer 3D vous permet de créer des animations 3D hémisphériques ou sphériques. PackshotViewer Guide utilisateur - page 8
Importer les animations et les organiser dans des groupes 1. Depuis l interface principale, cliquez sur Gérer les séquences et les annotations. L interface suivante va apparaître. 2. Pour créer un nouveau groupe, cliquez sur Ajouter un groupe et entrez le nom du groupe. Vous pourrez ensuite ajouter des animations dans ces groupes en cliquant sur Ajouter objet. Sélectionnez le dossier dans lequel vous aviez sauvegardé l animation et cliquez sur OK. Votre animation apparaîtra dans l interface. Vous pouvez organisez vos groupes en sélectionnant le groupe concerné dans le menu déroulant ; cliquez sur Supprimer pour le supprimer, Editer pour le renommer. Pour supprimer un objet, cliquez sur la vignette et sélectionnez Supprimer l objet. Note : supprimer un groupe ou un objet ne supprimera pas le fichier de votre ordinateur. PackshotViewer Guide utilisateur- page 9
Enrichir les animations 1. Depuis l interface principale, cliquez sur Gérer les séquences et les annotations. L interface suivante va apparaître. PackshotViewer Guide utilisateur - page 10
Cliquez sur l animation que vous souhaitez enrichir. Annotation : cliquez sur Annotations pour commencer à enrichir vos visuels. Voir l objet : cliquez sur Voir l objet pour afficher votre animation dans votre navigateur web par défaut. Supprimer object : vous permet de supprimer l animation du groupe. Cela ne supprimera pas le fichier sur votre disque dur. Retour au menu : vous permet de revenir au menu des groupes d animations. PackshotViewer Guide utilisateur- page 11
Enrichir les animations: paramètres généraux > Ratio Cette interface vous permet de définir un ratio de présentation pour votre animation. Sélectionnez le ratio désiré et visualisez le résultat sur la gauche. Une fois votre ratio défini, votre animation va conserver ce ratio et s adapter à la taille du navigateur dans lequel il s affiche. PackshotViewer Guide utilisateur - page 12
Enrichir les animations: paramètres généraux > Cadres Depuis l interface d annotation principale, cliquez sur Cadres et Icônes. Vous accédez à cette nouvelle interface. Pour ajouter un cadre à l animation, cliquez sur Afficher le cadre > Oui. Vous pourrez choisir plusieurs styles de cadre. Cliquez sur Afficher le cadre > Non pour enlever le cadre de l animation. PackshotViewer Guide utilisateur- page 13
Enrichir les animations: paramètres généraux > Personnalisation des icônes Les boutons de contrôles sont entièrement personnalisables. Plusieurs styles sont disponibles et vous pourrez choisir le style depuis le menu déroulant. Vous pourrez également créer vos propres icônes et les sauvegarder dans le répertoire PackshotViewer\HTML5\Icons. Switch: vous permet d afficher les 2 boutons Toggle: vous permet d afficher soit le premier soit le second bouton Cacher: vous permet de cacher les boutons Cochez Toujours afficher les icônes pour toujours faire apparaître les icônes. PackshotViewer Guide utilisateur - page 14
Enrichir les animations : définir des séquences de vue > Ajouter et éditer des vues Depuis l interface d annotation principale, cliquez sur Voir les pages. Vous accéderez à l interface suivante où vous pourrez définir les vues de votre produit à mettre en avant. Par défaut, la première vue s intitule Home. 1. 2. 3. 4. Pour modifier la position du produit sur la première vue, merci de vous référer au chapitre «Enrichir les animations > Positionnement du produit». Cliquez sur Ajouter pour ajouter une autre vue personnalisée. Vous pouvez ajouter jusqu à 8 vues personnalisées. Vous pourrez également définir l ordre d apparition des vues en vous aidant des flèches à la gauche des vues. Vous pouvez définir la durée de chaque vue. Définissez la durée de la vue en secondes. Ces paramètres seront utilisés en mode de visualisation AutoPlay où la séquence de vues personnalisées se lance automatiquement. PackshotViewer Guide utilisateur- page 15
5. 6. 7. Menu contextuel : définissez le texte qui apparaît lorsque l utilisateur effectue un clic droit sur l animation. Style d affichage initial : vous avez le choix entre 3 types de style d affichage : - Statique : l animation reste statique lorsqu elle s affiche sur la page - Roll-in : l animation tourne une fois puis devient statique - Rotation : l animation tourne de façon continue - AutoPlay : la séquence de vue personnalisée se lance automatiquement Montrer les boutons avec : vous avez ici 3 possibilités pour afficher le menu de navigation de l animation un menu de navigation comportant seulement du texte un menu de navigation comportant une vignette de la vue personnalisée un menu de navigation comportant une vignette et du texte 8. Pour que la séquence de vues personnalisées défile en continu, cochez Répéter Auto Play. PackshotViewer Guide utilisateur - page 16
Enrichir les animations: éditer le titre des vues et ajouter de l audio Depuis l interface d annotation principale, cliquez sur Voir les pages. 1. Pour éditer le nom des vues, sélectionnez le titre de la vue à modifier et cliquez sur Editer. 2. 3. Entrez le titre de la vue. Vous pouvez également ajouter un fichier audio qui sera lié à cette vue. Le fichier audio doit être au format mp3 ou wav. PackshotViewer Guide utilisateur- page 17
Enrichir les animations animations: positionnement du produit Dans l interface d annotation principale, utilisez les flèches pour choisir quelle vue vous souhaitez paramétrer. 1. Utilisez le slider pour définir l angle du produit de 0 à 360. 2. Utilisez le slider de zoom pour définir le niveau d agrandissement de l image. La taille d agrandissement principale dépend de la résolution de l image originale. 3. 4. Utilisez les sliders horizontaux et verticaux pour choisir la position du produit sur la vue. Pour une animation 3D hémisphérique ou sphérique, vous aurez également la possibilité de définir l angle du produit, du dessous au dessus. PackshotViewer Guide utilisateur - page 18
PackshotViewer Guide utilisateur- page 19
Enrichir les animations: ajouter des annotations Vous pouvez ajouter des annotations de texte, des images et des symboles directement sur l animation pour afficher plus d information sur votre produit. Pour cela, vous devrez tout d abord définir la vue personnalisée puis ajouter des annotations sur cette vue. Chaque vue peut contenir plusieurs annotations. L utilisateur peut définir la taille du symbole, sa couleur et son emplacement sur l image. Chaque symbole peut être associé à un fichier audio et peut comporter un lien externe. 1. Depuis l interface d annotation principale, sélectionnez la vue sur laquelle vous souhaitez ajouter un symbole. 2. Dans la partie Annotations, cliquez sur Ajouter. Ajouter une étiquette Une étiquette vous permet d ajouter du texte sur l animation accompagné d un titre. 1. Pour créer une nouvelle étiquette, cliquez sur Etiquette. PackshotViewer Guide utilisateur - page 20
2. Cliquez sur le champ de texte pour entrer votre texte personnalisé. Vous pouvez également définir la taille, l alignement, la couleur du texte. Cliquez sur OK pour sauvegarder. 3. 4. 6. 7. 8. Cliquez sur la barre de titre pour ajouter un titre à l étiquette. Cliquez sur OK. Pour ajouter un lien externe depuis le symbole, cliquez sur Lien. Définissez la façon dont le symbole apparaît sur l animation en utilisant les options du menu déroulant. Cliquez sur OK pour sauvegarder. Le symbole va apparaître sur l animation. Faites glisser le symbole sur l animation pour choisir son emplacement. PackshotViewer Guide utilisateur- page 21
9. 10. Ajouter un pointeur sur l animation en cliquant sur Ajouter dans la partie Pointeur. Faites un clic droit sur l animation pour placer le pointeur. Déplacez le pointeur en effectuant un clic droit sur un autre endroit de l animation. Pour supprimer le pointeur, sélectionnez-le et cliquez sur Supprimer. Vous pouvez éditer ou supprimer le symbole à n importe quel moment. Répétez ces étapes pour ajouter un autre symbole. Ajouter un logo Ajouter une miniature Vous pouvez ajouter une image directement sur l animation. L image peut être au format jpg ou png. PackshotViewer Guide utilisateur - page 22
Ajouter du texte libre Cliquez sur OK pour sauvegarder. Cliquez sur Annuler pour quitter sans sauvegarder. Note : chaque opération d enrichissement peut être éditée par la suite. PackshotViewer Guide utilisateur- page 23
Création automatique d un dossier Tous les fichiers, images et codes sont sauvegardés dans le dossier de l animation. Pour publier votre animation en ligne, uploader tout le dossier sur votre serveur FTP et ouvrez le fichier HTML5Viewer.html. Vous pouvez également visualiser votre animation enrichie en ouvrant le fichier HTML5Viewer.html. Note: pour des raisons de sécurité, le navigateur Chrome ne permet pas de lire les animations HTML5 hors ligne. Il n y a par contre aucune contrainte pour lire une animation HTML5 en ligne avec Chrome. Les animations HTML5 créées avec PackshotViewer sont compatible pour un affichage mobile ios ou Android. PackshotViewer Guide utilisateur - page 24
Visualiser l animation finale L utilisateur peut librement faire tourner le produit en effectuant un cliquer-glisser avec sa souris. Utilisez la molette de la souris pour zoomer dans le produit. Si vous avez configuré votre animation pour que les icônes ne s affichent pas, cliquez sur la flèche orange en bas à gauche pour afficher les annotations et les séquences de vue personnalisées. Cliquez sur l icône Play en bas à droite pour faire défiler la séquence de vues personnalisées. Cliquez sur chaque vue depuis le menu de navigation pour naviguer entre les vues personnalisées. PackshotViewer Guide utilisateur- page 25
PackshotViewer Guide utilisateur - page 26