Discussion :

[keanowushu]

Bonjour à tous !!

Depuis un petit moment je cherche à faire une bande d'images qui défile en fonction de la position de la souris.
J'ai créé un petit menu tout con qui charge des images (13 au total) dynamiquement, les affiche en bande et cette bande défile en fonction de la position de la souris par rapport au centre.
Jusque là tout baigne. Par contre, maintenant j'aimerais que lorsque la souris passe au-dessus d'une image avec la souris, ça m'écrive le nom du clip survolé dans la fenêtre de debug avec la fonction "trace". Or je n'arrive pas à gérer les évènements sur les clips générés dynamiquement.

voilà mon code pour créer ma bande image :

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
 
     var repImages = "./images/";
     var images:Array = new Array("01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg");
     var thumbs:Array = new Array();
     var largeurImage:Number = 100;
     var hauteurImage:Number = 67;
     var espacementL:Number = 10;
     var espacementH:Number = 10;
     var posX:Number = 0;
     var posY:Number = 20;
     var banderole_mc:MovieClip = this.createEmptyMovieClip("banderole_mc", 0);
 
     for (var i:Number = 0; i < images.length; i++){
          var img:MovieClip = banderole_mc.createEmptyMovieClip("img"+i, i);
          img.loadMovie(repImages + images[i]);
          thumbs[i] = img;
          img._x = posX;
          img._y = posY;
          posX += largeurImage + espacementL;
     }
 
     for (i = 0; i < thumbs.length; i++){
          thumbs[i].onRollOver = function(){
          trace("hello");
          };
     }

J'attends votre aide avec impatience, pendant ce temps je continue mes recherches...

[keanowushu]

Et bien en fait le problème venait (j'ai eu la réponse sur un autre forum) du fait que faire un loadmovie supprime les évènements clip sur l'élément créé. Il suffisait donc de passer par un MovieClipLoader.
Maintenant ça fonctionne, je suis capable de gérer les évènements MovieClip sur mes images, mais je cherche toujours comment faire tourner cette banderole en boucle...
Si quelqu'un sait comment s'y prendre, je suis preneur !!

(le forum a l'air mort... serait-ce la chaleur ?)

[Gnomothir]

Tourner en boucle c'est a dire meme lorsque la souris ne la survole plus? si oui regarde du cote de onEnterFrame qui est une fonction qui se declenche au rythme des images et ce tout le temps tant que l'on ne l'efface pas avec delete onEnterFrame.
Par exemple:

Code :

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

1
2
3
4
5
6
 
var x:Number = 0;
this.onEnterFrame = function() {
x += 1;
trace(x);
}

Ce petit bout de code fera incremente x sans fin a la cadence de ton animation, si animation de 30images/sec alors x va augmenter de 30 toutes les sec en passant par tous les entiers entre bien entendu.

[keanowushu]

Tourner en boucle c'est a dire meme lorsque la souris ne la survole plus? si oui regarde du cote de onEnterFrame qui est une fonction qui se declenche au rythme des images et ce tout le temps tant que l'on ne l'efface pas avec delete onEnterFrame.
Par exemple:

Code :

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

1
2
3
4
5
6
 
var x:Number = 0;
this.onEnterFrame = function() {
x += 1;
trace(x);
}

Ce petit bout de code fera incremente x sans fin a la cadence de ton animation, si animation de 30images/sec alors x va augmenter de 30 toutes les sec en passant par tous les entiers entre bien entendu.

salut et merci de ta réponse.

En fait j'utilise onEnterFrame pour les évènements souris justement. Mais ce que je veux faire n'a pas de rapport avec une boucle infinie, mais simplement la bande d'images qui est en boucle, autrement dit, si l'utilisateur arrive à la dernière image de la bande, elle ne s'arrêtera pas (comme elle le fait actuellement) mais affichera la bande depuis le début.

[Gnomothir]

Alors il faut tester avec un if je dirais:

Code :

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

1
2
3
4
 
if (fin de bande) {
      retour au debut de la bande;
}

[keanowushu]

le problème de ton code, c'est qu'on va voir de suite que la bande est replacée au début, puisque normalement la dernière image devrait être à coté de la première (si la boucle fonctionne). Ici en la remettant au début si on a atteint la fin, on va voir comme un saut d'image, ça ne sera pas beau.
Moi j'avais pensé à faire une duplication de la bande, et la placer à la suite.
Ce que j'aimerais au final, c'est par exemple voir 3 images de la bande (celle du milieu a une opacité de 100%, et les deux autres ont une opacité qui diminue au plus elles s'éloignent du centre, et vice versa).
Et ces images (même s'il n'y en a ke trois) tournent en boucle : 1er image, 2e image, 3e image, 1ère image, 2e image....
et inversement.

Si quelqu'un saurait comment faire, je suis preneur !!

[Joris]

Il y a surement moyen d'automatiser tout ça au lieu de répéter le if pour chaque image, mais le concepte est là. Sinon je change la position x de l'image map2 et toutes les autres images la suive (pour ça il y a surement moyens de faire autrement, c'est au choix). Sinon en gros je double les images (map2 = map21) et je fais un effet Pac Man. Have fun!

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
_root.onEnterFrame = function(){
		posX = map2._x
		map2._x = map2._x + (_xmouse - posCentre)/10
		posX = map2._x - posX 
		if(map2._x > posFin + imageWidth) {
			k = map2._x
			map2._x = (posDebut - imageWidth * 2) + (k - (posFin + imageWidth))
		} else if (map2._x < posDebut - imageWidth * 2) {
			k = map2._x
			map2._x = (posFin + imageWidth) - ((posDebut - imageWidth * 2) - k)
		}
		map1._x = map1._x + posX
		if(map1._x > posFin + imageWidth) {
			k = map1._x
			map1._x = (posDebut - imageWidth * 2) + (k - (posFin + imageWidth))
		} else if (map1._x < posDebut - imageWidth * 2) {
			k = map1._x
			map1._x = (posFin + imageWidth) - ((posDebut - imageWidth * 2) - k)
		}
		map3._x = map3._x + posX
		if(map3._x > posFin + imageWidth) {
			k = map3._x
			map3._x = (posDebut - imageWidth * 2) + (k - (posFin + imageWidth))
		} else if (map3._x < posDebut - imageWidth * 2) {
			k = map3._x
			map3._x = (posFin + imageWidth) - ((posDebut - imageWidth * 2) - k)
		}
		map11._x = map11._x + posX
		if(map11._x > posFin + imageWidth) {
			k = map11._x
			map11._x = (posDebut - imageWidth * 2) + (k - (posFin + imageWidth))
		} else if (map11._x < posDebut - imageWidth * 2) {
			k = map11._x
			map11._x = (posFin + imageWidth) - ((posDebut - imageWidth * 2) - k)
		}
		map21._x = map21._x + posX
		if(map21._x > posFin + imageWidth) {
			k = map21._x
			map21._x = (posDebut - imageWidth * 2) + (k - (posFin + imageWidth))
		} else if (map21._x < posDebut - imageWidth * 2) {
			k = map21._x
			map21._x = (posFin + imageWidth) - ((posDebut - imageWidth * 2) - k)
		}
		map31._x = map31._x + posX
		if(map31._x > posFin + imageWidth) {
			k = map31._x
			map31._x = (posDebut - imageWidth * 2) + (k - (posFin + imageWidth))
		} else if (map31._x < posDebut - imageWidth * 2) {
			k = map31._x
			map31._x = (posFin + imageWidth) - ((posDebut - imageWidth * 2) - k)
		}
}