Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Optimisation de code MXML dans Flash Catalyst – Partie 3 Composant barre de défilement verticale

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 08 juin 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 utiliser Flash Catalyst pour créer une barre de défilement verticale personnalisée en utilisant quelques ressources Illustrator.

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

Introduction

Dans le prochain chapitre, nous allons créer la liste défilante de l'état BlogList en utilisant le composant DataList fourni par Flash Catalyst.

Cependant, ce composant, pour permettre le défilement des éléments doit être combiné avec un composant ScrollBar. Donc, dans ce chapitre, nous allons créer un composant barre de défilement verticale en utilisant les éléments graphiques importés à partir d'Illustrator dans l'état BlogView.

NOTE: Barre de défilement dans FLEX et FLASH CATALYST
Le composant barre de défilement verticale disponible dans Flash Catalyst représente le composant Spark VScrollBar utilisé dans Flex et constitué de quatre parties:

  • La vignette
  • La piste
  • Le bouton haut
  • Le bouton bas

Les deux derniers éléments sont optionnels alors que les deux premiers sont fortement recommandés (mais je dirais presque obligatoire)

Créer le composant barre de défilement verticale

Premièrement, nous devons récupérer les dessins de la barre de défilement , importés depuis Illustrator.

Comme nous l'avons fait précédemment pour le composant SplashScreenView, sélectionnez l'état BlogList et ouvrez le composant Blog View (clic droit > Modifier le composant ou double-clic avec la souris).

Pour créer une barre de défilement verticale, il est donc nécessaire de sélectionner les dessins qui la composent (Vignette et piste) depuis le plan de travail. Cependant, la piste n'est pas facilement sélectionnable parce qu'elle est invisible et vise uniquement à définir la zone où vous pouvez déplacer la vignette.

Pour facilement le sélectionner, le panneau Calques vous sera très utile, car vous pourrez sélectionner manuellement les deux éléments.

Quand vous sélectionnez les objets graphiques depuis le panneau Calques, la sélection se fait automatiquement dans le plan de travail.

Avec les éléments de la barre de défilement toujours sélectionnés, ouvrez le menu contextuel, choisissez Convertir l'illustration en composant et sélectionnez ensuite Barre de défilement verticale.

Utilisez BlogVScrollbar comme nom de composant.

Comme alternative à l'étape précédente, vous pouvez aussi utiliser L'affichage tête haute (HUD – Heads-Up Display) pour réaliser la même opération.

Utilisez l'outil de sélection pour sélectionner le composant que vous venez de créer et cliquez sur le bouton Modifier des parties, disponible dans le HUB.

L'écran suivant apparaît.

Nous allons maintenant définir les éléments de la barre verticale. Dans ce projet, uniquement la vignette et la piste.

Sélectionnez l'objet graphique qui représente la vignette dans le plan de travail (regardez la photo ci-dessous).

Depuis le HUB, il est maintenant possible de définir une partie, en choisissant parmi Vignette, piste, bouton haut et bouton bas.

Sélectionnez vignette.

Répétez l'étape précédente pour l'objet Piste

Toutefois, en raison de sa transparence, vous pouvez facilement le sélectionner en utilisant le panneau Calques.

Après avoir sélectionné l'objet graphique, choisissez Piste(suggéré) depuis le HUD.

Compilez le projet, Fichier > Exécuter le projet, pour tester le nouveau composant.

Maintenant, vous pouvez utiliser la barre de défilement même si les éléments restent statiques.

Dans le prochain chapitre, nous allons utiliser cette barre de défilement pour créer le composant DataList et déplacer ces éléments.

Le code MXML généré

Quand vous créez un composant Barre de défilement verticale, Flash Catalyst génère automatiquement quelques fichiers:

  • ComponentName.mxml
  • ComponentNameThumb.mxml
  • ComponentNameTrack.mxml
  • ComponentNameDownButton.mxml (non utilisé dans ce projet)
  • ComponentNameButton.mxml (non utilisé dans ce projet)

Ouvrez l'espace de travail Code pour voir les fichiers générés:

  • BlogVScrollbar.mxml
  • BlogVScrollbarThumb.mxml
  • BlogVScrollbarTrack.mxml

Les trois fichiers générés par le composant Barre de défilement verticale représentent les skins Spark du composant Flex VscrollBar et peuvent être ré-utilisés dans n'importe quel projet Flex 4.

Le code à l'intérieur de ces fichiers est relativement propre car les dessins de notre barre de défilement verticale sont très simples.

Si, toutefois, nous supposons un projet avec une présentation beaucoup plus complexe, nous pouvons imaginer l'avantage de l'utilisation de Flash Catalyst dans le processus de personnalisation. Faire ce genre d'opération directement dans Flash Builder peut être un travail très long et frustrant.

Le fichier BlogView.mxml contient maintenant une instance de la classe VscrollBar, qui utilise la nouvelle skin BlogVScrollBar.

[…]
<s:VScrollBar x="461" y="95" fixedThumbSize="true" 
 		  skinClass="components.BlogVScrollbar"/>
[…]

Dans le chapitre suivant, nous allons déplacer ce composant Barre de défilement verticale à l'intérieur d'un composant DataList.

Voici le code de la skin principale de la barre de défilement (BlogVScrollbar.mxml):

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
		xmlns:d="http://ns.adobe.com/fxg/2008/dt"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.VScrollBar")]</fx:Metadata>
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
		<s:State name="inactive"/>
	</s:states>
	<s:Button id="track" x="0" y="0" skinClass="components.BlogVScrollbarTrack"/>
	<s:Button id="thumb" x="0" y="93" skinClass="components.BlogVScrollbarThumb"/>
</s:Skin>

La skin de la vignette (BlogVScrollbarThumb.mxml):

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
		xmlns:d="http://ns.adobe.com/fxg/2008/dt"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
		<s:State name="disabled"/>
	</s:states>
	<s:Rect d:userLabel="ScrollBar Thumb" x="0" y="0" width="13" height="170"
			radiusX="6.49999" radiusY="3.3667">
		<s:fill>
			<s:SolidColor color="#666666"/>
		</s:fill>
	</s:Rect>
</s:Skin>

La skin de la piste (BlogVScrollbarTrack.mxml):

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
		xmlns:d="http://ns.adobe.com/fxg/2008/dt"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
		<s:State name="disabled"/>
	</s:states>
	<s:Rect d:userLabel="ScrollBar Track" x="0" y="0" width="13"
			height="696" alpha="0">
		<s:fill>
			<s:SolidColor color="#1A1A1A"/>
		</s:fill>
	</s:Rect>
</s:Skin>

Le projet nommé 003_VerticalScrollbar.fxp attaché à ce tutorial contient tous les codes générés précédemment.

Sommaire