Création et publication de documents HTML5 Canvas dans Animate

Canvas est un nouvel élément dans HTML5, qui fournit des API grâce auxquelles vous pouvez générer et restituer de façon dynamique des graphiques, des diagrammes, des images et des animations. L’API Canvas pour HTML5 perfectionne la plateforme HTML5 en fournissant des fonctions de dessin bidimensionnelles. Ces fonctions sont prises en charge par la plupart des systèmes d’exploitation et navigateurs actuels.

Grosso modo, Canvas est un moteur de rendu de bitmaps ; les dessins sont définitifs et ne peuvent pas être redimensionnés. En outre, les objets dessinés sur Canvas ne font pas partie du DOM de la page web.

Dans une page web, vous pouvez ajouter des éléments Canvas à l’aide de la balise <Canvas>. Vous pouvez les rendre interactifs en utilisant du code JavaScript. Pour plus d’informations, suivez ce lien.

Le nouveau type de document HTML5 Canvas

Animate·permet·de·créer·un·document·HTML5 Canvas·qui contient des illustrations, des graphiques, des animations, etc. enrichis. Un nouveau type de document (HTML5 Canvas) ajouté à Animate assure une prise en charge native pour créer un contenu HTML5 riche et interactif. En d’autres termes, vous pouvez utiliser le scénario, l’espace de travail et les outils traditionnels d’Animate pour créer du contenu, puis produire ensuite une sortie HTML5. Quelques clics suffisent pour créer un document HTML5 Canvas et générer une sortie entièrement fonctionnelle. À cette fin, les options de document et de publication dans Animate sont prédéfinies afin de générer une sortie HTML5.

Animate est intégré à CreateJS, ce qui permet de produire un contenu interactif enrichi sur les technologies web ouvertes par l’intermédiaire de HTML5. Animate génère du code HTML et JavaScript pour le contenu (bitmaps, vecteurs, formes, sons, interpolations, etc.) créé sur la scène. La sortie peut être exécutée sur tous les périphériques ou navigateurs compatibles avec HTML5 Canvas.

Animate et l’API Canvas

Animate utilise l’API Canvas pour publier du contenu au format HTML5. Il convertit en contreparties Canvas les objets créés dans la scène et ce, de manière transparente. Il permet de publier du contenu complexe en HTML5 grâce au mappage 1:1 des fonctions Animate avec les API dans Canvas.

Création d’un document HTML5 Canvas

Pour créer un document HTML5 Canvas, procédez comme suit :

1. Sélectionnez Fichier > Nouveau pour ouvrir la boîte de dialogue Nouveau document. Sélectionnez l’onglet Avancé en haut de l’écran et cliquez ensuite sur l’option HTML5 Canvas. Dans le fichier FLA qui s’ouvre, les paramètres de publication ont été modifiés pour générer la sortie HTML5.

Vous pouvez maintenant commencer à créer du contenu HTML5 à l’aide des outils disponibles dans Animate. Lorsque vous commencez à travailler avec le document HTML5 Canvas, certains outils et fonctions ne sont pas pris en charge et sont désactivés. En effet, Animate prend en charge les fonctions qui sont elles-mêmes prises en charge par l’élément Canvas dans HTML5. Par exemple, les transformations 3D, les lignes en pointillés et les effets de biseau ne sont pas pris en charge.

Rendre le document HTML5 Canvas interactif

Animate publie le contenu HTML5 en utilisant les bibliothèques CreateJS. La suite de bibliothèques et d’outils modulaires CreateJS permet de produire un contenu interactif riche sur les technologies web ouvertes au moyen de HTML5. Elle se compose des éléments suivants : EaselJS, TweenJS, SoundJS et PreloadJS. CreateJS convertit en HTML5 le contenu créé sur scène à l’aide de ces différentes bibliothèques, pour générer des fichiers de sortie HTML et JavaScript. Vous pouvez également améliorer le contenu en manipulant ce fichier JavaScript.

Toutefois, Animate permet de rendre interactifs des objets sur la scène créés dans l’application pour HTML5 Canvas. Ainsi, vous pouvez ajouter du code JavaScript aux objets individuels sur scène directement dans Animate et les prévisualiser au moment de la création. Animate assure alors une prise en charge native du code JavaScript à l’aide des fonctions utiles de l’éditeur de code, afin de rendre plus efficaces les processus des programmeurs.

Pour rendre votre contenu interactif, sélectionnez des images et des images-clés individuelles dans le scénario. Vous pouvez rendre un document HTML5 Canvas interactif à l’aide de JavaScript. Pour en savoir plus sur la rédaction du code JavaScript, cliquez ici.

Il est possible d’écrire le code JavaScript directement dans le panneau Actions, qui prend en charge les fonctions suivantes lors de l’écriture de code JavaScript :

Permet d’insérer et de modifier rapidement le code JavaScript, sans erreur. À mesure que vous tapez des caractères dans le panneau Actions, une liste de suggestions s’affiche et vous aide à compléter votre saisie.

En outre, Animate prend en charge certaines fonctions inhérentes au panneau Actions lorsque vous utilisez HTML5 Canvas. Ces fonctions permettent d’améliorer l’efficacité du processus en rendant des objets sur la scène interactifs. Il s’agit des fonctions suivantes :

Affiche le code dans différentes polices ou couleurs en fonction de la syntaxe. Cette fonction permet de rédiger le code d’une manière structurée, vous aidant ainsi à différencier visuellement le code correct et les erreurs de syntaxe.

Affiche le code dans différentes couleurs en fonction de la syntaxe. Vous pouvez ainsi distinguer visuellement les différentes parties d’une syntaxe.

Ajoute automatiquement les crochets/parenthèses fermants et ouvrants lors de la rédaction de code JavaScript.

Vous pouvez rendre des formes ou des objets sur la scène interactifs à l’aide de JavaScript. Vous pouvez aussi ajouter du code JavaScript à des images et images clés individuelles.

1. Sélectionnez l’image à laquelle vous souhaitez ajouter du code JavaScript.
2. Pour ouvrir le panneau Actions, sélectionnez Fenêtre >Actions.

Utilisation des fragments de code JavaScript

Vous pouvez ajouter de l’interactivité en utilisant les fragments de code JavaScript disponibles dans Animate. Pour accéder aux fragments de code et les utiliser, sélectionnez Fenêtre > Fragments de code. Pour plus d’informations sur l’ajout de fragments de code JavaScript, reportez-vous à cet article.

Références à la documentation CreateJS

Codes d'induction d'interactivité

Javascript vous offre une variété d'options pour rendre l'animation interactive. Vous voulez apprendre à ajouter des mouvements interactifs à votre personnage ? Regardez le didacticiel à la fin de cet exemple et suivez ces étapes.

Comment rendre votre contenu interactif avec HTML5

Publication d’animations au format HTML5

Pour publier du contenu sur scène vers HTML5, procédez comme suit :

1. Sélectionnez Fichier > Paramètres de publication.
2. Dans la boîte de dialogue Paramètres de publication, spécifiez les paramètres suivants :

Paramètres simples

Répertoire de publication du fichier FLA. Il s’agit, par défaut, du même répertoire que celui du fichier FLA, mais vous pouvez le changer en cliquant sur le bouton de navigation « ... ».

Lorsque cette option est activée, le scénario est exécuté en boucle ; dans le cas contraire, il s’arrête une fois la lecture achevée.

Si cette option est désactivée, les calques masqués ne sont pas inclus dans la sortie.

Permet aux utilisateurs de spécifier si la scène doit être centrée horizontalement, verticalement ou les deux. La scène ou le plan de travail HTML s’affiche au centre de la fenêtre du navigateur par défaut.

Permet aux utilisateurs de spécifier si l’animation doit réagir par rapport à la largeur, à la hauteur ou les deux et redimensionne la sortie publiée en fonction de différents facteurs de forme. Il en résulte une sortie HiDPI réactive, plus nette et plus précise.

La sortie s’étend également pour couvrir la zone entière de l’écran sans bordures, mais conserve les proportions d’origine, bien qu’une partie du plan de travail puisse ne pas être visible.

• Avec les options Largeur, Hauteur ou Les deux, le contenu entier est mis à l’échelle selon la taille du plan de travail et est visible même sur un petit écran (appareils mobiles ou tablettes, par exemple). Si la taille de l’écran est supérieure à la taille de la scène de création, le plan de travail s’affiche à sa taille d’origine.

Permet aux utilisateurs de spécifier si l’animation doit être adaptée pour afficher la sortie en mode plein écran ou être adaptée à la taille de l’écran. Cette option est désactivée par défaut.

Ajuster à la vue : affiche la sortie en mode plein écran en utilisant tout l’espace à l’écran et en conservant les proportions.

Étirer pour ajuster : étire la sortie pour qu’elle s’affiche sans bordures.

Permet aux utilisateurs de spécifier s’ils souhaitent utiliser le fichier de préchargement par défaut ou un fichier de préchargement de leur choix de la bibliothèque de documents.

Le fichier de préchargement est un indicateur visuel sous forme d’un fichier GIF animé qui s’affiche pendant le chargement des scripts et des actifs requis pour le rendu d’une animation. Une fois les actifs chargés, le fichier de préchargement est masqué et l’animation réelle est affichée.

Par défaut, l’option de préchargement n’est pas sélectionnée.

• L’option Par défaut permet d’utiliser la méthode de préchargement par défaut ;
• l’option Parcourir permet de choisir le fichier GIF de préchargement. Le fichier GIF de préchargement est copié dans le dossier d’images configuré dans le volet Exporter des éléments d’image.
• Utilisez l’option Aperçu pour prévisualiser le fichier GIF sélectionné.

Utilisez les options d’activation/désactivation pour choisir de publier au niveau de la racine ou du sous-dossier. Ce bouton est Activé par défaut. Si vous sélectionnez Désactivé, le champ du dossier est désactivé et les éléments sont exportés dans le même dossier que le fichier de sortie.

Exportation d’un document comme texture Exportez l’animation vectorielle sous la forme de textures afin d’améliorer les performances des animations. Pour plus d’informations, voir Publication de textures.

 Cela s’applique uniquement lorsque l’option Regrouper dans feuille Sprite est désactivée.

Il est possible d’exporter toutes les images importées (y compris celles qui sont compressées) d’un document Canvas en conservant sa taille. Désactivez les options Exporter le document comme texture et Regrouper dans feuille Sprite dans l’onglet Base. Les images sont exportées sans que leur taille soit modifiée.

Dossier dans lequel sont placés les éléments d’images et à partir duquel ils sont référencés.

Regrouper dans des feuilles Sprite : sélectionnez cette option pour regrouper tous les éléments d’image dans une feuille Sprite. Pour plus d’options de feuilles Sprite, voir Exportation des bitmaps comme une feuille Sprite .

Dossier dans lequel sont placés les éléments sonores du document et à partir duquel ils sont référencés.

Dossier dans lequel sont placées les bibliothèques CreateJS et à partir duquel elles sont référencées.

 Le paramètre par défaut continue à publier des fichiers répartis dans des sous-dossiers logiques.

Paramètres avancés

URL relatives pour exporter des images et des sons et prendre en charge les bibliothèques JavaScript CreateJS. Si vous ne cochez pas la case de droite, ces actifs ne sont pas exportés depuis le fichier FLA, mais le chemin spécifié est tout de même utilisé pour assembler leurs URL. Cette option facilite la publication depuis un fichier FLA comportant de nombreux actifs multimédias et évite le remplacement des bibliothèques JavaScript modifiées.

Grâce à l’option Exporter tous les bitmaps comme des feuilles Sprite, vous pouvez rassembler dans une feuille Sprite tous les bitmaps du document du plan de travail, et réduire ainsi le nombre de requêtes de serveur et améliorer les performances. Vous pouvez définir la taille maximale de la feuille Sprite en spécifiant les valeurs de hauteur et de largeur.

Utiliser la valeur par défaut : publiez votre sortie HTML5 en utilisant le modèle par défaut.

Importer nouveau : importez un nouveau modèle pour votre document HTML5.

Exporter : exportez votre document HTML5 comme un modèle.

Si cette option est activée, les copies des bibliothèques hébergées sur le CDN CreateJS à l’adresse code.createjs.com sont utilisées. Cette option permet de mettre en cache les bibliothèques en vue de les partager sur divers sites.

Si cette option est désactivée, les calques masqués ne sont pas inclus dans la sortie.

Si cette option est activée, les instructions vectorielles sont produites sous forme compactée. Désactivez cette option pour exporter des instructions lisibles et détaillées (option utile à des fins didactiques).

Si vous activez cette option, les symboles du scénario incluent une propriété frameBounds contenant un tableau de rectangles qui correspond aux limites de chaque image dans le scénario. Les limites des images multiples augmentent considérablement la durée de publication.

Si l’option Inclure le code JavaScript dans le fichier HTML est sélectionnée, la case Remplacer le fichier HTML à la publication est cochée et activée. Si vous décochez la case Remplacer le fichier HTML à la publication, l’option Inclure le code JavaScript dans le fichier HTML est décochée et désactivée.

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

 Une animation conçue à l’aide de scénarios imbriqués, avec une seule image, ne peut pas être lue en boucle.

Variables des modèles HTML

Quand vous importez un nouveau modèle HTML personnalisé, pendant la publication, les variables par défaut sont remplacées par les fragments de code personnalisés en fonction des composants de votre fichier FLA. 

Le tableau suivant répertorie les variables de modèle actuellement reconnues et remplacées par Animate :

Les jetons suivants issus des versions précédentes sont obsolètes dans la présente version :

 Ces jetons sont modularisés et remplacés par d’autres jetons.

Prise en charge JSAPI pour importer et exporter des modèles HTML pour les documents Canvas

Les commandes JSAPI suivantes prennent en charge l’importation et l’exportation de modèles HTML pour les documents Canvas :

• Exporte le modèle de publication HTML5 Canvas pour un document donné, à l’emplacement spécifié :

bool document::exportCanvasPublishTemplate(pathURI)

• Exemple :

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be exported”);

• Importe et définit le modèle de publication HTML5 Canvas pour un document donné, à partir de l’emplacement pathURI spécifié :
  

bool document::importCanvasPublishTemplate(pathURI)

• Exemple : 

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be imported”);

Code JavaScript incorporé au code HTML

Animate permet d’inclure le fichier JS dans le fichier HTML durant la publication du plan de travail.

1. Dans le menu Paramètres de publication, passez à l’onglet Avancé et sélectionnez Inclure le code JavaScript dans le fichier HTML. 
2. Dans la boîte de dialogue Inclure le code JavaScript dans le fichier HTML à la publication, cliquez sur OK pour republier le contenu écrasant le code HTML.
3. Ceci désactive la case à cocher Remplacer le fichier HTML à la publication ; pendant un événement de publication, le code HTML est généré mais pas écrasé.
4. Sous Arrêter d’inclure le code JavaScript dans le fichier HTML, cliquez sur OK pour exclure le code JavaScript et republier le fichier HTML.
5. Si l’option Remplacer le fichier HTML à la publication n’est pas sélectionnée, l’option Inclure le code JavaScript dans le fichier HTML est automatiquement désactivée. 

 Si vous ne souhaitez pas que le code HTML soit remplacé, les options Remplacer le fichier HTML à la publication et Inclure le code JavaScript dans le fichier HTML ne peuvent pas coexister.

Ajout de scripts globaux et tiers

Les animateurs utilisent souvent du code JavaScript applicable à la totalité de l’animation. Grâce à cette fonction, vous pouvez ajouter des scripts globaux et tiers spécifiques non graphiques qui peuvent être appliqués à toute l’animation depuis Animate. 

Pour ajouter et utiliser des scripts globaux, procédez comme suit : 

Ajout de scripts tiers

Il arrive souvent que les animateurs incorporent des bibliothèques JavaScript tierces, mais ils doivent au préalable modifier manuellement le code généré par Animate. Grâce à cette fonction, les animateurs peuvent plus facilement utiliser les dernières versions des bibliothèques JavaScript ou du code pour l’animation.

Pour ajouter des scripts tiers, procédez comme suit : 

Fusion des données JSON dans JS

D’après les commentaires des utilisateurs et du fait que les fichiers JSON ne sont en soi pas sécurisés, nous avons fusionné les données appropriées avec le fichier JS ; ainsi, aucun fichier JSON distinct n’est créé.

Optimisation des sorties HTML5 Canvas

Animate optimise la taille et les performances des sorties HTML5 Canvas comme suit :

• Exportation de bitmaps comme une feuille Sprite à l’aide des options de l’onglet Feuille Sprite dans les Paramètres de publication.
• En excluant les calques masqués (en désélectionnant l’option Inclure les calques invisibles) de la sortie publiée.
• En excluant tous les éléments inutilisés tels que les sons et les bitmaps, ainsi que tous les éléments des images inutilisées (par défaut).
• En spécifiant de ne pas exporter les éléments du fichier FLA en désélectionnant les options d’exportation des actifs pour les images et les sons, en prenant en charge les bibliothèques JavaScript CreateJS et en utilisant les URL relatives pour l’exportation.
• Sortie HTML5 Canvas compatible avec HiDPI : Animate met à l’échelle la sortie en fonction de la résolution de l’appareil sur lequel est affiché le contenu. Cette compatibilité permet de générer une sortie plus nette lors de l’utilisation du zoom et corrige également les problèmes de pixellisation des documents Canvas lorsque vous affichez la sortie HTML5 Canvas sur un ordinateur haute résolution.
  

Définition d’un arrière-plan de travail transparent

Vous pouvez personnaliser le plan de travail en différentes couleurs et également modifier sa transparence d’affichage. Lorsque vous créez un plan de travail transparent, vous pouvez afficher le contenu HTML sous-jacent durant la publication.

Remarque : Ce paramètre rend l’arrière-plan transparent pendant la publication OAM.

1. Choisissez le plan de travail à modifier.
2. Dans le volet Propriétés, sélectionnez Scène.
3. Dans la scène, définissez les valeurs de pourcentage pour Alpha.

Prise en charge du nuancier « Aucune couleur »

Vous pouvez également utiliser l’option Aucune couleur du nuancier pour rendre l’arrière-plan de travail transparent :

1. Sélectionnez Modification > Document > Couleur de la scène ou dans l’Inspecteur des propriétés, sélectionnez Paramètres avancés.
2. Dans le nuancier Couleur de la scène, sélectionnez Aucune couleur.

Exportation des bitmaps comme une feuille Sprite

L’exportation sous forme de feuille Sprite d’un certain nombre de bitmaps que vous avez utilisés dans votre document HTML5 Canvas réduit le nombre de requêtes de serveur et la taille de la sortie, et améliore les performances. Vous pouvez exporter la feuille Sprite au format PNG (par défaut), JPEG ou les deux.

1. Dans l’onglet Feuille Sprite, activez la case à cocher Regrouper les éléments d’image dans des feuilles Sprite.
2. Sélectionnez le Format PNG, JPEG ou Les deux.
   
3. Si vous avez sélectionné PNG ou Les deux, spécifiez les options suivantes sous Paramètres PNG :
   • Qualité : définissez la qualité de la feuille Sprite : 8 bits (par défaut), 24 bits ou 32 bits.
   • Taille max. : spécifiez la hauteur et la largeur maximales de la feuille Sprite, en pixels.
   • Arrière-plan : cliquez et définissez la couleur d’arrière-plan de la feuille Sprite.
4. Si vous avez sélectionné JPEG ou Les deux, spécifiez les options suivantes sous Paramètres JPEG :
   
   • Qualité : définissez la qualité de la feuille Sprite.
   • Taille max. : spécifiez la hauteur et la largeur maximales de la feuille Sprite, en pixels.
   • Arrière-plan : cliquez et définissez la couleur d’arrière-plan de la feuille Sprite.

Utilisation du texte dans le document HTML5 Canvas

Le plan de travail HTML prend en charge le texte statique et dynamique.

Texte statique

Le texte statique offre plus de latitude : tous les éléments sont convertis en contours au moment de la publication, ce qui fournit à l’utilisateur un excellent environnement tel écrit, tel écran. Le texte est publié sous forme de contours vectoriels, vous ne pouvez pas les modifier au moment de l’exécution.

Remarque : Un recours trop intensif au texte statique peut gonfler la taille du fichier.

Texte dynamique

Le texte dynamique permet de modifier le texte au moment de l’exécution et n’augmente pas de manière significative la taille du fichier. Il prend en charge moins d’options que le texte statique. Il prend également en charge les polices web par l’intermédiaire d’Adobe Fonts.

Si vous employez du texte dynamique avec des polices indisponibles sur les ordinateurs de l’utilisateur final, la sortie utilise la police par défaut pour l’affichage et biaise ainsi l’expérience utilisateur. Ces problèmes sont résolus avec les polices web.

Ajout de polices web au document HTML5 Canvas

Animate propose des polices web pour le texte dynamique des documents HTML5 Canvas. Adobe Fonts fournit un accès direct à des milliers de polices de qualité supérieure mises au point par nos meilleures fonderies partenaires. Vous pouvez accéder aux polices Adobe Fonts et les utiliser simplement dans votre sortie HTML5 pour les navigateurs et les terminaux mobiles modernes, en utilisant votre abonnement Creative Cloud.

Pour en savoir plus sur l’utilisation des polices web d’Adobe Fonts dans Animate, voir Utilisation de polices web dans un document HTML5 Canvas.

Animate 2015.2 améliore l’environnement visuel du texte dynamique dans un document Canvas, de sorte que la scène et les aspects publiés soient synchronisés.

Remarque : Les polices Adobe Fonts ne sont pas disponibles pour le texte statique.

Présentation de la sortie HTML5 Canvas

La sortie HTML5 publiée contient les fichiers suivants :

Contient des définitions pour tous les objets, formes et illustrations de l’élément Canvas. Il invoque également l’espace de noms CreateJS pour convertir Animate en HTML5 et le fichier JavaScript correspondant qui contient des éléments interactifs. 

Contient des définitions dédiées ainsi que le code pour tous les éléments interactifs de l’animation. Le code pour tous les types d’interpolation est également défini dans le fichier JavaScript.

Ces fichiers sont copiés au même emplacement que celui du fichier FLA par défaut. Vous pouvez modifier cet emplacement en spécifiant le chemin d’accès de la sortie dans la boîte de dialogue Paramètres de publication (Fichier > Paramètres de publication).

Migration de contenu existant vers HTML5 Canvas

Vous pouvez faire migrer le contenu existant dans Animate pour générer une sortie HTML5. À cette fin, Animate vous permet de faire migrer le contenu en copiant ou en important manuellement des calques, des symboles et d’autres éléments de bibliothèque individuels. Vous pouvez aussi exécuter la commande Convertir AS3 en document HTML5 Canvas pour exporter automatiquement le contenu ActionScript existant vers un nouveau document HTML5 Canvas. Pour plus d’informations, suivez ce lien.

Toutefois, lorsque vous utilisez des documents de type HTML5 dans Animate, certaines fonctions d’Animate ne sont pas prises en charge. Cela est dû au fait que ces fonctions dans Animate n’ont pas de fonctions correspondantes dans l’API Canvas. Elles ne peuvent donc pas être utilisées dans le document de type HTML5 Canvas. Cela peut se produire au cours de la migration de contenu, lorsque vous essayez d’effectuer les opérations suivantes :

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 HTML5. 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 est appliqué l’effet Biseau dégradé, Animate supprime l’effet.

plusieurs types de documents (par exemple, ActionScript 3.0 et HTML5 Canvas) 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 HTML5 Canvas alors que l’outil Ligne était toujours sélectionné. Observez le pointeur et l’inspecteur des propriétés : des icônes s’y affichent pour indiquer que la ligne pointillée n’est pas prise en charge dans HTML5 Canvas.

Les composants ActionScript sont supprimés et les marques de commentaire du code sont supprimées. Par ailleurs, si le bloc de commentaires contient du code JavaScript (pour Toolkit for CreateJS avec Animate 13.0), vérifiez que vous avez supprimé manuellement les marques de commentaire du code.

Si, par exemple, vous avez copié des calques qui contiennent des boutons, ils sont supprimés.

Modifications appliquées au contenu après la migration

Voici une liste des types de modifications appliquées lorsque vous migrez le contenu existant vers un document HTML5 Canvas.

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

• les transformations 3D sont supprimées ;
• les marques de commentaire du code ActionScript sont supprimées ;
• les vidéos sont supprimées.

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

• L’incrustation BlendMode n’est pas prise en charge ; elle est modifiée en Normal.
• La ligne pointillée n’est pas prise en charge ; elle est modifiée en Continu.

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.

Conversion d’autres types de documents en HTML5 Canvas

Grâce au convertisseur universel de type de document, vous pouvez convertir des projets FLA existants (de tout type) en n’importe quel autre type de document tel que HTML5 Canvas, ActionScript/AIR, WebGL ou un type de document personnalisé. Lors de la conversion dans un format donné, vous pouvez profiter des fonctions de création d’Animate pour ce type de document. 

Pour en savoir plus, voir Conversion en d’autres formats de document.

Conversion d’un document ActionScript 3 en document HTML5 Canvas à l’aide d’un script JSFL

Dans Animate, un script JSFL permet de convertir un document AS3 en document HTML5 Canvas. Une fois exécuté, le script JSFL effectue les opérations suivantes :

• Il crée un document HTML5 Canvas.
• Il copie tous les calques, symboles et éléments de bibliothèque dans le nouveau document HTML5 Canvas.
• Il applique les valeurs par défaut aux fonctions, sous-fonctions ou propriétés de fonction non prises en charge.
• Il crée des fichiers FLA distincts pour chaque scène, car le document HTML5 Canvas ne prend pas en charge les scènes multiples.

1. Ouvrez le document ActionScript 3 dans Animate.
2. Sélectionnez Commandes > Convertir AS3 en document HTML5 Canvas.

 Cela s’applique uniquement lorsque l’option Regrouper dans feuille Sprite est désactivée.