Création et publication d’un document 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.

 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 comprend désormais deux types de documents 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.

Publication d’un fichier WebGL-glTF

Convertir les animations aux formats GLTF et GLB

WebGL-glTF et GLBréduit la taille de fichier et le traitement d'exécution. Dans Animate, vous pouvez utiliser les documents dans les deux formats. Vous voulez utiliser vos vidéos dans les deux formats ? Regardez le tutoriel à la fin de cet exemple et suivez ces étapes.

Comment créer des animations avancées à l'aide de la fonction d'exportation GLTF de WebGL dans Animate

Regardez la vidéo pour savoir à quoi ressemble une animation dans les formats GLTF et GLB de WebGL.

Animate 18.0 et versions antérieures

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

Type de document WebGL

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

 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 fonctionnalités Animate prises en charge pour WebGL, consultez cet article de la base de connaissances.

Création d’un document WebGL

Dans Animate, 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.
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).

Aperçu du contenu WebGL sur 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, appuyez sur Ctrl + Entrée sous Windows ou Commande + Entrée sous Mac. Le navigateur par défaut s’ouvre avec le contenu WebGL.

Un serveur web est requis pour qu’Animate exécute le contenu WebGL. Animate 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 :

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

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.

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.

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.

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

 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 :

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.

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.

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.

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.

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.

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

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.

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

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

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

 

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

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

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.