Optimisation des graphiques

La publication des applications générées à l’aide de Flash Catalyst étant destinée à une exécution dans Flash Player ou AIR, il est important d’optimiser les graphiques employés pour assurer un chargement rapide et un fonctionnement efficace de l’application. L’objectif est de créer en sortie un fichier SWF de taille minimale pour l’application.

Si la taille du fichier SWF en sortie est importante et que les performances du projet sont médiocres, cela peut être lié à l’inclusion des éléments suivants :
  • graphiques vectoriels trop complexes ;

  • images pixellisées de résolution trop élevée ;

  • fichiers image incorporés de taille importante.

Catalyst comprend des commandes pour l’optimisation des graphiques vectoriels et des images pixellisées, ainsi que pour la conversion de fichiers image incorporés en fichier image liés. Pour accéder à ces commandes, effectuez une sélection sur le plan de travail et sélectionnez l’une des options sous Optimiser l’illustration dans l’affichage tête haute.

Graphiques vectoriels

Les graphiques vectoriels (parfois nommés formes vectorielles ou objets vectoriels) sont composés de lignes et de courbes définies par des objets mathématiques nommés vecteurs, qui décrivent une image en fonction de ses caractéristiques géométriques.

Vous pouvez librement déplacer et modifier les graphiques vectoriels sans perte de détail ou de clarté. En effet, ces graphiques sont indépendants de la résolution et conservent des bords nets lors du redimensionnement. Les objets créés avec les outils de dessin de Flash Catalyst sont des graphiques vectoriels, à l’instar de nombreux objets créés dans les applications Creative Suite telles qu’Illustrator ou Fireworks.

Pourquoi optimiser les graphiques vectoriels ?

Catalyst peut importer les graphiques vectoriels jusqu’à 40 Mo, avec une limite de 6 500 tracés par objet. Catalyst assure toutefois un rendu individuel de chaque vecteur, par conséquent les objets complexes peuvent provoquer des réductions de performances considérables dans les applications publiées.

Conversion de graphiques vectoriels en graphiques vectoriels optimisés

La commande Optimiser les graphiques vectoriels permet de convertir plusieurs objets vectoriels en un seul objet graphique flash de bas niveau. Elle présente l’avantage de réduire la taille du fichier tout en conservant la possibilité de modification ultérieure par reconversion de l’objet en vecteurs.

Pour convertir les objets vectoriels en graphiques vectoriels optimisés :
  1. Sélectionnez les objets sur le plan de travail.

  2. Dans l’affichage tête haute, sélectionnez Optimiser l’illustration > Optimiser les graphiques vectoriels.

  3. Un nouveau graphique est ajouté à la section Graphiques optimisés de la bibliothèque du projet ; le graphique optimisé peut être renommé en cliquant deux fois sur son nom.

Pour modifier les objets vectoriels d’origine dans un graphique vectoriel optimisé :
  1. Sélectionnez les objets sur le plan de travail.

  2. Dans l’affichage tête haute, sélectionnez Optimiser l’illustration > Scinder le graphique.

Conversion de graphiques vectoriels en images pixellisées

La commande Pixelliser permet de convertir les objets vectoriels en image pixellisée unique. Cette opération réduit considérablement la taille et la complexité des graphiques, mais présente l’inconvénient de ne pas autoriser la reconversion en vecteurs pour une modification ultérieure. Si vous devez conserver la flexibilité de modifier vos graphiques vectoriels, utilisez la commande Convertir en graphique optimisé.

Pour convertir un objet vectoriel en image pixellisée :
  1. Sélectionnez les objets sur le plan de travail.

  2. Dans l’affichage tête haute, sélectionnez Optimiser l’illustration > Pixelliser.

  3. Un fichier .png contenant l’image pixellisée est ajouté à la bibliothèque du projet.

Graphiques (pixellisés) bitmap

Les images pixellisées, parfois nommées images bitmap, utilisent une grille rectangulaire de pixels (contraction de picture element) pour représenter les images. Chaque pixel correspond à un emplacement et à une couleur précis. Lors de l’utilisation d’images pixellisées, vous modifiez des pixels plutôt que des objets ou des formes. Les images pixellisées correspondent au format électronique le plus courant pour les images à tons continus, telles que les photos ou les peintures numériques, car elles représentent de manière efficace les graduations subtiles de nuances et de couleurs.

Les images pixellisées dépendent de la résolution, c’est-à-dire qu’elles contiennent un nombre fixe de pixels. Par conséquent, elles peuvent présenter des pertes de détail et apparaître crénelées en cas d’agrandissement à trop grande échelle. Les images créées dans les applications Creative Suite telles que Photoshop sont généralement des images pixellisées.

Pourquoi optimiser les images pixellisées ?

Catalyst importe les images pixellisées avec une taille maximale de 2048 x 2048 pixels (20 millions de pixels au total). Toutefois, les grandes images pixellisées (par exemple, les images à haute résolution créées pour l’impression ou les grandes images masquées) peuvent diminuer les performances de l’application de manière inutile. Essayez toujours d’utiliser des images pixellisées à 72 ppp et de taille aussi réduite que possible.

Compression d’images pixellisées

La commande Comprimer permet d’ajouter une compression aux images pixellisées. Elle permet de réduire considérablement la taille du projet, mais comme pour toutes les compressions, vous devez trouver le juste équilibre entre la qualité de l’image et la taille optimale du fichier. Lors de la compression d’une image pixellisée, une copie compressée est ajoutée au panneau Bibliothèque. Ce panneau conserve également l’image d’origine non compressée.

Pour comprimer une image pixellisée :
  1. Sélectionnez l’image sur le plan de travail.

  2. Sur l’affichage tête haute, sélectionnez Optimiser l’illustration > Comprimer...

  3. Saisissez le taux de compression.

Images intégrées et liées

Par défaut, les images ajoutées à l’application sont incorporées et publiées en tant que partie intégrante du fichier SWF. Pour réduire la taille de l’application, vous pouvez lier les images. Une image liée est stockée en dehors de l’application (fichier SWF) et chargée à l’exécution de l’application. Si vous liez des ressources, copiez les fichiers liés sur le serveur Web sur lequel vous déployez votre application (fichier SWF).

Pour convertir une image en image liée ou incorporée :
  1. Sélectionnez l’image sur le plan de travail.

  2. Sélectionnez Convertir en image liée dans l’affichage tête haute, sous Optimiser l’illustration, ou en cliquant avec le bouton droit sur le nom de l’image dans le panneau Bibliothèque du projet.

  3. Pour reconvertir une image liée en image incorporée, dans le panneau Bibliothèque du projet, cliquez avec le bouton droit sur l’icône d’image liée en regard du nom de l’image et sélectionnez Incorporer l’image.

Les images liées comportent une icône en regard de leur nom dans le panneau Bibliothèque du projet.

Conseils d’optimisation

Prenez en considération les points ci-dessous lors de la création d’une application optimisée.

Utilisation d’une structure efficace

  • Ne créez qu’une seule instance d’une ressource et partagez-la avec les autres états. Pour plus d’informations, voir Partage d’objets entre les états.

  • Lors de l’ajout de plusieurs vidéos à un projet, faites appel à une seule instance de lecteur vidéo. Vous pourrez ensuite en modifier les propriétés dans les différents états en fonction de la source vidéo que le lecteur doit afficher et traiter. Pour plus d’informations, voir Ajout d’une vidéo.

  • Limitez le nombre d’états d’application principale dans l’application. Pour créer plusieurs vues ou écrans, ayez recours aux différents états d’un composant personnalisé. Utilisez des composants imbriqués pour accroître la profondeur du contenu et réduire le nombre de pages des sites créés. Pour plus d’informations, voir Qu’est-ce qu’un composant ?.

Optimisation avant importation

L’optimisation des performances de l’application avant l’ajout d’illustrations au projet peut se faire de différentes manières.

  • Veillez à ce que les images bitmap/de trame aient une résolution de 72 ppp.

  • Vérifiez que le mode colorimétrique est RVB.

  • Dans Illustrator, faites appel à la fonction Aligner sur la grille en pixels.

    Lorsque vous créez des illustrations pour Flash Catalyst dans Adobe Illustrator, vous pouvez utiliser le profil de document Flash Catalyst pour appliquer automatiquement les paramètres optimaux. Le profil applique des paramètres définissant la taille du document, le mode de couleur, la résolution et l’alignement sur la grille en pixels. Dans Illustrator, cliquez sur Document Flash Catalyst dans la section de création d’une nouvelle section de l’écran de bienvenue. Vous pouvez également sélectionner Fichier > Nouveau pour ouvrir la fenêtre Nouveau document. Cliquez pour ouvrir le menu Nouveau profil de document et sélectionnez Flash Catalyst.
  • Lorsque vous créez des vidéos, utilisez un paramètre prédéfini ou des réglages de codec et de compression optimisés pour le Web.

Recherche d’informations auprès de la communauté

Sur le Pôle de développement Adobe, Ian Giblin a rédigé un article concernant les bonnes pratiques pour la préparation dans Illustrator des illustrations destinées à Flash Catalyst. Voir Best Practices for using Adobe Illustrator with Flash Catalyst CS5.5.

Sur le blog FlashCats, Tara Feener a publié un article concernant l’optimisation. Voir Optimizing for smaller SWF output.