yoann nussbaumer

Dans le contexte de la création de thèmes, l’étirement se réfère à la façon dont un composant est affiché quand sa taille est différente de la taille de son skin original. Vous pourriez créer un skin pour un bouton à une taille spécifique, mais le bouton qui apparaîtra quand vous lancerez l’application sera affiché dans des tailles différentes. Très probablement, il sera plus large ou plus étroit que ce que vous avez dessiné, parce que le texte du bouton va l’étirer ou le rétrécir horizontalement. Si le bouton n’a pas la taille de police par défaut, il sera également plus grand ou plus court. Par défaut, le skin s’étirerera ou se rétrécira pour s’adapter à la taille du bouton.

Si vous pensez à ce qui se produit quand vous étirez ou réduisez un bitmap, vous réaliserez qu’il y a deux problèmes avec cela. Premièrement, le skin du bouton peut devenir pixelisé ou trouble, spécialement sur les bords. Deuxièmement, si vous avez par exemple des coins arrondis sur vos boutons, leur formes seront déformées si le ratio du bitmap change. (Si vous utilisez des images vectorielles, vous n’aurez pas le premier problème, mais certainement le second. Les contours pourraient également s’épaissir sans ce que soit l’effet recherché.)

Voici un exemple de ce qui pourrait arriver si vous étirez un skin réalisé avec des images bitmaps :

Fig 1: étirement d’un skin réalisé à l’aide d’une image bitmap.

Vous pouvez voir que la bordure du bouton de droite semble un peu épaisse et que les coins ont été étirés horizontalement et qu’ils ne sont plus symétriques.

Si vous avez déjà fait ce genre de choses en HTML en utilisant les tableaux, vous savez qu’une façon pour obtenir des coins arrondis est de découper chaque image en 9 parties, et d’étirer chaque morceau différemment :

• Les images des coins ne s’étirent pas, elle restent à une taille fixe, ainsi les coins conservent leur symétrie
• Les images des faces latérales s’étirent uniquement verticalement, et les images des faces du haut et du bas s’étirent uniquement horizontalement; ainsi elles se rallongent mais ne semblent pas altérées.
• La partie du centre s’étire dans toutes les directions. (En HTML, on y applique habituellement juste une couleur unie.)

Cette méthode fonctionne, mais elle augmente de façon non négligeable le nombre d’image que vous devez gérer. Rappelez-vous qu’un bouton flex possède 4 types d’état possible. Si vous devez découper chaque état en 9 images, vous devez gérer 36 fichiers images, juste pour faire un simple bouton !

Heureusement, Flex a une manière plus pratique pour travailler avec cela, appelée scale-9 grid (également connu sous le nom « 9-slice« ). Au lieu de découper les images en 9 pièces, vous pouvez juste dire à Flex où se trouvent les lignes de découpe, et il étirera automatiquement les différentes images de manière appropriée. Ainsi, pour le bouton présenté au dessus, la scal-9 grid pourrait ressembler à cela :

Figure 2. Les flèches montrent dans quel sens les différentes portions de l’image sont étirées.

Gardez à l’esprit que si vous utilisez la technique scale-9 grid, la zone centrale sera étirée dans toutes les directions. Si vous créez une image bitmap qui a un dégradé vertical, vous voudrez être certain que les boutons s’étireront uniquement dans une direction horizontale. Cela veut dire que le texte peut devenir plus long et plus court, mais la police ne doit pas changer, autrement le bouton pourrait s’étendre verticalement, et votre dégradé pourrait être altéré (bien que le problème pourrait ne pas être apparent si c’est très léger). Si vous créez des skins en utilisant des images vectorielles réalisées avec Flash ou Illustrator, cela ne sera pas un problème.

Je vais décrire comment spécifier la scale-9 grid pour les différents composants un peu plus tard. Si vous vous en tenez étroitement au template de skin fourni, vous n’aurez peut être pas à ajuster les scale-9 grids, puisqu’elles sont pré-établies dans le fichier. En outre, toutes les éléments d’un skin n’ont pas besoin de scale-9 grid, puisque Flex ne redimensionne pas certains composants.

Maintenant que les concepts ennuyeux sont derrière nous, vous pouvez réellement commencer à créer des skins. Pour cela, rendez-vous à la section dédiée à votre logiciel graphique préféré :

• Réaliser un skin pour composants Flex à l’aide de Flash
• Réaliser un skin pour composants Flex à l’aide de Photoshop
• Réaliser un skin pour composants Flex à l’aide de Fireworks
• Réaliser un skin pour composants Flex à l’aide d’Illustrator

PS: Ce billet fait partie d’une suite d’articles sur le thème Créer un skin pour une application Flex avec Flash, Photoshop, Fireworks, ou Illustrator, traduit de l’article d’Adobe : Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator.