Guide d'utilisation Annuler

Pratiques recommandées d’optimisation des fichiers FLA pour Animate

  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

Optimisation de documents Animate

La vitesse de téléchargement et de lecture de votre document est proportionnelle à sa taille. Un certain nombre d’opérations permettent de préparer vos documents pour obtenir une lecture optimale. Dans le cadre du processus de publication, Animate effectue automatiquement quelques opérations d’optimisation sur les documents. Avant d’exporter un document, vous pouvez l’optimiser un peu plus en utilisant diverses stratégies pour réduire sa taille. Vous pouvez également compresser un fichier SWF lorsque vous le publiez. Lorsque vous apportez des changements, il peut s’avérer judicieux de tester votre document en l’exécutant sur différents types d’ordinateurs, de systèmes d’exploitation et de connexions Internet.

Optimisation des documents

  • Utilisez des symboles, animés ou non, pour tout élément apparaissant plus d’une fois.

  • Lors de la création de séquences d’animation, utilisez des interpolations dans la mesure du possible. Les animations interpolées nécessitent moins d’espace qu’une série d’images-clés.

  • Pour les séquences animées, utilisez des clips plutôt que des symboles graphiques.

  • Limitez la zone de modification de chaque image-clé ; faites en sorte que l’action prenne place dans une zone aussi réduite que possible.

  • Évitez d’animer les éléments bitmap ; utilisez les bitmaps comme éléments statiques ou d’arrière-plan.

  • Pour le son, à chaque fois que cela est possible, utilisez le format MP3, le format audio le plus compact.

Optimisation des éléments et des lignes

  • Regroupez les éléments.

  • Utilisez des calques pour séparer les éléments qui évoluent au cours de l’animation de ceux qui ne subissent aucune modification.

  • Utilisez Modification > Formes > Optimiser pour réduire le nombre de lignes distinctes utilisées pour décrire les formes.

  • Limitez le nombre de types particuliers de lignes (par exemple, lignes en tirets ou pointillées). Les lignes pleines utilisent moins de mémoire. Les lignes créées avec l’outil Crayon nécessitent moins de mémoire que les coups de pinceau.

Optimisation du texte et des polices

  • Limitez le nombre de polices et de styles de police. Utilisez les polices intégrées avec parcimonie, car elles augmentent la taille du fichier.

  • Pour les options d’intégration des polices, sélectionnez seulement les caractères nécessaires au lieu d’inclure la police entière.

Optimisation des couleurs

  • Utilisez le menu Couleur de l’inspecteur des propriétés du symbole pour créer de nombreuses occurrences d’un même symbole dans des couleurs différentes.

  • Utilisez le mélangeur (Fenêtre > Mélangeur) pour faire correspondre la palette de couleurs du document et celle du navigateur.

  • Utilisez les dégradés avec parcimonie. Le remplissage d’une zone à l’aide de dégradés nécessite 50 octets de plus que le remplissage à l’aide d’une couleur unie.

  • Utilisez la transparence alpha avec parcimonie, car elle peut ralentir la lecture.

Accélération de l’affichage du document

Pour accélérer l’affichage du document, vous pouvez utiliser les commandes du menu Affichage pour désactiver les fonctions de qualité de rendu, qui nécessitent des calculs supplémentaires et ralentissent l’affichage des documents.

Aucune de ces commandes n’affecte la manière dont Animate exporte un document. Pour spécifier la qualité d’affichage des documents Animate dans un navigateur Web, utilisez les paramètres object et embed. La commande Publier peut faire cela automatiquement à votre place.

  1. Choisissez Affichage > Mode Aperçu, puis choisissez l’une des options suivantes :

    Contours

    Affiche uniquement les contours des formes de votre séquence, toutes les lignes apparaissant comme des lignes fines. Le remodelage de vos éléments graphiques est alors plus facile et l’affichage des séquences complexes plus rapide.

    Rapide

    Désactive l’anticrénelage et affiche toutes les couleurs et tous les styles de ligne de votre dessin.

    Lissage

    Active l’anticrénelage pour les lignes, les formes et les bitmaps. Cette forme affiche les formes et les lignes de sorte que leurs bords apparaissent plus adoucis à l’écran. Cette option dessine plus lentement que l’option Rapide. L’anticrénelage fonctionne mieux sur des cartes vidéo qui offrent des milliers (16 bits) ou des millions (24 bits) de couleurs. En mode 16 ou 256 couleurs, les lignes noires sont adoucies, mais le rendu des couleurs peut être de meilleure qualité en mode Rapide.

    Texte anticrénelé

    Adoucit les bords du texte. Cette commande fonctionne mieux avec des polices de grande taille et peut être lente pour une quantité importante de texte. Il s’agit du mode de travail le plus courant.

    Complète

    Permet un rendu complet du contenu sur la scène. Elle est susceptible de ralentir l’affichage.

Optimisation des graphiques et des animations

Avant de créer des animations ou des graphiques optimisés et rationalisés, cernez et planifiez votre projet. Fixez un objectif pour la taille du fichier et la longueur de l’animation et faites des tests durant tout le processus de développement.

Suivez les recommandations suivantes pour optimiser les graphiques et animations :

  • Évitez les dégradés car leur traitement demande des couleurs et des calculs en grand nombre, ce qui charge énormément le processeur de l’ordinateur.

  • Pour la même raison, maintenez à un niveau minimum le nombre d’alpha et de transparences que vous utilisez dans un fichier SWF.

    Vous devriez limiter à un minimum l’animation d’objets qui incluent la transparence car cela demande également un effort intensif au processeur. Évitez complètement ou maintenez à un minimum l’animation de graphiques transparents par dessus des bitmaps car cela demande un effort intensif au processeur.

     Le meilleur format d’image bitmap à importer dans Animate est PNG, qui est le format natif de Macromedia Fireworks d’Adobe. Les fichiers PNG ont des informations RVB et alpha pour chaque pixel. Si vous importez un fichier PNG Fireworks dans Animate, vous conservez une certaine capacité pour modifier les objets graphiques dans le fichier FLA.

  • Optimisez les bitmaps sans les surcompresser. Une résolution de 72 dpi est optimale pour le Web. Si vous compressez une image bitmap, vous obtenez une image réduite ; mais si vous la compressez trop, la qualité du graphique est réduite. Vérifiez que les paramètres pour la qualité JPEG dans la boîte de dialogue Publier les paramètres ne surcompressent pas l’image. Il est préférable de représenter une image comme un graphique vectoriel dans la plupart des cas. L’utilisation d’images vectorielles réduit la taille des fichiers car les images sont produites à partir de calculs plutôt que de pixels en nombre. Limitez le nombre de couleurs dans votre image tout en maintenant la qualité.

     évitez de trop agrandir les bitmaps par rapport à leurs dimensions d’origine car cela réduit la qualité de l’image et sollicite le processeur intensément.

  • Définissez l’option visible sur false au lieu de changer le niveau _alpha de 0 à 1 dans un fichier SWF. Le calcul du niveau _alpha pour une occurrence sur la scène charge le processeur énormément. Si vous désactivez la visibilité de l’occurrence, cela vous fait gagner des cycles de processeur et de la mémoire, ce qui permet d’obtenir des animations plus fluides des fichiers SWF. Plutôt que de décharger et possiblement de recharger des ressources, définissez la propriété _visible définie sur false, ce qui charge beaucoup moins le processeur.

  • Réduisez le nombre de lignes et de points que vous utilisez dans un fichier SWF. Utilisez la boîte de dialogue Optimiser les courbes (Modification > Forme > Optimiser) pour réduire le nombre de vecteurs dans un dessin. Sélectionnez l’option Utiliser les passes multiples pour une meilleure optimisation. L’optimisation d’un graphique réduit la taille du fichier, mais la compression trop importante en réduit la qualité. Cependant, l’optimisation des courbes réduit la taille de votre fichier et améliore les performances du fichier SWF. Des options provenant de tierces parties sont disponibles pour l’optimisation spécialisée de courbes et de points qui produisent différents résultats.

Pour obtenir les meilleurs résultats, essayez de produire du contenu animé par différents moyens et testez chacune des options.

Un taux d’images plus élevé (mesuré en images par seconde ou ips) produit une animation fluide dans un fichier SWF mais il peut appliquer une charge élevée au processeur, plus difficile à soutenir sur les anciens ordinateurs. Testez vos animations avec des taux d’images différents pour trouver le taux le plus bas possible.

Pour voir un exemple d’animation programmée, consultez la page des Exemples Animate à l’adresse suivante : www.adobe.com/go/learn_fl_samples_fr. Téléchargez et décompressez le fichier zip Exemples et naviguez jusqu’au dossier ActionScript2.0/Animation afin d’accéder à l’exemple.

Cadence d’images d’animation et performances

Avant d’ajouter une animation à une application, il vous faut tenir compte de la cadence à imposer à votre fichier FLA. Le taux d’images peut affecter les performances de votre fichier SWF et de l’ordinateur qui le lit. Une cadence trop élevée risque de perturber le processeur, en particulier si vous employez des ressources multiples ou si vous utilisez ActionScript pour créer une animation.

Il faut également prêter attention à la définition de la cadence, car celle-ci peut avoir une incidence sur la fluidité de la lecture de votre animation. Par exemple, une animation définie à 12 images par seconde (ips) dans l’inspecteur des propriétés va lire 12 images à la seconde. Si la cadence du document est définie à 24 ips, l’animation semble plus fluide que si elle est lue à 12 ips. Toutefois, une animation à 24 ips s’exécute bien plus rapidement qu’une animation à 12 ips, de sorte que sa durée totale (en secondes) est plus courte. En conséquence, si vous devez créer une animation de 5 secondes à une cadence supérieure, il vous faut ajouter des images supplémentaires pour remplir cette durée de 5 secondes (ce qui accroît la taille totale du fichier de votre animation). Une animation de 5 secondes à 24 ips génère normalement un fichier de taille supérieure à celui d’une animation de 5 secondes à 12 ips.

 si vous utilisez un gestionnaire pour l’événement onEnterFrame afin de créer des animations scriptées, l’animation s’exécute à la cadence du document, tout comme si vous aviez créé une interpolation de mouvement sur un scénario. Au lieu du gestionnaire de l’événement onEnterFrame, il est possible d’utiliser setInterval (voir Guide de référence du langage ActionScript 2.0). En ce cas, vous ne dépendez plus des cadences d’images, mais appelez des fonctions à intervalles spécifiés. Comme avec onEnterFrame, plus vous utilisez setInterval pour appeler une fonction, plus votre animation consomme de ressources sur votre processeur.

Utilisez la cadence la plus basse possible, autorisant une lecture fluide de votre animation à l’exécution, de manière à réduire la charge imposée au processeur de l’utilisateur. Des cadences d’images élevées (plus de 30 ou 40 ips) augmentent la charge imposée aux processeurs et ne modifient pas énormément ou pas du tout l’apparence de l’animation lors de l’exécution.

Sélectionnez une cadence pour votre animation le plus tôt possible dans le processus de développement. Lorsque vous testez le fichier SWF, vérifiez la durée de votre animation, ainsi que la taille du fichier SWF. La cadence a une forte incidence sur la vitesse de l’animation.

Filtres et performances du fichier SWF

Si vous utilisez trop de filtres dans une application, cela demande une grande quantité de mémoire et les performances de Flash Player peuvent en pâtir. Un clip associé à des filtres présente en effet deux bitmaps de 32 bits chacun. Or, plus vous utilisez de bitmaps, plus votre application consomme de mémoire. Le système d’exploitation de l’ordinateur peut afficher un message d’erreur de mémoire saturée. Ce type d’erreur est toutefois rare sur les ordinateurs modernes, à moins que vous n’utilisiez fréquemment des effets de filtre dans une application (par exemple, lorsque vous avez plusieurs milliers de bitmaps sur la scène).

Si, malgré tout, vous rencontrez une erreur de type saturation de la mémoire, voici ce qui se passe :

  • Le tableau de filtres est ignoré.

  • Le clip est tracé au moyen de la fonctionnalité de rendu vectoriel standard.

  • Aucun bitmap n’est mis en cache pour le clip.

    Dès lors qu’apparaît une erreur de type saturation de la mémoire, le clip n’essaie plus d’utiliser un tableau de filtres, ni même un cache de bitmaps. Un autre facteur risque d’amoindrir les performances de lecture : la valeur que vous utilisez pour le paramètre qualité de chacun des filtres que vous appliquez. Des valeurs élevées exigent davantage de mémoire et de ressources processeur pour l’effet à rendre, tandis que l’attribution d’une valeur moindre au paramètre qualité demande moins de ressources de la part de l’ordinateur. Il est donc conseillé de ne pas employer trop de filtres et de définir une qualité aussi basse que possible.

     si un zoom avant est pratiqué une fois sur un objet de 100 x 100 pixels, la mémoire est utilisée quatre fois, puisque les dimensions du contenu sont alors de 200 x 200 pixels. Si vous zoomez encore deux fois, la forme est tracée aux dimensions de 800 x 800 pixels. Compte tenu des dimensions d’origine de l’objet (100 x 100 pixels), la mémoire est alors utilisée 64 fois. Toutes les fois que vous utilisez des filtres dans un fichier SWF, désactivez les options du menu zoom du menu contextuel dans le fichier SWF.

    Vous risquez également d’avoir des erreurs si vous utilisez des types de paramètres non valides. Certains paramètres de filtre ont aussi une plage valide spécifique. Si vous choisissez une valeur hors de cette plage valide, le paramètre adopte automatiquement une valeur valide située dans cette plage. Par exemple, la qualité devrait avoir une valeur entre 1 et 3 pour une opération classique et la plage s’étend de 0 à 15. Toute valeur au-dessus de 15 est corrigée à 15.

    De même, certains constructeurs imposent des restrictions à la longueur des tableaux pour les paramètres d’entrée. Si un filtre de convolution ou un filtre matrice de couleurs est créé avec un tableau non valide (longueur erronée), le constructeur échoue et le filtre n’est pas correctement créé. Si l’objet de filtre est ensuite utilisé en entrée dans un tableau de filtres de clip, il est tout simplement ignoré.

    Conseil : lorsque vous utilisez un filtre de flou, il est préférable d’utiliser pour blurX et blurY des valeurs qui sont des puissances de 2 (2, 4, 8, 16 et 32, par exemple), car elles se calculent plus rapidement et améliorent les performances de 20 à 30 %.

Mise en mémoire cache de bitmap et performances du fichier SWF

La mise en mémoire cache de d’images bitmap accroît les performances des clips non modifiables dans vos applications. Lorsque vous définissez la propriété MovieClip.cacheAsBitmap ou Button.cacheAsBitmap sur true, Flash Player place en mémoire cache une représentation bitmap interne de l’instance de clip ou de bouton. Cette propriété peut améliorer les performances des clips incluant un contenu vectoriel complexe. Toutes les données vectorielles d’un clip contenant un bitmap en mémoire cache sont tracées sur le bitmap, et non pas sur la scène principale.

 ce bitmap est ensuite copié sur la scène principale sous forme de pixels, sans étirement ni rotation, puis accroché aux limites de pixels les plus proches. Les correspondances des pixels avec l’objet parent se font selon un rapport de 1 à 1. Si les limites du bitmap changent, le bitmap est recréé au lieu d’être étiré.

Pour plus d’informations sur la mise en cache d’occurrences de bouton ou de clip, voir les rubriques suivantes :

  • Mise en cache et parcours de clips à l’aide d’ActionScript dans Formation à ActionScript 2.0

  • Mise en cache d’un clip dans Formation à ActionScript 2.0

    Vous pouvez utiliser la propriété cacheAsBitmap avec des clips dont le contenu est principalement statique et qui n’est ni redimensionné, ni pivoté fréquemment. Avec de tels clips, la propriété cacheAsBitmap peut améliorer les performances lors de la conversion du clip (lorsque les positions x et y sont modifiées).

    L’activation de la mise en cache pour un clip crée une surface dont les avantages sont multiples, par exemple pour accélérer le rendu des animations vectorielles complexes. Dans certaines situations, l’activation de la mise en mémoire cache n’améliore pas la performance. Au contraire, elle peut même la diminuer.

    Les performances générales des données mises en cache dépendront de la complexité des données vectorielles de vos occurrences, de la quantité de modifications et de la définition, ou non, de la propriété opaqueBackground. Si vous modifiez de petites zones, la différence entre l’utilisation d’une surface et celle de données vectorielles pourrait être négligeable. Testez les deux scénarios avant de mettre en place l’application.

Quand mettre les bitmaps en cache

Voici une série de scénarios dans lesquels vous pouvez voir les avantages significatifs qui résultent de la mise en cache de bitmap par l’optimisation des graphiques vectoriels.

Image d’arrière-plan complexe

Une application qui contient une image détaillée sur fond complexe de données vectorielles. Pour améliorer les performances, vous pouvez sélectionner le contenu, le stocker dans un clip et définir la propriété opaqueBackground sur true. L’arrière-plan est rendu en tant que bitmap et peut être redessiné rapidement pour que l’animation se joue beaucoup plus vite.

Défilement du champ de texte

Application qui affiche une grande quantité de texte dans une zone de texte déroulante. Placez le champ de texte dans un clip que vous définissez comme déroulable avec des limites de déroulement (la propriété scrollRect) tout en activant le déroulement de pixel rapide pour cette occurrence spécifique. Quand un utilisateur déroule l’occurrence de clip, les pixels déroulés montent et génèrent la zone nouvellement exposée au lieu de régénérer toute la zone de texte.

Système de fenêtrage

Application avec un système complexe de chevauchement de fenêtres. Chaque fenêtre peut être ouverte ou fermée (par exemple, les fenêtres de navigateur Web). Si vous marquez chaque fenêtre en tant que surface (définissez la propriété cacheAsBitmap sur true), chaque fenêtre sera isolée et cachée. Les utilisateurs peuvent faire glisser les fenêtres de manière à ce qu’elles se chevauchent. Chaque fenêtre n’a pas besoin de générer à nouveau le contenu vectoriel.

Quand éviter la mise en cache des bitmaps

Un mauvais usage de cette fonctionnalité peut avoir un effet négatif sur votre fichier SWF. Lorsque vous créez un fichier FLA qui utilise des surfaces, gardez à l’esprit les points suivants :

  • N’abusez pas des surfaces (clips avec mise en cache activée). Chaque surface utilise davantage de mémoire qu’un clip classique ; n’activez que les surfaces pour améliorer les performances.

  • Un bitmap caché utilise beaucoup plus de mémoire qu’une occurrence de clip courant. Par exemple, si le clip sur la scène a une taille de 250 pixels sur 250 pixels, il peut occuper 250 KO s’il est mis en cache, contre 1 KO s’il est courant (non mis en cache).

  • Évitez de zoomer dans les surfaces cachées. Si vous abusez de la mise en cache bitmap, une grande quantité de mémoire sera occupée (voir la puce précédente), surtout si vous zoomer sur le contenu.

  • Utilisez des surfaces pour les occurrences de clip qui sont grandement statiques (non animées). Vous pouvez faire glisser ou déplacer l’occurrence, mais son contenu ne doit pas être animé ni subir de nombreuses modifications. Par exemple, si vous faites pivoter ou si vous transformez une occurrence, celle-ci change entre la surface et les données vectorielles, ce qui rend le traitement difficile et endommage votre fichier SWF.

  • Si vous panachez des surfaces avec des données vectorielles, cela accroît la charge de traitement de Flash Player (et quelquefois de l’ordinateur). Rassemblez les surfaces, par exemple quand vous créez des applications de fenêtres.

Utilisation des composants dans Flash Player

Le cadre des composants vous permet d’ajouter des fonctionnalités aux composants mais il a également le potentiel d’augmenter considérablement la taille du fichier de l’application. Les composants héritent l’un de l’autre. Un composant augmente la taille de votre document Animate, mais ce n’est pas nécessairement le cas des suivants qui utilisent le même cadre. Au fur et à mesure que vous ajoutez des composants à la scène, la taille du fichier augmente, mais elle finit par se stabiliser car les composants partagent des classes et ne chargent pas de nouvelles copies de ces classes.

Si vous utilisez des composants multiples qui ne partagent pas le même cadre, ils pourraient augmenter la taille du fichier SWF de façon significative. Par exemple, le composant XMLConnector ajoute 17K au fichier SWF et les composants TextInput en ajoutent 24 à votre document. Si vous ajoutez le composant ComboBox, l’augmentation est de 28K car il ne fait partie d’aucun des cadres. Comme le composant XMLConnector utilise l’association de données, les classes augmentent le fichier SWF de 6K. Un document qui utilise tous ces composants occupe 77K avant que vous n’ayez ajouté quoi que ce soit d’autre au fichier. Surveillez avec soin la taille de votre fichier SWF quand vous ajoutez un nouveau composant au document.

Les composants doivent exister dans la bibliothèque du fichier SWF parent. Par exemple, une application à base d’écrans doit avoir une copie des composants qu’elle utilise dans sa bibliothèque, même si ces composants sont demandés par les fichiers SWF enfant qui sont chargés lors de l’exécution. Ceci est nécessaire pour que les composants fonctionnent correctement même si le délai de téléchargement du fichier SWF parent augmente légèrement. Cependant, la bibliothèque parent n’est pas héritée ou partagée dans les fichiers SWF que vous chargez dans le parent. Chaque fichier SWF enfant doit être téléchargé dans l’application avec sa propre copie des mêmes composants.

Lorsque vous envisagez de publier un fichier SWF avec une rétrocompatibilité, vous devez savoir très précisément quels composants ont cette capacité. Vous trouverez dans le tableau suivant des informations sur la disponibilité des composants en fonction des différentes versions de Flash Player :

Composants

Flash Player 6 (6.0.65.0) et antérieures

Flash Player 6 (6.0.65.0)

Flash Player 7 et 8

Flash Player 9

ActionScript 3.0

Non pris en charge

Non pris en charge

Non pris en charge

Pris en charge

ActionScript 2.0

Pris en charge

Pris en charge

Pris en charge

Pris en charge

Ensemble de composants interface utilisateur V2

Non pris en charge

Pris en charge

Pris en charge

Pris en charge

Composants de support

Non pris en charge

Non pris en charge

Pris en charge

Pris en charge

Composants de données

Non pris en charge

Non pris en charge

Pris en charge

Pris en charge

Vous devez désélectionner l’option Optimiser pour Flash Player 6r65 dans les paramètres Publication pour que les composants interface utilisateur V2 fonctionnent.

Optimisation des styles de composants et performances

L’appel setStyle est l’un des appels qui charge le plus le processeur dans un cadre de composants lorsque vous utilisez ActionScript 2.0. L’appel setStyle fonctionne de manière efficace mais il charge considérablement le processeur compte tenu de son mode d’implémentation. L’appel setStyle n’est pas toujours nécessaire dans toutes les applications, mais si vous l’utilisez, prenez garde à son impact sur les performances.

Pour améliorer les performances, vous pouvez modifier les styles avant de les charger, de les calculer et de les appliquer aux objets du fichier SWF. Si vous modifiez les styles avant de les charger et de les calculer, l’appel à setStyle devient superflu.

Pour améliorer les performances quand les styles sont utilisés, définissez les propriétés sur chaque objet au fur et à mesure que ceux-ci sont instanciés. Lorsque vous associez dynamiquement des instances à la scène, définissez les propriétés dans initObj dans l’appel que vous faites à createClassObject(), comme le montre le code ActionScript suivant :

createClassObject(ComponentClass, "myInstance", 0, {styleName:"myStyle", color:0x99CCFF});

Pour les occurrences que vous souhaitez placer directement sur la scène, vous pouvez utiliser onClipEvent() pour chacune d’elles ou utiliser les sous-classes (recommandé). Pour plus d’informations sur les sous-classes, voir Écriture d’une sous-classe dans Formation à ActionScript 2.0.

Si vous devez revoir le style de vos composants, vous pouvez améliorer efficacement votre application à l’aide du composant Chargeur. Pour placer différents styles dans différents composants, mettez chaque composant dans son propre fichier SWF. Si vous modifiez les styles pour le composant Chargeur et rechargez le fichier SWF, les composants du fichier SWF sont recréés. Lorsque le composant est recréé, le cache des styles est vidé et le style du composant est réinitialisé et référencé à nouveau.

 Pour appliquer un seul et même style à toutes les occurrences d’un composant dans votre fichier SWF, changez le style globalement à l’aide de _global.styles.ComponentName.

Utilisation de bibliothèques partagées à l’exécution

Vous pouvez améliorer les performances de téléchargement à l’aide de bibliothèques partagées lors de l’exécution. Ces bibliothèques sont généralement nécessaires pour des applications plus importantes ou lorsque de nombreuses applications sur un site utilisent les mêmes composants ou symboles. L’externalisation des ressources communes de vos fichiers SWF vous évite de télécharger les classes à plusieurs reprises. Le premier fichier SWF qui utilise une bibliothèque partagée a un délai de téléchargement plus long car le fichier SWF et la bibliothèque se chargent tous les deux. La bibliothèque est mise en cache sur l’ordinateur de l’utilisateur, puis tous les fichiers SWF qui suivent utilisent la bibliothèque. Ce processus peut améliorer le délai de téléchargement considérablement pour des applications importantes.

Affichage de caractères spéciaux

Les systèmes d’exploitation disposent d’une page de codes spécifique régionale. Par exemple, un ordinateur au Japon a une page de code différente d’un autre en Angleterre. Flash Player 5 et ses versions antérieures comptaient sur la page de code pour afficher du texte ; Flash Player 6 et ses versions ultérieures utilisent Unicode pour cela. Unicode est plus sûr et plus normalisé pour afficher du texte car il a un jeu de caractères universel qui contient les caractères de toutes les langues. La plupart des applications actuelles utilisent Unicode.

Vous pouvez utiliser les séquences d’échappement Unicode pour afficher les caractères spéciaux dans Flash Player 6 et dans les versions ultérieures. Cependant, tous vos caractères ne vont pas forcément s’afficher correctement si vous ne chargez pas du texte qui est encodé UTF 8 ou UTF 16 (Unicode) ou si vous n’utilisez pas une séquence d’échappement pour afficher le caractère spécial. Pour un ensemble de tableaux de codes Unicode, voir le site Web Unicode sur Unicode.org. Pour une liste des séquences d’échappement les plus courantes, voir le tableau ci-dessous dans cette section.

Une application non-Unicode utilise la page de code du système d’exploitation pour traduire les caractères sur une page. Dans ce cas, la page de code spécifie les caractères que vous voyez de sorte que ceux-ci ne paraissent correctement que lorsque la page de code sur le système d’exploitation de l’utilisateur correspond à celle de l’application. La page de code utilisée pour créer le fichier SWF doit correspondre à celle sur l’ordinateur de l’utilisateur. L’utilisation de pages de code n’est pas recommandée pour des applications destinées à un public international ; dans ce cas, utilisez plutôt Unicode.

L’utilisation de System.useCodepage dans votre code oblige le fichier SWF à utiliser la page de code du système plutôt qu’Unicode.

N’utilisez ce processus que lorsque vous chargez du texte encodé non-Unicode à partir d’un lieu externe et lorsque ce texte est encodé avec la même page de code que celle de l’ordinateur de l’utilisateur. Si ces deux conditions sont réunies, le texte apparaît de façon correcte. Si ces conditions ne sont pas réunies, utilisez Unicode et une séquence d’échappement Unicode pour mettre en forme votre texte. Pour utiliser une séquence d’échappement, ajoutez le code ActionScript 2.0 suivant sur l’image 1 du scénario :

this.createTextField("myText_txt", 99, 10, 10, 200, 25); 
myText_txt.text = "this is my text, \u00A9 2004";

Ce code ActionScript crée un champ de texte et introduit du texte qui inclut un symbole copyright (©) dans le champ de texte.

Vous pouvez obliger un fichier SWF à utiliser la page de code du système d’exploitation qui est contrôlé par la propriété useCodepage. Lorsque Animate exporte un fichier SWF, il exporte du texte Unicode par défaut et System.useCodepage est défini sur false. Vous pouvez avoir des difficultés lors de l’affichage de textes spéciaux ou du texte sur des systèmes internationaux, alors que l’utilisation de la page de code du système peut sembler régler les anomalies quand un texte est affiché incorrectement. Cependant, l’utilisation de System.useCodePage est toujours un dernier recours.

Pour utiliser la page de code du système, placez la ligne suivante de code ActionScript 2.0 sur l’image 1 du scénario :

System.useCodepage = true;
<< un exemple AS3 est nécessaire ici aussi. Voir
dev/qa. >>

 un caractère spécial n’apparaît que si l’ordinateur de l’utilisateur en dispose dans la police en cours d’utilisation. Si vous n’en êtes pas certain(e), incorporez le caractère ou la police dans le fichier SWF.

Le tableau suivant contient un certain nombre de séquences d’échappement Unicode utilisées couramment.

Description du caractère

Séquence d’échappement Unicode

tiret cadratin ()

\u2014

symbole marque déposée (®)

\u00AE

symbole copyright (©)

\u00A9

symbole anglais marque de commerce (™)

\u2122

symbole Euro ()

\u20AC

barre oblique inversée (\)

\u005C

barre oblique (/)

\u002F

accolade ouverte ({)

\u007B

accolade fermée (})

\u007D

supérieur à (<)

\u003C

inférieur à (>)

\u003E

Astérisque (*)

\u002A

Test des performances du téléchargement des documents

Flash Player tente de respecter la cadence que vous définissez, la cadence réelle en cours de lecture pouvant varier d’un ordinateur à l’autre. Si un document en cours de téléchargement atteint une image avant que les données requises n’aient été téléchargées, le téléchargement s’interrompt jusqu’à ce que ces données soient reçues.

Pour visualiser graphiquement les performances de téléchargement, vous pouvez afficher le testeur de bande passante dans Flash Player pour voir la quantité de données envoyées pour chaque image de l’animation selon la vitesse définie.

 (Animate uniquement) Le testeur de bande passante n’est pas disponible dans Animate. Vous pouvez essayer d’utiliser Adobe Scout avec Animate. Pour plus d’informations, reportez-vous à la section Utilisation d’Adobe Scout dans Animate CC.

Animate se base sur une estimation des performances habituelles sur Internet, et non sur la vitesse exacte du modem, pour simuler la vitesse de téléchargement. Par exemple, si vous simulez une vitesse de modem de 28,8 Kbit/s, Animate fixe la vitesse réelle à 2,3 Kbit/s afin de tenir compte des performances typiques d’Internet. Le testeur compense également la prise en charge de la compression supplémentaire pour les fichiers SWF, réduisant ainsi la taille du fichier et améliorant les performances de la lecture en flux continu.

Lorsque des fichiers SWF, GIF et XML externes, ainsi que des variables sont transmis à un lecteur à l’aide de fonctions appelées par ActionScript telles que loadMovie et getUrl, les données transitent au taux défini pour la lecture en flux continu. Le débit de transmission du fichier SWF principal est réduit en fonction de la diminution de la bande passante causée par des requêtes supplémentaires de données. Testez votre document à chaque vitesse et sur chaque ordinateur que vous envisagez de prendre en charge pour vous assurer que le document ne surcharge pas la connexion la plus lente et l’ordinateur le plus lent pour lesquels il a été conçu.

Vous pouvez également générer un rapport pour trouver les images qui ralentissent la lecture et ainsi optimiser ou supprimer une partie du contenu de ces images.

Pour modifier les paramètres du fichier SWF créé à l’aide des commandes Tester l’animation et Tester la séquence, vous pouvez sélectionner Fichier > Paramètres de publication.

Test des performances du téléchargement

  1. Effectuez l’une des opérations suivantes :
    • Sélectionnez Contrôle > Tester la séquence ou Contrôle > Tester.

      Si vous testez une séquence ou un document, Animate publie la sélection en cours sous la forme d’un fichier SWF en utilisant les paramètres de la boîte de dialogue Paramètres de publication. Le fichier SWF s’ouvre dans une nouvelle fenêtre et démarre immédiatement.

    • Sélectionnez Fichier > Ouvrir et choisissez un fichier SWF.

  2. Sélectionnez Affichage > Paramètres de téléchargement et choisissez une vitesse de téléchargement qu’Animate doit simuler. Pour entrer un paramètre utilisateur personnalisé, sélectionnez Personnaliser.

  3. Le fichier SWF étant affiché, sélectionnez Affichage > Testeur de bande passante pour afficher un graphique des performances de téléchargement.

    La partie gauche du testeur affiche des informations sur le document, sur les paramètres et l’état du téléchargement, ainsi que sur les flux continus le cas échéant.

    La section de droite du testeur affiche l’en-tête du scénario et le graphique. Chaque barre du graphique représente une image du document. La taille de la barre correspond à celle de l’image, exprimée en octets. La ligne rouge sous l’en-tête du scénario indique si une image donnée est lue en temps réel avec le débit du modem défini dans le menu Contrôle. Si une barre dépasse la ligne rouge, le document doit attendre le chargement de cette image.

     (Animate uniquement) Le testeur de bande passante n’est pas disponible dans Animate CC. Vous pouvez essayer d’utiliser Adobe Scout avec Animate. Pour plus d’informations, reportez-vous à la section Utilisation d’Adobe Scout dans Animate.

  4. Sélectionnez Affichage > Simuler le téléchargement pour activer ou désactiver la lecture en flux continu.

    Si vous désactivez la lecture en flux continu, le document démarre sans simulation d’une connexion web.

    Remarque : (Animate  uniquement) La fonction Simuler le téléchargement n’est pas disponible dans Animate.

  5. Cliquez sur une barre du graphique pour afficher les paramètres de l’image correspondante dans la fenêtre de gauche et arrêter le document.
  6. Si nécessaire, réglez l’affichage du graphique de l’une des manières suivantes :
    • Sélectionnez Affichage > Graphique de lecture en continu pour afficher les images qui provoqueront des pauses.

      Cette vue par défaut affiche des blocs représentant chaque image en gris clair et foncé. Le côté de chaque bloc indique sa taille relative en octets. La première image stocke le contenu d’un symbole et est donc souvent plus volumineuse que les autres images.

    • Sélectionnez Affichage > Graphique image par image pour afficher la taille de chaque image.

      Cette vue vous aide à voir les images qui contribuent aux retards de lecture en flux continu. Si un bloc d’image dépasse la ligne rouge dans le graphique, Flash Player stoppe la lecture jusqu’à ce que l’image soit entièrement téléchargée.

  7. Fermez la fenêtre de test pour revenir à l’environnement de création.

    Une fois que vous avez paramétré un environnement de test incorporant le testeur de bande passante, vous pouvez ouvrir un fichier SWF directement en mode de test. Le fichier s’ouvre dans une fenêtre Flash Player, avec le testeur de bande passante et les autres options d’affichage sélectionnées.

     (Animate uniquement) Le testeur de bande passante n’est pas disponible dans Animate. Vous pouvez essayer d’utiliser Adobe Scout avec Animate. Pour plus d’informations, reportez-vous à la section Utilisation d’Adobe Scout dans Animate.

Génération d’un rapport final

  1. Sélectionnez Fichier > Paramètres de publication, puis cliquez sur l’onglet Animate.

  2. Activez l’option Générer un rapport de taille.
  3. Cliquez sur Publier.

    Animate génère un fichier texte avec l’extension .txt. (si le fichier document s’appelle myMovie.fla, le fichier texte devient myMovie Report.txt.) Le rapport liste la taille de chaque élément, forme, texte, son, vidéo et script ActionScript par image.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?