Création et publication de contenu de réalité virtuelle

Dernière mise à jour le 24 mai 2023

Animate propose désormais les types de documents 360 VR et Panorama VR afin de vous aider à créer facilement du contenu attrayant. Vous pouvez également utiliser le nouveau type de document de réalité virtuelle pour importer des modèles 3D (sous la forme de fichiers .glb) dans votre projet Animate et créer des animations sur du contenu 3D.

Pour prévisualiser le contenu créé dans des types de document VR, vous pouvez utiliser le nouveau panneau Affichage VR. Vous pouvez cliquer et déplacer les occurrences de clips dans le panneau Affichage VR. Animate détecte les objets automatiquement lorsque vous cliquez dessus et les déplacez. L’affichage VR vous permet de placer les objets dans l’espace 3D. Les modifications effectuées au niveau du placement des objets (clips) dans l’affichage VR sont répercutées automatiquement sur la scène 2D. Vous pouvez également marquer des calques comme calques de texture sur le panneau Scénario, afin de les appliquer sur un cylindre ou une sphère pour les deux types de document respectifs.

Animate vous permet également de gérer les animations de réalité virtuelle au moment de l’exécution à l’aide d’un large éventail d’API. Vous pouvez, par exemple, introduire des objets dans un environnement de réalité virtuelle lorsque l’utilisateur clique sur un bouton.

Les réalités virtuelles (à 360°) et (de panorama) dans Animate sont des versions bêta pour la version d’octobre 2018.

Types de documents de réalité virtuelle

Il existe deux types de documents pour la réalité virtuelle (VR) :

Panorama VR

Utilisez ce type de document pour créer du contenu panoramique pour les applications de réalité virtuelle.
Dans ce type de document, le contenu qui est dessiné directement sur les calques de texture est enveloppé sur un cylindre.
Vous pouvez choisir d’avoir une image panoramique sur un calque de texture ou de dessiner un arrière-plan.
Animate convertit les animations 2D que vous créez en contenu panoramique avec de l’interactivité.

Scène

Utilisez ce type de document pour créer du contenu à 360° pour les applications de réalité virtuelle.
Dans ce type de document, le contenu qui est dessiné directement sur les calques de texture est appliqué sur une sphère.
Vous pouvez choisir d’avoir une image équirectangulaire ou de dessiner le contenu.
Animate convertit les animations 2D que vous créez en contenu à 360° avec de l’interactivité.

Panorama et vue à 360° en réalité virtuelle dans l’écran de lancement

Création et publication de contenu de réalité virtuel

Suivez les étapes ci-dessous pour créer le contenu dans virtual reality Animate :

Importez une image à 360° ou panoramique sur la scène pour l’arrière-plan.

Dans le cas d’une image de grande taille, vous pouvez ajuster la taille de la vue de scène.

Pour définir la taille, sélectionnez Modification > Document.
Cliquez sur Ajuster au contenu.

Sélectionnez l’icône Centrer la scène dans le coin supérieur droit de la fenêtre afin de définir l’image au centre de l’écran.

Pour créer un calque en tant que calque de texture, cliquez sur l’icône Créer un habillage de texture pour tous les calques dans le panneau Scénario, comme illustré ci-dessous :

Création d’une enveloppe de texture pour les calques

Le calque de texture enveloppe le cylindre ou la sphère, selon le type de document sélectionné.

Ajoutez des objets à la scène, ajoutez une interpolation de mouvement ou classique aux objets en fonction de vos ressources, puis créez votre animation.

La capture d’écran ci-dessus illustre la vue de scène d’Animate avec l’image équirectangulaire dans le type de document 360 VR, un oiseau avec une trajectoire de mouvement guidée et une interpolation classique dans le scénario.

Affichez un aperçu du contenu à l’aide de l’option Fenêtres > Affichage VR.

Utilisation de l’affichage VR pour l’aperçu du contenu VR

Cliquez sur le bouton Lancer l’affichage VR dans le panneau Affichage VR.

Dans le mode d’aperçu de l’affichage VR, utilisez le bouton Réinitialiser pour rétablir l’état initial du contenu. L’affichage VR ne reflète pas automatiquement les éventuelles modifications apportées à l’étape de création. Pour afficher les modifications appliquées à vos éléments dans l’environnement d’évaluation, cliquez sur Actualiser.

Options Actualiser et Rétablir de l’affichage VR

Vous pouvez déplacer les occurrences de clips dans le mode d’aperçu. Animate détecte les objets automatiquement lorsque vous les survolez avec la souris. Le curseur prend la forme d’une icône de barre transversale lorsque vous survolez les objets avec la souris, comme illustré ci-dessous. Vous pouvez déplacer les objets le long d’un cylindre ou d’une sphère selon le type de document sélectionné.

Pour effectuer un panoramique autour de la fenêtre Affichage VR, cliquez sur l’écran d’aperçu et faites-le glisser.

Icône de barre transversale pour déplacer des objets

Utilisez l’option Fichier > Publier ou appuyez sur Ctrl + Entrée pour publier le contenu. Lors de la publication, l’image est appliquée sur un maillage cylindrique ou sphérique dans Animate. Vous pouvez ajouter d’autres calques et du contenu d’animation sur ces calques.

L’échantillon de sortie de réalité virtuelle à 360° apparaît comme illustré sur le GIF animé ci-dessous.

Lorsque vous publiez du contenu de réalité virtuelle, vous pouvez choisir d’utiliser des bibliothèques JavaScript hébergées en tant qu’exécutable. Par défaut, Animate utilise l’exécutable pour le contenu publié à partir des bibliothèques hébergées. Vous pouvez désactiver l’option dans les paramètres de publication si vous souhaitez empaqueter l’exécutable avec votre sortie publiée.

Paramètres de publication pour les bibliothèques

Utilisation de la réalité virtuelle pour moderniser les animations

Actuellement, la réalité virtuelle est très en vogue dans le secteur de la vidéo. Vous voulez intégrer la réalité virtuelle dans votre contenu ? Regardez le tutoriel à la fin de cet exemple et suivez ces étapes.

Dans l’onglet Accueil, cliquez sur Avancé.

Sélectionnez Panorama VR et cliquez ensuite sur Créer.

Comment créer du contenu panoramique avec Animate ?

Regardez cette vidéo pour apprendre à ajouter des effets en vue panoramique afin d’améliorer une expérience virtuelle.

Tutoriel vidéo sur l’exportation WebGL-glTF (Standard et Étendu)

Vidéo montrant comment utiliser l’exportation WebGL-glTF (Standard et Étendu)

Utilisation de contenu 3D

Vous pouvez utiliser le type de document de réalité virtuelle pour importer des modèles 3D (fichiers .glb) dans votre projet Animate et créer du contenu 3D.

Créez un document de type Aperçu VR (360°) ou VR (panorama).

Sélectionnez Fichier > Importer et accédez au fichier .glb à importer dans la scène ou la bibliothèque.

Ajoutez des animations et de l’interactivité semblables aux objets de clip et procédez à la publication.

Vous pouvez également prévisualiser le modèle 3D dans la vue VR.

Utilisation de la réalité virtuelle au moment de l’exécution

Animate vous permet également de gérer les animations de réalité virtuelle au moment de l’exécution avec les API. Par exemple, vous pouvez introduire des objets dans un environnement de réalité virtuel à 360° lorsque l’utilisateur clique sur un bouton.

Voici la liste des API d’exécution de réalité virtuelle :

Package : anWebgl

Propriétés

Nom	Type/classe	Accès	Description	Exemple
Stage	Stage	RW	Obtention/définition des propriétés de scène	anWebgl.stage
virtualCamera	VirtualCamera	RW	Accès à la caméra par défaut	anWebgl.virtualCamera
Root	MovieClip	RO	Objet d’affichage le plus élevé (scénario de séquence en cours).	anWebgl.root

Méthodes

Nom	Prototype	Description	Exemple
addGLBFile	addGLBFile(filePath: string, successCallback : function, errorCallback : function):void	Chargement du modèle 3D à partir du fichier GLB spécifié	anWebgl.addGLBFile("model.glb" , successCallbackFunction, errorCallbackFunction).
playAll	playAll():void	Lecture de l’animation pour tous clips, y compris la racine	anWebgl.playAll();
stopAll	stopAll():void	Arrêt de l’animation pour tous les clips, y compris la racine	anWebgl.stopAll();

Classe : MovieClip

Héritage : DisplayObjectContainer

Propriétés

Méthodes

Nom	Prototype	Description	Exemple
Play	play():void	Lecture de l’animation pour le clip	anWebgl.root.getChildByName(« name »).play(); (ou) this.play();
Stop	stop():void	Arrêt de l’animation pour le clip	anWebgl.root.getChildByName("name").stop();
playAll	playAll():void	Lecture de l’animation pour tous les clips, y compris la racine	anWebgl.root.getChildAt(0).playAll();
stopAll	stopAll():void	Arrêt de l’animation pour tous les clips, y compris la racine	anWebgl.root.getChildAt(0)).stopAll();

Classe : DisplayObject

Héritage : IEventDispatcher

Nom	Prototype	Description	Exemple
hitTestPoint	hitTestPoint(x, y, Booléen).	renvoie displayObject/displayObjectContainer/movieClip en fonction du type d’objet touché. x et y sont des coordonnées de point sur l’écran.	anWebgl.root.hitTestPoint(300, 200, true, false);

Nom	Type/classe	Access	Description	Exemple
X	Number	RW	Translation sur l’axe des x	var name =anWebgl.root.getChildByName("name"); name.x+=10;
Y	Number	RW	Translation sur l’axe des y	var name = anWebgl.root.getChildByName("name"); name.y+=10;
Z	Number	RW	Translation sur l’axe des z	var name = anWebgl.root.getChildByName("name"); name.z+=10;
scaleX	Number	RW	Redimensionnement le long de l’axe des x	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleX=2;
scaleY	Number	RW	Redimensionnement le long de l’axe des y	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleY=10;
scaleZ	Number	RW	Redimensionnement le long de l’axe des z	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleZ=10;
rotationX	Number	RW	Rotation le long de l’axe des x	anWebgl.root.getChildByName("name").rotationX+=30; (ou) anWebgl.root.movieClip_name.rotationX+=30;
rotationY	Number	RW	Rotation le long de l’axe des y	anWebgl.root.getChildByName("name").rotationY+=30;
rotationZ	Number	RW	Rotation le long de l’axe des z	anWebgl.root.getChildByName("name").rotationZ+=30;
Parent	DisplayObjectContainer	RO	Conteneur parent	var root = anWebgl.root; var child = root.getChildAt(0); console.log(child.parent)
Visible	Boolean	RW	Visibilité de l’objet	var root = anWebgl.root; var child = root.getChildAt(0); console.log(child.visible);

Classe : DisplayObjectContainer

Héritage : DisplayObject

Nom	Prototype	Description	Exemple
numChildren	numChildren:num	renvoie le nombre d’enfants d’un objet	anWebgl.root.movieClipInstanceName.numChildren;
removeChild	removeChild(obj:DisplayObject):void	supprime l’objet d’argument s’il est présent	anWebgl.root.movieClipInstanceName.removeChild(childObj);
Contient	contains(obj:DisplayObject):boolean	renvoie true si l’objet d’argument est un enfant, false dans le cas contraire	anWebgl.root.movieClipInstanceName.contains(childObj);
getChildAt	getChildAt(index:Number): DisplayObject	renvoie l’enfant au niveau de l’index d’argument	anWebgl.root.movieClipInstanceName.getChildAt(2);
getChildByName	getChildByName(name:String):DisplayObject	renvoie l’enfant avec le nom de l’argument s’il existe	anWebgl.root.movieClipInstanceName.getChildByName(childName);

Classe : Stage

Propriétés

Nom	Accès	Description	Exemple
stageWidth	RO	Largeur de la scène	anWebgl.stage.stageWidth
stageHeight	RO	Hauteur de la scène	anWebgl.stage.stageHeight
Couleur	RW	Couleur d’arrière-plan de la scène	anWebgl.stage.color

Classe : VirtualCamera

Méthodes

Nom	Prototype	Description	Exemple
getCamera	getCamera()	Obtenir l’objet de caméra. Pour obtenir ou définir les propriétés de la caméra lors de l’exécution.	let cam = anWebgl.virtualCamera.getCamera(); let pos = cam.getPosition(); console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);
getPosition	getPosition()	Renvoie l’objet avec les propriétés « x », « y » et « z », qui spécifient l’emplacement actuel de la caméra.	let cam = anWebgl.virtualCamera.getCamera(); let pos = cam.getPosition(); console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);
setPosition	setPosition()	Déplace la caméra vers la position absolue donnée par les paramètres d’entrée. Valeur par défaut = 0.	let cameraPos = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().setPosition(cameraPos);
moveBy	moveBy()	Déplace la caméra par rapport à la position actuelle.	let moveByPos = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().moveBy(moveByPos);
resetPosition	resetPosition()	Rétablit la position de la caméra sur la position d’origine, c’est-à-dire (0,0,0).	anWebgl.virtualCamera.getCamera().resetPosition();
SetRotation	SetRotation()	Fait pivoter la caméra de l’angle absolu défini dans les paramètres d’entrée.	let __rotation__ = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().setRotation(__rotation__);
resetRotation	resetRotation()	Rétablit l’angle de la caméra sur zéro.	anWebgl.virtualCamera.getCamera().resetRotation();

Liens associés

Créez des animations interactives avec Animate
Animez des illustrations pour des dessins animés, des bannières, des jeux et des contenus web.

Ouvrir l’application

Pratiques recommandées – Publicité avec Animate

Comprendre

Apprenez avec des didacticiels vidéo étape par étape et des conseils pratiques directement dans l’application.

Communauté

Participez aux discussions, trouvez des réponses, apprenez auprès d'experts et partagez vos connaissances.

Accueil Adobe

Accédez à vos applications et services Creative Cloud préférés, à la gestion des fichiers et plus encore.