Menu accordéon Flash AS3

Comment peut-on créer un menu de type accordéon en Flash AS3 ?

Créez dans un premier temps un MovieClip appelé "nomCat" qui servira de bouton pour appeler les catégories, insérez-y les éléments suivants :

• un champ de texte dynamique ayant comme nom d'occurence "cat", celui-ci doit être placé à la vertical,
  
• un fond rectangulaire pour le bouton.
  

Ensuite, créez un deuxième MovieClip nommé "blocBtContenu" et insérez-y les éléments suivants :

• le MovieClip "nomCat" (coordonnées x:0; y:0),
  
• dessinez, à droite de ce MovieClip, un rectangle pour le fond du contenu,
  
• créez par dessus ce rectangle, un champ de texte dynamique ayant comme nom d'occurence "contenu".
  

Il faut ensuite exporter le MovieClip "blocBtContenu" pour l'AS3, nous pourrons ainsi créer dynamiquement les onglets du menu. Pour celà, ouvrez le panneau Bibliothèque puis effectuez un clique droit sur le MovieClip "blocBtContenu", sélectionnez "Propriétés" et cochez (dans la nouvelle fenêtre qui s'ouvre) la case "Exporter pour ActionScript".

Venons au code AS3 permettant de créer et d'animer le menu accordéon :

Copier/coller le code suivant dans la première image clef de votre Fla :

/**************************************************************/

//Importation des class de gestion du mouvement des onglets :

/**************************************************************/

import fl.transitions.easing.*;

import fl.transitions.Tween;

/**************************************************************/

//Initialisation des variables :

/**************************************************************/

//Contenu :

var elements:Array = new Array("Accueil", "Qui sommes-nous", "Services", "Produits", "Contact");

var contenu:Array = new Array("Contenu 1", "Contenu 2", "Contenu 3", "Contenu 4", "Contenu 5");

var site:Sprite = new Sprite();

var element:MovieClip;

var i:int;

/**************************************************************/

//Création des éléments :

/**************************************************************/

for(var elt:* in elements) {

var bloc:blocBtContenu = new blocBtContenu;

bloc.bt.buttonMode = true;

bloc.bt.mouseChildren = false;

bloc.bt.cat.text = elements[elt];

bloc.contenu.text = contenu[elt];

bloc.x = (bloc.bt.width+1) * elt;

bloc.bt.addEventListener(MouseEvent.CLICK, ouvrirFermer);

site.addChild(bloc);

}

//On affiche le premier onglet après la création de tous les éléments :

for(i=1; i<=site.numChildren-1; i++) {

element = site.getChildAt(i) as MovieClip;

element.x = ((element.bt.width+1) * (i-1)) + element.width;

}

//Création du masque :

var masque:Shape = new Shape();

masque.graphics.beginFill(0x000000);

masque.graphics.drawRect(0,0,((elements.length-1) * (MovieClip(site.getChildAt(0)).bt.width+1))+MovieClip(site.getChildAt(0)).width, MovieClip(site.getChildAt(0)).height);

//Ajoute le masque et le site sur la scène :

addChild(masque);

addChild(site);

//Applique le masque créé dynamiquement au site :

site.mask = masque;

/**************************************************************/

//Fonction permettant d'ouvrir/fermer les onglets :

/**************************************************************/

function ouvrirFermer(e:MouseEvent) {

try {

//Récupère l'élément à ouvrir :

var index:int = site.getChildIndex(e.target.parent)+1;

if(index <= site.numChildren) {

//Rabat tous les éléments vers la gauche :

for(i=0; i

element = site.getChildAt(i) as MovieClip;

new Tween(element, "x", Regular.easeOut, element.x, (element.bt.width+1)*i, 30);

}

//Pousse tous les éléments vers la droite :

for(i=index; i<=site.numChildren-1; i++) {

element = site.getChildAt(i) as MovieClip;

new Tween(element, "x", Regular.easeOut, element.x, ((element.bt.width+1) * (i-1)) + element.width, 30);

}

}

} catch(pErreur:Error) {

//Si il y a un problème, on affiche l'erreur :

trace("Erreur : \n" + pErreur); 

}

}

TELECHARGER LA SOURCE .FLA :

> Menu Accordeon Flash AS3 <

Problèmes pouvant être rencontrés :

Le nom des catégories ne s'apparait pas à la vertical : vérifiez que vous ayez bien intégré les polices de caractères au SWF si vous n'utilisez pas une police système de type Arial ou encore Time New Roman. Pour intégrez les polices : bouton "Intégration de caractères" dans le panneau propriété lorsque vous sélectionnez le texte. Choisissez ensuite la liste des caractères à intégrer.