[FLASH 8] Slider de photos

**Begood** · 08/03/2006, 16h10

Re

Bon voila, j'arrive à afficher correctement mes images dans un cadre que j'ai dessiné sous Flash. Problèmes, dès que le nombre de photos est important, cela sort du cadre... évidemment

Enfin, comme je suis un peu beaucoup nul en AS, je vois pas du tout comment faire pour que ca fasse un slider ... Pour l'instant mes images du slider sont chargées via un fichier XML de la manière suivante :

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
		var cat = _root.liste.selectedItem.label;
		var loadcat = "liste_"+cat+".xml"; //on met le nom du fichier article à charger
 
		for(j=0; j<=oldnumber; j++){
			_root["article"+j].removeMovieClip(); //si oldnumber>0, on supprime les movieclip existants
			}
		sliderXML.load(loadcat); // on charge le fichier XML contenant les références articles
		sliderXML.onLoad = function(success) {
		catab = sliderXML.firstChild.childNodes; // on affecte les Nodes du XML à un tableau de catégories
 
		for(i = 0; i < catab.length; i++){
			var file = catab[i].attributes.File //recupére le nom du fichier
			//trace(file);
			_root.createEmptyMovieClip("article"+i, i+10);// Création d'un clip vide:
			_root["article"+i].loadMovie(file); //charge le jpg dans ce clip jusque la vide
			_root["article"+i]._xscale = _root["article"+i]._yscale /= 8; // on réduit l'image par 8
			}
			//Déplacement et redimensionnement du clip conteneur:
			var colonne = 1.1; //j'initialise le nombre de colonne
			var ligne = 0.9; //j'initialise le nombre de ligne
			for (i=0; i<catab.length; i++) {
				//maintenant on dispose les images à partir de x=0 et y=0
			_root["article"+i]._x = colonne*70;
			_root["article"+i]._y = ligne*70;
			ligne++;
			}
		oldnumber = catab.length;
		}

Suis obligé de créer un movie clip pour contenir les movie clip contenant mes images ??? Et dans ce cas comment faire ?

Autre petite question, comment puis je rendre un élement cliquable afin de l'agrandir dans un autre movieclip ?

Merci

**dom_dev** · 08/03/2006, 17h11

hi,
ton problème n'a pas l'air très compliqué, par contre c'est la syntaxe :

Code :

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

1
2
 
_root["article"+i].loadMovie(file);

que je ne comprends pas.
Lorsque j'utilise cette syntaxe chez moi ça donne rien du tout (bien sur j'ai remplacé ...(file) par une image accessible.

Pour répondre à tes deux questions il parait plus simple de mettre tes "clip-images" ensemble dans le même clip et faire bouger celui ci.

Ensuite pour avoir une action sur un clip sauf erreur de mémoire il suffit de faire

Code :

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

1
2
3
4
 
mon_cp.onRollOver = function(){
      //actions
}

**Begood** · 08/03/2006, 17h24

pour la synthaxe, je t'assure que ca marche en Flash 8 en tout cas cjez moi

Mais de toute facon, je viens de modifier le _root car j'ai crée un movie clip pour contenir toutes ces images et un movie clip pour recevoir l'image correspondante agrandie sur simple clip sur l'article dans le slider :

Code :

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

1
2
3
4
5
6
		_root.createEmptyMovieClip("slider",1);
		_root.createEmptyMovieClip("bigPhoto",2);
		_root.galerie._x=77;
		_root.galerie._y=70;
		_root.bigPhoto._x=100;
		_root.bigPhoto._y=100;

Ensuite, j'ai modifié mon code de la manière suivante :

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
for(i = 0; i < catab.length; i++){
			var file = catab[i].attributes.File //recupére le nom du fichier
			//trace(file);
			slider.createEmptyMovieClip("article"+i, i+10);// Création d'un clip vide:
			slider["article"+i].loadMovie(file); //charge le jpg dans ce clip jusque la vide
			slider["article"+i]._xscale = slider["article"+i]._yscale /= 8; // on réduit l'image par 8
			slider["article"+i].onRollOver = function(){
				file = catab[i].attributes.file;
				bigPhoto.loadMovie(file);
			};
                        }
 
			//Déplacement et redimensionnement du clip conteneur:
			var colonne = 1.1; //j'initialise le nombre de colonne
			var ligne = 0.9; //j'initialise le nombre de ligne
			for (i=0; i<catab.length; i++) {
				//maintenant on dispose les images à partir de x=0 et y=0
			slider["article"+i]._x = colonne*70;
			slider["article"+i]._y = ligne*70;
			ligne++;
			}
		oldnumber = catab.length;
		}

LE problème est que cela ne me donne toujours pas en slider, et que les images ou MC dépassent toujours du cadre ... ce qui est pas terrible terrible si j'en ai 100 articles, alors que je peux n'en afficher que 5... Comment faire pour controler la taille d'affichage du movie clip slider ???

Pour le MC.onRollOver merci domdev je m'en vais tester de suite...

-----------------------EDIT-----------------------------------------

Je viens de tester le onRoll!Over comme tu le vois sur ma deuxième partie de code et je n'obtiens rien...

**dom_dev** · 09/03/2006, 07h37

hi,
je viens de penser à un truc important me semble-t-il pour la gestion de loadMovie. Dans un test j'avais écrit ceci (sur la même image clé):

Code :

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

1
2
3
4
5
 
mon_cp.loadMovie("avatar2.jpg");
mon_cp.onRollOver = function(){
	_root.sortie.text = "ca marche";
}

et bien justement ça ne marche pas, par contre si je déplace :

Code :

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

1
2
3
4
 
mon_cp.onRollOver = function(){
	_root.sortie.text = "ca marche";
}

sur une autre image clé, et bien la ça marche ! On a l'impression que flash ne peut pas faire .loadMovie et .onRollOver sur la même frame ???

**freegreg** · 09/03/2006, 09h13

Salut,

Code :

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

1
2
3
4
5
6
mon_cp.loadMovie("avatar2.jpg");
mon_cp.onEnterFrame = function() {
   this.onRollOver = function(){
      _root.sortie.text = "ca marche";
   } 
}

Quand tu fais ton loadMovie, une fois chargée l'image écrase le clip de reception ainsi que ses evenements.

**Begood** · 09/03/2006, 15h45

yop merci pour vos réponses.

j'ai testé pas mal de choses, voila mon dernier code ou j'ai testé l'application de freegreg :

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
for(i = 0; i < catab.length; i++){
			var file = catab[i].attributes.File //recupére le nom du fichier
			//trace(file);
			slider.createEmptyMovieClip("article"+i, i+10);// Création d'un clip vide:
			slider["article"+i].loadMovie(file); //charge le jpg dans ce clip jusque la vide
			slider["article"+i].onEnterFrame = function() {
   				this.onRollOver = function(){
     			trace("ca marche");
  				}
			}
			slider["article"+i]._xscale = slider["article"+i]._yscale /= 8; // on réduit l'image par 8
 
			};
			//Déplacement et redimensionnement du clip conteneur:
			var colonne = 1.1; //j'initialise le nombre de colonne
			var ligne = 0.9; //j'initialise le nombre de ligne
			for (i=0; i<catab.length; i++) {
				//maintenant on dispose les images à partir de x=0 et y=0
			slider["article"+i]._x = colonne*70;
			slider["article"+i]._y = ligne*70;
			ligne++;
			}
		oldnumber = catab.length;
		}

Problème: toujours rien, même pas le trace. Quelque soit les méthodes que j'ai essayé, je n'arrive pas à créer de movie clip cliquables afin de charger mon image dans le MC bigphoto...

Est ce que cela pourrait venir du fait que j'éxécute ce chargement de Movie Clips dans une fonction "listener"

Code :

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

listenerObject.change = function(eventObject:Object) {

????

Je commence à désesperer sur ce slider d'images, car je n'arrive pas à créer un movie clip global qui englobe toutes les photos de type slider et encore moins un movie clip interactive ...

**Begood** · 09/03/2006, 17h25

alors personne pour me répondre ?

on peut pas créer un évenement de click sur un movieclip créée dynamiquement ????

**dom_dev** · 09/03/2006, 17h54

salut,
franchement j'ai du mal à répondre si tu lis les deux post précédents le tien apparemment il faut se méfier de cela (c'est freegreg qui me répondait):

Quand tu fais ton loadMovie, une fois chargée l'image écrase le clip de reception ainsi que ses evenements.

Personnellement j'ai repris ton code, je me suis créé un tableau à moi avec des images locales et puis je me suis mis à patiner grave dans la choucroute pour arriver à rien du tout, faute de temps je n'ai pas pu continuer.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var catab:Array = Array();
catab[0]= "avatar.jpg";
catab[1]= "avatar2.jpg";
catab[2]= "avatar3.jpg";
//cp.loadMovie(catab[0]);
var file = catab[0];
_root["slider"+1].loadMovie("avatar.jpg");
//_root.slider1.loadMovie("avatar.jpg");
for(i = 0; i < 3; i++){ 
	var file = catab[i]; //recupére le nom du fichier 
	//trace(file);
	_root.attachMovie(slider,"slider"+i,i);
etc, etc...

perso ce que je ferai c'est décomposer le problème avec d'abords une image (remarque c'est peut être ce que tu as déjà fait ??). Puis lorsque ça marche avec une image j'essaye avec 2 c'est déjà une étape importante car il arrive qu'un clip en écrase un autre à sa création etc. Ensuite je construit mes boucles que j'alimente avec les variables dynamiques dont j'ai vérifié pas à pas le contenu dans des variables.text.
C'est horriblement laborieux mais bon...

**Begood** · 09/03/2006, 18h04

oki bein merci de t'être creusé la tête un peu pour moi !

mais ce que je comprend pas c'est pourquoi je n'arrive pas à créer d'évt sur un movie clip créé dynamiquement grace à de l'AS. Je ne vois aucun raison pour que ca ne marche pas étant donné que cela marche si je crée le movie clip sur la page ...

enfin Flash le permet peut être pas, et dans ce cas mon projet d'appli sur Flash tombe à l'eau

et dans ce cas je pense que ca sera direction java, mais bon j'aurais perdu 3 semaines...

donc je me répete pour faire mon relou :
1. coment fait on pour rendre un movie clip "slidable" ou les articles ne débordent pas de la page swf mais s'affichent sous forme d'un slider avec scroolbar
2. comment fait on pour rendre un movie clip cliquable ? particulièrement si ce movie clip fait partie d'un autre movuie clip ???

Merci à tous d'avance pour votre aide

------->>>>>>>>>EDIT
J'ai mis les sources ici :
http://www.tobegood.info/fichiers/flash.zip

**dom_dev** · 09/03/2006, 18h46

j'ai fait le test suivant :

Code :

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

1
2
3
4
5
6
7
8
9
 
for (i=0;i<3;i++){
	var container:MovieClip = this.createEmptyMovieClip("container"+i, this.getNextHighestDepth());
	eval("container"+i).loadMovie("avatar.jpg");
	eval("container"+i).onRollOver = function(){
		trace("ca marche");
	}
	eval("container"+i)._y = 50 + i*100;
}

avatar.jpg est une petite photo, le résultat c'est que j'ai bien 3 photos espacées vertivalement mais le rollOver ne marche pas.
Alors j'ai crée une quinzaine d'images clés dans mon anime et j'ai placé sur celle ci uniquement :

Code :

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

1
2
3
4
5
6
7
8
9
 
for (i=0;i<3;i++){
 
	eval("container"+i).onRollOver = function(){
		trace("ca marche");
	}
 
}
stop();

et là des que mon anim arrive à l'image 15 ça marche non dezou!!!
Ca veut dire qu'il faut découpler le chargement des images et l'affectation du rollOver.
Je te concède que par rapport à ton objectif c'est pas gagné mais quand même...

**freegreg** · 09/03/2006, 19h25

Pas compris non plus pourquoi ca marche pas

Essaie ça :

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
var mcl:MovieClipLoader = new MovieClipLoader();
var oListener:Object = new Object();
mcl.addListener(oListener);
 
oListener.onLoadComplete = function(m_:MovieClip) {
    m_.onRollOver = function() {
        trace("Là, ca devrait marcher ! Enfin, j'espère");
   }
}
 
for(var i:Number=0;i<3;i++) {
    var container:MovieCLip = this.createEmptyMovieClip("container"+i, this.getNextHighestDepth());
    this["container"+i]._y = 50 + 100*i;
    mcl.loadClip("avatar.jpg", this["container"+i]);
}

**Begood** · 10/03/2006, 11h08

yep merci pour vos réponses.

j'ai pas encore fait ton test dom_dev, car dans ce cas, je perds tout l'intêret de l'application...

Par contre freegreg, j'ai fait des tests sur ce que tu m'as dis, voila ce que ca donne :

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
var slider:MovieClipLoader = new MovieClipLoader();
var oListener:Object = new Object();
slider.addListener(oListener); 
 
oListener.onLoadComplete = function(m_:MovieClip) {
    m_.onRollOver = function() {
        trace("Là, ca devrait marcher ! Enfin, j'espère");
   }
}
 
//initialisation du xml pour le slider
sliderXML = new XML();
sliderXML.ignoreWhite = true;
 
var listenerObject:Object = new Object();
listenerObject.change = function(eventObject:Object) {
		var cat = _root.liste.selectedItem.label;
		var loadcat = "liste_"+cat+".xml"; //on met le nom du fichier article à charger
		_root.createEmptyMovieClip("bigPhoto",2);
		_root.bigPhoto._x=100;
		_root.bigPhoto._y=100;
		for(j=0; j<=oldnumber; j++){
			slider["article"+j].removeMovieClip(); //si oldnumber>0, on supprime les movieclip existants
			}
		sliderXML.load(loadcat); // on charge le fichier XML contenant les références articles
		sliderXML.onLoad = function(success) {
		catab = sliderXML.firstChild.childNodes; // on affecte les Nodes du XML à un tableau de catégories
 
		for(i = 0; i < catab.length; i++){
			var file = catab[i].attributes.File //recupére le nom du fichier
			var article:MovieClip = this.createEmptyMovieClip("article"+i, this.getNextHighestDepth());
			this["article"+i]._y = 50 + 100*i;
			slider.loadClip(file, this["article"+i]);
			};
		oldnumber = catab.length;
		}
};

Et le problème c'est que maintenant j'ai même plus de chargement d'images. Aurais je mal compris ? Enfin je comprends pas bien encore le MovieClipLoader et son fonctionnement, alors si tu pouvais détailler ou commenter un peu ton code... Car la je vois plus trop quoi faire, je suis bloqué sur cette idée que je n'arrive pas à réaliser avec AS ...

**Begood** · 13/03/2006, 17h50

UP UP ! Alors plus personne pour m'aider ? Flash est il capable de créer un slider dynamique ?

J'en vois pas mal sur le web donc à mon avis c'est possible ! Le problème c'est que la je suis coincé, et même après avoir essayé d'autres solutions données par des amis, je n'arrive à rien ...

Le dossier est tjs dispo ici, si il y a des courageux de l'AS
http://tobegood.info/fichiers/flash.zip

Merci beaucoup

**dom_dev** · 14/03/2006, 13h28

hello,
je ne sais pas s'il va y avoir des "courageux de l'actionscript" mais j'ai quand même jeté un coup d'oeil à ton fichier.
La première difficulté pour déboguer ton script c'est qu'il faut se recréer une base de données conforme à ton modèle. Personnellement quand je développe je sépare les problèmes, bon passons.
Jr n'aurai pas le temps d'éplucher tout ton code, je ne suis pas assez rapide mais par contre ce que je vois c'est que ton code est trop linéaire. Quand tu écris :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
xml2.onLoad = function(ok) {
	//on charge le contenu de notre XML
	textab = xml2.firstChild.childNodes;
	//on boucke jusqu'à ce qu'il n'y ai plus de frére
	for(j=0; j<textab.length; j++){
		//on remplie notre comboBox
		_root.liste.addItem(textab[j].attributes.Category);
		}
 
}

il vaut mieux procéder de la façon suivant :
D'abords créer une timeline avec beaucoup plus d'images et mettre plusieurs étiquettes (associées à une action stop()) . Détail pratique bien qu'inutile il faut espacer les étiquettes de plusieurs images clés au moins pouvoir les lire. Sur un calque que j'appelle "debug" je place une image clé au niveau de chaque étiquette et j'écrits leur nom en statique ce qui me permet en jouant l'animation de voir ou j'en suis.
ENSUITE:
j'écrits sur la première image pour la partie principale de l'action load:

Code :

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

1
2
3
4
5
6
 
xml2.onLoad = function(ok:Boolean) {
  if (ok) {
	gotoAndStop("etiquette_1");
  }
}

et un peu plus loin sur l'image clé du calque script au niveau de "etiquette_1" je traite les données

Code :

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

1
2
3
4
5
6
7
8
 
//on charge le contenu de notre XML
textab = xml2.firstChild.childNodes;
//on boucke jusqu'à ce qu'il n'y ai plus de frére
for(j=0; j<textab.length; j++){
	//on remplie notre comboBox
	_root.liste.addItem(textab[j].attributes.Category);
}

Je n'ai pas l'explication à ça mais tout ce passe comme si la méthode .onLoad ne pouvait pas traiter un grand nombre d'instructions ou des instructions complexes. Si à partir de onLoad tu écrits quelque chose comme var.text = "ça marche"; souvent effectivement ça va marcher mais pas au delà.

D'ailleurs si un expert flash lit ces lignes et veut bien sous donner une explication ??

ENFIN il faut procéder par étapes successives en les validant à chaque fois. par exemple tu fais au niveau de "etiquette_1" une sortie de vérification genre :

Code :

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

1
2
 
debug.text = textab[0].attributes.Category;

si tu lis bien la bonne valeur ça te permet de valider tout ce qui est en amont et ainsi de suite.
Bon courage.

**Begood** · 14/03/2006, 18h13

Bon alors j'ai refait des tests en explosant mon AS sur plusieurs images...

Malheureusement tjs rien..

Le fichier est tjs la si vous voulez zieuter :
http://tobegood.info/fichiers/flash2/

Est ce qu'il est possible de créer un slider sans passer par ma syntaxe slider.article+i ????

Parce que dans ce cas, je me démerde pour centrer les clips. Mais si mon slider n'est pas cliquable, ca n'a pas plus aucun intérêt !

Voila merci pour votre aide !!!![/url]

[FLASH 8] Slider de photos

Flash

Vue hybride

Discussions similaires

Partager

Partager