variable avec fichier XML

[Lilliputien]

Bonjour,

Je cherche à faire une gallerie d'image basique.
le fichier XML me charge l'adresse de l'image et l'affiche en miniature (cette partie marche bien) mais maintenant j'aimerai ajouter deux éléments texte en plus.
Un titre et un commentaire.
Est il possible d'attribuer ces attributs à mon loader sous la forme loader.Titre = image.@titre; par exemple ?

Ou sinon comment je peux faire?
Merci

PS: voici le code qui marche avec les images.

Code :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
 
package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.geom.Rectangle;
	import flash.net.URLLoader;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.events.IOErrorEvent;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.utils.Timer;
	import NextButton;
	import PreviousButton;
 
	import flash.display.Shape;
	import flash.display.Sprite;
 
	import flash.geom.Point;
 
	public class diaporama extends Sprite
	{		
		//Attributs
		private var nextButton:NextButton;
		private var previousButton:PreviousButton;
		private var conteneurVignettes:Sprite;
		private var masqueVignettes:Sprite;
		private var conteneurImages:Sprite;
		private var fondVignettes:Sprite;
		private var messageChargement:TextField
		private const ECART_VIGNETTES:int = 10;
		private var timer:Timer;
		private const PAS_DEPLACEMENT:int = 8;
 
 
		public function diaporama()
		{
			addUI();//ajout de l'interface
			loadImagesPath();//chargement des chemins des images
		}
 
		private function addUI():void
		{
			//Instances
			nextButton = new NextButton();
			previousButton = new PreviousButton();
			conteneurVignettes = new Sprite();
			masqueVignettes = new Sprite();
			//fondVignettes = new Sprite();
			conteneurImages = new Sprite();
			timer = new Timer(50);
 
			//Nom des boutons
			nextButton.name = "nextButton";
			previousButton.name = "previousButton";
 
			//Positionnement et dessin
			nextButton.x  = stage.stageWidth - (nextButton.width + 15);
			previousButton.x = 5;
			nextButton.y = previousButton.y = (stage.stageHeight - nextButton.height) - 21;
			masqueVignettes.x = nextButton.width + 20;
			masqueVignettes.y = nextButton.y + 16;
 
			//variable locales
			var distanceEntreBoutons:Number = Point.distance(new Point(previousButton.getBounds(this).right, previousButton.y), new Point(nextButton.x, previousButton.y));
 
			masqueVignettes.graphics.beginFill(0x489D9D);//couleur du masque (elle n'a aucune importance puique l'objet va servir de masque)
			masqueVignettes.graphics.drawRect(0, 0, distanceEntreBoutons - 10, previousButton.height - 10);//dessin du rectangle
 
			//fondVignettes.graphics.beginFill(0x86B1FB);		// Couleur de fond
			//fondVignettes.graphics.lineStyle(2, 0x0040C4);	//Un contour de 2 pixels et de couleur marine est utilisé
			//fondVignettes.graphics.drawRect(0, 0, distanceEntreBoutons, previousButton.height);	// dessin du rectangle avec la méthode drawRect(x, y, width, height)					
			//fondVignettes.x =  previousButton.x + previousButton.width+4;// Positionnement x du fond
			//fondVignettes.y =  previousButton.y + 10;// Positionnement y du fond
 
			conteneurVignettes.x = masqueVignettes.x;//Positionnement en x du conteneur et du masque
			conteneurVignettes.y = masqueVignettes.y;//Positionnement en y du conteneur et du masque
 
			//masque du conteneur des vignettes
			conteneurVignettes.mask = masqueVignettes;
 
			//affichage de l'interface
			addChild(nextButton);
			addChild(previousButton);
			//addChild(fondVignettes);
			addChild(conteneurVignettes);
			addChild(conteneurImages);
		}
 
		private function loadImagesPath():void
		{
			var urlLoader:URLLoader = new URLLoader(); //conteneur de chargement du fichier XML
			urlLoader.addEventListener(Event.COMPLETE, loadImagesPathCompleted); //abonnement à l'événement Event.COMPLETE
			urlLoader.addEventListener(IOErrorEvent.IO_ERROR, loadImagesPathIoError); //abonnement à l'événement IOErrorEvent.IO_ERROR
			urlLoader.load(new URLRequest("xml/diaporama.xml")); //chargement du fichier XML
		}
 
		private function loadImagesPathCompleted(evt:Event):void
		{
			//Message de chargement
			messageChargement  = new TextField();
			messageChargement.autoSize = TextFieldAutoSize.LEFT; //redimensionnement automatique à partir de la gauche
			messageChargement.selectable = false; //Le texte n'est pas sélectionnable
			messageChargement.text = "Chargement en cours..."; //Message indiquant un chargement en cours
			messageChargement.y = (nextButton.height - messageChargement.textHeight) / 2; // position y du message dans le conteneur
			conteneurVignettes.addChild(messageChargement); // le message est ajouté dans le conteneur des vignettes
 
			// Flux XML
			var xml:XML = new XML(evt.target.data); //Récupération du flux XML
			var xmlList:XMLList = xml.elements(); //Récupération de la liste des noeuds image
			for each(var image:XML in xmlList)
			{
				var loader:Loader = new Loader(); //conteneur pour chaque image
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImageCompleted); //abonnement à l'événement Event.COMPLETE
				loader.load(new URLRequest(image.@chemin)); //chargement de l'image
			}
		}
 
		private function loadImagesPathIoError(evt:IOErrorEvent):void
		{
			//Rectangle de couleur noir couvrant la totalité de la scène
			var cache:Shape = new Shape();
			cache.graphics.beginFill(0x000000);
			cache.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			addChild(cache);
			//Message d'erreur
			var message:TextField = new TextField();
			message.autoSize = TextFieldAutoSize.LEFT;
			message.defaultTextFormat = new TextFormat("Verdana", 28);
			message.text = "Une erreur de chargement a eu lieu !";
			message.textColor = 0xFFFFFF;
			message.x = (stage.stageWidth - message.textWidth) / 2;
			message.y = (stage.stageHeight - message.textHeight) / 2;
			addChild(message);
		}
 
		private function loadImageCompleted(evt:Event):void
		{
			if (conteneurVignettes.contains(messageChargement)) //si le conteneur de vignettes contient le message de chargement
			{
				conteneurVignettes.removeChild(messageChargement); //alors il est supprimé de l'interface
			}
 
			conteneurVignettes.addEventListener(Event.ADDED, imageAdded); //abonnement du conteneur des vignettes à l'événement Event.ADDED
 
			var loader:Loader = evt.target.loader; //conteneur de l'image
			var ratio:Number = loader.height / nextButton.height; //ratio pour le redimensionnement des images
			loader.width /= ratio; //largeur de la vignette
			loader.height /= ratio; // hauteur de la vignette
			conteneurVignettes.addChild(loader); //ajout de la vignette dans le conteneur
		}
 
		private function imageAdded(evt:Event):void
		{
			var loader:Loader = evt.target as Loader; //la vignette qui est ajoutée
			var conteneur:Sprite = evt.currentTarget as Sprite; //le conteneur des vignettes
			var index:int = conteneur.getChildIndex(loader); //l'index dans la liste d'affichage
 
			if(index != 0) //si la vignette n'est pas la première
			{
				var previousX:Number = conteneur.getChildAt(index - 1).getBounds(conteneur).right; //coordonnée X du côté droit de la vignette précédemment ajoutée
				loader.x = previousX + ECART_VIGNETTES; //positionnement de la vignette 10 pixels après la vignette précédente
			}
			/*loader.addEventListener(MouseEvent.ROLL_OVER, vignetteSurvol); //abonnement à l'événement survol*/
			loader.addEventListener(MouseEvent.CLICK, vignetteClic); //abonnement à l'événement clic
 
			nextButton.addEventListener(MouseEvent.MOUSE_OVER, scrollNextButtonOver); //abonnement à l'événement MouseEvent.MOUSE_OVER
			nextButton.addEventListener(MouseEvent.MOUSE_OUT, scrollNextButtonOut); //abonnement à l'événement MouseEvent.MOUSE_OUT
			previousButton.addEventListener(MouseEvent.MOUSE_OVER, scrollPreviousButtonOver); //abonnement à l'événement MouseEvent.MOUSE_OVER
			previousButton.addEventListener(MouseEvent.MOUSE_OUT, scrollPreviousButtonOut); //abonnement à l'événement MouseEvent.MOUSE_OUT
		}
//------------------------------------------------------------------------>>>>>>>>>>>>>>>>>>>>		
		private function scrollNextButtonOver(evt:MouseEvent):void {
			timer.addEventListener(TimerEvent.TIMER, scrollNextTimer); //abonnement à l'événement TimerEvent.TIMER
			timer.start(); //démarrage du timer
		}
 
		private function scrollPreviousButtonOver(evt:MouseEvent):void {
			timer.addEventListener(TimerEvent.TIMER, scrollPreviousTimer); //abonnement à l'événement TimerEvent.TIMER
			timer.start(); //démarrage du timer
		}
 
		private function scrollNextButtonOut(evt:MouseEvent):void {
			timer.removeEventListener(TimerEvent.TIMER, scrollNextTimer); //annulation de l'abonnement à l'événement TimerEvent.TIMER
		}
 
		private function scrollPreviousButtonOut(evt:MouseEvent):void {
			timer.removeEventListener(TimerEvent.TIMER, scrollPreviousTimer); //annulation de l'abonnement à l'événement TimerEvent.TIMER
		}
//------------------------------------------------------------------------>>>>>>>>>>>>>>>>>>>>	
		private function scrollNextTimer(evt:TimerEvent):void {
			if (conteneurVignettes.getBounds(this).right >= (masqueVignettes.getBounds(this).right + PAS_DEPLACEMENT)) { //si le bord droit du conteneur est positionné après le bord droit du masque
				conteneurVignettes.x -= PAS_DEPLACEMENT; // le conteneur est déplacé vers la gauche
			}
			else {
				timer.removeEventListener(TimerEvent.TIMER, scrollNextTimer); //annulation de l'abonnement à l'événement TimerEvent.TIMER
			}
		}
 
		private function scrollPreviousTimer(evt:TimerEvent):void {
			if (conteneurVignettes.x <= (masqueVignettes.x - PAS_DEPLACEMENT)) { //si le bord gauche du conteneur est positionné avant le bord gauche du masque
 
				conteneurVignettes.x += PAS_DEPLACEMENT; // le conteneur est déplacé vers la droite
			}
			else {
				timer.removeEventListener(TimerEvent.TIMER, scrollPreviousTimer); //annulation de l'abonnement à l'événement TimerEvent.TIMER
			}
		}
//------------------------------------------------------------------------>>>>>>>>>>>>>>>>>>>>
		/*private function vignetteSurvol(evt:MouseEvent):void {
			var image:Bitmap = (evt.currentTarget as Loader).contentLoaderInfo.content as Bitmap; //image correspondant à la vignette survolée
			evt.currentTarget.alpha =.5;
			evt.currentTarget.scaleY *= .9;
			evt.currentTarget.scaleX *= .9;
		}
		private function vignetteOriginal(evt:MouseEvent):void {
			var image:Bitmap = (evt.currentTarget as Loader).contentLoaderInfo.content as Bitmap; //image correspondant à la vignette survolée
			evt.currentTarget.alpha =1;
			evt.currentTarget.scaleY *= 1;
			evt.currentTarget.scaleX *= 1;
		}*/
 
		private function vignetteClic(evt:MouseEvent):void {
			var image:Bitmap = (evt.currentTarget as Loader).contentLoaderInfo.content as Bitmap; //image correspondant à la vignette cliquée
			var pixels:BitmapData = image.bitmapData; // pixels de l'image
			var newPixels:BitmapData = new BitmapData(pixels.width, pixels.height); //conteneur de la copie des pixels
			newPixels.copyPixels(pixels, new Rectangle(0, 0, pixels.width, pixels.height), new Point(0,0)); //copie des pixels
 
			var newImage:Bitmap = new Bitmap(newPixels); //Image en taille réelle
			newImage.width *= .8;
			newImage.height *= .8;
			//			var newImage:Bitmap = new Bitmap(newPixels); //Image en taille réelle
			if (conteneurImages.numChildren != 0) { //si le conteneur contient déjà une image
				conteneurImages.removeChildAt(0);// l'image est supprimée de la liste d'affichage
			}
			conteneurImages.addChild(newImage);
			conteneurImages.x = 30;
			conteneurImages.y = 30;
		}
	}
}

[romain_ci]

Bonjour,

Tu peut mettre ton texte dans le XML, avec les images. Comme ca les textes sont liés aux images.

et quand tu li ton XML image.@titre par exemple.
tu créer un zone de texte dynamique :

Code :

1
2
3
4
5
 
zoneTexte = new Text();
this.addChild(zoneTexte);
 
zoneTexte.htmlText = image.@titre;

Pareil pour le second.
En tout cas voila le principe que je te recommande.

[tom42]

Tu peux aussi créer un classe qui étend Loader à laquelle tu ajoute une variable public.
Exemple de la classe:

Code :

1
2
3
4
5
6
7
8
9
10
 
package{
    import flash.display.Loader;
    public class MyLoader extends Loader{
        public var titre:String;
        public function MyLoader(){
            super();
        }
    }
}

Exemple de l'appel:

Code :

1
2
3
4
 
loader:MyLoader = new MyLoader();
//...
loader.titre = image.@titre;

[Lilliputien]

Salut,

Voila a quoi ressemble mon XML :

Code :

1
2
3
4
5
 
<?xml version="1.0" encoding="utf-8"?>
<images>
     <image chemin="images/01.jpg" titre="café" commentaire="image de café" />
</images>

Je n'arrive pas a savoir a quel endroit ou je dois mettre la commande pour que la vignette s'affiche en grand et affiche le texte correspondant.
Est ce que tu peux m'aider la dessus ?
Merci

[Lilliputien]

Salut Tom42,

Je ne comprends pas trop comment l'utiliser cette fonction et surtout la mettre dans mon code.
Est ce que tu peux m'en dire un peu plus s'il te plait.
Merci

[tom42]

Tu dois créer un fichier MyLoader.as dans lequel tu définis la classe. Le nom du fichier doit être celui de la classe.
Ensuite dans ton fichier .fla tu peux te servir de cette classe.

Avec un peu de recherche tu trouveras de nombreux tutoriaux traitant des classes en AS3.
Bonne chance.

[romain_ci]

+1

Cherche aussi du coté de l'héritage, car ta class MyLoader va hériter de la class existante Loader.

Mais autant utiliser un objet Text... je pence...

[kandinsky]

Bonjour

j'ai testé le fichier, qui fonctionne avec 10 images, mais avec 500 images
je ne peux afficher que 11 images alors que le chargement par XML et bon.

Quelqu'un pourrait il me dire pourquoi,


merci, à bientôt


Claude