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. 

Remarque :

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

panorama outside vacation wooden village home in sunny evening day . Full 360 degree seamless panorama in equirectangular spherical projection
  • 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é. 

360 VR

panorama outside vacation wooden village home in sunny evening day . Full 360 degree seamless panorama in equirectangular spherical projection
  • 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
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 :

  1. 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. 

  2. 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
    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é.

  3. 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. 

    Scène 360 VR
    Scène 360 VR

    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. 

  4. 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
    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. 

    Panneau Affichage VR
    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
    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
    Icône de barre transversale pour déplacer des objets
  5. 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. 

    Échantillon de sortie de 360 VR
    Échantillon de sortie de 360 VR
    Échantillon de sortie de panorama VR
    Échantillon de sortie de panorama VR

    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
    Paramètres de publication pour les bibliothèques

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.

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

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

    Importation de contenu 3D sur la scène
    Importation de contenu 3D sur la scène
  3. Ajoutez des animations et de l’interactivité semblables aux objets de clip et procédez à la publication.

    Vous pouvez également afficher un aperçu du modèle 3D dans l’affichage 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

Accès

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();

 

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne