Galerie d' image en AS3 et XML | Snoupix

Ce tutoriel va vous apprendre à manipuler en ActionScript 3 un document XML afin d'en extraire du contenu. Nous ferons appel à plusieurs outils de Flash avec la classe Tween (qui nous permettra de réaliser des effets) et d'autres composants comme les UILoader intégrés à Flash.

Ce tutoriel est exclusivement un tutoriel de programmation dans le sens ou nous allons utiliser Flash juste pour son éditeur de code. Je voudrais aussi signaler l'origine de ces images qui proviennent du fabuleux collectif Dephtcore.

Etape 1: Organisation

Avant toute chose il est essentiel de prévoir comment nous allons arranger la structure de notre application. Nous aurons donc à la racine de notre application 3 Fichiers (notre fichier flash .fla, notre exécutable .swf, et enfin le fichier XML). Le dossier quant à lui contient toutes les photos de notre galerie. Ce dossier contiendra lui-même un dossier de miniatures (dont les noms des images seront les mêmes que pour les originaux). Cela devrait donner ceci:

Etape 2: Le Document XML

Si vous n'avez jamais entendu parler ou utiliser de XML, cela ne devrait pas nuire au tutoriel. En fait voyez-le comme un langage qui vous permettrait de structurer vos données. Un peu comme de l'xHTML ou vous appeleriez vos balises comme bon vous semble (xHTML est en fait de l'XML...). Bref nommez votre fichier galerie.xml contenant cette structure:

<?xml version="1.0" encoding="utf-8"?>
<galerie>
	<image src="underwater.jpg" alt="DepthCore - Underwater (David)"/>
	<image src="retro_pheromone.jpg" alt="DepthCore - Retro Pheromone (Jinberdeem)"/>
	<image src="hocus_pocus.jpg" alt="DepthCore - Hocus pocus (Surpy)"/>
	<image src="torment.jpg" alt="DepthCore - Torment (Radu Pop)"/>
	<image src="lola.jpg" alt="DepthCore - Lola (Caramelow)"/>
	<image src="delicacy.jpg" alt="DepthCore - Delicacy (Rogue)"/>
	<image src="local_seduction.jpg" alt="DepthCore - Local seduction (Jinberdeem)"/>
	<image src="blok_party.jpg" alt="DepthCore - Blok party (83Grafik)"/>
</galerie>

Nous aurons donc une balise "galerie" comportant plusieurs balises "image" ayant eux-mêmes 2 attributs: "src" et "alt" (très inspiré des attributs HTML). l'attribut "src" contient la source de l'image (autrement dit son nom), tandis que "alt" informe sur le texte alternatif.

Pourquoi utiliser XML?

La nécessité d'avoir un document XML pour notre galerie d'images répond principalement à 2 objectifs. D'une part, pour rajouter une image à notre galerie, nous ne sommes pas obligé d'avoir Flash, un bloc-notes suffit. Bien que cet argument tombe à l'eau si nous utilisions un fichier ActionScript externe. Le second avantage est étant donné la popularité du XML celui-ci peut être lu et interprété par une multitude de langage comme PHP, Javascript... Nous pourrions donc avoir un seul fichier contenant toutes les sources pour toutes les applications.

Etape 3: Prémices au développement

Nous allons utiliser uniquement la partie "développement" de Flash, et tout manipuler à l'aide du langage ActionScript 3. Tout d'abord créez un document Flash AS3, puis dans les propriétés redimensionnez-le à 800px par 450 px puis dans le scénario faites un clic droit sur la première image et choisissez "Actions", Une fenêtre s'ouvrira, c'est ici que vous coderez votre application.

La première étape va consister à importer les classes qui nous intéressent pour la suite...

	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import fl.containers.UILoader;
	import fl.controls.ProgressBar;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	import fl.transitions.TweenEvent;
	import flash.events.*;
	import flash.text.*;
	import flash.filters.*;

Etape 4: Les fonctionnalités à programmer

Cette étape va consister à définir les fonctions dont nous allons avoir besoin, Il y'en aura 5 au total:

1. Initialisation de l'application (lorsque le fichier XML est totalement chargée) -> "finDuChargementXML()"
   
2. Changement d'images -> "changeImage()"
3. Survol de la miniature (effets graphiques que nous allons appliquer) -> "overImage()"
4. Clic sur la miniature -> "clicImage()"
5. Quand on quitte la miniature -> "outImage()"

Avant de commencer à développer ces fonctions il va falloir commencer par initialiser les composants dont on aura besoin, de charger le fichier XML, les constantes, etc.

//Constantes	
	var dossierImage:String = 'images/';
	var dossierImageMini:String = 'images/min/';	
		
		
	//Chargeur qui téléchargera notre fichier XML	
	var chargeur:URLLoader = new URLLoader ();
	//objet URLRequest qui contient l'url du fichier XML:
	var adresse:URLRequest = new URLRequest ("galerie.xml");
					
	chargeur.load(adresse);
	chargeur.addEventListener(Event.COMPLETE, finDuChargementXML);
	
	
	//Variable contenant le texte alternatif
	var alt:String;
	
	/*Style utilisé pour le texte Alternatif*/
	var formatTitre:TextFormat = new TextFormat;
	formatTitre.color = 0x888888;
	formatTitre.size = 17;
	formatTitre.font = 'tahoma';
	formatTitre.align = 'center';
	
	//Champ texte pour le texte alternatif
	var texteAlt:TextField = new TextField();
					texteAlt.text = '';
					texteAlt.x = 325;
					texteAlt.y = 425;
					texteAlt.width = 400;
					this.addChild(texteAlt);
	
	//Champ texte pour le message de chargement
	var chargement:TextField = new TextField();
					chargement.text = 'Chargement en cours...';
					chargement.setTextFormat(formatTitre);
					chargement.width = 200;
					chargement.x = 350;
					chargement.y = 200;
					this.addChild(chargement);

Ce bout de code permet donc de charger le fichier XML à l'aide de la classe URLLoader et de lui attribuer un évènement "Event.COMPLETE" qui éxécutera la fonction finDuChargementXML() lorsque le fichier XML sera totalement téléchargé. On en profite aussi pour créer 2 champs TexteField correspondant aux textes de Chargement et de Description.

Etape 5: Initialisation de la galerie

Cette étape est la plus importante, et va consister à créer la base de notre application avec comme support les données de notre document XML. Voici le code, je l'explique plus bas :

/*Une fois que le fichier XML est chargé...*/
	function finDuChargementXML(evt:Event):void{
			//Objet XML
			var monXML:XML = new XML(evt.target.data);
			//UILoader qui contiendra l'image originale
			var photoPrincipale:UILoader = new UILoader();
						photoPrincipale.source = dossierImage+monXML.image[1].attribute("src");
						photoPrincipale.x = 280;
						photoPrincipale.y = 10;
						photoPrincipale.scaleContent = false;
			
			var translation:Array = [photoPrincipale.x, photoPrincipale.x+ 100];
			
			//Variable qui contiendra l'image qui est selectionnée
			var select:String;
			
			
			texteAlt.text = monXML.image[1].attribute("alt");
			texteAlt.setTextFormat(formatTitre);
			
			//On attache le Loader à la scene
			this.addChild(photoPrincipale);
			
			/*Pour les miniatures*/
			for(var i:String in monXML.image) {
				var uil:UILoader = new UILoader();
						uil.source = dossierImageMini+monXML.image[i].attribute("src");
						uil.buttonMode=true;
						uil.name = i;
						uil.x = 10;
						uil.y = 10;
						uil.y += int((int(i)/3))*90;
				if(int(i)%3!=0){
						uil.x += (int(i)%3)*90;
				}
				
						uil.width = uil.height = 70;
						uil.alpha = 0.5;
						uil.scaleContent= true;
						uil.autoLoad = true;
						
						//Les écouteurs sur les miniatures
						uil.addEventListener(MouseEvent.CLICK,clicImage);
						uil.addEventListener(MouseEvent.MOUSE_OVER,overImage);
						uil.addEventListener(MouseEvent.MOUSE_OUT,outImage);
				this.addChild(uil);
		}

La fonction prend obligatoirement en paramètre un Evènement puisqu'il est issu de "Event.COMPLETE". Cet évenement contient les données brutes du document XML grâce à sa propriété target.data. Il faut donc créer ensuite un objet XML pour faciliter le parsage de celui-ci. Par la suite nous créons un composant UILoader contenant la première photo.

Pour parser un fichier XML en AS3, c'est une chose assez simple: il faut avoir à l'esprit qu'il faut zapper la balise "racine", c'est à dire galerie. Voici comment on accède à l'attribut d'une balise:

monObjetXML.maBaliseImage[positionDeLaBalise].attribute('src');

L'utilisation est donc logique et assez similaire à SimpleXML, si vous utilisez PHP. Cela se corse légèrement pour les miniatures qu'il faut positionner dynamiquement. Pour faire une boucle sur toutes les images de notre fichier XML, la syntaxe est un peu plus particlière, la variable "i" correspondant à la position de la balise, 0 étant la première image. Enfin à ces miniatures, on leur ajoute 3 écouteurs : un clic, un mouseover et ou mouseout.

Etape 5: Fonctionnalités sur les miniatures / Tween

/*Quand on clique sur une miniature...*/
		function clicImage(e:Event):void{
			//e.currentTarget.name correspond à la position de l'image

			//Si l'image sur laquelle on a cliquée est déjà selectionnée, il ne se passe rien....
			if(select == monXML.image[e.currentTarget.name].attribute("src")){
				return;
			}
				
			select = monXML.image[e.currentTarget.name].attribute("src");
			alt = monXML.image[e.currentTarget.name].attribute("alt");
				
				
			var myTweentText:Tween = new Tween(texteAlt, "alpha", Strong.easeOut, 1, 0, 1, true);
			var myTweenA:Tween = new Tween(photoPrincipale, "alpha", Strong.easeOut, 1, 0, 1, true);
			var myTweenPPW:Tween = new Tween(photoPrincipale, "x", Strong.easeIn, translation[0], translation[1],1, true);
			var myTweenPPA:Tween = new Tween(photoPrincipale, "alpha", Strong.easeIn, 1, 0, 1, true);
			myTweenA.addEventListener(TweenEvent.MOTION_FINISH, changeImage);
			
		}
/*Quand on passe la souris sur une miniature...*/
		function overImage(e:Event):void{
			//Ombre sur miniatures
			var monOmbre:DropShadowFilter = new DropShadowFilter();
						monOmbre.distance = 3;
						monOmbre.color = 0xAAAAAA;
						monOmbre.blurX = 5;
						monOmbre.blurY = 5;
						monOmbre.quality = 3;
						e.currentTarget.filters = [monOmbre];
			//Effets cools de transitions				
			var myTweenMA2:Tween = new Tween(e.currentTarget, "alpha", Strong.easeOut, 0.5, 1, 1, true);
			var myTweenMW2:Tween = new Tween(e.currentTarget, "width", Elastic.easeOut, e.currentTarget.width, 75, 1, true);
			var myTweenMH2:Tween = new Tween(e.currentTarget, "height", Elastic.easeOut, e.currentTarget.height, 75, 1, true);
		}
/*Quand on quitte la miniature*/
		function outImage(e:Event):void{
			//Ombre sur miniatures
			var monOmbre:DropShadowFilter = new DropShadowFilter();
						monOmbre.distance = 0;
						monOmbre.color = 0x888888;
						monOmbre.blurX = 0;
						monOmbre.blurY = 0;
						monOmbre.quality = 3;
			e.currentTarget.filters = [monOmbre];
			//Effets cools de transitions
			var myTweenMA:Tween = new Tween(e.currentTarget, "alpha", Strong.easeOut, 1, 0.5, 1, true);
			var myTweenMW:Tween = new Tween(e.currentTarget, "width", Elastic.easeOut, e.currentTarget.width, 70, 1, true);
			var myTweenMH:Tween = new Tween(e.currentTarget, "height", Elastic.easeOut, e.currentTarget.height, 70, 1, true);
			
		}

Pour ce code, rien de bien particulier, si ce n'est l'utilisation de la classe Tween qui fait son apparition: elle permet de faire des transitions de manière très simple, voici sa synthaxe:

var maTransition:Tween = new Tween(
l'objet sur lequel on applique l'effet ,
la propriété à changer ,
la classe de transition à utiliser ,
la valeur de Départ ,
la valeur Finale ,
le temps de la transition en secondes ,
booléen qui détermine si la durée est en image ou en secondes
);

Voilà après de vous amuser :), Enfin notez la méthode qui vous permet de savoir a quelle image correspond la miniature: dans ma fonction finDeChargement, j'avais attribué une propriété name à chacune d'entre-elles et correspondant à leur position dans le document XML. Ce qui facilite la tâche. Vous n'aurez qu'à la réutiliser en utilisant e.currentTarget.name.

Etape 6: Fonction changeImage

/*Quand on veut changer d'image (logiquement après avoir cliqué sur une miniature)*/
		function changeImage(e:Event):void{
			//On change la source de l'image
			photoPrincipale.source = dossierImage+select;
			
			//On change le texte descriptif
			texteAlt.text = alt;
			texteAlt.setTextFormat(formatTitre);
			
			//Et la photo arrive de façon élégante
			var myTweenPPA2:Tween = new Tween(photoPrincipale, "alpha", Strong.easeOut, 0, 1, 1, true);
			var myTweenPPW2:Tween = new Tween(photoPrincipale, "x", Strong.easeOut, translation[1], translation[0], 1, true);
			var myTweentText2:Tween = new Tween(texteAlt, "alpha", Strong.easeOut, 0, 1, 1, true);
		}

Pas grand chose à signaler pour cette dernière étape, nous changeons la propriété source de notre UILoader principal et le texte du champ alternatif.

J'espère que ce tuto vous aura appris certains trucs, en tout cas tout le code source est comme d'habitute là ou il faut <(^^,)>.