Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Réalisation d'un bouton fluide

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Par minotor

Le but de ce tutoriel est de réaliser un bouton fluide qui s'ouvre lorsque l'on passe la souris dessus, reste ouvert si on laisse la souris dessus, et se referme lorsque la souris ressort. De plus, le bouton doit s'ouvrir et se refermer completement, et ceci même si la souris ne fait que passer dessus…

Dans une première partie, nous élaborerons la partie graphique (clips, clips imbriqués et bouton) puis dans la deuxième nous mettrons en place les quelques lignes de code nécessaires. A la fin du tutoriel, vous trouverez un petit exemple multipliant ce bouton dans une boucle…

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

Pré-requis :
- savoir ce qu'est un symbole (clip et bouton).
- savoir ce qu'est une occurrence (et la différence avec un symbole).
- connaître l'accès aux différentes palettes d'outil de flash.
- avoir fait un petit tour sur les didacticiels de flash histoire de savoir de quoi on parle… :-D

Notions abordées :
- animation simple, utilisation des occurrences, des calques et des interpolations de mouvement.
- notions de code simples (trés… :-D ).

Sources du tutoriel :
- bouton_fluide.fla au format Flash CS3 .

Première partie : Un peu d'animation...

Créer un nouveau document flash et sauvegardez le.

Le bouton

Sur la timeline principale, créez 4 calques distincts, et appelez les, de haut en bas : “boutons”, “anims”, “fond” et “program”. Sur le calque “boutons”, créez un rectangle, et grâce à la palette “Mélangeur”, remplissez le d'un vert bien fluo, avec un alpha de 50%.

Convertissez ce rectangle en symbole (Movieclip) nommé “rectangle”.


Sélectionnez ce symbole que vous venez de créer, et convertissez le à nouveau en symbole, mais cette fois en bouton nommé “bouton” (on a maintenant un bouton qui contient un MovieClip. Rentrez (double-clic) dans ce bouton et placez le rectangle uniquement sur la 4eme frame, pour en faire un bouton invisible.


Revenez sur la scène principale et donnez comme nom d'occurrence à votre bouton : “bouton” (pour faire original :-D ). Celui-çi a pris une teinte bleuté signifiant que c'est bien un bouton invisible.

Le fond

Sur le calque fond, positionnez deux formes rectangulaires pour faire le fond de votre bouton, puis avec l'outil texte, inscrivez le titre du bouton (ici : “CLIQUEZ ICI”). Vous pouvez transformer le tout en un nouveau symbole (MovieClip) nommé “fond” qui vous servira plus tard si vous décidez de dupliquer plusieurs fois le bouton…

Vous remarquerez que la forme noire est de même taille et placé au mêmes coordonnées que le bouton invisible, pour pouvoir par la suite donner un effet de tiroir qui s' ouvre et se referme.

Le clip animation

Sur la scène principale. Ouvrez la bibliothèque de votre flash, qui doit déjà contenir le bouton “bouton”, le clip “fond” et le clip “rectangle”. Sur le calque “anims” faites glisser une occurrence de ce clip rectangle, et positionnez la aux mêmes coordonnées que votre bouton invisible.


Convertissez ce rectangle en un nouveau symbole (MovieClip) nommé “animation”. Donnez lui comme nom d'occurrence”animation”.


Rentrez dans votre symbole “animation” et à l'interieur, faites 3 calques distincts : “masque”, “anim”, et “program”. Le rectangle doit pour l'instant rester sur le calque “anim”.


Placez vous sur le calque “program” à la première frame, puis dans le panneau action, tapez :

stop();


Ensuite, dupliquez le rectangle du calque “anim” sur le calque “masque”. Pour l'avoir directement aux mêmes coordonnées, il faut sélectionner le rectangle, le copier (control+C sur windows) et le “coller en place” (control+majuscule+V sur windows). Ensuite insérez des images sur les 3 calques jusqu'à la frame 30. Cachez le calque “masque”, qui ne bougera pas jusqu'a la fin…


Sur le calque “anim”, créez une nouvelle image clé sur la 10eme frame, et déplacez le rectangle de cette frame sur la droite.


Créez entre ces deux frames une interpolation de mouvement qui sera l'interpolation d'ouverture, et donnez une petite accélération (ici : 40)


Copiez les images de l'interpolation de ce calque, et recollez les juste après. La première ouverture se trouve donc de la frame 1 à la frame 10 et la deuxième, identique, de la frame 11 à la frame 20.

L'animation d'ouverture reste dupliquée ainsi, cela servira pour donner la fluidité à l'ouverture du “tiroir” par le code.


Collez à nouveau les images sur le même calque, de la frame 21 à la frame 30. Mais changer l'accélération de +40 à -40. Sélectionnez ensuite le rectangle sur la frame 21 et repositionnez le comme le rectangle de la frame 20 (à droite) puis sélectionnez le rectangle de la frame 30 et repositionnez le comme celui de la première frame (au centre);

De cette manière notre troisième interpolation de mouvement est la fermeture du tiroir !


Ensuite on créé une image clé sur la frame 10 du calque “program” pour y placer de nouveau une action stop :

stop();

Cette frame 10 est l'emplacement que prendra la tête de lecture lorsque la souris restera sur le bouton…
Puis encore une image clé à la frame 30 pour y placer l'action suivante :

gotoAndStop(1);


Enfin, faites un clic droit sur le calque “masque”, puis : “Masque” dans le menu déroulant. Le calque nommé “masque” devient donc effectivement le masque du calque nommé “anim”.

On a ainsi fini l'animation de ce clip ! Pour rappel : le tiroir s'ouvre de le frame 1 à la frame 10, puis il s'ouvre à nouveau de la frame 11 à la frame 20, puis il se referme de la frame 21 à la frame 30.


Revenez enfin sur la scène principale car nous allons maintenant nous attaquer à la partie code de ce tutoriel. Comme chacun doit le savoir, la meilleure manière de coder pour s'y retrouver plus tard est de tout mettre au même endroit… Choisissez donc la première frame du calque “program” de la scène principale (oui, du code a déjà été placé dans le clip “anim”, mais c'est du code de structure, les fonctions, et tout ce qui est susceptible d'être modifié se trouvera sur la scène principale).

Deuxième partie : On passe au code !

Nous nous trouvons donc sur la première frame du calque “program” de la timeline principale. Ici, nous allons devoir définir 3 fonctions : Une fonction de rollOver, appelée quand la souris passe sur le bouton. Une fonction de rollOut quand la souris sort du bouton (à laquelle on rajoute le releaseOutside, appelé lorsque la souris appuie sur le bouton, mais relâche à l'exterieur du bouton). Et une fonction de release, appelée lorsque l'on clique et relâche sur le bouton (ici on placera donc les actions que l'on veut attribuer au bouton par la suite). Ces 3 fonctions sont notées par le code suivant :

bouton.onRollOver = function() {
	//
};
bouton.onRollOut = bouton.onReleaseOutside=function () {
	//
};
bouton.onRelease = function() {
	//
};

Notons bien que “bouton” est notre bouton invisible. (le clip animé du tiroir est nommé “animation”).


Lorsque la souris passe sur le bouton, on veut que notre tiroir s'ouvre. On place donc cette ligne dans la fonction rollOver :

animation.gotoAndPlay(2);

Le clip “animation” va alors se lire jusqu'a la frame 10, position ouverte, sur laquelle on a mis un stop.


Pour la suite, nous allons utiliser une propriété de l'objet MovieClip : _currentFrame Elle permet de récupérer la frame du clip qui est actuellement lue par la tête de lecture :

animation._currentFrame

Nous avons déjà placé un peu de code sur ce clip “anim” : Un stop à la première image, un stop à la dixième image et un gotoAndStop à la 30ème. L'action du rollOut sera donc la suivante :

animation.gotoAndPlay(animation._currentframe+10);

Ce qui veut dire : Si ma souris sort du bouton, la tête de lecture du clip animation avance de 10 images. Ceci combiné au gotoAndStop placé à la fin du clip “animation” suffit à donner l'effet voulu : L'animation d'ouverture et de fermeture est jouée en entier, quoi que l'on fasse (si on s'arrete sur le bouton, ou si on ne fait que passer dessus).

On rajoute enfin l'action désirée lorsque l'on relâche le bouton (action release) et le tour est joué !

Code final :

bouton.onRollOver = function() {
	animation.gotoAndPlay(2);
};
bouton.onRollOut = bouton.onReleaseOutside=function () {
	animation.gotoAndPlay(animation._currentframe+10);
};
bouton.onRelease = function() {
	// Ici les actions de ton bouton.
	// par exemple un getURL();
};

Voici donc le résultat :

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

Le tutoriel est terminé, mais rajoutons une troisième partie, dans laquelle on explorera quelques pistes pour aller un peu plus loin…

Troisième partie : Conclusion...

Voilà une utilisation mélée des possibilités d'animation et de code dans Flash.

Le tout peut encore être amélioré évidemment… Par exemple vous remarquerez que si le bouton est en position “ouvert”, et que l'on repasse la souris dessus, l'action

animation.gotoAndPlay(2);

le fait revenir en position fermée sans transition… Il faudrait alors dans le cas d'un rollOver commencer par savoir ou en est la tête de lecture, et la replacer au bon en endroit en fonction de ça… Mais c'est un peu plus compliqué, je vous laisse chercher… :-D :-D

On peut également imaginer que vous avez une dizaine de boutons identiques, et que vous voulez que tous le code soit alors placé dans une boucle comme dans le flash suivant :
bouton_multi.fla

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

Le code est le suivant :

for (i=0; i<=5; i++) {
	// on est à l'interieur de la boucle...
	// "bouton" cible chaque bouton, de bt0 à bt5 :
	bouton = this["bt"+i];
	// idem pour les clips anim :
	bouton.clip = this["anim"+i];
	// on affecte l'id unique à chaque bouton, pour pouvoir différencier leurs actions :
	bouton.id = i;
	// ouverture du tiroir :
	bouton.onRollOver = function() {
		this.clip.gotoAndPlay(2);
	};
	bouton.onRollOut = bouton.onReleaseOutside=function () {
		// lance la fermeture du tiroir en fonction de l'emplacement de la tête de lecture :
		this.clip.gotoAndPlay(this.clip._currentframe+10);
	};
	bouton.onRelease = function() {
		// on peut donc ici utiliser le "id" de chaque bouton pour définir ses actions :
		affiche.text = "bouton "+this.id+" cliqué !";
	};
}

Il vous faudra observer attentivement la manière dont est utilisée la syntaxe à crochet et qu'est-ce que la boucle implique en termes de ciblage (utilisation du this ).
Il faut aussi bien comprendre que “bouton” est une variable qui sert à clarifier la programation de la boucle, alors que “clip” et “id” sont des variables affectées à chaque bouton au sein de la boucle for, pour que une fois la boucle terminée, ces boutons puissent acceder à une information distincte lors d'un évennement de souris (rollOver, release, …). En effet, si on se contente d'utiliser le “i” de la boucle, une fois celle çi terminée, “i” sera toujours égal à sa dernière valeur (c'est à dire 5)…
Cette technique est expliquée plus en détail ici : Des boutons dans une boucle !

Sur ce, bonne continuation… :-D

Pour toutes questions concernant ce tutoriel, veuillez utiliser les salles apropriées de Flash-Forum !…