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.

La technologie Flex a été créée par Macromedia en 2004 puis reprise par Adobe en 2006. La version actuelle est la 3.2, et une version 4.0 (nom de code Gumbo) est en préparation pour la seconde moitié 2009. Au sens strict, Flex est un framework de développement s’appuyant sur le Flash Player et offrant des éléments facilitant la création d’applications riches. Depuis la version 3, Flex est devenu un projet open source.

Principes et caractéristiques

La technologie Flex peut être expliquée en trois couches :

• L’interface est décrite à l’aide d’une syntaxe MXML (Macromedia XML). On peut y placer et organiser les conteneurs, composants et contrôles selon une hiérarchie. Les fichiers .mxml sont ensuite transcrits en ActionScript (fichiers .as) au moment de la compilation.
• La logique applicative sera généralement contenue dans des fichiers ActionScript. L’ActionScript 3 est le langage utilisé pour créer des exécutables Flash (.swf). C’est un langage objet basé sur ECMAScript (norme ECMA), ce qui lui donne une forte ressemblance avec le Javascript au niveau grammatical, bien qu’il soit également assez proche du Java.
• Les applications Flex, tout comme ce que l’on peut créer avec le logiciel Flash CS4, sont de simples exécutables Flash de type .swf. Flex fournit tout de même une page HTML permettant simplement d’intégrer l’application sur une page web.
• Flex permettant de réaliser des RIA, on peut effectuer un certain nombre de traitements coté client. Néanmoins, son architecture reste la plupart du temps de type client-serveur. Flex (et les diverses communautés open source) offre diverses possibilités de communication avec un serveur, qu’il s’agisse du PHP (AMFPHP), du .NET (FluorineFx), du Java (BlazeDS, LCDS) ou toute technologie pouvant exposer des web services.

La version actuelle de Flex offre les possibilités suivantes :

• un ensemble de contrôles “riches” pour facilement créer des applications : check box, calendrier, grille de données, combo box, etc.
• le “data binding”, permettant de lier un champ graphique à une valeur : si cette dernière change, la vue est automatiquement rafraîchie avec la nouvelle valeur
• la lecture de médias (vidéo, audio) dans les formats H264, H263, On2VP6, MP3 et des images de types GIF, JPG et PNG
• l’intégration de l’e4x, permettant de manipuler simplement du XML
• la possibilité de personnaliser l’application avec des feuilles de styles CSS et de les skinner en utilisant des images ou des animations de type .swf

Outils

La technologie Flex s’appuie sur l’éditeur Flex Builder, lui même basé sur Eclipse : il profite donc des possibilités de cet environnement. Précision : Flex Builder existe en version “stand-alone” ou en tant que plugin Eclipse. Cet éditeur offre de nombreuses possibilités, se rapprochant de celles disponibles en Java sur Eclipse : complétion, coloration syntaxique, refactoring mais aussi une version WYSIWYG (What You See Is What You Get) des fichiers MXML et CSS, un mode débug et un profiler (pour monitorer la mémoire utilisée).

L’une des forces de Flex est aussi de s’interfacer correctement avec les autres produits d’Adobe : il est en effet tout à fait possible d’utiliser les logiciels Flash, Fireworks ou Illustrator pour créer des skins et des composants Flex. Le lien entre designers et développeurs est très important pour Adobe : c’est également pour cela qu’un nouveau logiciel, nommé Flash Catalyst, arrive bientôt. Il permet très simplement de créer une interface Flex (aspect graphique, comportement)  sans avoir à écrire une ligne de code ! L’ensemble de éléments mis bout à bout forme un workflow designer / développeur, thème récurrent autour de la technologie Flex.

Adobe propose également des solutions serveur Java pour faciliter la communication et les échanges avec une interface Flex. Il s’agit de BlazeDS, projet open source et de Live Cycle Data Services, solution payante. La première est un sous-ensemble de la seconde, mais elles offrent toutes les deux les meilleurs outils de communication Flex - Java. Il existe également d’autres outils de communication mais ceux-ci ne sont pas gérés par Adobe.

Points forts

La technologie Flex s’appuyant sur le Flash Player, elle profite de ce fait des avantages de ce dernier. Cela lui fait donc profiter de l’expérience des 10 versions du Player mais également d’une communauté importante de développeur “Flash”.  On peut ainsi citer quelques points forts de Flex :

• sa capacité de déploiement : le Flash Player est installé sur près de 98% des ordinateurs (source : chiffres Adobe) en version 9 ou plus. Un site indépendant, RIAStats, montre un taux de 97% d’installation.
• son ubiquité : il existe un Flash Player sur Windows, Mac OS et Linux (encore en version 9 sur ce dernier).
• son environnement de développement, basé sur Eclipse.
• sa capacité à pouvoir dialoguer avec différents languages serveur, en utilisant les différents moyens de communication : les appels http classiques, les web services, les RemoteObject, l’AMF, etc.
• sa gestion des médias : le format Flash est en effet le plus répandu sur Internet pour la diffusion de contenu vidéo (cf. des sites comme Youtube ou dailymotion).
• sa large communauté, s’appuyant en partie sur les nombreux développeurs Flash déjà existants. On trouve de nombreux documents et exemples sur Internet.

Points faibles

De la même manière que Flex profite des points forts de Flash, elle souffre également des mêmes problèmes. De nombreux développeurs web n’apprécient pas Flash en mettant en cause son incapacité à créer des applications accessibles, à être correctement référencées ou encore à fonctionner correctement avec les barres de navigation des navigateurs.

Ces affirmations ne sont pas tout à fait vraies. En effet, il existe un ensemble de propriétés permettant de rendre accessible les applications. Les moteurs de recherche commencent à référencer le contenu de fichier .swf et la version 3 de Flex permet d’interagir correctement avec la barre de navigation des navigateurs. Des efforts sont donc fait mais ces points restent vrais et demanderont forcément un supplément de travail comparé par exemple à un développement d’une application web en HTML.

De plus, si l’on constate que la communauté Flash est importante, elle est en grande partie constitué de designers ayant des connaissances en développement, et pas toujours de développeurs confirmés ou d’architectes. Bien que ce type de profil est en train de se répandre, elle reste encore une minorité dans le monde de l’ActionScript.

Le futur

Une version 4 du framework Flex ainsi que du Flex Builder est en préparation, elles devraient être disponibles durant la seconde moitié de 2009 et apporter leur lots de nouveautés :

• une amélioration de la collaboration entre design et développement, notamment en simplifiant le processus de skinning de composants pour qu’il soit très poussé sans avoir à coder en ActionScript, juste avec une description mxml.
• l’ajout de nouveaux éléments pour profiter des capacités du Flash Player 10, notamment un composant vidéo refait et peut-être de la 3D
• une amélioration de la productivité en optimisant le compilateur, avec pour objectif des temps divisé par 5 !
• une plus grande interaction avec la technologie AIR d’Adobe

Une présentation plus complète est disponible sur le site du Flex SDK : Gumbo Themes (Gumbo étant le nom désignant Flex 4)

Flex étant devenu récemment un projet open source, il n’est pas simple à l’heure actuelle de voir une stratégie à long terme. On peut toutefois penser que cette technologie va continuer à s’ouvrir pour agrandir encore sa communauté et renforcer sa position. De la même manière, le portage d’applications Flex sur des téléphones mobiles dépendra de la future version du Flash Player, dont on dit que c’est son objectif principal.

Références

Voici quelques applications réalisées avec Flex :

• Le Tour de Flex, application AIR compilant des possibilités de Flex
• Acrobat.com, un ensemble de services d’Adobe dont notamment les impressionants Buzzword (traitement de texte avancé) et ConnectNow (pour le travail collaboratif)
• Aviary, un suite d’outil d’édition graphique
• Le décorateur de Sherwin-Williams, permettant de colorer des pièces d’intérieur ou des extérieurs avec plus d’un millier de couleur. Le rendu est bluffant, et l’on se rend bien compte des possibilités utilisés au niveau du rendu des ombres et des couleurs.

Liens

Voici quelques liens complémentaires, des sources d’informations à surveiller pour ceux qui s’intéressent à la technologie Flex :

• Le site open source du Flex SDK
• Le site open source de BlazeDS
• Le Flex Developer Center, point d’entrée vers de nombreuses ressources
• Flex.org, portail communautaire autour de Flex où l’on trouve de nombreux composants, un showcase, des offres d’emploi, etc.
• Le blog officiel de l’équipe Adobe Flex

Bilan

En se basant sur le Flash Player, la technologie Flex a su s’imposer pour devenir très utilisée dès lors que l’on parle d’applications RIA. En effet, en s’appuyant sur l’écosystème Flash déjà existant, elle a su se développer rapidement et communiquer efficacement. Flash étant par définition une technologie graphique, il est normal que les rendus proposés soient de qualité supérieure aux interfaces “classiques”. Le virage open source pris par Flex va certainement changer l’évolution de cette technologie qui semble atteindre une certaine maturité.

Présentation

Silverlight est la technologie riche de Microsoft. Autrefois appelée WPF/E (Windows Presentation Foundation / Everywhere), cette technologie a été renommée Silverlight puis présentée lors de l’événement MIX 07 de Microsoft. La première version disponible fut la 1.0 bêta, lancée en même temps que Silverlight 1.1 alpha. A l’heure actuelle, la version 2 est sortie en octobre 2008 et la version 3 est en préparation (prévue pour courant 2009).
Silverlight est une machine virtuelle ou plugin permettant d’exécuter des applications Silverlight sur différents systèmes d’exploitations (Windows, Mac OS, Linux via le projet Moonlight) à l’intérieur de différents navigateurs (Internet Explorer, Firefox, Safari). Grâce à son moteur de rendu vectoriel, Silverlight souhaite offrir de nouvelles expériences beaucoup plus riches aux utilisateurs. Un raccourci rapide serait de dire que Silverlight est le FlashPlayer de Microsoft. Elle fut en effet proclamée comme telle lors de sa sortie, beaucoup de personnes parlant alors de “Flash-killer”.

Principes et caractéristiques

Comme la plupart des technologies permettant de réaliser des applications riches, Silverlight se découpe en couches.

• La première concerne la description de l’interface, faite à l’aide d’une syntaxe XML propre à Microsoft, le XAML. L’avantage de cette syntaxe est qu’elle permet de visualiser plus simplement l’agencement des éléments qu’avec un langage impératif. De plus, Microsoft fournit un outil (ExpressionBlend) permettant de visualiser le rendu du XAML à la volée (on parle alors de WYSIWYG (What You See Is What You Get)).
• La seconde décrit la logique de l’application, son comportement à avoir en fonction des interactions de l’utilisateur. Cette partie est réalisée en utilisant l’un des langages compatibles avec Silverlight, soit du C#, duVisual Basic, du JavaScript, du Python ou du Ruby. Ainsi, n’importe quel développeur connaissant l’un de ces langages pourra aisément développer une application Silverlight.
• Enfin, la dernière couche concerne la diffusion et le déploiement. Une application Silverlight s’exécute dans un navigateur, via leplugin du même nom. Il faut donc déposer certains fichiers sur un serveur web : un “conteneur” html qui inclura l’application et un fichier .xap qui est une archive compressée contenant les ressources et le contenu de l’application.

Bien que la version 1 de Silverlight ait apporté quelques fonctionnalités intéressantes (lecture de vidéo haute qualité, DeepZoom), la communauté a vite pointé quelques manques qui ont pour la plupart été comblés avec la version 2. Silverlight propose entre autres les fonctionnalités suivantes :

• un ensemble de contrôles “riches” pour facilement créer des applications : check box, calendrier, grille de données, combo box, etc.
• le “data binding”, permettant de lier un champ graphique à une valeur : si cette dernière change, la vue est automatiquement rafraîchie avec la nouvelle valeur
• la possibilité d’accéder au DOM (Document Object Model) de la page html servant de “conteneur” et ainsi d’interagir avec
• la lecture de médias (vidéo, audio) dans les formats VC1, WMV, WMA, MP3 et des images de types GIF, JPG et PNG
• la lecture / écriture de fichiers XML
• la lecture d’un flux ATOM et RSS
• l’intégration du composant LINQ permettant de requêter des données grâce à une syntaxe proche du SQL et de le transcrire en XML
• la communication externe avec des appels http, webservice ou la gestion de sockets

Bien évidemment, d’autres fonctionnalités sont disponibles. Pour avoir une vue d’ensemble, vous pouvez consulter le Silverlight 2.0Developer Reference.

Outils

Le développement d’une application Silverlight se réalise notamment autour de plusieurs outils. Bien qu’il existe de nombreux environnements pour développer en .NET, la solutionVisual Studio est la plus à même de convenir aux développeurs Silverlight. Il suffit pour ce faire d’installer une extension gratuite, les Microsoft Silverlight Tools. La suite Visual Studio est un IDE très répandu parmi les développeurs de très bonne qualité, ce qui ne dépayse pas le développeur .NET.
Il faut toutefois savoir que Visual Studio permet de développer le code de “logique applicative” ainsi que d’écrire du XAML, mais il existe un outil bien plus spécifique pour ce dernier : Expression Blend.
Expression est une suite logicielle de création graphique et numérique. Le logiciel Expression Blend va permettre de créer des interfaces riches (donc du XAML) très facilement avec son système WYSIWYG. Les éléments graphiques sont directement positionnés sur l’application et le XAML est généré, bien qu’il soit possible de l’éditer. Attention toutefois, Expression Blend ne permet pas d’éditer le code de “logique applicative”.
Pour pouvoir développer entièrement une application Silverlight, on va alors avoir besoin de deux outils : Visual Studio et Expression Blend.

Points forts

Bien qu’étant une technologie récente, Silverlight a tout de même de nombreux points forts. Microsoft a su produire un plugin de qualité qui, sans pour autant rattraper le retard sur le Flash Player, a su se faire remarquer dans le domaine des RIA, et ce pour plusieurs raisons :

• tout d’abord en axant sa communication en partie autour de la qualité vidéo, offrant son propre service de streaming et une très belle qualité d’image. A l’heure où la vidéo sur Internet occupe une place prépondérante, Microsoft a donc pu s’en servir comme fer de lance de sa technologie.
• des composants intéressants et novateurs, comme le DeepZoom qui permet de visualiser des images et des documents de grande taille en offrant un agrandissement très fluide.
• le support de différents langages de programmation, permettant ainsi de toucher plus de développeurs ainsi qu’une plus grande communauté.
• un environnement de développement éprouvé et apprécié : en effet, Visual Studio est un outil bien connu et très utilisé.

Points faibles

Toutefois, Silverlight reste une technologie encore jeune. Pour afficher les applications Silverlight, un plugin est nécessaire et son déploiement sur les navigateurs prendra forcément de nombreuses années. Il existe toutefois un site qui donne des chiffres en se basant sur les statistiques de visites de sitesweb par des utilisateurs lambda. On s’aperçoit que Silverlight est installé sur plus de 16% des ordinateurs, ce qui représente un chiffre relativement faible comparé au taux d’installation du FlashPlayer, mais impressionnant en sachant que celui-ci n’est présent que depuis un an et demi. Microsoft annonçait en octobre 2008 30% de pénétration aux USA et jusqu’à 50% dans certains pays.
Bien que l’utilisation de Visual Studio soit un plus dans le développement d’une application Silverlight, le fait d’avoir besoin de deux logiciels pour travailler est relativement gênant : il n’existe pas de réel outil complet pour créer des applications Silverlight. Peut-être dans un futur proche ?
Enfin, les sources et les exemples sur le net reste assez peu nombreux. La technologie reste jeune et ne bénéficie pas, si on la compare à la technologieFlex, d’un passé de 10 ans (issu de Flash). Les documentations et autres exemples sont donc plus rares, tout comme les compétences.

Le futur

Silverlight prépare sa version 3 qui sortira courant 2009, et l’on sait d’ores et déjà qu’elle se dirige vers des fonctionnalités déjà présente dans le Flash Player, notamment :

• la prise en charge de la norme h264 pour des vidéos de haute qualité
• le support de la 3D en utilisant les ressources de la carte graphique

• une vue graphique (WYSIWYG) entièrement intégrée dans l’outil de développement (Visual Studio)

Mais également une amélioration du data-binding et de nouveaux contrôles.

Le futur de Silverlight se dirige également vers les mobiles ! Ce marché très en vue actuellement se verra doté d’une version spécifique (appelée Silverlight Mobile), basée sur Silverlight 2 et qui sera disponible surWindows Mobile vers la fin 2009.

Références

Voici quelques applications réalisées avec Silverlight :

• Site d’information de France Télévisions centré sur de la diffusion vidéo. Utilisé également pour diffuser les JO de Pékin 2008.
• Une mosaïque présentant au mieux la fonctionnalité DeepZoom.
• Le client mail d’AOL, en bêta (accessible avec un compte mail AOL)
• Le Microsoft Health Demonstrator, simulateur d’une application de gestion d’un hôpital particulièrement réussie.

On peut retrouver de nombreuses démonstrations sur le showcase du site Silverlight

Liens

Voici quelques liens complémentaires, des sources d’informations à surveiller pour ceux qui s’intéressent à la technologie Silverlight :

• Le site de Silverlight sur microsoft.com
• silverlight.net : Silverlight community site
• Le blog .NET 3.0 Cornucopia, plus technique
• Silverlight sur le MSDN
• Le blog de Scott Guthrie, où l’on y retrouve toujours les dernières infos
• Le site de Silverlight Mobile

Bilan

En un peu plus de 2 ans d’existence, Silverlight a su devenir l’une des technologies riches principales du marché, porté par les efforts de Microsoft et de ses nombreux partenaires pour la mettre en avant et la valoriser. Malgré que sa jeunesse la desserve sur certains points comme parfois le manque d’informations ou le taux de pénétration encore “faible”, la technologie Silverlight offre de belle capacités techniques en se positionnant entre autres sur le domaine de la vidéo. En utilisant au mieux ses outils existants (Visual Studio) et en misant sur la pluralité des langages, elle est a même de toucher le plus grand nombre de développeurs possibles, et donc d’utilisateurs.
On suivra donc bien évidemment la troisième version ainsi que le portage sur mobile prévus en 2009.

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 :

• Flex Skin Design Extensions for Flash
• Flex Component Skin for Flash CS3 Professional (compatible CS4)

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.

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.

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.

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.

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.

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 :

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 :

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.

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.

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.

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.

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 :

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 :

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.

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.

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 :

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.

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é :

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 :

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