Poser une question

[COURS] Créer un Bouton à partir d'un MovieClip

Salut ...
je l'savais ... en te lisant je l'ai senti!

alors pour créer un bouton à partir d'un MovieClip, c'est très simple...

ça se décompose en deux parties :

la première est graphique : les différentes parties visuels qui seront affichées soit au survol, soit au clic, soit qd y a pas de souris dessus, etc...

la deuxième, ce sont des lignes de code : on est obligé de créer le bouton de toute pièce donc de lui faire comprendre ce qu'il doit faire quand la souris, survole, clique, relache, sort du survol, etc... on va donc passer par l'actionscript, le langage de programmation de flash.

Tu vas voir ça va être très simple:

1. Tu dessines un rectangle tout bete, plein. tu le sélectionnes et tu fais Modification->Convertir en Symbole F8 (comme pour un bouton). Mais là tu choisis MovieClip, et tu lui donnes un nom. exemple : 'bouton_nom'

2. IMPORTANT : avant de rentrer dans le clip que tu viens de créer. Tu vas simplement le sélectionner (un contour bleu apparait) et tu vas lui donner un nom d'occurence (en bas dans la fénétre 'propriétés' completement à gauche. (Attention, il faut bien sélectionner le clip avant)... par exemple 'bouton_occu'. Ce nom vas te permettre par la suite de pouvoir le manipuler avec l'actionscript.

3. Tu rentres dans le clip nouvellement nommé 'bouton_occu' en double cliquant dessus.

4. Dans ton scénario (en haut), tu places sur la première image (un simple clic sur l'image ou 'frame'). et là où tu avais écrit 'bouton_occu', tu vas maintenant poser une étiquette, 'normal' par exemple. un petit drapeau apparait dans le scénario au niveau de ton image.

5. Ensuite, tu crées, 3 autres images clés (en appuyant sur F6). Tu leur donnes les étiquettes : 'survol', 'abaissé', 'declenché'... ensuite pour chacune des images (pour l'exemple, après tu mettras ce que tu voudras, tes clip animé par exemple), tu vas changer la couleur de fond du rectangle, genre vert pour survol, jaune pour cliqué et rouge pour déclenché...

6. Voilà, tu a crées la partie visuelle de ton bouton. maintenant, on va passer au code. Pour commencer on affiche le panneau action (F9).

7. Première étape, sélectionner chaque image (dans le scénario) et entrer le code suivants pour chacun d'elle :

stop(); // attention au point-virgule, très important.

a partir de là, le drapeau disparait (en fait, il est décalé et tu ne le vois plus) et un 'a' apparait qui signifie qu'il y a une action associée à cette image.

8. Deuxième étape, tu crées un autre calque que vas appelé action. Ce calque-là te servira à mettre toutes les actions communes à toutes les images, à tout les états. Tu ne dois pas y mettre d'image clé, laisse le vide et surtout cette image-vide doit s'étaler sur la totalité du clip (ici 4 images). Mais normalement, quand tu crées le calque, c'est déjà fait par défaut.

9. Sur cette image tu entres ton code :

this.onRollOver = function(){
gotoAndPlay('survol');
}

10. Compile et teste en survolant ton rectangle. et hop ça marche.
En revanche, quand tu resors du rectangle, il reste sur l'état survol. c'est normal pour l'instant. En fait, tant que tu ne lui dis pas de quitter l'état sur lequel il est, il va y rester tout simplement. et pire, quand tu vas rentrer dessus, il va retourné à l'image zéro var il ne trouvera pas l'image 'survol', vu qu'il est déjà dessus. Par défaut, il retourne donc sur la première image du clip...

Maintenant, il ne te reste plus qu'à coder les autres transitions. en utilisant les onRelease, onPress, onRollOut et d'autres dont tu pourras trouver les significations dans l'aide dans la rubrique MovieClip (ou classe MovieClip, attention aux majuscules) ... je te met un copier collé en dessous :

Evénement
Description

onPress = function() {}
Appelé lorsque l'utilisateur clique sur le bouton de la souris quand le pointeur est placé sur un clip.

onRelease = function() {}
Appelé lorsqu'un utilisateur relâche le bouton de la souris sur un clip.

onReleaseOutside = function() {}
Appelé lorsqu'un utilisateur appuie sur le bouton de la souris dans une zone de clip et le relâche ensuite en dehors de la zone de clip.

onRollOut = function() {}
Appelé lorsqu'un utilisateur déplace le pointeur hors d'une zone de clip.

onRollOver = function() {}
Appelé lorsqu'un utilisateur déplace le pointeur sur une zone de clip.


Voilà ... à partir de ça tu construis le code suivant (que tu pourras modifier à ta guise par la suite :

this.onRollOver = function(){
gotoAndPlay('survol');
}

this.onRollOut = function(){
gotoAndPlay('normal');
}

this.onPress = function(){
gotoAndPlay('abaissé');
}

this.onRelease = function(){
gotoAndPlay('déclenché');
}

Voilà voilà ...
pour ton cas précis, il y a quelques réglage à faire. Mais essayes déjà de faire ça et on avisera ensuite...

Bon courage.
A plus

TOph'

Réponses

J'ai vraiment du mal  juliapevny 20/5/2006