Guide d'utilisation Annuler

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

Rechercher
Animate

Animate

Ouvrir l’application
  1. Guide d’utilisation d’Adobe Animate
  2. Présentation d’Animate
    1. Nouveautés d’Adobe Animate
    2. Glossaire visuel
    3. Configuration requise pour Animate
    4. Raccourcis clavier d’Animate
    5. Utiliser plusieurs types de fichiers dans Animate
  3. Animation
    1. Principes de base de l’animation dans Animate
    2. Utilisation des images et des images-clés dans Animate
    3. Animation image par image dans Animate
    4. Utiliser une animation interpolée classique dans Animate
    5. Outil Pinceau
    6. Guide du mouvement
    7. Interpolation de mouvement et ActionScript 3.0
    8. À propos de l’animation d’une interpolation interpolée de mouvement
    9. Animation d’une interpolation de mouvement
    10. Création d’une animation d’interpolation de mouvement
    11. Utilisation des images-clés de propriété
    12. Animation d’une position à l’aide d’une interpolation
    13. Modification des interpolations de mouvement avec l’Éditeur de mouvement
    14. Modification de la trajectoire de mouvement d’une animation d’interpolation
    15. Manipulation d’interpolations de mouvement
    16. Ajout d’accélérations personnalisées
    17. Création et application de présélections de mouvement
    18. Configuration de plages d’interpolation d’une animation
    19. Utilisation d’interpolations de mouvement enregistrées au format XML
    20. Interpolations de mouvement et interpolations classiques : comparatif
    21. Interpolation de forme
    22. Utilisation de l’animation de l’outil de segment dans Animate
    23. Utiliser un squelettage de personnage dans Animate
    24. Utilisation de calques de masque dans Adobe Animate
    25. Utilisation de séquences dans Animate
  4. Interactivité
    1. Création de boutons avec Animate
    2. Conversion de projets Animate en d’autres formats de document
    3. Création et publication de documents HTML5 Canvas dans Animate
    4. Ajout d’interactivité à l’aide de fragments de code dans Animate
    5. Création de composants HTML5 personnalisés
    6. Utilisation de composants dans HTML5 Canvas
    7. Création de composants personnalisés : exemples
    8. Fragments de code des composants personnalisés
    9. Pratiques recommandées – Publicité avec Animate
    10. Création et publication de contenu de réalité virtuelle
  5. Espace de travail et workflow
    1. Création et gestion des pinceaux
    2. Utilisation de polices Google Fonts dans les documents HTML5 Canvas
    3. Utilisation des bibliothèques Creative Cloud et d’Adobe Animate
    4. Utilisation de la scène et du panneau Outils pour Animate
    5. Workflow et espace de travail Animate
    6. Utilisation de polices web dans les documents HTML5 Canvas
    7. Scénarios et ActionScript
    8. Utilisation de plusieurs scénarios
    9. Définition des préférences
    10. Utilisation des panneaux de création Animate
    11. Création de calques de scénario avec Animate
    12. Exportation d’animations pour les applications mobiles et les moteurs de jeu
    13. Déplacement et copie d’objets
    14. Modèles
    15. Recherche et remplacement de contenu dans Animate
    16. Commandes Annuler et Rétablir, et panneau Historique
    17. Raccourcis clavier
    18. Utilisation du scénario dans Animate
    19. Création d’extensions HTML
    20. Options d’optimisation des images et des GIF animés
    21. Paramètres d’exportation des images et des fichiers GIF
    22. Panneau Éléments dans Animate
  6. Multimédia et vidéo
    1. Transformation et combinaison d’objets graphiques dans Animate
    2. Création et utilisation d’instances de symboles dans Animate
    3. Vectorisation de l’image
    4. Utilisation du son dans Adobe Animate
    5. Exportation de fichiers SVG
    6. Création de fichiers vidéo en vue de les utiliser dans Animate
    7. Comment ajouter une vidéo dans Animate
    8. Dessin et création d’objets avec Animate
    9. Remodelage des lignes et des formes
    10. Traits, remplissages et dégradés avec Animate CC
    11. Utilisation d’Adobe Premiere Pro et d’After Effects
    12. Panneaux Couleur dans Animate CC
    13. Ouverture de fichiers Flash CS6 à l’aide d’Animate
    14. Utilisation de texte classique dans Animate
    15. Placement d’illustrations dans Animate
    16. Images bitmap importées dans Animate
    17. Graphiques 3D
    18. Utilisation de symboles dans Animate
    19. Dessin de traits et de formes avec Adobe Animate
    20. Utilisation de bibliothèques dans Animate
    21. Exportation de sons
    22. Sélection d’objets dans Animate CC
    23. Utilisation de fichiers AI d’Illustrator dans Animate
    24. Application de modes de fusion
    25. Disposition d’objets
    26. Automatisation des tâches à l’aide du menu Commandes
    27. Texte multilingue
    28. Utilisation de la caméra dans Animate
    29. Filtres graphiques
    30. Sons et ActionScript
    31. Préférences de dessin
    32. Dessin avec l’outil Plume
  7. Plateformes
    1. Conversion de projets Animate en d’autres formats de document
    2. Prise en charge des plateformes personnalisées
    3. Création et publication de documents HTML5 Canvas dans Animate
    4. Création et publication d’un document WebGL
    5. Assemblage d’applications AIR pour iOS
    6. Publication d’applications AIR pour Android
    7. Publication pour Adobe AIR for Desktop
    8. Paramètres de publication d’ActionScript
    9. Pratiques recommandées – Organisation du code ActionScript dans une application
    10. Utilisation d’ActionScript avec Animate
    11. Accessibilité dans l’espace de travail Animate
    12. Écriture et gestion des scripts
    13. Activation de la prise en charge des plateformes personnalisées
    14. Présentation de la prise en charge des plateformes personnalisées
    15. Utilisation du plug-in de prise en charge des plateformes personnalisées
    16. Débogage du code ActionScript 3.0
    17. Activation de la prise en charge des plateformes personnalisées
  8. Exportation et publication
    1. Exportation de fichiers d’Animate CC
    2. Publication OAM
    3. Exportation de fichiers SVG
    4. Exportation d’images et de vidéos avec Animate
    5. Publication de documents AS3
    6. Exportation d’animations pour les applications mobiles et les moteurs de jeu
    7. Exportation de sons
    8. Pratiques recommandées – Conseils pour la création de contenu pour appareils mobiles
    9. Pratiques recommandées – Conventions des vidéos
    10. Pratiques recommandées – Recommandations sur la création d’applications SWF
    11. Pratiques recommandées – Structuration des fichiers FLA
    12. Pratiques recommandées d’optimisation des fichiers FLA pour Animate
    13. Paramètres de publication d’ActionScript
    14. Spécification des paramètres de publication pour Animate
    15. Exportation de fichiers de projection
    16. Exportation d’images et de GIF animés
    17. Modèles de publication HTML
    18. Utilisation d’Adobe Premiere Pro et d’After Effects
    19. Partage et publication rapides de vos animations
  9. Résolution des problèmes
    1. Problèmes résolus
    2. Problèmes connus

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

  1. Dans l’onglet Accueil, cliquez sur Avancé.

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

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

 

Liens associés

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Liens rapides

Voir toutes vos formules Gérer vos formules
Afficher les liens rapides
Masquer les liens rapides
Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire
Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

S’inscrire

Informations juridiques    |    Politique de confidentialité en ligne