Qu’est-ce que WebGL ?

WebGL est une norme Web ouverte qui permet d’effectuer le rendu des graphiques sur n’importe quel navigateur compatible, sans avoir recours à d’autres modules complémentaires. Il est entièrement intégré à toutes les normes Web du navigateur, ce qui permet d’utiliser le traitement des images et les effets accélérés par GPU dans la zone de travail de la page Web. Les éléments WebGL peuvent être incorporés à d’autres éléments HTML et combinés à d’autres parties de la page.

La plupart des navigateurs actuels prennent en charge le format WebGL. Toutefois, cliquez ici pour en savoir plus sur les versions exactes prises en charge.

Dans certains navigateurs, WebGL n’est pas pris en charge par défaut. Pour activer WebGL dans votre navigateur, consultez cet article.

Remarque :

veillez à activer WebGL dans votre navigateur, car il est désactivé par défaut dans certains navigateurs.

Utilisation du type de document WebGL-glTF (bêta)

Animate CC comprend désormais deux types de document WebGL-glTF. Vous pouvez utiliser le type de document WebGL-glTF Standard pour permettre l’intégration dans l’un des packages WebGL-glTF standard. Il est entièrement conforme aux normes.

  1. Pour créer un document basé sur WebGL-glTF, sélectionnez WebGL-glTF Standard ou WebGL-glTF Étendu dans le mode Avancé de l’écran d’accueil. 

    Type de document WebGL-glTF
    Type de document WebGL-glTF
  2. Spécifiez la largeur, la hauteur et les unités suivant vos besoins, puis cliquez sur Créer.

Publication d’un fichier WebGL-glTF

  1. Cliquez sur Paramètres de publication dans l’inspecteur des propriétés.

    Publication du fichier WebGL-glTF
    Publication du fichier WebGL-glTF
  2. Saisissez un nom dans la zone de texte Nom de la sortie.

    Boîte de dialogue Paramètres de publication du type de document WebGL-glTF Standard
    Boîte de dialogue Paramètres de publication du type de document WebGL-glTF Standard
  3. Sélectionnez GLB ou GLTF dans l’option Format.

  4. Spécifiez une valeur décimale entre 1 et 3 dans la zone de texte Résolution d’image.

  5. Cochez la case Supprimer les espaces blancs dans le fichier JSON pour réduire la taille du fichier.

  6. Par défaut, les options standard Scénario en boucle et Inclure les calques masqués sont sélectionnées. Vous pouvez les désélectionner pour détecter d’éventuelles erreurs mineures.

  7. Cliquez sur le bouton Publier pour publier le fichier.

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

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

Animate CC et versions antérieures

Vous pouvez vous reporter au contenu suivant si vous utilisez Animate CC 18.0 ou l’une des versions antérieures du programme.

Type de document WebGL

Animate CC permet de créer et de publier un contenu interactif enrichi au format WebGL (Web Graphics Library). WebGL est complètement intégré aux navigateurs. Animate peut donc utiliser le traitement des images et le rendu accélérés par GPU dans la zone de travail de la page Web.

Ce nouveau type de document vous permet de créer du contenu et de le publier rapidement pour une sortie WebGL. Créez un contenu enrichi à l’aide des puissants outils d’Animate, puis restituez la sortie WebGL dans n’importe quel navigateur compatible. En d’autres termes, vous pouvez utiliser le scénario, l’espace de travail et les outils de dessin traditionnels d’Animate pour créer du contenu, puis produire ensuite du contenu WebGL. WebGL est pris en charge par la plupart des navigateurs courants. Par conséquent, Animate peut restituer le contenu sur la plupart des plates-formes Web.

Remarque :

WebGL est pris en charge uniquement en tant qu’aperçu. Cette mise à jour d’Animate prend en charge des animations de base avec du son et des scripts, ainsi qu’un jeu de fonctions d’interactivité. D’autres fonctions seront disponibles dans les futures versions d’Animate pour les documents de type WebGL. Pour obtenir la liste complète des fonctions Animate prises en charge pour WebGL, consultez cet article de la base de connaissances.

Création d’un document WebGL

Dans Animate CC, le document WebGL permet de créer et de publier rapidement le contenu pour le format WebGL. Pour créer un document WebGL :

  1. Lancez Animate CC.
  2. Dans l’écran de bienvenue, cliquez sur l’option WebGL (Aperçu). Vous pouvez aussi sélectionner Fichier > Nouveau pour ouvrir la boîte de dialogue Nouveau document. Cliquez sur l’option WebGL (Aperçu).

Prévisualisation du contenu WebGL dans les navigateurs

Vous pouvez utiliser la fonction Tester l’animation d’Animate pour prévisualiser ou tester votre contenu. Pour afficher un aperçu, procédez comme suit :

  1. Dans Animate CC, appuyez sur Ctrl + Entrée sous Windows ou Commande + Entrée sur Mac. Le navigateur par défaut s’ouvre avec le contenu WebGL.
Un serveur Web est requis pour qu’Animate CC exécute le contenu WebGL. Animate CC comporte un serveur Web intégré configuré pour exécuter le contenu WebGL sur le port 8090. Si un serveur utilise déjà ce port, Animate le détecte automatiquement et résout le conflit.

Publication de contenu au format WebGL

Animate vous permet de créer et de publier le contenu WebGL en mode natif directement dans l’application.

Pour publier le document WebGL, procédez comme suit :

  1. Sélectionnez Fichier > Paramètres de publication pour ouvrir la boîte de dialogue correspondante. Vous pouvez aussi sélectionner Fichier > Publier si vous avez déjà spécifié les paramètres de publication pour WebGL.
  2. Dans la boîte de dialogue Paramètres de publication, spécifiez les valeurs pour :

Fichier de sortie

Donnez un nom significatif à la sortie. En outre, recherchez ou entrez l’emplacement où vous souhaitez publier la sortie WebGL.

Remplacer HTML

Permet d’indiquer si l’enveloppe HTML doit ou non être remplacée lors de la publication de votre projet WebGL. Vous pouvez désélectionner cette option si vous avez apporté des modifications externes au fichier HTML publié et souhaitez les conserver lors de la mise à jour de toute modification apportée à l’animation ou à des éléments d’Animate CC.

Inclure les calques masqués

Inclut tous les calques masqués dans la sortie WebGL. Si vous désactivez cette option, les calques (y compris ceux imbriqués dans les clips) signalés comme masqués ne sont pas exportés dans le document WebGL résultant. Vous pouvez ainsi facilement tester différentes versions de documents WebGL en rendant des calques invisibles.

Scénario en boucle

Répète le contenu lorsqu’il atteint la dernière image. Désactivez cette option pour arrêter la lecture du contenu après la dernière image.

webGL_publishSettings
  1. Cliquez sur Publier pour publier le contenu WebGL à l’emplacement spécifié.

Remarque :

la fréquence maximale pouvant être définie pour le contenu WebGL exécuté sur des navigateurs est de 60 i/s.

Présentation de la sortie WebGL

La sortie WebGL publiée contient les fichiers suivants :

Fichier d’enveloppe HTML

Comprend le moment de l’exécution, appelle les actifs et initialise le rendu WebGL. Par défaut, le fichier est nommé <FLA_nom>.html. Vous pouvez entrer un autre nom pour le fichier HTML dans la boîte de dialogue Paramètres de publication (Fichier > Paramètres de publication).

Le fichier HTML est placé dans le même répertoire que celui du fichier FLA par défaut. Vous pouvez préciser un autre emplacement dans la boîte de dialogue Paramètres de publication.

Fichier JavaScript (WebGL à l’exécution)

Restitue le contenu publié sur WebGL. Est publié dans le dossier libs/ du document WebGL. Le fichier est nommé comme suit : flwebgl-<version>.min.js

L’enveloppe HTML utilise ce fichier JS pour restituer le contenu WebGL.

Atlas de textures

Stocke toutes les valeurs de couleur (des formes), y compris les instances bitmap sur la scène.

Ajout d’audio à votre document WebGL

Vous pouvez importer et intégrer des données audio dans votre document WebGL, contrôler la lecture en utilisant les paramètres de synchronisation (événement, démarrer et arrêter), et lire les données audio de la chronologie à l’exécution. Actuellement, WebGL ne prend en charge que les formats .wav et .mp3.

Pour plus d’informations sur l’utilisation du contenu audio, voir Utilisation des sons dans Animate.

Migration de contenu existant vers un document WebGL

Vous pouvez faire migrer le contenu existant dans Animate vers un document WebGL, en le copiant ou en l’important manuellement. En outre, lorsque vous utilisez plusieurs documents dans Animate, vous pouvez copier le contenu dans les documents sous la forme de calques ou d’actifs dans la bibliothèque. Même si la plupart des fonctions d’Animate sont prises en charge, certains types de contenu sont modifiés en fonction du format WebGL.

Animate s’accompagne de puissantes fonctions permettant de produire un contenu visuellement enrichi. Cependant, certaines de ces fonctions étant natives dans Animate, elles ne seront pas prises en charge dans un document WebGL. Animate a été conçu pour modifier un tel contenu dans un format pris en charge et indique visuellement quand un outil ou une fonction n’est pas pris en charge.

Copier

du contenu (calques ou symboles de la bibliothèque) d’un document Animate de type classique (par exemple ActionScript 3.0, AIR for Android, AIR for Desktop, etc.) dans un document WebGL. Dans ce cas, le type de contenu non pris en charge est supprimé ou converti en valeurs par défaut prises en charge.

Par exemple, le fait de copier une animation 3D supprime toutes les transformations 3D appliquées aux objets sur la scène.

Importer

un fichier PSD ou AI qui contient le contenu non pris en charge. Dans ce cas, le contenu est supprimé ou converti en valeurs par défaut prises en charge.

Par exemple, si vous importez un fichier PSD sur lequel sont appliqués des effets de flou, Animate supprime l’effet.

Utiliser

plusieurs types de documents (par exemple, ActionScript 3.0 et WebGL) simultanément et permuter entre les documents avec un outil ou une option sélectionné non pris en charge. Dans ce cas, Animate CC indique visuellement que la fonction n’est pas prise en charge.

Par exemple, vous avez créé une ligne pointillée dans un document ActionScript 3.0 et êtes passé en mode WebGL alors que l’outil Ligne était toujours sélectionné. Observez le pointeur et l’inspecteur des propriétés : ils indiquent visuellement que la ligne pointillée n’est pas prise en charge dans WebGL.

Scripts

Vous pouvez écrire du code JavaScript dans le panneau Actions, qui sera exécuté une fois que le lecteur affiche l’image. La variable « this » dans le contexte des scripts d’image fait référence à l’occurrence de MovieClip auquel elle appartient. Par ailleurs, les scripts d’image peuvent accéder aux fonctions et variables JavaScript déclarées dans le fichier HTML conteneur. Lorsque vous copiez une image ou un calque à partir d’un document ActionScript et que vous le collez dans un document WebGL, les scripts seront commentés, le cas échéant.

Modifications appliquées au contenu après la migration

Voici une liste des types de modifications appliquées lorsque vous faites migrer le contenu existant vers un document WebGL.

Le contenu est supprimé

Les types de contenu non pris en charge dans HTML5 Canvas sont supprimés. Par exemple :

Filtres

ne sont pas pris en charge. L’effet sera supprimé et la forme adoptera un fond uni.

Filters
L’effet de filtre Flou est supprimé et remplacé par un fond uni.

Le contenu est modifié en une valeur par défaut prise en charge

Le type de contenu ou la fonction est pris en charge, mais une propriété de la fonction ne l’est pas. Par exemple :

 

Dégradé radial

est modifié pour adopter un fond uni avec la couleur principale.

Radial Gradient
Le dégradé radial est modifié pour adopter un fond uni avec la couleur principale.

Pour obtenir la liste complète des fonctions qui ne sont pas prises en charge et de leurs valeurs de substitution pendant la migration, consultez cet article.

Amélioration des performances de rendu grâce à la mise en cache sous forme de bitmap

La mise en cache des images bitmap à l’exécution permet d’optimiser les performances du rendu en spécifiant qu’un clip statique (une image d’arrière-plan, par exemple) ou un symbole de bouton doit être mis en cache sous forme de bitmap lors de l’exécution. Par défaut, les éléments vectoriels sont redessinés dans chaque image. La mise en cache d’un clip ou d’un symbole de bouton en tant que bitmap empêche le navigateur d’avoir à redessiner continuellement l’élément, car l’image est un bitmap et sa position ne change pas. Ceci améliore considérablement les performances de rendu du contenu WebGL.

Lorsque vous créez une animation dont l’arrière-plan est complexe, par exemple, regroupez tous les éléments de l’arrière-plan dans un clip. Sélectionnez ensuite Mettre en cache en tant que bitmap pour le clip dans l’inspecteur des propriétés. À la lecture, l’arrière-plan est rendu sous forme d’un bitmap stocké à la profondeur d’écran actuelle. Le navigateur dessine rapidement, une seule fois, le bitmap sur la scène, d’où une lecture plus rapide et fluide.

La mise en cache d’un clip sous forme de bitmap permet de figer ce clip en place automatiquement. En cas de modification d’une zone, les données vectorielles mettent à jour le cache de bitmaps. Le nombre de retraçages que le navigateur doit effectuer en est donc réduit, ce qui permet des performances de rendu plus fluides et plus rapides.

Pour activer la propriété Cache en tant que bitmap pour un symbole de clip, sélectionnez l’instance de clip et sélectionnez Cache en tant que bitmap dans le menu déroulant Inspecteur de propriétés (Fenêtre > Propriétés).

CacheAsBitmap

Considérations liées à l’utilisation de Cache en tant que bitmap

Lors de l’utilisation de la propriété Cache en tant que bitmap sur du contenu WebGL, tenez compte des points suivants :

  • La taille maximale du symbole de clip est limitée à 2 048 x 2 048. Notez que les limites actuelles de l’instance de clip qui peuvent être masquées sont inférieures à 2 048 x 2 048, WebGL réservant certains pixels.
  • S’il existe plusieurs instances du même clip, Animate génère le cache avec la taille de la première instance rencontrée. Toutefois, le cache n’est pas généré à nouveau et la propriété Cache en tant que bitmap n’est pas ignorée, même si la transformation du clip change dans une large mesure. Par conséquent, si le symbole de clip augmente considérablement au cours de l’animation, il se peut que cette dernière semble pixellisée.

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