Discussion :

[boz_j]

Bonjour,

Je commence un projet flash en AS2 et après seulement quelques lignes, je rencontre déjà un problème. Comme beaucoup de monde, je commence par « faire » une galerie photo avec des images de taille réduite sur la gauche et l'image sélectionnée en grande taille sur la droite, le tout avec un fichier xml.



Voici le XML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<menu>
            <item>
                        <thumb>thumbs/banquier.jpg</thumb>
                        <image>images/banquier_440_587.png</image>
                        <texte><![CDATA[photo 1]]></texte>
            </item>
            <item>
                        <thumb>thumbs/CHYSALIDE.jpg</thumb>
                        <image>images/CHYSALIDE_440_587.png</image>
                        <texte><![CDATA[photo 1]]></texte>
            </item>       
</menu>

Et voici le code du fla :

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
monXml.ignoreWhite = true;
 
//chargement du xml
monXml.load('menu.xml');
 
monXml.onLoad = function():Void  {
 
            //nb d'image à traiter (nb de balise parent dans le xml)
            qte = this.childNodes[0].childNodes.length;
 
            for (i=0; i<qte; i++) {
                        //duplication du clip "bt"
                        bt.duplicateMovieClip('bt'+i,_root.getNextHighestDepth());
                        //position
                        _root['bt'+i]._y += i*70;
                        //img prend la 1ère balise enfant de la ligne 1 du xml --> le thumb
                        img = this.childNodes[0].childNodes[i].childNodes[0].firstChild;
                        //je charge dans le clip bt+i, l'image présente dans img
                        loadMovie(img, _root['bt'+i]);
                        _root['bt'+i].onPress = function() {
                                   this._x += 100;
                        };
            }
            //supprime le 1er bt
            bt.unloadMovie();
};

Avant d'expliquer le problème, vous pouvez voir que je fais souvent référence à un clip qui porte le nom de « bt ». Ce clip est un simple carré sur ma scène.

Donc, ce que doit faire mon code :
- charger un fichier xml
- compter le nombre de nœuds parent
- pour chaque nœuds parent, dupliquer le clip « bt », incrémenter son nom, charger une image à partir du xml puis créer un petite fonction pour le déplacer en x si je clic dessus.

Si je supprime la ligne « loadMovie(img, _root['bt'+i]); », mon code fonctionne bien, c.a.d, si je clic sur un des carré créé il se déplace en x. Par contre quand je garde la ligne de code, et bien ma fonction n'existe plus, j'ai même plus la flèche de la souris qui est remplacée par main au survol des clips.

Si vous avez une idée, un conseil, c'est vraiment sympa.

Merci d'avance,


Julien

[boz_j]

Après beaucoup de recherches j’ai complètement changer mon traitement du xml et ma création de clip.
J’ai maintenant plus de problème. Je donne donc le code qui peut être utile à d’autres débutant comme moi.

Voici le xml "menu.xml" :

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
 
<?xml version="1.0" encoding="UTF-8"?>
<menu>
	<item>
		<thumb>banquier</thumb>
                <image>images/banquier_440_587.png</image>
		<texte><![CDATA[photo 1]]></texte>
	</item>
	<item>
		<thumb>CHYSALIDE</thumb>
                <image>images/CHYSALIDE_440_587.png</image>
		<texte><![CDATA[photo 1]]></texte>
	</item>
	<item>
		<thumb>le chevalier</thumb>
                 <image>images/le_chevalier_440_587.png</image>
		<texte><![CDATA[photo 1]]></texte>
	</item> 
</menu>

Maintenant le code flash que j’ai séparé sur trois frames.
Dans la frame 1 : traitement du xml

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
 
/*          chargement du XML           */
stop();
 
//On masque l'infobulle
infobulle_mc._visible = false;
 
// On declare une variable de type xml
var fichierXml:XML = new XML();
fichierXml.nodeType = 1;
fichierXml.ignoreWhite = true;
 
//création d'un tableau pour les liens des thumbs
var tableauThumbs:Array = new Array();
var tableauLienThumbs:Array = new Array();
 
function XMLLoader(XMLPath:String):Void {
	fichierXml.load(XMLPath);
	fichierXml.onLoad = function(success:Boolean) {
		if (success) {
			//qte = le nombre de thumbs à traiter dans l'xml
			qte = this.childNodes[0].childNodes.length;
			//trace(qte);
 
			//remplissage du tableau avec les liens des thumbs
			for (i=0; i<qte; i++) {
				//img = lien du noeud xml en traitement
				img = this.childNodes[0].childNodes[i].childNodes[0].firstChild;
				_root.tableauThumbs[i] = img;
				//trace(_root.tableauThumbs[i]);
				lien = this.childNodes[0].childNodes[i].childNodes[1].firstChild;
				_root.tableauLienThumbs[i] = lien;
				//trace(lien);
			}
			play();
		}
	};
}
 
XMLLoader('menu.xml');

Cette partie du code à pour effet d’attendre la fin du chargement pour passer dans la frame 2. j’en profite aussi pour remplire des tableaux avec des données du xml.

La deuxième frame est consacrée au chargement des miniatures (thumbs). Ce qui est intéressent c’est la boucle pour la création de clip pour chaque thumbs :

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
53
54
55
56
57
58
59
60
61
/*       chargement des thumbs         */
stop();
 
//trace('je suis dans image 2 !');
import mx.transitions.*;//pour le fade
import mx.transitions.easing.*;//pour le fade
 
 
var nImage:Number = qte;
 
var test:Number = nImage;
 
var thumbX:Number = 0;
var thumbY:Number = 0;
 
var mcLoader:MovieClipLoader = new MovieClipLoader();
 
var listener:Object = new Object();
 
mcLoader.addListener(listener);
 
listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void  {
	chargement = Math.round((bytesLoaded/bytesTotal)*100);
	//trace (chargement);
};
listener.onLoadInit = function(target:MovieClip) {
 
	//impaire = Math.round(((nImage-test)/2)-Math.floor((nImage-test)/2));
	//trace ((nImage-test) + '    ' + impaire);
	//trace(thumbX+'   '+thumbY);
	if (thumbX == 2) {
		thumbX = 0;
		thumbY = thumbY+1;
	}
	//target._x = (nImage-test)*70 + 5;        
	target._x = (thumbX*70)+5;
	target._y = (thumbY*70)+5;
	thumbX = thumbX+1;
 
	//fade des thumbs
	TransitionManager.start(target,{type:Fade, direction:Transition.IN, duration:2, easing:None.easeNone});//pour le fade
 
	//trace(test-1);
	target.name = test;
 
	if (--test) {
		chargeImage(test);
	}
	//trace ('nimage = ' + nImage + ' ; test = ' + test);      
	if (test == 0) {
		play();
	}
	//trace('chargement terminé');                           
};
 
chargeImage(test);
var ref:MovieClip;
function chargeImage(pNum:Number):Void {
	ref = this.createEmptyMovieClip("img_"+pNum, 10+pNum);
	mcLoader.loadClip("thumbs/"+tableauThumbs[pNum-1]+".jpg",ref);
}

Et la frame 3 et pour le traitement d'une info bulle (qui peut être utile pour donnée une info à l'utilisateur).

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
/*    traitement de l'info bulle      */
stop();
trace('je suis dans image 3 !');
 
hauteurInfobulle = 69;
largeurInfobulle = 153;
hauteurScene = Stage.height;
largeurScene = Stage.width;
//trace(hauteurScene+' sur '+largeurScene+' et le clip '+hauteurInfobulle+' sur '+largeurInfobulle);
 
//fonction pour que l'info bulle ne sorte pas de la scene
this.onEnterFrame = function() {
	//trace(infobulle_mc._y);
	if (infobulle_mc._y<hauteurInfobulle) {
		infobulle_mc._y = hauteurInfobulle;
	}
};
 
//trace(_root['img_'+1].name);
 
for (i=1; i<qte+1; i++) {
	//si appuis sur un thumbs
	_root['img_'+i].onPress = function() {
	};
	//On affiche l'info bulle au survole
	_root['img_'+i].onRollOver = function() {
		infobulle_mc._visible = true;
		infobulle_mc.startDrag(true);
		infobulle_mc.swapDepths(nImage+11);
		infobulle_mc.label_txt.text = this.name;//_root['img_'+i].name;
	};
	//On masque l'info bulle lorsqu'on ne suvole plus
	_root['img_'+i].onRollOut = function() {
		infobulle_mc._visible = false;
		infobulle_mc.stopDrag(true);
	};
}

Voila pour l’avancement de la chose. Le code est loin d’être propre mais c’est en dev.

Maintenant je passe sur l’affichage des images de grande taille.

A+