WebNioub

Dans cette deuxième partie du tutoriel sur les boutons en flash, nous allons voir comment faire un bouton dont les états (”survolé” / “au repos“) vont s’enchaîner avec une animation de transition.

Le principe : créer une boucle, partant de l’état “au repos“, passant par l’état “survolé” pour enfin revenir à l’état “au repos“. Il ne nous restera plus qu’à stopper l’animation au moment voulu.

Repartons d’un fichier flash vide.

Cette fois-ci, pour créer le bouton, commencez à réfléchir à son animation. Si vous voulez qu’il change de couleur, de forme, si le texte doit bouger, etc. Selon ce que vous voulez faire, la façon de créer le bouton sera différente.

Voici pourquoi : les animations sont pilotées par des interpolations, de mouvements ou de formes.

Si vous voulez que votre bouton change de couleur, il s’agira d’interpolation de mouvement, pour qu’il change de forme, on utilisera l’interpolation de forme, etc.

Il ne s’agit plus ici de créer le même bouton dans ses deux versions, mais plutôt de faire évoluer le même avec des interpolations.

Voyons ensemble un exemple simple.

Notre bouton sera composé de plusieurs parties : le texte du bouton, le motif du bouton, plus d’autres éléments visuels statiques (cadre, etc.).

tut_2_1

Le texte changera de couleur et le motif (un dégradé) s’inversera.

Commencez donc par construire dans un clip vide ces éléments en les mettant sur un calque différent chacun en le renommant de façon explicite. Convertissez en clip tous les éléments (au minimum celui qui recevra l’interpolation de mouvement, le texte) SAUF le motif, car il subira une interpolation de forme.

Vous avez donc une série de calques, composant votre bouton au repos.

Sur chaque calque d’un élément devant subir un changement, sélectionnez une “frame” placée plus loin sur la “timeline” et dupliquez l’image clé présente sur la première frame en appuyant sur la touche “F6“.

Reproduisez cette opération en sélectionnant une “frame” un peu plus loin encore.

tut_2_2

Vous avez donc votre bouton à trois niveaux différents sur la “timeline“. Le premier correspondra à l’état au repos, le deuxième à l’état “survolé” et le dernier de nouveau à l’état “au repos“.

Sur le deuxième niveau, changez le sens du dégradé du motif et changez la couleur du texte en appliquant sur le clip un effet, un filtre, etc.

Créez une interpolation de forme de part et d’autre du motif à l’état “survolé“, pareil avec une interpolation de mouvement pour le texte.

Testez votre animation, vous avez une boucle infinie, votre bouton changeant constamment d’état.

Il nous reste à « piloter » cette animation.

Au dessus de nos calques, créez-en deux nouveaux. Le premier, nommez le « label » et le second « script ». Verrouillez les deux pour les préserver d’une mauvaise manipulation.

Sur le calque « script », créez des image-clés vides (F7) au dessus de chaque état de votre bouton (trois fois donc).

Ouvrez le panneau d’actions (F9) et dans les trois frames tapez le code qui stoppera la tête de lecture de flash :

stop();

tut_2_3

Si vous testez votre animation, votre bouton ne change plus. Sur le calque « label », créez deux image-clé vides une frame après les deux premières “frames” contenant du code sur le calque « script ». Cliquez sur la première du calque « label », remplissez dans le panneau de propriétés le champ « image » avec « ON », et sur la seconde « OFF ».

tut_2_4

Par rapport au premier tutorial, l’ordre des labels est inversé, c’est normal. Lorsque nous lancerons l’animation depuis « ON » lors du survol de la souris, l’animation de votre bouton passera de l’état au repos à celui de survolé. Et quand nous partirons de « OFF », nous verrons l’animation inverse. Le seule différence dans le code par rapport au bouton plus simple, c’est que nous utiliserons des "gotoAndPlay();“ à la place des "gotoAndStop();“. Nous décalons les image-clés des calques « script » et « label », car sinon le "stop();“ étant prioritaire sur le "gotoAndPlay();“, l’animation serait bloquée. La tête irait se placer au dessus de « ON », avec l’instruction de continuer sa lecture, mais en arrivant, elle lirait « stop », et donc s’arrêterait. Sur la scène principale, vous avez donc qu’un seul calque, contenant votre animation du bouton.

Donnez à ce clip le nom d’occurence « bt_exemple ».

tut_2_5

Créez un calque « script », et sur la première frame rentrez le code qui va détecter les actions de la souris.

Le code à taper (pour une explication plus détaillée du code, reportez-vous au premier tutorial) :

// gestion du survol
this.bt_exemple.onRollOver = function():Void {
this.gotoAndPlay("ON");
};
// gestion de la sortie du survol
this.bt_exemple.onRollOut = function():Void {
this.gotoAndPlay("OFF");
};
// gestion du clic gauche (déclenchement au relaché)
this.bt_exemple.onRelease = function():Void {
getURL("index.htm", "_self");
};