[FLASH MX2004] Superposer des boutons à un clip

**gregooo** · 01/12/2005, 19h59

Salut

,

...alors voila, je voudrais reproduire l'effet du menu de la page d'accueil
de Group94 (http://www.group94.com/).

Vous voyez?... au-dessus du logo Group94.

Lorsque la souris passe sur la zone du menu, un cadre noir apparait. Puis, une liste de boutons se superpose au cadre.

Faut-il utiliser un 'LoadMovie' (donc, placer un clip avec des boutons sur le clip composé du cadre noir)?

... ou alors pas!?

Si vous avez la réponse, je suis preneur...

GregooO.

**arnolem** · 02/12/2005, 09h29

Welcome gregooo,
Bon j'ai un peu de mal à cibler ton problème, lors du survol, tu a un clip qui s'agrandi et alros ? tu veux le reduire ? si tu veux juste qu'il monte moin heut, tu modifie ton clip ? je vois pas de trop la...

**ekameleon** · 02/12/2005, 09h50

Hello

Le menu c'est du "full dynamique" avec des api dynamique de dessin dans un clip vide.....

Exemple :

1 - tu ouvres un nouveau fla

2 - tu vas sur le calque du scénario principal et tu le renommes "code"

3 - tu sélectionne l'image clé 1

4 - tu appuies sur F9 pour ouvrir le panneau d'action

5 - tu tapes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
MovieClip.prototype.drawRectangle = function (w, h, color) {
     if (!isNaN(w)) this.w = w ;
     if (!isNaN(h)) this.h = h ;
     if (!isNaN(color)) this.color = color ;
     this.clear() ;
     this.beginFill(this.color, 100) ;
     this.lineTo(this.w, 0) ;
     this.lineTo(this.w, this.h) ;
     this.lineTo(0, this.h) ;
     this.lineTo(0, 0) ;
     this.endFill() ;
}
 
createEmptyMovieClip("monRectangle", 1) ;
monRectangle.drawRectangle(200, 10, 0xFF0000) ;
monRectangle._x = 25 ;
monRectangle._y = 25 ;

Voilà ... tu peux lancer l'animation avec CTRL + ENTREE et tu regardes ce qui se passe !

Pour l'animation si tu as au moins FLASHMX2004 tu peux utiliser la classe mx.transitions.Tween, j'ajoute du code dans le code au dessus pour un petit exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
import mx.transitions.Tween ;
import mx.transitions.easing.* ;
 
MovieClip.prototype.drawRectangle = function (w, h, color) {
     if (!isNaN(w)) this.w = w ;
     if (!isNaN(h)) this.h = h ;
     if (!isNaN(color)) this.color = color ;
     this.clear() ;
     this.beginFill(this.color, 100) ;
     this.lineTo(this.w, 0) ;
     this.lineTo(this.w, this.h) ;
     this.lineTo(0, this.h) ;
     this.lineTo(0, 0) ;
     this.endFill() ;
}
 
var tw:Tween ;
 
var mc = createEmptyMovieClip("monRectangle", 1) ;
mc.drawRectangle(200, 10, 0xFF0000) ;
mc._x = 25 ;
mc._y = 25 ;
mc.onRollOver = function () {
	if (tw.isPlaying) tw.stop() ;
	tw = new Tween (this, "h", Back.easeOut, this.h, 250, 24) ;
	tw.addListener(this) ;  
}
mc.onRollOut = function () {
      if (tw.isPlaying) tw.stop() ;
      tw = new Tween (this, "h", Bounce.easeOut, this.h, 10, 24) ;
      tw.addListener(this) ;  
}
mc.onMotionChanged = function ( tw ) {
	trace (tw) ;
      this.drawRectangle(null, this.h) ;
}

Voilà .. tout cela pour dire que pour réaliser cela... pas besoin de "loadMovie" (aucun rapport car si tu lis le contenu de l'aide de flash à ce sujet tu verras qu'en fait cela sert à charger des images ou des swf externes.. ici visuellement cela n'a aucun rapport !

... Faut juste que tu lises doucement l'aide de flash pour apprendre à te servir de l'actionscript et surtout il faut lire tout ce qui concerne la classe MovieClip !!!

EKA+

**gregooo** · 02/12/2005, 13h15

Waouw... He beh... j'ai encore du chemin!

Merci à vous deux (heu... surtout à toi ekameleon!...d'ailleurs!

).

J'ai bien observé ton code. Alors, pour essayer de le comprendre, j'ai fait qques commentaires. Peux tu me dire si je suis sur la bonne voies?

Mais alors (la grosse question) comment fais tu pour superposer des boutons à ce mc? Pour qu'ils apparaissent d'un coup, sur le rectangle, au moment où tu passes la souris sur ce mc?... Cette liste de boutons doit être placer au préalable dans un autre clip ou doivent il être inclus dans le code de ce premier mc(rectangle)?

import mx.transitions.Tween ;
import mx.transitions.easing.* ;

MovieClip.prototype.drawRectangle = function (w, h, color) {
La, tu prends la classe MovieClip, puis (à l'intérieur de celle-ci, tu prends la classe prototype,
puis la classe drawRectangle; et tu déclare 3 variables au rectangle que tu es en train de créer(w,h,color).

if (!isNaN(w)) this.w = w ;
if (!isNaN(h)) this.h = h ;
if (!isNaN(color)) this.color = color ;
La, je ne comprends pas (!isNaN())...! Mais le 'this' fait référence au rectangle que tu crées.

this.clear() ;
heu, le 'clear' veut dire que le rectangle occupe un espace libre? Si c'est le cas, je ne vois pas ce que ça veut dire...

this.beginFill(this.color, 100) ;
tu déclare la variable de la couleur de remplissage du rectangle au début (mais, pourquoi 100?)

this.lineTo(this.w, 0) ;
this.lineTo(this.w, this.h) ;
this.lineTo(0, this.h) ;
this.lineTo(0, 0) ;
Tu mets la lareur(w) et la hauteur(h) à 0.

this.endFill() ;
La, tu déclare la variable de la couleur de remplissage de la fin...
}

... en fait, jusqu'ici, tu as déclaré toutes tes variables...

var tw:Tween ;
La, tu traduis la classe 'Tween' par 'tw'.

var mc = createEmptyMovieClip("monRectangle", 1) ;
La, tu traduis la variable 'createEmptyMovieClip' par 'mc'puis, tu nomes ce mc "monRectangle"
et tu n'en spécifie qu'un seul ('1').

mc.drawRectangle(200, 10, 0xFF0000) ;
La, tu définis les variable de 'drawRectangle' que tu as déclaré plus haut et tu les appliquent a mc.
---Donc, un MovieClip vide composé d'un rectangle de 200 sur 10 et de couleur 0xFF0000.---

mc._x = 25 ;
mc._y = 25 ;
Tu définis la position de ce mc

mc.onRollOver = function () {
if (tw.isPlaying) tw.stop() ;
tw = new Tween (this, "h", Back.easeOut, this.h, 250, 24) ;
tw.addListener(this) ;
}
La, tu définis ce qu'il ce passe lorsque tu passe avec la souris au dessus du mc.
heu... la hauteur du rectangle passe à 250 avec une amplitude de 24? (effet élastique)

mc.onRollOut = function () {
if (tw.isPlaying) tw.stop() ;
tw = new Tween (this, "h", Bounce.easeOut, this.h, 10, 24) ;
tw.addListener(this) ;
}
La, tu définis ce qu'il ce passe lorsque la souris sort du champ du mc.
et heu... la hauteur du rectangle repasse à 10, toujours avec un rebonds sur une hauteur de 24?

mc.onMotionChanged = function ( tw ) {
trace (tw) ;
this.drawRectangle(null, this.h) ;
}

Merci ...et Merci!

**ekameleon** · 02/12/2005, 13h24

Hello

1 - un prototype c'est un objet (pas une classe) dans lequel on peut stocker des méthodes et des propriétés.. par défaut un MovieClip c'est une instance de la classe MovieClip .. donc il possède les méthodes et propriété de sa classe (stockés dans le prototype de la classe)
Si tu tapes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
trace (MovieClip.prototype) ;

tu vois que flash renvois un objet !

Quand tu ajoutes une méthode (une fonction) à cet objet automatiquement toutes les instances de la classe vont posséder cette méthode !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
MovieClip.prototype.speak = function (msg) {
     trace (this+ " >> " + msg) ;
}
 
clip1.speak("coucou") ;
clip2.speak("hello") ;

avec clip1 et clip2 des noms d'occurence de clips sur ta scène !

PS : Quand tu comprends pas un truc dans le code que je tape, sélectionne le mot avec la souris et appui sur F1 !

Va dans l'aide de flash, dans le Guide de référence du language et cherche la classe MovieClip !!! c'est super important tu verras tout ce qui concerne cette classe (méthodes , propriétés, api de dessin dynamique, événement etc...). Faut lire.. là dessus je peux rien pour toi si tu le fais pas

Tu écris :

this.lineTo(this.w, 0) ;
this.lineTo(this.w, this.h) ;
this.lineTo(0, this.h) ;
this.lineTo(0, 0) ;
Tu mets la lareur(w) et la hauteur(h) à 0.

Non ! lis dans l'aide comment fonctionne la méthode lineTo de la classe MovieCLip et tu vas comprendre

Quand j'écris :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var tw:Tween ;

Là je traduis pas.. je déclare !! c'est à dire que ma variable "tw" va avoir pour type la classe Tween !! Comme cela si plus loin dans le code j'essai de taper :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
tw = "coucou" ;

Flash va me renvoyer une erreur quand je vais compiler l'animation et me dire que là j'essai de donner pour valeur à ma variable un String au lieu d'un Tween !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var mc = createEmptyMovieClip("monRectangle", 1) ;

Pareil .. lis l'aide...

mc est une "référence", ou un raccourci vers mon clip que je viens de créer dynamiquement (clip vide) avec createEmptyMovieClip

pour tester ce qu'il se passe tu peux utiliser partout dans ton code la fonction trace()...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var mc = createEmptyMovieClip("monRectangle", 1) ; 
trace (">>> mc : " + mc) ;

C'est intéressant de voir ce qu'il se passe

tu verras que mc en fait c'est _level0.monRectangle... mais comme je veux pas taper à chaque fois _level0.monRectangle je fais une variable temporaire "mc" c'est plus court à taper

Voilà.. continue ta lecture de l'aide

eKA+