Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Composant: Menu à onglets et ouverture d'un panneau de contenu

Compatible Flash Catalyst CS5. Cliquer pour en savoir plus sur les compatibilités.Par BEtrained (Laurent BRIERE), le 08 novembre 2010

Objectif: Concevoir un système de navigation (Menu) sous la forme d'onglets ouvrant eux-mêmes par un clic souris un panneau de contenu (Texte, image, vidéo…). Cet exercice a pour but de vous apprendre à réaliser ce type de composant et surtout de le ré-exploiter autant de fois que nécessaire dans le même document par duplication ou bien dans un autre projet Flash CATALYST en exportant la source de travail sous forme de Package de bibliothèque.

Voici le menu que nous allons réaliser:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Voici les sources de cet exercice:
Cliquez ici...

Consulter ce tutoriel sous forme de livre virtuel en cliquant ici...

1- Réalisation de l'environnement graphique

Créons un nouveau projet de 500×250 pixels. Ajoutons dans la scène un rectangle par exemple de cette taille :

A nouveau un rectangle, plus petit, au sommet du plus grand avec une zone de texte.

Sélectionnons les deux derniers éléments pour les transformer en composant Bouton.

Définissons maintenant la zone de texte comme Libellé pour ce bouton:

Ceci permet, ou permettra plus tard, à la sélection du composant Bouton de modifier rapidement le texte via son panneau propriétés/aspect:

2 - Création du composant

Création des deux états

Sélectionnons ensuite tous les objets de la scène et créons un composant générique/personnalisé.

D'un double-clic sur ce nouveau composant passons en mode de modification du composant. Nous voyons que tous les composants de ce type ne possèdent initialement qu'un seul état (State1).

Dupliquons cet état pour avoir un état en position ferme et un état en position ouvert. Pour personnaliser le nom d'un état, faites un double clic sur le titre de cet état.

Attention : il vous est impossible d'utiliser des caractères accentués (é, è, à…) et des espaces. Tout manquement à ces règles vous sera indiqué par un texte rouge.

Pour nous aider à nous repérer et à positionner ce panneau correctement dans les deux états, ouvert et fermé, posons des repères sur la scène que l'on ira chercher dans les règles horizontale et verticale.

Sélectionnons maintenant les objets de l'état ouvert et déplaçons-les comme indiqué ci-dessous.

Et pour finaliser l'aspect de l'état ouvert, ajoutons-y une zone de texte et intégrons du faux-texte à l'intérieur


Zone d'écrétage

Nous allons faire en sorte de n'afficher, pour chaque état, que la partie du composant qui nous intéresse.

Sélectionnons l'état fermé, et d'un clic droit faisons apparaitre le menu qui va nous permettre de désactiver Redimensionner les limites du composant automatiquement.

Ce qui nous importe ici est :

  • Sur ferme de ne voir le composant qu'à partir de l'onglet (Titre du panneau) et pas la partie basse du composant.
  • Sur ouvert, de voir le haut du panneau une fois déployé

Pour ce faire, déplaçons les petits curseurs en forme de mire

Pour l'état ferme

Pour l'état ouvert

Enfin, et pour que cela fonctionne correctement, il ne faut pas oublier, à nouveau par un clic droit, d'Ecrêter selon les limites du composant, ce qui aura pour conséquence de choisir dorénavant nos petites mires comme des limites de recadrage et d'affichage des éléments du composant.



3- Mise en place des interactions et des transitions

Interactions

Cliquons sur le composant Bouton et dans le panneau Interaction, et ajoutons une interaction pour le passage de l'état ferme vers l'état ouvert:

Faisons de même et ajoutons l'interaction pour le passage de ouvert à ferme.

Voici maintenant nos deux interactions déclarées.


Transitions

Reste à définir les effets d'animation dans les Transitions d'état. Allons pour cela dans le panneau Scénario.

Sélectionnons toutes les Transitions d'état

  • ferme > ouvert (Clic)
  • ouvert > ferme (Touche “Majuscule” + Clic pour ajouter à la sélection)

… et définissons une transition régulière pour animer nos objets. Flash CATALYST aura systématiquement pris en compte toutes les modifications apportées d'un état de notre composant à l'autre en les retranscrivant en effet(s).

  • Un élément absent sur un premier état et présent sur l'autre produit un effet fondu entrée et fondu sortie
  • Des dimensions différentes produissent un effet de redimensionnement
  • Des déplacement sont produits pour des objets ayant des coordonnées X et Y différentes dans le panneau Propriétés.

Pour finir en améliorant le rendu modifions dans la Timeline le moment où les effets démarrent et stoppent:

A ce stade nous pouvons tester le projet dans Fichier/exécuter le projet.



4- Gestion et optimisation de la bibliothèque

Ouvrons maintenant le panneau bibliothèque.Renommons les composants comme ci-dessous :

Nous obtenons deux types de composant,

  • Le bouton déclencheur (Titre de l'onglet)
  • Le composant générique qui lui-même contient le bouton déclencheur.

Donner des noms explicites à vos composants vous permet de vous y “retrouver”, surtout si vous avez un nombre conséquent de composants dans votre projet, mais aussi et surtout vous permettant de “mettre un nom” plus facilement sur le composant que vous êtes en train de modifier (Double clic sur ce composant). Vous verrez alors dans le fil d'Ariane en haut à gauche de votre fenêtre Flash CATALYST le nom de celui-ci s'afficher en clair.



5- Utilisation des composants de votre bibliothèque dans la scène

Si votre projet devait contenir par exemple une série de 3 onglets, il ne faut absolument pas glisser à 3 reprises le composant sur la scène.

Si vous faites ce choix, en modifiant l'un de ces composants, par exemple en modifiant le libellé de l'onglet, vous vous apercevrez que ce titre sera alors le même sur les 3 onglets.

Il va falloir au contraire Dupliquer autant de fois que nécessaire le composant générique (ici PanneauOnglet).

Vous remarquerez en le faisant que tout(s) composant(s) inclu(s) dans un composant principal (Ici BoutonDeclencheur) se duplique automatiquement sans que vous ayez besoin de le faire.

Une fois les éléments dupliqués, faites-les glisser sur la scène.

Personnalisons enfin ces panneaux. Un 1er double clic sur le composant, la sélection du composant BoutonDeclencheur et dans le panneau Propriétés, modifions le Libellé.

Attention de ne pas oublier également de faire cette personnalisation dans tous les états : ici ferme et ouvert.



Conclusion

Testons maintenant le projet dans Fichier/exécuter le projet pour voir notre résultat.

Limites de Flash CATALYST CS5:
Il est techniquement impossible dans cette version CS5 d'arriver dans les Interactions à demander, au moment où l'on ouvre le panneau de notre menu à onglet, de fermer en même temps le ou les autres panneaux déjà ouverts. Cela provient du fait que l'on ne puisse pas pour le moement dans un Composant générique/personnalisé interagir sur le contenu et/ou les états d'un autre composant.
Au moment où nous écrivons ces lignes une Preview Release de Catalyst, nom de code PANINI, le permet toutefois!

A vous de jouer !