Adobe | Tangane - Solutions for Business Value
avr 3

Introduction

Il existe différentes manières de personnaliser l’aspect d’une application réalisée avec la technologie Flex. On peut par exemple changer simplement les couleurs de certains composants en utilisant les feuilles de styles CSS. Si l’on souhaite aller plus loin, il est possible de changer l’apparence des composants en leur appliquant un skin : c’est ce qu’on appelle le skinning. On peut “skinner” un composant à partir d’une simple image de type .jpg ou .png, mais également à partir de fichiers Flash .swf ou .swc.

Le processus de skinning peut parfois se montrer délicat car il se situe à la frontière entre deux mondes : les designers qui produisent l’aspect des composants et les développeurs qui doivent lintégrer. Cette phase peut devenir lourde si le développeur ne sait pas ce qu’il souhaite avoir en entrée ou si le designer n’a pas une bonne vue d’ensemble sur la façon de produire des skins Flex. Il faut dire que l’offre d’Adobe est assez vaste, notamment au sein de la Creative Suite.

Nous allons donc vous présenter l’une des manières possibles (il y en a bien évidemment d’autres) pour skinner des composants Flex avec quatre outils de la Creative Suite, en l’occurrence Flash, Illustrator, Photoshop et Fireworks. Nous illustrerons chaque cas d’un exemple sous forme de mini tutoriel, et nous terminerons par un récapitulatif.

Il faut savoir que les skinnings ci-dessous ont été réalisés avec la version 4 de la Creative Suite (sauf pour Flash en version CS3 Professional) mais qu’il est tout à fait possible de faire les mêmes manipulations sur la version 3. Flex Builder est utilisé en version 3.0, en tant que plug-in d’Eclipse (version 3.3.2).

Flash

Le skinning depuis Adobe Flash semble à première vue le plus simple du fait des points communs entre ce logiciel et Flex, notamment le format (fichiers .swf) et le langage (l’ActionScript). Voyons dans la pratique un cas de skinning.
Adobe propose quelques éléments permettant d’automatiser et de simplifier ce processus : nous allons donc les utiliser, sachant qu’il existe d’autres manières de faire mais qui peuvent se révéler plus couteuses.

Avant tout, il faut télécharger deux plug-ins :

L’installation de ses éléments se fait très simplement, en ouvrant les fichiers .mxp qui sont en fait du format utilisé par l’Adobe Extension Manager.

Nous allons maintenant skinner un simple bouton Flex. Pour cela, lançons Flash et choisissons File > New. Dans l’onglet Templates apparaît alors la catégorie Flex Skins (grâce aux plug-ins installés). Dans notre cas, nous allons choisir Button, mais nous pourrions décider de skinner tous les éléments en choisissant flex_skins.

file_new_flash

Un template est alors créé, avec un bouton. Cela diffère des templates sur les autres logiciels de la suite, qui présentent les quatre états du bouton directement.

button_skin_flash

Un simple double clic sur ce bouton nous emmènera en mode édition où l’on verra apparaître les quatre états (up, over, down, disabled) au niveau de la timeline. Il sera alors possible de modifier ces quatre états séparément.

button_timeline_flash

Une fois les éléments modifiés, il faut les exporter sous forme de fichier .swc (bibliothèque ActionScript) en faisant File > Export > Export Animation. Après avoir choisi le nom du fichier (attention, ici Flash propose d’enregistrer en .swf : c’est après que nous spécifions que nous voulons également un .swc), nous remplissons les propriétés d’export : il faut bien spécifier la version d’ActionScript (3.0) pour que cela soit compatible avec Flex 3 (cette remarque est également valable pour la version 2) et cocher la case Export SWC.

export_flash

Le reste se déroulera dans le Flex Builder ! Nous allons devoir importer le skin du bouton. Pour cela, assurez vous tout d’abord que le fichier .swc se trouve dans l’arborescence de votre projet (dans assets/swc par exemple). Ensuite, choisissons File > Import… puis Artwork dans le dossier Flex Builder puis Next. Cochons la case SWC or SWF file et cliquons sur Browse pour choisir le fichier fraîchement généré. Il est ensuite possible de choisir l’endroit où sera générée la feuille de style CSS, son nom ainsi que l’application dans laquelle elle sera incluse.

import_flex_flash

Ensuite, cliquons sur Next. Flex proposera automatiquement les éléments du fichier .swc à importer dans le projet. Dans notre cas, il n’y a qu’un bouton. Cochons donc celui-ci et cliquons sur Finish. Que se passe-t-il alors ? Flex génère une feuille de style contenant les éléments suivants :

flex_css_flash

Cela montre que nous importons une classe de skin complète, et non uniquement des éléments graphiques formant un skin. La feuille de style est également importée dans l’application :

flex_app_flash

Il ne nous reste plus qu’à lancer notre application pour constater le résultat. Nous voilà avec notre bouton skinné mais déformé. On constate qu’il ne perd pas pour autant sa qualité, ceci étant du au fait que c’est un élément vectoriel.

flex_skin_final_flash

Pour résumer, nous avons donc pu créer un skin en utilisant le logiciel Adobe Flash de la Creative Suite via les étapes suivantes :

  • Installation des plug-ins
  • Génération d’un fichier .swc à partir d’un template
  • Import de ce fichier dans Flex
  • Génération et inclusion automatique de la feuille de style CSS associée

Illustrator

Le skinning depuis Adobe Illustrator ressemble à celui de Flash, du fait de sa ressemblance (génération de .swf, vectoriel, etc.). Nous allons donc parfois aller plus vite sur quelques étapes en commun.

De la même manière pour débuter, il faut télécharger un plug-in qui nous permettra de simplifier le processus de skinning : Flex Skin Design Extensions for Illustrator.

Le fichier .zip est à décompresser dans le dossier d’installation d’Illustrator (CS3 ou CS4) (exemple : C:Program FilesAdobeAdobe Illustrator CS4). Il ajoutera de nouveaux templates ainsi que de nouveaux scripts. Lançons à présent Illustrator, puis choisissons File > Scripts > Flex Skins > Create Flex 3 Skin. Nous pouvons alors choisir le composant à skinner, ou tous les composants ensemble. Dans notre exemple, nous skinnerons cette fois une CheckBox.

file_new_illustrator

Ici, pas de timeline : nous voyons l’ensemble des différents états, chacun sous forme d’un symbole. Nous pouvons donc les modifier séparément.

checkbox_skin_illustrator

Une fois votre skin créé, il faut l’exporter. Attention à ne pas choisir File > Export, qui est l’export “normal”. Il faut bien penser à passer par File > Scripts > Flex Skins > Export Flex 3 Skin. Il ne reste plus qu’à choisir le nom du fichier. Ici, ce sera un .swf qui sera généré. On peut par exemple l’enregistrer dans notre projet Flex, dans le dossier assets/swf. Il n’y a pas plus de paramètres à remplir avec Illustrator. Nous pouvons donc ouvrir notre projet Flex et, de la même manière que dans l’exemple sur Flash, importer notre skin en faisant File > Import… puis Artwork dans le dossier Flex Builder. Cochons la case SWC or SWF File et sélectionnons le skin, exactement comme sous Flash. En faisant Next, nous voyons cependant une différence : il n’y a plus une seule ligne pour un composant (indiqué par la clé skin dans la colonne Skin Part) mais une ligne par état. Cela vient du fait qu’en Flash nous exportions une classe typée, alors qu’ici nous n’avons que des éléments graphiques.

import_flex_illustrator

Cliquons sur Finish. Nous avons donc généré un fichier CSS et son import dans notre application. Ce dernier est fait de la même manière que lors d’un import de skin Flash, mais le fichier CSS présente lui quelques différences :

flex_css_illustrator

La classe de skin n’est plus spécifié mais seulement les éléments graphiques skinnables (ici upIcon, downIcon, etc.). Ces différences sont importantes, nous reviendrons dessus par la suite. Au final, nous avons donc notre CheckBox skinnée telle que sous Illustrator :

flex_skin_final_illustrator

Pour résumer, nous avons donc pu créer un skin en utilisant le logiciel Adobe Illustrator de la Creative Suite via les étapes suivantes :

  • Installation du plug-in
  • Génération d’un fichier .swf à partir d’un template
  • Import de ce fichier dans Flex
  • Génération et inclusion automatique de la feuille de style CSS associée

Photoshop

Le skinning depuis Adobe Photoshop comporte quelques différences comparé à ceux précédemment présentés, notamment de part son format de sortie (des fichiers .png).

Pour débuter, nous allons également devoir télécharger un plug-in : Flex Skin Design Extensions for Photoshop.

Le fichier .zip est à décompresser dans le dossier d’installation de Photoshop (CS3 ou CS4) (par exemple : C:Program FilesAdobeAdobe Photoshop CS4). Il ajoutera de nouveaux templates ainsi que de nouveaux scripts. Lançons à présent Photoshop, puis choisissons File > Scripts > New Flex Skin. Nous pouvons alors choisir le composant à skinner de la même manière que dans Illustrator. Pour cet exemple, nous allons skinner un Panel. Tous les éléments sont affichés, et disposés dans différents layers.

panel_skin_photoshop

Une fois le composant skinné, nous allons l’exporter par File > Scripts > Export Flex Skins… mais attention ! Avant cela, il faut cacher le dossier _HIDE BEFORE EXPORTING pour ne pas générer des éléments en trop. Lors de l’export, il est demandé de choisir le dossier d’export. Typiquement, nous pouvons choisir le dossier assets/png de notre projet Flex. Photoshop générera alors un dossier assets (ce qui n’est pas forcément pratique) contenant tous les .png des éléments du template, selon sa convention de nommage. Allons maintenant dans notre projet Flex et comme précédemment, nous allons passer par File > Import puis nous choisirons Artwork. Ici, nous sélectionnerons Folder of images et pointerons sur le dossier contenant les .png générés.

import_flex_photoshop

L’écran suivant propose les mêmes choix que pour Illustrator : il liste en fait l’ensemble des images ainsi que leurs états associés. C’est là que leurs noms sont importants : sans cela les éléments ne seraient pas reconnus. Après avoir tout coché, nous avons donc une feuille de style CSS générée ainsi que l’import dans le fichier de l’application. Le fichier CSS se présente de la même manière que dans Illustrator, c’est à dire en séparant les composants graphiques. A la différence près que les éléments sont des images de type .png et non un nom de symboles dans un fichier .swf. Le résultat final sera donc un Panel ressemblant à cela :

flex_skin_final_photoshop

Il faut noter que l’on peut percevoir une perte de qualité, du fait que le skin est une image qui pourra se retrouver déformée. Le rendu final est donc moins propre qu’avec des éléments vectoriels.

Nous avons créé un skin en utilisant le logiciel Adobe Photoshop de la Creative Suite via les étapes suivantes :

  • Installation du plug-in
  • Génération de fichiers .png à partir d’un template
  • Import de ces fichiers dans Flex
  • Génération et inclusion automatique de la feuille de style CSS associée

Fireworks

Le skinning depuis Adobe Fireworks générera également en sortie des images de type .png. Pour cela, il nous faudra également un plug-in : Flex Skin Design Extensions for Fireworks.

L’installation de ce plug-in s’effectue en ouvrant le fichier .mxp qui sera utilisé par l’Adobe Extension Manager. Lançons à présent Fireworks, puis choisissons Commands > Flex Skinning > New Flex Skin. Nous pouvons alors choisir le composant à skinner de la même manière que dans Illustrator et Photoshop. Pour cet exemple, nous allons skinner un TextInput. Tous les éléments sont affichés, et disposés dans différents layers.

Une fois le composant skinné, nous allons l’exporter par Commands > Flex Skinning > Export Flex Skin et choisir le dossier d’export comme par exemple assets/png dans notre projet Flex. Fireworks générera dans ce dossier les images .png se rapportant aux états du composant skinné. L’import de ces ressources s’effectuera dans le projet Flex de la même manière qu’auparavant, en choisissant File > Import… puis Artwork dans Flex Builder. Ensuite, il faut choisir Folder of images et sélectionner le dossier contenant les images générées.

import_flex_fireworks

De nouveau, Flex Builder génère une feuille de style CSS ainsi que l’import de ce fichier dans l’application. La feuille de style pointe sur les fichiers .png. Ainsi, on obtiendra notre TextInput skinné :

flex_skin_final_fireworks

Le skin étant une image, on pourra constater une perte de qualité dans le cas d’un agrandissement de la zone de texte. Cela vient du format d’image .png.

Nous avons donc pu créer un skin en utilisant le logiciel Adobe Illustrator de la Creative Suite via les étapes suivantes :

  • Installation du plug-in
  • Génération de fichiers .png à partir d’un template
  • Import de ces fichiers dans Flex
  • Génération et inclusion automatique de la feuille de style CSS associée

Conclusion

Voici un tableau récapitulatif des différences de skinning entre les 4 outils de la Creative Suite :

Outil
 Fichier(s) généré(s)
 Import
 Type de skin
Flash
 une bibliothèque .swc CSS généré par Flex Builder Classe skinnée
Illustrator
 un fichier .swf CSS généré par Flex Builder Eléments graphiques vectoriels
Photoshop
 un dossier avec des images .png CSS généré par Flex Builder Images
Fireworks
 un dossier avec des images .png CSS généré par Flex Builder Images

De ce tableau ressort deux différences importantes. Tout d’abord au niveau du fichier généré : alors que Flash et Illustrator ne génèrent qu’un fichier pouvant contenir un ou plusieurs skins, Photoshop et Fireworks génèrent autant de fichiers que d’états par skin, ce qui peut vite devenir lourd dans le cas d’une application de taille importante où l’on aurait une dizaine de composants à skinner.

L’autre différence majeure se situe au niveau du type de skin : en effet, alors que Photoshop et Fireworks ne produisent que des bitmaps, Illustrator et Flash génèrent des images vectorielles, ce qui offrira une plus grande souplesse si l’on souhaite modifier les dimensions de certains composants. On comprend donc facilement que l’on préférera utiliser Illustrator ou Flash (si cela est possible) pour skinner nos applications Flex.

Il existe toutefois une différence intéressante entre les éléments générés par Flash et Illustrator. Ce dernier créé un fichier .swf contenant des symboles qui ne sont que des éléments graphiques qui serviront à surcharger l’apparence de composants sur l’un de ses états (par exemple : états up, down, over, disabled). Flash génère lui une bibliothèque contenant une classe de type “Skin”. Elle permet de définir plus de comportements sur un composant, comme par exemple les transitions entre ses différents états. On parle alors de programmatic skinning.

Au final, les outils de la Creative Suite permettent de créer de manière relativement automatisé des skins pour une application Flex. Mais ce qui reste le plus important pour garder une certaine flexibilité et une simplicité dans le processus est la communication entre les designers et les développeurs. L’idéal est de mettre en place un ensemble de bonnes pratiques pour le skinning, comme par exemple :

  • Définir une règle de nommage (exemple : btn_red_up, btn_blue_down, txtarea_light, etc.).
  • N’utiliser qu’un seul logiciel pour produire des skins
  • Conserver une trace des différentes évolutions des skins

En mettant ce genre de pratiques en places, il vous sera alors possible d’avoir un processus fiable de skinning de vos applications Flex en utilisant la Creative Suite d’Adobe.

Cet article a été écrit en se basant notamment sur l’article de référence d’Adobe : http://www.adobe.com/devnet/flex/articles/skins_styles.html