Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Optimisation de code MXML dans Flash 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 01 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 ce tutoriel (divisé en 9 chapitres), nous allons créer un prototype d'une lecteur RSS typique pour les mobiles en utilisant Adobe Flash Catalyst et en important la mise en page depuis Adobe Illustrator CS5.

Nous allons utiliser une grande partie des composants les plus importants disponibles dans Flash Catalyst ” DataList ”, ” VerticalScrollBar ”, ” ScrollPanel ”, ” TextInput ”, appliquer des transitions et des itérations afin de permettre la navigation et créer une meilleure expérience utilisateur.

Nous allons également analyser les processus d'importation d'éléments d'interface d'Illustrator vers Flash Catalyst et nous allons structurer le projet afin que le code mxml généré par Catalyst soit de bonne qualité et bien structuré, adapté pour une utilisation ultérieure dans Flash Builder.

Pour cette raison, après chaque chapitre, nous allons jeter un oeil au code source pour voir ce qui se passe dans les coulisses.

Connaissances requises

Etre familier avec Adobe Flash Catalyst, Flex et MXML

Note: Ce tutoriel se concentre sur l'utilisation de Flash Catalyst pour construire une application de style mobile. L'utilisation d'Illustrator pour la conception de l'interface utilisateur est au-delà du champ d'application de ce tutoriel.

Produits associés

Vous n'avez besoin que de Flash Catalyst CS5 pour suivre ce tutoriel.

Les fichiers sources contiennent les fichiers Adobe Illustrator et un projet Catalyst pour chaque chapitre.

Vue d'ensemble

L'application est composée de 3 vues principales:

001_applicationstates.jpg

  1. Ecran de démarrage: simple page statique avec un contenu importé depuis Adobe Illustrator.
  2. Liste des articles du blog: cette page utilise des composants ” VerticalScrollBar ” et ” DataList ” pour créer une liste déroulante d'éléments cliquables. En haut, en plus, nous allons également utiliser le composant “TextInput” pour créer un champ de texte de saisie pour simuler une zone de recherche.
  3. Détail d'un article: cet état représente une page d'affichage des détails de l'élément sélectionné. En plus de contenir des images importées à partir d'Illustrator, nous allons également créer une zone de texte défilantet en utilisant le composant “ScrollPanel”. Nous allons également ajouter quelques intéractions sur les boutons.

Voici le diagramme d'application, qui représente la structure hiérarchique de composants que nous allons créer dans ce projet:

Notes importantes à propos des fichiers MXML générés

  • “Custom/generic components” représente des composants MXML génériques et étend généralement la classe Group;
  • “Other Catalyst components” sont des éléments nécessaires pour les composants qui les contiennent;
  • Les rectangles Orange représentent plutôt les skin Spark (d'autres fichiers MXML qui étendent la classe Skin et qui peuvent être utiliser pour personnaliser les composants Flex 4);

Sommaire