Introduction

Avec les composants, c'est un nouveau monde qui s'ouvrira à vous, vous pourrez notamment:

• définir un ensemble de méthodes Actionscript pour contrôler à tout moment l'aspect ou le comportement de vos composants.
• les faire interagir avec les autres éléments de l'animation, directement dans l'environnement auteur.
• prévisualiser leur comportement directement dans l'environnement auteur, sans avoir à publier l'animation.
• leur appliquer des feuilles de styles, de manière à modifier rapidement et uniformément l'aspect de vos interfaces.
• leur affecter des skins et modifier indépendamment chacun des élements de vos interfaces.

Vous le constaterez à l'usage, les composants sont réellement un outil de production extrêmement puissant et efficace. Mais leur puissance et leur facilité d'usage vont de pair avec une relative complexité de développement. Nous nous contenterons donc dans un premier temps d'étudier leur utilisation avant d'aborder leur conception dans les tutoriaux qui suivront.
Macromedia fournit avec Flash MX une série de composants réunis sous l'appellation "interface utilisateurs": ce sont des éléments fréquemment utilisés lors du développement d'interfaces (boutons poussoirs, liste déroulante, panneaux scrollables, boutons radios, etc...). Pour ce premier tutorial, nous allons nous pencher sur l'utilisation et la personnalisation de la barre de défilement (ScrollBar).

La barre de défilement

Tout d'abord, créez un champ texte dynamique. Vous vous en doutez, pour pouvoir scroller un champ texte, il faut qu'il y ait dans ce champ plus de texte que ce que ses dimensions lui permettent d'afficher. Dans Flash MX, vous pouvez verrouiller une zone de paragraphe et remplir ensuite le champ texte sans qu'il ne se redimensionne. Pour cela, dessinez la zone et double-cliquez ensuite sur le petit carré blanc en bas à droite de la zone de paragraphe en maintenant la touche shift enfoncée. Le petit carré devient alors noir et les dimensions de la zone de paragraphe sont verrouillées. Vérifiez dans l'inspecteur de propriétés que le champ texte est bien multi-lignes et que le retour à la ligne automatique est activé, et vous pouvez maintenant taper un long texte dans ce champ. Maintenant, nous allons rajouter une barre de défilement qui permettra de scroller ce champ texte. Ouvrez le panneau des composants s'il ne l'est pas encore, et cliquez sur le composant ScrollBar. Glissez le depuis le panneau et déposez le sur la moitié droite de votre champ texte... [1] Et... c'est tout!... Comme par magie, la barre de défilement s'est accrochée et redimensionnée [2] , et si vous testez l'animation (Ctrl+Entrée), vous pouvez dorénavant faire défiler le texte grâce à cette barre de défilement!

Impressionnant vous ne trouvez pas? Et ce n'est pas tout.... Si vous aviez déposé le composant sur la moitié gauche du bloc de texte, la barre de défilement se serait accrochée à gauche. Et si vous l'aviez déposé sur le bas de la zone de paragraphe, elle aurait pivoté et se serait acroché en-dessous de manière à autoriser un scroll horizontal. Pas mal, non?....:-)

Personnalisation: Introduction

Pour personnaliser l'aspect d'un composant UI, vous avez plusieurs options:

• Modifier une propriété d'un composant grâce à la méthode setStyleProperty().
• Créer une feuille de style et l'appliquer à plusieurs composants.
• Modifier directement l'aspect graphique des éléments du composant en les éditant.

Dans la pratique, on choisira l'une des 2 premières options lorsqu'on voudra modifier la teinte d'un élément ou l'aspect du texte dans certains composants. La 3ème option sera elle choisie quand on voudra faire des modifications plus importantes, comme sur la forme de certains élements.

Personnalisation grâce à setStyleProperty()

C'est la méthode la plus simple pour personnaliser un élément particulier. Pour l'utiliser, vous devez avoir nommé l'occurence du composant dans l'inspecteur de propriétés, "maBarre" par exemple.

// Modification de la propriété "face" du composant maBarre:
maBarre.setStyleProperty("face",0xB0B1BD)

La ligne de code ci-dessus change la couleur de la barre de défilement. Vous trouverez une liste des propriétés des composants dans l'éditeur ActionScript: "Flash UI Components->FStyleFormat->Properties".
Si vous n'avez qu'un composant sur la scène et que vous n'avez que lui à modifier, cette méthode s'avère efficace. Par contre, si vous avez un formulaire entier à personnaliser, avec des boutons radios, des menus déroulants, des barres de défilement, et que vous voulez que l'ensemble de ce formulaire s'accorde avec votre charte graphique, autrement dit que tous les boutons soient de la même couleur, les flèches également, etc.... Il peut s'avérer alors laborieux de modifier indépendamment chaque propriété de chaque composant. Dans ce cas, on préfèrera utiliser des feuilles de style.

Personnalisation grâce aux feuilles de style

Une feuille de style est un document qui spécifie les valeurs d'une série de propriétés. Tous les élements auquel on appliquera cette feuille de style reprendront ces valeurs. Dans Flash, vous avez le choix d'utiliser:

• Une feuille de style globale (globalStyleFormat), qui sera appliquée d'office à tous les composants présents sur la scène.
• Ou une feuille de style particulière, que vous nommerez, et que vous choisirez d'appliquer ou non à tel ou tel composant.

Voilà pour la théorie. Pour la pratique, nous allons créer une feuille de style FlashXpress que nous pourrons ensuite affecter aux composants auquel nous voudrons donner le "look FXP":

// Création d'une feuille de style "FXPStyle":
FXPStyle = new FStyleFormat();

// Définition de la feuille de style "FXPStyle":
FXPStyle.face = 0xB0B1BD;
FXPStyle.scrollTrack = 0xF3F3F3;
FXPStyle.highlight = 0xF3F3F3;
FXPStyle.darkshadow = 0x000000;

Notre feuille de style "FXPStyle" est maintenant créée, il ne nous reste plus qu'à l'affecter aux composants de notre choix, ce qui se fait à l'aide de la méthode addListener():

// Affectation du style "FXPStyle" au composant "maBarre":
FXPStyle.addListener(maBarre);

J'espère que cette première approche des composants vous aura donné envie de vous plonger plus avant dans l'étude de ces derniers. Dans les tutoriaux qui suivront, nous étudierons les autres composants d'interface, nous verrons comment les personnaliser encore d'avantage, et puis nous nous pencherons sur la création et le développement de composants personnels.