Fabien Deshayes | 
4 juin 2009 | 
Voici quelques astuces permettant d’optimiser et d’améliorer le rendu d’un plan 2D en Flex contenant de nombreux éléments (jusqu’à plusieurs milliers). Dans le cas présent, il s’agit d’un plan dynamique : les éléments sont chargées à la volée, le plan peut être agrandi, déplacé, etc. On se trouve donc dans un cas typique de cartographie.
Fluidité des déplacements
Lorsque l’on déplace ce plan (ou que l’on zoome dessus) en utilisant un effet Move ou Zoom, le Flash Player doit redessiner l’ensemble du plan à chaque itération de l’effet. Ce traitement peut devenir très lourd : plus il y a d’éléments et moins le mouvement sera fluide. Une méthode répandue dans beaucoup d’applications de cartographie réalisées en Flex est de diminuer la qualité de rendu lors de l’exécution de l’effet. Une fois l’exécution terminée, on peut remettre une qualité de rendu supérieure.
Une certaine perte de netteté sera visible lors de l’effet, mais celle-ci est minime comparée au gain de vitesse (et donc de fluidité du mouvement).
Voici le code a exécuter au début de l’effet pour diminuer la qualité de rendu de l’animation Flash :
Application.application.stage.quality = StageQuality.LOW;
Voici le code a exécuter à la fin de l’effet pour remettre la qualité de rendu élevée de l’animation Flash :
Application.application.stage.quality = StageQuality.HIGH;
Lissage des polices
Si sur ce plan il y a des éléments de types Label ou Text, on peut constater qu’en zoomant sur ces éléments, les polices ne sont pas lisses. Pour y remédier, il faut embarquer la police avec le fichier .swf, ce qui permettra d’avoir un texte lisse peu importe le niveau de zoom. Pour embarquer une police, il faut tout d’abord récupérer un fichier .swf contenant ces polices. Il est possible d’en faire soi-même avec le logiciel Flash, mais ceci n’est pas l’objet de cet article. L’intégration de ce fichier se fait via la déclaration CSS suivante :
@font-face { Â Â Â src:Â Â Â Â Â Â Â Â Â Â Â Â url('/assets/fonts/myriad.swf'); Â Â Â font-family:Â Â Â Â Â Â 'Myriad Pro'; Â Â Â font-weight:Â Â Â Â Â Â bold; }
Cette méthode n’est pas l’unique pour embarquer des polices dans une animation Flash, mais elle offre le meilleur compromis taille du fichier .swf / qualité de rendu.
Redimensionnement de textes
Une fois le code précédent inclus, les textes seront propres et lisses. Toutefois, il reste un souci à régler. Vous remarquerez peut-être que lorsque l’on zoome, les libellés “vibrent”, ou tout du moins se déplacent très rapidement de gauche à droite. Pour éviter ce désagrément, il existe un style de la classe Label assez méconnue : fontGridFitType. Ce style accepte trois valeurs : NONE, SUBPIXEL, PIXEL. Elle permet de spécifier la correspondance d’un TextField sur une grille.
Voici un exemple vous permettant de voir (et ainsi de mieux comprendre) le fonctionnement de cette propriété fontGridFitType.
On constate donc que pour éviter cette impression de “vibration”, il faut setter la propriété comme ceci (en MXML) :
<mx:Label text="Flex" fontGridFitType="none" />
Il existe bien évidemment d’autres types d’optimisations possibles dans ce contexte, comme par exemple l’utilisation d’un BitmapData généré à la volée pour afficher une miniature de la carte ou utiliser la solution Alchemy d’Adobe pour utiliser des algorithmes codés C ou C++ avec la machine virtuelle du Flash Player.
