Cours ActionScript : Programmer un menu déroulant


Télécharger Cours ActionScript : Programmer un menu déroulant

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


 

DreamLive :

Programmation ActionScript - Flash Mx

Programmer un menu déroulant

 

FLASH - PROGRAMMER UN MENU DÉROULANT

 

Cet exemple très simple montre comment créer un menu avec un petit effet d?animation déroulant. Un clic sur le menu déroule les sous-mesnus. Un nouveau clic sur le menu enroule les sous menus.

La figure ci-contre propose un aperçu du résultat à obtenir.

?  Démarrer Flash MX,

Modification / Document,

?  Dans la boîte de dialogue qui s’affiche, définir les dimensions suivantes pour le document: 100 px * 150 px,

?  Comme le montre la figure ci-contre, tracer un rectangle (95 px * 15 px) en haut de la scène,

?  Supprimer ses contours,

?  Remplir le fond du rectangle d’un dégradé linéaire à l’aide du panneau Mélange de couleurs,

?  Saisir le texte Menu 1 par dessus à l’aide de l’outil texte,

?  Sélectionner ces deux éléments,

Insertion / Convertir en symbole,

?  Le nommer Menu1 et choisir le comportement graphique, ? Fenêtre / Bibliothèque.

Le nouveau symbole apparaît dans la fenêtre Bibliothèque.

?  Cliquer avec le bouton droit de la souris sur le symbole Menu1

?  Dans le menu contextuel qui s’affiche, choisir Dupliquer,

?  Une boîte de dialogue apparaît: renommer la copie smenu1, Il s?agira du premier élément du sous menu.

?  Reproduire ces opérations de façons à créer les symboles smenu2, smenu3 et smenu4.

Nous obtenons cinq symboles mais tous portent le même texte.

?  Double cliquer sur le symbole SMenu1 depuis la fenêtre bibliothèque pour l’éditer,

Celui-ci s?affiche alors au centre de la scène.

 
 

dans la

 

fenêtre Bibliothèque,

   
 

Ces documents DreamLive sont libres de droits et ouverts à tous alors,    Page 1 profitez, partagez et appréciez ! Pour nous retrouver sur le Web : .

       
 

DreamLive :

Programmation ActionScript - Flash Mx

Programmer un menu déroulant

?  Double cliquer donc maintenant sur le symbole depuis la scène,Le mode saisie devient actif.

?  Modifier le texte Menu1 en SMenu1,

?  Réitérer ces opérations pour les autres menus en modifiant leur texte, respectivement:  SMenu2, SMenu3, et SMenu4.

?  Afficher ensuite la séquence principale en cliquant sur le lien Séquence 1 en dessous du scénario, ? Si le document n’est pas vide, double cliquer sur la gomme pour tout effacer,

?  Renommer le seul calque: Menu1,

?  Sélectionner tous les symboles créés depuis le fenêtre bibliothèque (Touche MAJ) et les glisser en haut du document

Comme vous le constatez, tous les symboles sont superposés. Seul le symbole au premier plan est visible: SMenu4 dans notre cas. Nous allons disposer chacun sur son propre calque.

?  Sélectionner l’occurrence du symbole Smenu4 depuis le document,

?  La couper (CTRL + X),

?  Créer un nouveau calque et le nommer SMenu4,

?  Placer ce dernier en dernière position soit en dessous du calque Menu1,

?  Coller le symbole sur place (CTRL + MAJ + V),

?  Activer de nouveau le calque Menu1,

?  Cliquer sur l’occurrence du symbole SMenu3 pour la sélectionner, ? La couper (CTRL + X),

?  Créer un nouveau calque SMenu3 intercalé entre SMenu4 et Menu1,

?  Coller l’occurrence sur place (CTRL + MAJ + V),

?  Activer de nouveau le calque Menu1,

?  Cliquer sur l’occurrence du symbole SMenu2 pour la sélectionner, ? La couper (CTRL + X),

?  Créer un nouveau calque SMenu2 intercalé entre SMenu3 et Menu1,

?  Coller l’occurrence sur place (CTRL + MAJ + V),

?  Activer de nouveau le calque Menu1,

?  Cliquer sur l’occurrence du symbole SMenu1 pour la sélectionner, ? La couper (CTRL + X),

?  Créer un nouveau calque SMenu1 intercalé entre SMenu2 et Menu1,

?  Coller l’occurrence sur place (CTRL + MAJ + V),

Voila, toutes les occurrences sont disposées dans des calques qui leurs sont propres.



? Modifier le comportement de chaque occurrence en bouton et les renommer respectivement Menu1, SMenu1, SMenu2, SMenu3 et

SMenu4 à l’aide de l’inspecteur de propriétés,

 
 

Ces documents DreamLive sont libres de droits et ouverts à tous alors,    Page 2 profitez, partagez et appréciez ! Pour nous retrouver sur le Web : .

 

DreamLive :

Programmation ActionScript - Flash Mx

Programmer un menu déroulant

?  Depuis le scénario, en cliquant et glissant, sélectionner l’image 20 de tous les calques, ? Insérer une image (F5),

Ainsi l?image de chaque occurrence est présente jusqu?à l?étape 20 de l?animation.

?  Sélectionner l’image 7 du calque SMenu1,

?  Insérer une image clé (F6),

?  Glisser l’occurrence SMenu1 à la verticale, juste en dessous de Menu1, ? Créer l’interpolation de mouvement,

?  Sélectionner l’image 13 du calque SMenu2,

?  Insérer une image clé (F6),

?  Glisser l’occurrence SMenu2 à la verticale, juste en dessous de SMenu1,

?  Créer l’interpolation de mouvement,

?  Sélectionner l’image 17 du calque SMenu3,

?  Insérer une image clé (F6),

?  Glisser l’occurrence SMenu3 à la verticale, juste en dessous de SMenu2,

?  Créer l’interpolation de mouvement,

?  Sélectionner l’image 20 du calque SMenu4,

?  Insérer une image clé (F6),

?  Glisser l’occurrence SMenu4 à la verticale, juste en dessous de SMenu3,

?  Créer l’interpolation de mouvement,

Comme le montre la figure ci-contre, à l?étape 20, le menu est complètement déroulé.

Nous avons prévu le déroulement, il faut maintenant créer l?animation de l?enroulement. C?est actionScript qui permettra de jouer l?une ou l?autre animation sur ordre.

?  Sélectionner l’image 30 de tous les calques en cliquant et glissant depuis le scénario,

?  Créer une image clé pour chacun en enfonçant F6,

?  Sélectionner l’image 50 de tous les calques en cliquant et glissant depuis le scénario,

?  Créer une image pour chacun en enfonçant F5,

A l?image 30, le menu est complètement déroulé. A l?image 50, il doit être complètement replié.

?     Sélectionner l’image 37 du calque SMenu1 et insérer une image clé (F6),

?     Glisser l’occurrence SMenu1 sous Menu1 de façon à ce qu’elle soit complètement masquée, ? Créer l’interpolation de mouvement,

Ces documents DreamLive sont libres de droits et ouverts à tous alors,        Page 3 profitez, partagez et appréciez ! Pour nous retrouver sur le Web : .

 

DreamLive :

Programmation ActionScript - Flash Mx

Programmer un menu déroulant

?  Sélectionner l’image 43 du calque SMenu2 et insérer une image clé (F6),

?  Glisser l’occurrence SMenu2 sous Menu1 de façon à ce qu’elle soit complètement masquée,

?  Créer l’interpolation de mouvement,

?  Sélectionner l’image 47 du calque SMenu3 et insérer une image clé (F6),

?  Glisser l’occurrence SMenu3 sous Menu1 de façon à ce qu’elle soit complètement masquée,

?  Créer l’interpolation de mouvement,

?  Sélectionner l’image 50 du calque SMenu4 et insérer une image clé (F6),

?  Glisser l’occurrence SMenu4 sous Menu1 de façon à ce qu’elle soit complètement masquée,

?  Créer l’interpolation de mouvement,

Voilà, à ce stade, étape 50, le menu est complètement replié.

?  Tester l’animation (CTRL + ENTREE),

Comme vous le constatez l?animation se joue par défaut de la première image à la cinquantième. Or nous souhaitons que le menu se déroule au clic et s?enroule au second clic.

?  Fermer la fenêtre de test de l’animation.

?  Sélectionner l’image 1 du calque Menu 1,

?  Afficher le panneau actions, ? Saisir l’instruction suivante:

stop();

Ainsi dès que l?animation atteint l?image 1 (tout de suite), elle s?arrête.

?  Tester l’animation (CTRL + ENTREE),

En effet, cette fois le menu ne se déroule plus.

?  Fermer la fenêtre de test de l’animation.

Le panneau actions étant actif:

?  Cliquer sur l’occurrence Menu1 pour la sélectionner et saisir son code comme suit:

on (press) {

             gotoAndPlay(2); }

Concrètement, il suffit à l?utilisateur de cliquer sur le bouton pour démarrer la lecture de l?animation.



Ces documents DreamLive sont libres de droits et ouverts à tous alors,        Page 4 profitez, partagez et appréciez ! Pour nous retrouver sur le Web : .

 

DreamLive :

Programmation ActionScript - Flash Mx

Programmer un menu déroulant

?     Tester l’animation (CTRL + ENTREE), ? Cliquer sur le bouton Menu1,

En effet l?animation se déclenche au clic. En revanche, elle ne s?arrête pas et le menu s?enroule aussitôt.

?     Fermer la fenêtre de test de l’animation.

Le panneau actions étant actif:

?     Sélectionner l’étape 20 du calque SMenu4 et saisir l’instruction suivante: stop();

?     Tester l’animation (CTRL + ENTREE), ? Cliquer sur le bouton Menu1,

Le menu se déroule et l?animation s?arrête. Cela fonctionne. En revanche si vous cliquez une seconde fois, bien entendu le menu ne s?enroule pas, il se déroule de nouveau.

?     Fermer la fenêtre de test de l’animation.

Le même clic sur le bouton doit commander soit l?enroulement, soit le déroulement selon la position. Pour jouer l?animation, il faut donc connaître la position de cette dernière.

Le panneau actions étant actif:

?     Sélectionner l’occurrence Menu1 et modifier son code comme suit:

on (press) {

                                             if(this._currentframe==1)

               {

                               gotoAndPlay(2);

               }

                else

               {

                               gotoAndPlay(30);

               }

}

_currentframe est la propriété qui renvoie la position en cours de l?animation.

?  Tester l’animation (CTRL + ENTREE),

?  Cliquer sur le bouton Menu1,

Le menu se déroule parfaitement et s?arrête.

Ces documents DreamLive sont libres de droits et ouverts à tous alors,        Page 5 profitez, partagez et appréciez ! Pour nous retrouver sur le Web : .

 

DreamLive :

Programmation ActionScript - Flash Mx

Programmer un menu déroulant

?     Cliquer de nouveau sur le bouton Menu1, Le menu s?enroule parfaitement et s?arrête.

?     Fermer le fenêtre de test de l’animation.

Nous devons maintenant nous soucier des liens. Un clic sur chaque élément du sous menu doit conduire vers une page différente.

?     Dans le dossier dans lequel vous avez enregistré l’animation (.fla), créer très simplement quatre page HTML: , , et , De retour sur Flash MX, le panneau actions étant sélectionné:

?     Cliquer sur l’occurrence SMenu1 pour la sélectionner, ? Et, saisir son code comme suit:

on (press) {

             getURL(«»,»_blank»); }

?     Faire de même avec les occurrences SMenu2, SMenu3, SMenu4 pour la sélectionner,

on (press) {

                                                            getURL(«»,»_blank»);

}

on (press) {

                                                            getURL(«»,»_blank»);

}

on (press) {

                                                            getURL(«»,»_blank»);

}

getURL est donc une méthode qui permet de conduire à l?adresse spécifiée, sous forme de lien hypertexte. Elle requiert deux paramètres; l?adresse de la page et le mode d?affichage (_blank spécifiant ici dans une nouvelle fenêtre).

? Tester l’animation et cliquer sur les différents liens.

Vous constatez que chacune des pages s?affiche dans une nouvelle fenêtre en fonction du clic. Tout marche parfaitement. Il ne reste plus qu?à insérer la composition Swf dans une page HTML et le tour est joué.

Ces documents DreamLive sont libres de droits et ouverts à tous alors, profitez, partagez et appréciez ! Pour nous retrouver sur le Web : .

Ces documents DreamLive sont libres de droits et ouverts à tous alors,        Page 6 profitez, partagez et appréciez ! Pour nous retrouver sur le Web : .

 



216