Les interfaces à base d'onglets sont extrêmement fréquentes, à commencer par des sites de commerce comme Amazon, et sont dans le fait une excellente manière de classer les informations, à conditions de ne pas en abuser bien sûr.
Nous allons construire ici une interface simple à base d'onglets, et tenter d'apprendre de nouvelles méthodes d'ActionScript en passant...

Décomposition
Nous allons décomposer nos besoins :
- un fond (pas obligatoire, mais utile),
- les pages affichées par un click sur un onglet,
- autant d'onglets que de page (bien entendu).

Comme à notre habitude, nous allons tenter d'épicer un peu le code en ne plaçant aucun élément sur la scène, et en nous limitant à une seule frame : tous nos éléments seront stockés dans la Bibliothèque, et ceux-ci seront appelés via notre code ActionScript stocké dans l'unique frame du scénario.
Pour ce faire, il faut lors de la création de chaque s'assurer qu'ils sont définis comme étant liés à l'export pour ActionScript (si ce n'est pas le cas, un simple clique-droit/propriétés sur l'élément dans la bibliothèque suffira à résoudre le problème).
Par ailleurs, nous plaçons le "centre" du clip en haut à gauche, pour faciliter le positionnement.

Notre fond est simplement un clip contenant la couleur ou l'image que nous voulons lui donner. Cela nous permet d'avoir le même aspect pour toutes les pages.
Les pages ne comportent que le contenu lui-même (texte, image), directement mis en page.
Les onglets, quant à eux sont conçu (dans notre exemple) pour utiliser tout l'espace. Ils sont créés "en dur" au sein de la bibliothèque sous la forme d'un seul élément, que nous nommons "bouton". Cet élément sera dupliqué autant de fois que nécessaire pour former le fond de notre onglet, et le texte sera à chaque fois créé dynamiquement au sein du bouton.

Voici ce à quoi ressemble notre application :

Elle est très simple, mais elle fonctionne, et il devrait être simple de construire par-dessus l'existant.

Forum

Réagissez dans les forums de JDN Développeurs

Scripting
Nous considérons donc que nous avons dans notre bibliothèque les éléments nécessaires, nommément : "bouton", "fond", "page1", "page2", "page3", "page4" et "page5", ainsi que tout média nécessaire à chaque page.

Plaçons les éléments de l'interface de base sur la scène (tout le code est contenu dans la première et seule image-clé du scénario) :
//
// Placement des éléments sur la scène
//
attachMovie("fond", "fond", 0);
attachMovie("bouton", "bouton1", 1);
attachMovie("bouton", "bouton2", 2);
attachMovie("bouton", "bouton3", 3);
attachMovie("bouton", "bouton4", 4);
attachMovie("bouton", "bouton5", 5);
//
// Mise en place des éléments
//
bouton1._x = 0;
bouton1._y = 0;
bouton2._x = 60;
bouton2._y = 0;
bouton3._x = 120;
bouton3._y = 0;
bouton4._x = 180;
bouton4._y = 0;
bouton5._x = 240;
bouton5._y = 0;

attachMovie(element, occurrence, niveau) nous permet de placer l'élément element de la bibliothèque sur la scène, sous le nom occurrence et au niveau niveau. Le niveau 0 est "en dessous" du niveau 1, qui est en-dessous du niveau 2, etc.
Tous les éléments sont cependant placés aux coordonnées (0,0), donc les boutons sont les uns sur les autres : il nous faut les placer plus précisément. Nous les positionnons donc de telle sorte qu'un onglet soit placé à une distance équivalente à la longueur de l'onglet précédent. Chaque onglet mesure ici 60 de large, donc nous calculons en dur la position...

Passons maintenant aux titres des onglets :
//
// Création des champs de texte
//
bh = bouton1._height;
bx = 0;
by = bh / 5;
bouton1.createTextField("titre1", 10, bx, by, 60, 30);
bouton2.createTextField("titre2", 11, bx, by, 60, 30);
bouton3.createTextField("titre3", 12, bx, by, 60, 30);
bouton4.createTextField("titre4", 13, bx, by, 60, 30);
bouton5.createTextField("titre5", 14, bx, by, 60, 30);
//
txtFormat = new TextFormat();
txtFormat.color = 0xFFFFFF;
txtFormat.bold = true;
txtFormat.background = false;
txtFormat.font = "_sans";
txtFormat.align = "center";
//
bouton1.titre1.text = "Accueil";
bouton2.titre2.text = "News";
bouton3.titre3.text = "Produits";
bouton4.titre4.text = "Contact";
bouton5.titre5.text = "FAQ";
bouton1.titre1.setTextFormat(txtFormat);
bouton2.titre2.setTextFormat(txtFormat);
bouton3.titre3.setTextFormat(txtFormat);
bouton4.titre4.setTextFormat(txtFormat);
bouton5.titre5.setTextFormat(txtFormat);

C'est createTextField(occurence, niveau, x, y, lo, la), méthode de l'objet MovieClip, qui nous permet de créer des champs texte d'un nom donné, d'une taille donnée et à un position et un niveau donnés.
Par coquetterie mais aussi pour aborder le sujet, nous utilisons l'objet TextFormat afin de préciser quelques caractéristiques de nos titres, à savoir leur couleur, leur graisse, leur police, leur alignement...
Ceci fait, nous assignons un texte à ces champs, et seulement après, nous leur appliquons le style déclaré juste avant.

Mais nos onglets ne sont toujours pas actifs, voici comment les déclarer :
bouton1.onPress = function() {
  attachMovie("page1", "page1", 30);
  page1._x = 0;
  page1._y = bh;
  };
bouton2.onPress = function() {
  attachMovie("page2", "page2", 30);
  page2._x = 0;
  page2._y = bh;
  };
bouton3.onPress = function() {
  attachMovie("page3", "page3", 30);
  page3._x = 0;
  page3._y = bh;
  };
bouton4.onPress = function() {
  attachMovie("page4", "page4", 30);
  page4._x = 0;
  page4._y = bh;
  };
bouton5.onPress = function() {
  attachMovie("page5", "page5", 30);
  page5._x = 0;
  page5._y = bh;
  };

Pour chaque MovieClip, nous utilisons la méthode onPress, qui réagit au clic, en demandant à Flash de place la page voulue à l'endroit indiqué. Un clic sur un autre onglet fait disparaître, pour la simple raison qu'ils sont tous défini comme devant occuper le même niveau (ici, 30).

Voici notre code source.