Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Optimisation de code MXML dans Flash Catalyst – Partie 2 Composants personnalisés/génériques

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 15 mai 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 optimiser le code généré par Catalyst en divisant l'application en composants personnalisés/génériques.

Nous allons aussi introduire les interactions, afin d'ajouter de l'interactivité.

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

Créer les vues principales de l'application

Sélectionnez l'état par défaut, SplashScreen, depuis le panneau Etats. Après avoir sélectionné l'état, vous pouvez cliquer sur le dossier SplashScreen calques dans le panneau des calques pour automatiquement sélectionner tous ces éléments graphiques. Sélectionnez Convertir l'illustration en composant > Composant personnalisé/générique depuis le menu contextuel (bouton droit de la souris) pour convertir tous les éléments en un nouveau composant personnalisé. Alternativement, vous pouvez convertir des illustrations en composant personnalisé/générique en utilisant « Affichage tête haute » (Heads-Up Display – HUD) mais nous en reparlerons dans le prochain chapitre Composant Barre de défilement verticale.

Renommez le composant en SplashScreenView et sélectionnez Taille fixe.

image2.jpg

NOTE: TAILLE FIXE ou REDIMENSIONNABLE

Depuis la version 2 de Flash Catalyst (codename “Panini”) vous pouvez créer des composants redimensionnables mais nous ne parlerons pas de ce sujet dans ce tutorial. Pour un aperçu de cette nouvelle fonctionnalité, vous pouvez regarder une vidéo de Doug Winnie disponible sur Adobe TV: Resizable Applications and Components

Dans le panneau Calques, vous pouvez visualiser que le dossier SplashScreen Calques contenant les objets graphiques a été converti en un composant nommé SplashScreenView.

Répétez l'étape précédente pour les deux autres états – BlogList and ArticleDetails- pour convertir leurs objets graphiques en composants personnalisés (regardez les images ci-dessous) en leur donnant les noms:

  • BlogView
  • DetailsView

Créer le composant BlogView (état: BlogList):

Créer le composant DetailsView (état: ArticleDetails):

Dans le panneau des calques (Onglet de gauche), trois nouveaux composants sont maintenant disponibles ainsi que dans le panneau Bibliothèque de projet (Onglet de droite).

Le code MXML généré

Grouper des objets graphiques en composants personnalisés/génériques vous permet de diviser le projet en différentes portions de code, en d'autres termes en composants MXML.

Il y a deux raisons essentielles à faire cela:

  1. Générer un code MXML plus facilement lisible pour les développeurs qui devront l'utiliser;
  2. Un petit nombre de composants simplifie l'utilisation d'effets de transitions (que nous verrons dans le chapitre des transitions);

Vous pouvez voir le code source généré par Catalyst en sélectionnant l'espace de travail nommé Code.

Le panneau Navigateur de projet affiche trois nouveaux fichiers dans le dossier components: BlogView, DetailsView et SplashScreenView.

Voici le code mis à jour du fichier principal de l'application, Main.mxml, qui est plus propre et plus facile à lire que celui généré après l'import.

Maintenant, nous avons 20 lignes au lieu de 500.

Le code de l'application a en fait été divisé entre les composants BlogView, DetailsView et SplashScreenView.

<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:lib="assets.graphics.Layout.*"
			   xmlns:ATE="http://ns.adobe.com/ate/2009"
			   xmlns:ai="http://ns.adobe.com/ai/2009"
			   xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
			   xmlns:d="http://ns.adobe.com/fxg/2008/dt"
			   xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:flm="http://ns.adobe.com/flame/2008"
			   xmlns:components="components.*"
			   width="100%" height="100%" 
			   backgroundColor="#FFFFFF" 
			   preloaderChromeColor="#FFFFFF"
			   fc:previewHeight="800" fc:previewWidth="480">
 
 
	<fx:Style source="Main.css"/>
 
	<s:states>
		<s:State name="SplashScreen"/>
		<s:State name="BlogList"/>
		<s:State name="ArticleDetails"/>
	</s:states>
	<components:SplashScreenView includeIn="SplashScreen" x="-1" y="1"/>
	<components:BlogView includeIn="BlogList" x="-1" y="0"/>
	<components:DetailsView includeIn="ArticleDetails" x="0" y="0"/>
</s:Application>

Je n'ai pas copié le code des trois composants - SplashScreenView, BlogView and DetailsView - car ce n'est pas essentiel pour le tutoriel.

Ces composants étendent la classe Group et contiennent des graphiques MXML et des balises FXG précédemment importés depuis Illustrator.

Ajouter des interactions

Testez le projet: Fichier > Lancer le projet (ou Ctrl + Entrée) Toutefois, l'application présente n'affichera que l'état par défaut, SplashScreen.

Donc, nous devons veiller à ce que l'utilisateur puisse cliquer sur le logo pour ouvrir l'état BlogList et nous allons utiliser les intéractions pour accomplir cette tâche.

Allez à l'état SplashScreen et sélectionnez le composant SplashScreenView sur le plan de travail.

Depuis le menu contextuel, sélectionnez Modifier le composant (ou double-clic sur le composant)

Depuis la barre du fil d'ariane, nous visualisons que nous sommes maintenant dans le composant SplashScreenView.

Cette façon de naviguer dans le projet est semblable à celle utilisée par Adobe Flash Professionnel pour parcourir les clips.

Maintenant que nous sommes dans le composant SplashScreenView, nous pouvons utiliser l'outil de sélection pour sélectionner le logo et ajouter une interaction depuis le panneau Interactions.

Dans notre cas, nous n'allons pas sélectionner l'arrière-plan gris, afin d'activer l'événement CLICK uniquement sur le logo.

image12.jpg

Utilisez le panneau Interactions pour ajouter une interaction et entres les paramètres suivants:

  • Lors d'un clic
  • Lire la transition vers l'état
  • Choisir une cible: layout*
  • Etat: BlogList

* cette valeur représente le nom du fichier que vous utilisez et peut-être différent.

Depuis le sous-panneau Aspect (à l'intérieur du panneau Propriétés) cochez l'option Curseur en forme de main pour activer l'affichage de la main au survol du logo.

Compilez le projet (Fichier > Exécuter le projet), l'application démarre et affiche l'état par défaut, SplashScreen et si vous cliquez maintenant sur le logo, vous êtes redirigés vers la page du blog.

Etat SplashScreen:

image15.jpg

Etat BlogList:

image16.jpg

Sommaire