Après un premier aperçu avec le petit HelloWorld, passons à la création d’une petite galerie flash. Un bon exercice pour apprendre à bien structurer son projet et voir rapidement les chargements d’xml, d’images et quelques événements.

Visualiser

1. Avant de commencer

Pour ne pas être trop long, je vais passer rapidement sur le code qui n’est au final qu’une question d’application et de documentation mais plus m’attarder sur les étapes de préparation et la structure qui me semblent primordiales. Ceci étant un exemple de base, les fonctionnalités seront donc très limitées, dans le but de mieux comprendre l’essentiel. Vous pourrez, ensuite, rajouter vous-même un mode fullscreen, diaporama ou encore l’envoi à un ami par exemple.

Pour commencer, je vous conseil vivement de lire l’article «L’événementiel en ActionScript 3… » et de faire le tout premier tuto «ActionScript 3 : Session ratrappage », histoire de ne pas être trop perdu.

Nous allons étudier plusieurs points essentiels en particulier. Vous pourrez étudier le reste seul la galerie à partir des sources documentées téléchargeables à la fin du tuto.

2. Préparer ses outils.

Ouvrez Flex et créer un nouveau projet « galerie ».

Créer 4 nouveaux répertoires.
« src » pour les sources
« fla » pour les fla
« swf » pour les swf
« img » pour les images
« xml » pour l’xml

 

3. Préparer la structure

On va ensuite créer un nouveau répertoire (notre package principal) dans « src » qui va contenir toutes les classes de notre galerie.

Clique droit sur le répertoire « src », New > Folder. Appelons le « gallery ».

Dans ce package on va maintenant penser à séparer la liste des vignettes de la visualisation des images. On va donc créer deux nouveaux répertoires respectivement « preview » et « library ».

4. Finaliser la structure.

On va terminer la structure de notre petite galerie en préparant nos classes. Pour cela, soit on se base sur notre petit schéma UML que l’on aurait du faire avant même d’allumer la machine, soit on fait un peu de Freestyle et l’on improvise comme bon nous semble (très déconseillé dès que le projet est un minimum conséquent).

C’est parti !!!

1. Créer une première classe Main dans « gallery » qui va gérer l’ensemble de notre galerie.

2. Créer ensuite un Main pour chaque sous package « MainPreview » et « MainLibrary » qui vont piloter… la visualisation et la librairie d’images.

3. Créer 2 nouvelles classes dans « library » : « ListeVignettes » et « Vignette ».

4. On va créer les deux boutons pour naviguer entre les photos « ButtonNext » et « ButtonPrev ». Pour cela nous allons utiliser une super classe qui va contenir toutes les méthodes de nos deux boutons. On va l’appeler « AButton ».

4. Profitons en pour créer notre package « events » qui va contenir tous les événements dont nous aurons besoin : « VignetteEvent » pour les événements propres aux vignettes et « ButtonEvent » pour les boutons.

Vous devriez obtenir quelques choses comme ça :

Image 3

4. Créer l’xml de base.

La structure principale étant maintenant terminée, le reste devrait aller tout seul. Le plus dur est fait.

On va maintenant créer notre xml « getImages.xml » avec toutes les infos nécessaires (titre, url_vignette et url_media) :

<root>
<item>
          <title>Première image</title>
          <url_vignette>img/1_vign.jpg</url_vignette>
          <url_media>img/1.jpg</url_media>
     </item>
     <item>
          <title>Deuxième image</title>
          <url_vignette>img/2_vign.jpg</url_vignette>
          <url_media>img/2.jpg</url_media>
     </item>
     …
</root>

L’xml définit, attaquons la gestion de la librairie.

5. Chargement de l’xml

La classe « MainLibrary » a pour but de gérer la librairie. C’est donc elle qui va logiquement charger notre petit xml puis envoyé la liste d’images à « ListeVignettes ».

Dans gallery.library.MainLibrary :

//On charge lxml
private function _loadXml():void {;
	var request:URLRequest = new URLRequest(_sXml);
	_loader = new URLLoader();
	_loader.addEventListener(Event.COMPLETE, _onLoadXML);
	_loader.load(request) ;
}
 
//Une fois l’xml chargé, on envoit les images à la liste des vignettes qui va gérer le reste.
private function _onLoadXML(ev:Event):void {
	var xml:XML = new XML(_loader.data);
	var oImages:Object = xml.item;
	mcListeVignettes.setImages(oImages);
}
 

Download this code: galerie/gallery_1.as

6. Création des vignettes

La liste réceptionnée par « ListeVignettes », il va falloir initialisé les vignettes une par une.

Dans gallery.library.ListeVignettes :

//On récupère la liste des images et commence à créer les vignettes en commencant par la première _nIncr = 0
public function setImages(pImages:Object):void {
	_oImages = pImages;
	_nIncr = 0;
	_createVignette();
}
 
//On créé une nouvelle vignette et on lui envoi ses données
//On écoute les événements de chargement «VignetteEvent.LOADED »  et sélection « VignetteEvent.SELECT » puis on l’ajoute à notre « ListeVignettes »
private function _createVignette():void {
	var mcVignette:Vignette = new Vignette();
	mcVignette.init(_oImages[_nIncr]);
	mcVignette.x = 130*_nIncr;
	mcVignette.addEventListener(VignetteEvent.LOADED, _onCreateVignette);
	mcVignette.addEventListener(VignetteEvent.SELECT, _onSelect);
	addChild(mcVignette);
}
 
//La vignette est chargé, si il reste des vignettes a créé, on continue la création de vignette en incrémentant _nIncr de 1 et en relançant la méthode createVignette.
private function _onCreateVignette(ev:VignetteEvent):void {
	if(_oImages[++_nIncr]) {
		_createVignette();
	}
}
 

Download this code: galerie/gallery_2.as

7. On charge l’image dans la vignette

Une fois la vignette créer et initialisé, on peut charger l’image correspondante dans la vignette. Une fois chargée, on la smooth et on la redimensionne à la bonne taille.

Dans gallery.library.Vignette :

//On reçoit les infos sur l’image que l’on stocke dans l’objet _oDatas
public function init(pData:Object):void {
	_oDatas = pData;
	_loadImg(_oDatas.url_vignette);
}
 
//On charge l'image qui correspond la vignette.
private function _loadImg(pUrl:String):void {
	var request:URLRequest = new URLRequest(pUrl);
	_loader = new Loader();
	_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _onLoadImg);
	_loader.load(request);
}
 
//Une fois que l'image est chargée, créer un bitmapdata pour smoother l'image et la redimensionner
//Ajoute le bitmap dans le clip mcImg
//Et dispatch l'événement comme quoi la vignette est chargée
private function _onLoadImg(ev:Event):void {
	var nScaleX:Number = (_oSize.width/_loader.width)*100;
	var nScaleY:Number = (_oSize.height/_loader.height)*100;
	var nScale:Number = Math.max(nScaleY, nScaleX)/100;
	var matrix:Matrix = new Matrix();
	matrix.scale(nScale, nScale);
	var bmp:BitmapData = new BitmapData(_oSize.width, _oSize.height, false, 0xFFFFFF);
	bmp.draw(_loader, matrix, null, null, null, true);
	mcImg.addChild(new Bitmap(bmp));
	var e:VignetteEvent = new VignetteEvent(VignetteEvent.LOADED);
	dispatchEvent(e);
}
 

Download this code: galerie/gallery_3.as

8. Sélection d’une vignette

Au clique sur une vignette, on dispatch l’événement VignetteEvent.SELECT avec les données de celle-ci.

Dans gallery.library.Vignette :

//On écoute le click de la souris sur la vignette.
//Dès le clique effectué, on appelle la méthode _select
function Vignette() {
	addEventListener(MouseEvent.CLICK, _select);
}
 
//La vignette est sélectionnée, on disptach l’événement VignetteEvent.SELECT a « ListeVignettes ».
private function _select(ev:MouseEvent):void {
	var e:VignetteEvent = new VignetteEvent(VignetteEvent.SELECT);
	e.data = _oDatas;
	dispatchEvent(e);
}
 

Download this code: galerie/gallery_4.as

A la création de la vignette, on aura écouter l’événement VignetteEvent.SELECT (voir étape 5) qui redispatch l’événement. Le « Main » récupère cet événement et renvoi les données au « MainPreview » qui va les afficher.

Dans gallery.Main :

//On écoute l’événement de sélection d’un vignette.
private function _init():void {
	mcMainLibrary.mcListeVignettes.addEventListener(VignetteEvent.SELECT, _onSelectVignette);
}
 

Download this code: galerie/gallery_5.as

Dans gallery.library.ListeVignettes :

//On récupère les données et on initialise la visualisation «MainPreview »
private function _onSelectVignette(ev:VignetteEvent):void {
	mcMainPreview.setImage(ev.data);
}

Download this code: galerie/gallery_6.as

Dans gallery.Main :

//Une vignette est sélectionnée, on dispatch l’événement.
private function _onSelect(ev:VignetteEvent):void {
	var e:VignetteEvent = new VignetteEvent(VignetteEvent.SELECT);
	e.data = ev.data;
	dispatchEvent(e);
}

Download this code: galerie/gallery_7.as

9. Affichage de l’image et du titre

Un récupère les infos. On charge l’image et on écrit le titre. Une fois l’image chargée, on lance l’animation d’apparition.

//On récupère les infos qu'on stocke dans l'objet _oDatas, on écrit le titre de l'image dans txtTitre et on lance le chargement de limage.
public function setImage(pDatas:Object):void {
	_oDatas = pDatas;
	txtTitre.text = _oDatas.title;
	var request:URLRequest = new URLRequest(_oDatas.url_media);
	_loader = new Loader();
	_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _onLoadImg);
	_loader.load(request);
}
 
//Une fois que l'image est chargée, créé un bitmapdata pour smoother l'image et la redimensionner
//Ajoute le bitmap dans le clip mcImg
//Et on lance l'animation d'apparition
private function _onLoadImg(ev:Event):void {
	var nScaleX:Number = (_oSize.width/_loader.width)*100;
	var nScaleY:Number = (_oSize.height/_loader.height)*100;
	var nScale:Number = Math.max(nScaleY, nScaleX)/100;
	var matrix:Matrix = new Matrix();
	matrix.scale(nScale, nScale);
	var bmp:BitmapData = new BitmapData(_oSize.width, _oSize.height, false, 0xFFFFFF);
	bmp.draw(_loader, matrix, null, null, null, true);
	mcImg.addChild(new Bitmap(bmp));
	this.gotoAndPlay("in");
}

Download this code: galerie/gallery_8.as

Pour compléter le reste du code. Vous pouvez soit essayer de le terminer tout seul ce qui vous fera un très bon exercice, soit télécharger l’exemple.

Télécharger les sources.

Grand merci à Woumpah pour le petit skin

This entry was posted on Lundi, février 26th, 2007 at 23:22 and is filed under Tutos. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.