Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Optimisation de code MXML dans Flash Catalyst – Partie 1 d'Illustrator à Catalyst

Compatible Flash Catalyst CS5. Cliquer pour en savoir plus sur les compatibilités.Compatible Illustrator CS5. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 17 mars 2011

Cet article est une traduction du tutoriel Optimizing MXML code in Flash Catalyst “Panini” de Fabio Biondi.

Fabio Biondi m'a donné son accord concernant la traduction de ce tutoriel.

Présentation

Dans cet article, nous allons importer une mise en page Adobe Illustrator CS5 dans Flash Catalyst “Panini”.

Vous avez besoin de lire les chapitres précédents pour comprendre cet article.

Pourquoi Flash Catalyst ?

Illustrator, Photoshop et Fireworks supportent et peuvent exporter au format standard FXG (Graphiques Flash en XML), un standard basé sur XML introduit par Adobe pour échanger des fichiers graphiques au travers des outils de la plateforme Flash.
Un fichier FXG utilise une syntaxe XML pour décrire des formes géométriques, du texte riche et pour insérer des liens sur les images bitmap.

Ainsi, vous pouvez créer une mise en page dans Illustrator, l'exporter au format FXG et l'utiliser dans Flash Builder sans aucune modification. Cette procédure, bien que correct, devient problématique dans le cas de mises en page très complexe. Les fichiers FXG peuvent contenir beaucoup de code et donc sont difficilement gérable en utilisant uniquement Flash Builder.

Flash Catalyst joue un rôle essentiel à ce stade et agit comme la colle entre les outils de conception et de développement.
En utilisant Catalyst, vous pouvez facilement importer des mises en page Illustrator (.ai), Photoshop (.psd) et Fireworks (.png) et ainsi faciliter le processus entier de conversion de graphiques statiques au format MXML.

Avec Flash Catalyst, vous pouvez aussi:

  • convertir les objets graphiques en composants natifs Flex: bouton, barres de défilement, listes, champs de texte, conteneurs…
  • créer des skins Spark
  • gérer les événements des composants (click, rollover…)
  • appliquer des transitions, des effets et des filtres
  • créer et gérer des états pour l'application et les composants
  • générer du code MXML
  • optimiser et diviser le code MXML en utilisant les composants personnalisés

Pourquoi Illustrator ?

Simplement parce que les graphiques vectoriels sont les plus appropriés pour la création de composants Flex 4 redimensionnable et qu'Adobe Illustrator est le meilleur outil pour cela.
Cependant vous pouvez utiliser Fireworks ou Photoshop, si vous préférez.

Créer la mise en page Illustrator

Comme le lecteur RSS est composé de trois sections distinctes, dans Illustrator il sera intéressant d'utiliser les plans de travail pour séparer clairement la mise en page de chaque page.

Un avantage majeur dans l'utilisation des plans de travail d'Illustrator est que lors du processus d'import, Flash Catalyst les convertira automatiquement en états de l'application, où les noms correspondront à ceux des plans de travail.

Les plans de travail dans Adobe Illustrator CS5:

001a_illustratorartboards.jpg

Le panneau Plans de travail d'Adobe Illustrator CS5:

Le panneau Etats après l'import:

002_catalyststates.jpg

Flash Catalyst après l'import des états:

005_catalyst_after_import.jpg

La mise en page Illustrator est divisé en différents niveaux de calques pour une meilleure organisation du projet et cette structure de niveaux sera maintenue dans Flash Catalyst. La plupart des niveaux et des sous-niveaux ont un nom d'identification, qui sera également importé dans Flash Catalyst et sera utile pour identifier les objets graphiques.

Le panneau Calques d'Adobe Illustator CS5:

Il est également préférable de ne pas utiliser de liens vers les objets extérieurs, les images et tous les éléments qui devraient figurer dans le fichier Illustrator.

Dans l'article Adobe Flash CS5 best practices, Andrew Shorten fournit plusieurs lignes directrices pour créer des mises en page dans Illustrator et faciliter l'import et l'utilisation des ces mises en page dans Flash Catalyst.

Cependant, avant de créer n'importe quelle mise en page dans Illustrator, Photoshop et Fireworks, designeurs et developpeurs doivent discuter ensemble pour définir les lignes directrices de leur implémentation, dans le but de minimiser les problèmes et inconvénients qui peuvent apparaître durant le processus d'import.

Import de mises en page Illustrator dans Flash Catalyst

Ouvrez Flash Catalyst et sélectionnez “Depuis un fichier Adobe Illustrator AI” depuis la page d'accueil.

Sélectionnez et importez le fichier Layout.ai qui contient les dessins vectoriels.

002_import_illustrator_layout.jpg

Laissez les options par défaut dans le panneau “Options d'importation Illustrator” à l'exception de la propriété “Texte” qui doit être défini sur “Conserver le caractère modifiable” afin qu'Illustrator conserve les zones de texte et ne les convertisse en symbole graphiques.

Après la confirmation (cliquez sur le bouton OK), un message d'avertissement peut apparaître si vous utilisez des filtres ou des masques dans le fichier Illustrator.

Flash Catalyst génère alors un projet constitué de 3 états, un pour chaque plan de travail Illustrator, où les noms d'identification sont identiques aux noms appliqués aux plans de travail Illustrator.

005_catalyst_after_import.jpg

Par le panneau “PAGES / ETATS”, vous pouvez désormais visualiser les états de l'application.

En utilisant l'outil Sélectionner 005_selecttool.jpg, vous pouvez sélectionner manuellement des éléments directement depuis la zone de travail.

Pour facilement sélectionner tous les éléments d'un état, il est possible de sélectionner le dossier approprié dans le panneau Calques.

Regardez les images ci-dessous où je sélectionne les éléments des états “SplashScreen” et “BlogList” en utilisant le panneau Calques.

Le code MXML généré

Durant le processus d'import d'une mise en page Illustrator, le fichier Main.mxml est automatiquement créé et représente le fichier principal de l'application utilisé dans Flash Builder, et dans lequel tous les objets graphiques récupérés depuis Illustrator sont convertis au format MXML et FXG, les états et les transitions sont créés, et ainsi de suite.

Il a également généré le fichier main.css, utilisé par le fichier Main.mxml et qui contient naturellement les styles CSS nécessaires à l'application.

Pour visualiser le code généré, choisissez Code depuis le menu Espace de travail, en utilisant le menu déroulant situé en haut à droite de l'IDE Flash Catalyst.

Flash Catalyst affiche désormais 3 nouveaux panneaux:

  • Sur le côté gauche le panneau “Code” qui affiche le code MXML (l'édition n'est pas autorisée)
  • Sur le côté droit le panneau “Navigateur de projet”, qui montre la structure de répertoires du projet Flex
  • En bas le panneau “Erreurs” indique les possibles erreurs ou avertissements

Le code actuel, cependant, excède déjà plus de 500 lignes.
Durant le tutoriel, l'application sera divisée en composants qui permettront de rendre le code plus lisible et plus facilement maintenable.

Sommaire