Créer un diaporama

Par
tannoy
– 2 octobre 2008Publié dans : Exemples

Le but de ce tuto est de créer un diaporama Flash en ActionScript 3 (AS3).

Un exemple se trouve à cette adresse : http://www.tannoy.fr/Mediabox/flash/diaporama/exemple/diaporama.html

Nous allons placer le code dans une classe ActionScript, que nous utiliserons en tant que classe du document. Vous trouverez des informations sur la classe du document sur le wiki :

http://wiki.mediabox.fr/tutoriaux/flash/class_document

Caractéristiques du diaporama

  • Les chemins des images seront définis dans un fichier XML.
  • Les miniatures seront affichées en bas du document.
  • Un système de défilement horizontal sera mis en place pour les visualiser.
  • L’image sélectionnée sera affichée au dessus des miniatures.

Le fichier XML des images

Afin de pouvoir modifier facilement les images du diaporama, nous allons les chargées dynamiquement depuis un fichier XML.

Le fichier XML va contenir un nœud racine et sera constitué de nœuds possédant un attribut chemin.

 < ?xml version="1.0" encoding="utf-8"?>

Les étapes du diaporama

  1. Mise en place de l’interface
  2. Chargement du fichier XML contenant les chemins des images
  3. Création des vignettes
  4. Positionnement des vignettes
  5. Défilement horizontal des vignettes
  6. Affichage de l’image en taille normale

Mise en place de l’interface

Notre interface sera composée d’éléments dynamiques et d’éléments présents dans la bibliothèque.

Vous retrouverez toutes les explications pour utiliser ces éléments de la bibliothèque dans cette page du wiki :
http://wiki.mediabox.fr/tutoriaux/flash/bibliotheque_flash_9

Notre interface va contenir les éléments suivants :

  • Un bouton suivant (Classe NextButton auto-générée)
  • Un bouton précédent (Classe PreviousButton auto-générée)
  • Un conteneur pour les vignettes
  • Un masque pour le conteneur des vignettes afin de ne visualiser que les vignettes qui seront entre les boutons.
  • Un conteneur pour les images en taille normale
  • 2 traits reliant les hauts et les bas des boutons

Nous allons donc définir ces différents éléments en tant qu’attributs privés de notre classe Diaporama.

COPIER-COLLER
Actionscript:
  1. package {<br />
  2. import NextButton;<br />
  3. import PreviousButton;</p>
  4. <p>import flash.display.Shape;<br />
  5. import flash.display.Sprite;</p>
  6. <p>public class Diaporama extends Sprite<br />
  7. {<br />
  8. //Attributs<br />
  9. private var nextButton:NextButton;<br />
  10. private var previousButton:PreviousButton;<br />
  11. private var conteneurVignettes:Sprite;<br />
  12. private var masqueVignettes:Sprite;<br />
  13. private var conteneurImages:Sprite;<br />
  14. private var traitHaut:Shape;<br />
  15. private var traitBas:Shape;</p>
  16. <p>public function Diaporama()<br />
  17. {</p>
  18. <p>}<br />
  19. }<br />
  20. }

Nous allons créer une méthode privée que nous appellerons addUI dans laquelle nous allons instancier les différents attributs.

Pour une utilisation future, nous affecterons un nom à nos boutons de défilement.

COPIER-COLLER
Actionscript:
  1. private function addUI():void<br />
  2. {<br />
  3. //Instances<br />
  4. nextButton = new NextButton();<br />
  5. previousButton = new PreviousButton();<br />
  6. conteneurVignettes = new Sprite();<br />
  7. masqueVignettes = new Sprite();<br />
  8. conteneurImages = new Sprite();<br />
  9. traitHaut = new Shape();<br />
  10. traitBas = new Shape();<br />
  11. //Nom des boutons<br />
  12. nextButton.name = "nextButton";<br />
  13. previousButton.name = "previousButton";<br />
  14. }

  • Cette méthode va positionner les différents éléments de l’interface de cette façon :
  • Le bouton précédent sera à 5 pixels à gauche et en bas de la scène
  • Le bouton suivant sera à 5 pixels à droite et en bas de la scène
  • Les traits relieront les hauts et les bas des boutons
  • Le conteneur des vignettes et le masque des vignettes seront positionnés entre les boutons
  • Le conteneur des images sera centré horizontalement et à 10 pixels du haut de la scène

Pour tracer les traits, nous utiliserons la méthode statique distance de la classe Point qui nous permet de récupérer la distance entre 2 points.

COPIER-COLLER
Actionscript:
  1. private function addUI():void<br />
  2. {<br />
  3. //Instances<br />
  4. nextButton = new NextButton();<br />
  5. previousButton = new PreviousButton();<br />
  6. conteneurVignettes = new Sprite();<br />
  7. masqueVignettes = new Sprite();<br />
  8. conteneurImages = new Sprite();<br />
  9. traitHaut = new Shape();<br />
  10. traitBas = new Shape();</p>
  11. <p>//Positionnement et dessin<br />
  12. nextButton.x = stage.stageWidth - (nextButton.width + 5);<br />
  13. previousButton.x = 5;<br />
  14. nextButton.y = previousButton.y = stage.stageHeight - (nextButton.height + 5);</p>
  15. <p>//variable locales<br />
  16. var distanceEntreBoutons:Number = Point.distance(new Point(previousButton.getBounds(this).right, previousButton.y), new Point(nextButton.x, previousButton.y));</p>
  17. <p>traitHaut.graphics.lineStyle(1, 0x333333);//epaisseur et couleur du trait<br />
  18. traitHaut.graphics.moveTo(0, 0);//coordonnées de départ du trait<br />
  19. traitHaut.graphics.lineTo(distanceEntreBoutons, 0);//coordonnées de fin du trait<br />
  20. traitHaut.x = previousButton.getBounds(this).right;<br />
  21. traitHaut.y = previousButton.y;<br />
  22. traitBas.graphics.lineStyle(1, 0x333333);//epaisseur et couleur du trait<br />
  23. traitBas.graphics.moveTo(0, 0);//coordonnées de départ du trait<br />
  24. traitBas.graphics.lineTo(distanceEntreBoutons, 0);//coordonnées de fin du trait<br />
  25. traitBas.x = traitHaut.x;<br />
  26. traitBas.y = previousButton.getBounds(this).bottom - 1;<br />
  27. masqueVignettes.graphics.beginFill(0xFFFFFF);//couleur du masque (elle n'a aucune importance puique l'objet va servir de masque)<br />
  28. masqueVignettes.graphics.drawRect(0, 0, distanceEntreBoutons, previousButton.height);//dessin du rectangle<br />
  29. conteneurVignettes.x = masqueVignettes.x = traitHaut.x;//Positionnement en x du conteneur et du masque<br />
  30. conteneurVignettes.y = masqueVignettes.y = traitHaut.y;//Positionnement en y du conteneur et du masque<br />
  31. conteneurImages.x = (stage.stageWidth - conteneurImages.width) / 2;<br />
  32. conteneurImages.y = 10;</p>
  33. <p>}

La propriété mask du conteneur des vignettes va être valorisé et prendra comme valeur l’objet de type Sprite masqueVignettes.

Nous allons ensuite afficher les objets d’interface dans notre scène avec la méthode addChild.

COPIER-COLLER
Actionscript:
  1. private function addUI():void<br />
  2. {<br />
  3. //Instances<br />
  4. nextButton = new NextButton();<br />
  5. previousButton = new PreviousButton();<br />
  6. conteneurVignettes = new Sprite();<br />
  7. masqueVignettes = new Sprite();<br />
  8. conteneurImages = new Sprite();<br />
  9. traitHaut = new Shape();<br />
  10. traitBas = new Shape();</p>
  11. <p>//Positionnement et dessin<br />
  12. nextButton.x = stage.stageWidth - (nextButton.width + 5);<br />
  13. previousButton.x = 5;<br />
  14. nextButton.y = previousButton.y = stage.stageHeight - (nextButton.height + 5);</p>
  15. <p>//variable locales<br />
  16. var distanceEntreBoutons:Number = Point.distance(new Point(previousButton.getBounds(this).right, previousButton.y), new Point(nextButton.x, previousButton.y));</p>
  17. <p>traitHaut.graphics.lineStyle(1, 0x333333);//epaisseur et couleur du trait<br />
  18. traitHaut.graphics.moveTo(0, 0);//coordonnées de départ du trait<br />
  19. traitHaut.graphics.lineTo(distanceEntreBoutons, 0);//coordonnées de fin du trait<br />
  20. traitHaut.x = previousButton.getBounds(this).right;<br />
  21. traitHaut.y = previousButton.y;<br />
  22. traitBas.graphics.lineStyle(1, 0x333333);//epaisseur et couleur du trait<br />
  23. traitBas.graphics.moveTo(0, 0);//coordonnées de départ du trait<br />
  24. traitBas.graphics.lineTo(distanceEntreBoutons, 0);//coordonnées de fin du trait<br />
  25. traitBas.x = traitHaut.x;<br />
  26. traitBas.y = previousButton.getBounds(this).bottom - 1;<br />
  27. masqueVignettes.graphics.beginFill(0xFFFFFF);//couleur du masque (elle n'a aucune importance puique l'objet va servir de masque)<br />
  28. masqueVignettes.graphics.drawRect(0, 0, distanceEntreBoutons, previousButton.height);//dessin du rectangle<br />
  29. conteneurVignettes.x = masqueVignettes.x = traitHaut.x;//Positionnement en x du conteneur et du masque<br />
  30. conteneurVignettes.y = masqueVignettes.y = traitHaut.y;//Positionnement en y du conteneur et du masque<br />
  31. conteneurImages.x = (stage.stageWidth - conteneurImages.width) / 2;<br />
  32. conteneurImages.y = 10;</p>
  33. <p>//masque du conteneur des vignettes<br />
  34. conteneurVignettes.mask = masqueVignettes;</p>
  35. <p>//affichage de l'interface<br />
  36. addChild(nextButton);<br />
  37. addChild(previousButton);<br />
  38. addChild(conteneurVignettes);<br />
  39. addChild(conteneurImages);<br />
  40. addChild(traitHaut);<br />
  41. addChild(traitBas);<br />
  42. }

La méthode addUI sera appelée par le constructeur de la classe. L’interface sera donc mise en place au démarrage du diaporama.

COPIER-COLLER
Actionscript:
  1. public function Diaporama()<br />
  2. {<br />
  3. addUI();<br />
  4. }

Chargement du fichier XML contenant le chemin des images

Le chargement d’un fichier XML va se faire grâce à la classe URLLoader.

Je vous invite à relire cet article http://wiki.mediabox.fr/tutoriaux/flash/xml_loader_as3 pour bien comprendre le principe de chargement.

Nous allons ajouter une méthode privée nommé loadImagesPath qui va se charger de lancer le chargement du fichier XML , de définir le gestionnaire d’événements qui va traiter la fin du chargement et de définir le gestionnaire d’événements qui va traiter les erreurs.

COPIER-COLLER
Actionscript:
  1. private function loadImagesPath():void<br />
  2. {<br />
  3. var urlLoader:URLLoader = new URLLoader(); //conteneur de chargement du fichier XML<br />
  4. urlLoader.addEventListener(Event.COMPLETE, loadImagesPathCompleted); //abonnement à l'événement Event.COMPLETE<br />
  5. urlLoader.addEventListener(IOErrorEvent.IO_ERROR, loadImagesPathIoError); //abonnement à l'événement IOErrorEvent.IO_ERROR<br />
  6. urlLoader.load(new URLRequest("xml/diaporama.xml")); //chargement du fichier XML<br />
  7. }

La méthode loadImagesPath sera appelée dans le constructeur, juste après la méthode qui crée l’interface.

COPIER-COLLER
Actionscript:
  1. public function Diaporama()<br />
  2. {<br />
  3. addUI();//ajout de l'interface<br />
  4. loadImagesPath();//chargement des chemins des images<br />
  5. }

Le gestionnaire d’événements loadImagesPathIoError sera évoqué lorsqu’une erreur de chargement aura lieu. Un rectangle occupant la taille de la scène sera créé et un message d’erreur sera affiché.

COPIER-COLLER
Actionscript:
  1. private function loadImagesPathIoError(evt:IOErrorEvent):void<br />
  2. {<br />
  3. //Rectangle de couleur noir couvrant la totalité de la scène<br />
  4. var cache:Shape = new Shape();<br />
  5. cache.graphics.beginFill(0x000000);<br />
  6. cache.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);<br />
  7. addChild(cache);<br />
  8. //Message d'erreur<br />
  9. var message:TextField = new TextField();<br />
  10. message.autoSize = TextFieldAutoSize.LEFT;<br />
  11. message.defaultTextFormat = new TextFormat("Verdana", 28);<br />
  12. message.text = "Une erreur de chargement a eu lieu !";<br />
  13. message.textColor = 0xFFFFFF;<br />
  14. message.x = (stage.stageWidth - message.textWidth) / 2;<br />
  15. message.y = (stage.stageHeight - message.textHeight) / 2;<br />
  16. addChild(message);<br />
  17. }

Création des vignettes

Le gestionnaire d’événements loadImagesPathCompleted sera évoqué à la fin du chargement du fichier XML.

Un message indiquant le chargement en cours des images sera affiché dans le conteneur des vignettes. Cet objet de type TextField sera un attribut privé de notre classe.

Nous allons donc récupérer notre structure XML et la parcourir dans sa globalité avec une boucle for each.

A chaque passage de la boucle, nous allons créer un objet de type Loader, qui nous permettra de charger les images.

Je vous invite à relire si vous le souhaitez l’article sur le chargement des images :
http://wiki.mediabox.fr/tutoriaux/flash/charger_images_swf

L’objet Loader via sa propriété contentLoaderInfo s’abonnera à l’événement Event.COMPLETE afin d’afficher les images, une fois chargées, dans le conteneur des vignettes.

COPIER-COLLER
Actionscript:
  1. private function loadImagesPathCompleted(evt:Event):void<br />
  2. {<br />
  3. //Message de chargement<br />
  4. messageChargement  = new TextField();<br />
  5. messageChargement.autoSize = TextFieldAutoSize.LEFT; //redimensionnement automatique à partir de la gauche<br />
  6. messageChargement.selectable = false; //Le texte n'est pas sélectionnable<br />
  7. messageChargement.text = "Chargement en cours..."; //Message indiquant un chargement en cours<br />
  8. messageChargement.x = (traitHaut.width - message.textWidth) / 2; // position x du message dans le conteneur<br />
  9. messageChargement.y = (nextButton.height - message.textHeight) / 2; // position y du message dans le conteneur<br />
  10. conteneurVignettes.addChild(messageChargement); // le message est ajouté dans le conteneur des vignettes</p>
  11. <p>// Flux XML<br />
  12. var xml:XML = new XML(evt.target.data); //Récupération du flux XML<br />
  13. var xmlList:XMLList = xml.elements(); //Récupération de la liste des noeuds image<br />
  14. for each(var image:XML in xmlList)<br />
  15. {<br />
  16. var loader:Loader = new Loader(); //conteneur pour chaque image<br />
  17. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImageCompleted); //abonnement à l'événement Event.COMPLETE<br />
  18. loader.load(new URLRequest(image.@chemin)); //chargement de l'image<br />
  19. }<br />
  20. }

Le gestionnaire d’événements loadImageCompleted sera évoqué à la fin du chargement d’une image.

Le message de chargement sera supprimé de l’interface s’il est présent dans le conteneurVignettes. On utilisera pour cela la méthode contains de la classe DisplayObjectContainer.

Afin de gérer le positionnement des vignettes (que l’on évoquera par la suite), nous allons abonner le conteneur des vignettes à l’événement Event.added. Cet événement est évoqué lorsqu’un objet d’affichage est ajouté à une liste d’affichage.

L’image sera redimensionnée proportionnellement en fonction de la hauteur du conteneurVignettes puis elle sera ajoutée à ce conteneur.

COPIER-COLLER
Actionscript:
  1. private function loadImageCompleted(evt:Event):void<br />
  2. {<br />
  3. if (conteneurVignettes.contains(messageChargement)) //si le conteneur de vignettes contient le message de chargement<br />
  4. {<br />
  5. conteneurVignettes.removeChild(messageChargement); //alors il est supprimé de l'interface<br />
  6. }</p>
  7. <p>conteneurVignettes.addEventListener(Event.ADDED, imageAdded); //abonnement du conteneur des vignettes à l'événement Event.ADDED</p>
  8. <p>var loader:Loader = evt.target.loader; //conteneur de l'image<br />
  9. var ratio:Number = loader.height / nextButton.height; //ratio pour le redimensionnement des images<br />
  10. loader.width /= ratio; //largeur de la vignette<br />
  11. loader.height /= ratio; //hauteur de la vignette<br />
  12. conteneurVignettes.addChild(loader); //ajout de la vignette dans le conteneur<br />
  13. }

Positionnement des vignettes

Afin de gérer facilement le positionnement des vignettes, nous allons utiliser l’événement Event.ADDED. Cet événement sera évoqué lorsqu’une vignette sera ajoutée dans le conteneur.

Lors de l’ajout d’une vignette, nous récupèrerons la coordonnée x de la vignette précédemment ajoutée et nous repositionnerons notre vignette en fonction de cette coordonnée et d’une constante définissant l’écart entre les vignettes.

Nous utiliserons pour cela les méthodes de gestion d’une liste d’affichage. Je vous invite pour cela à lire l’article du wiki à ce sujet :
http://wiki.mediabox.fr/tutoriaux/flash/architecture_as

Les vignettes seront ensuite abonnées à l’événement MouseEvent .CLICK afin d’afficher l’image à sa taille réelle.

COPIER-COLLER
Actionscript:
  1. private function imageAdded(evt:Event):void<br />
  2. {<br />
  3. var loader:Loader = evt.target as Loader; //la vignette qui est ajoutée<br />
  4. var conteneur:Sprite = evt.currentTarget as Sprite; //le conteneur des vignettes<br />
  5. var index:int = conteneur.getChildIndex(loader); //l'index dans la liste d'affichage<br />
  6. if(index != 0) //si la vignette n'est pas la première<br />
  7. {<br />
  8. var previousX:Number = conteneur.getChildAt(index - 1).getBounds(conteneur).right; //coordonnée X du côtét droit de la vignette précédemment ajoutée<br />
  9. loader.x = previousX + ECART_VIGNETTES; //positionnement de la vignette 10 pixels après la vignette précédente<br />
  10. }<br />
  11. loader.addEventListener(MouseEvent.CLICK, vignetteClic); //abonnement à l'événement clic<br />
  12. }

A ce stade, nous remarquons qu’il nous est impossible de visualiser toutes les vignettes. Nous allons donc mettre en place un système de défilement horizontal.

Défilement horizontal des vignettes

Le défilement des vignettes va se faire lors du survol des boutons nextButton et previousButton. Le bouton next diminuera la position x du conteneur des vignettes et le bouton previous augmentera cette position x.

Nous allons donc abonner nos boutons aux événements MouseEvent.MOUSE_OVER et MouseEvent.MOUSE_OUT.

Ces abonnements se feront dans le gestionnaire d’événements imageAdded juste après le positionnement des vignettes.

COPIER-COLLER
Actionscript:
  1. private function imageAdded(evt:Event):void<br />
  2. {<br />
  3. var loader:Loader = evt.target as Loader; //la vignette qui est ajoutée<br />
  4. var conteneur:Sprite = evt.currentTarget as Sprite; //le conteneur des vignettes<br />
  5. var index:int = conteneur.getChildIndex(loader); //l'index dans la liste d'affichage</p>
  6. <p>if(index != 0) //si la vignette n'est pas la première<br />
  7. {<br />
  8. var previousX:Number = conteneur.getChildAt(index - 1).getBounds(conteneur).right; //coordonnée X du côtét droit de la vignette précédemment ajoutée<br />
  9. loader.x = previousX + ECART_VIGNETTES; //positionnement de la vignette 10 pixels après la vignette précédente<br />
  10. }<br />
  11. loader.addEventListener(MouseEvent.CLICK, vignetteClic); //abonnement à l'événement clic</p>
  12. <p>nextButton.addEventListener(MouseEvent.MOUSE_OVER, scrollNextButtonOver); //abonnement à l'événement MouseEvent.MOUSE_OVER<br />
  13. nextButton.addEventListener(MouseEvent.MOUSE_OUT, scrollNextButtonOut); //abonnement à l'événement MouseEvent.MOUSE_OUT<br />
  14. previousButton.addEventListener(MouseEvent.MOUSE_OVER, scrollPreviousButtonOver); //abonnement à l'événement MouseEvent.MOUSE_OVER<br />
  15. previousButton.addEventListener(MouseEvent.MOUSE_OUT, scrollPreviousButtonOut); //abonnement à l'événement MouseEvent.MOUSE_OUT<br />
  16. }

Pour gérer le défilement, nous allons utiliser un objet de type Timer. Cet objet permet d’exécuter des actions à intervalle régulier. Dans notre cas, il fera défiler à intervalle régulier le conteneur des vignettes.
Cet objet Timer sera définir en tant qu’attribut et sera instancié dans la méthode addUI.

COPIER-COLLER
Actionscript:
  1. //Attributs<br />
  2. private var nextButton:NextButton;<br />
  3. private var previousButton:PreviousButton;<br />
  4. private var conteneurVignettes:Sprite;<br />
  5. private var masqueVignettes:Sprite;<br />
  6. private var conteneurImages:Sprite;<br />
  7. private var traitHaut:Shape;<br />
  8. private var traitBas:Shape;<br />
  9. private var messageChargement:TextField<br />
  10. private const ECART_VIGNETTES:int = 10;<br />
  11. private var timer:Timer;

Le constructeur de la classe Timer prend en paramètre le délai d’exécution entre chaque appel. Ce délai est exprimé en millisecondes.

COPIER-COLLER
Actionscript:
  1. private function addUI():void<br />
  2. {<br />
  3. //Instances<br />
  4. nextButton = new NextButton();<br />
  5. previousButton = new PreviousButton();<br />
  6. conteneurVignettes = new Sprite();<br />
  7. masqueVignettes = new Sprite();<br />
  8. conteneurImages = new Sprite();<br />
  9. traitHaut = new Shape();<br />
  10. traitBas = new Shape();<br />
  11. timer = new Timer(50);</p>
  12. <p>//Nom des boutons<br />
  13. nextButton.name = "nextButton";<br />
  14. previousButton.name = "previousButton";</p>
  15. <p>//Positionnement et dessin<br />
  16. nextButton.x = stage.stageWidth - (nextButton.width + 5);<br />
  17. previousButton.x = 5;<br />
  18. nextButton.y = previousButton.y = stage.stageHeight - (nextButton.height + 5);</p>
  19. <p>//variable locales<br />
  20. var distanceEntreBoutons:Number = Point.distance(new Point(previousButton.getBounds(this).right, previousButton.y), new Point(nextButton.x, previousButton.y));</p>
  21. <p>traitHaut.graphics.lineStyle(1, 0x333333);//epaisseur et couleur du trait<br />
  22. traitHaut.graphics.moveTo(0, 0);//coordonnées de départ du trait<br />
  23. traitHaut.graphics.lineTo(distanceEntreBoutons, 0);//coordonnées de fin du trait<br />
  24. traitHaut.x = previousButton.getBounds(this).right;<br />
  25. traitHaut.y = previousButton.y;<br />
  26. traitBas.graphics.lineStyle(1, 0x333333);//epaisseur et couleur du trait<br />
  27. traitBas.graphics.moveTo(0, 0);//coordonnées de départ du trait<br />
  28. traitBas.graphics.lineTo(distanceEntreBoutons, 0);//coordonnées de fin du trait<br />
  29. traitBas.x = traitHaut.x;<br />
  30. traitBas.y = previousButton.getBounds(this).bottom - 1;<br />
  31. masqueVignettes.graphics.beginFill(0xFFFFFF);//couleur du masque (elle n'a aucune importance puique l'objet va servir de masque)<br />
  32. masqueVignettes.graphics.drawRect(0, 0, distanceEntreBoutons, previousButton.height);//dessin du rectangle<br />
  33. conteneurVignettes.x = masqueVignettes.x = traitHaut.x;//Positionnement en x du conteneur et du masque<br />
  34. conteneurVignettes.y = masqueVignettes.y = traitHaut.y;//Positionnement en y du conteneur et du masque<br />
  35. conteneurImages.x = (stage.stageWidth - conteneurImages.width) / 2;<br />
  36. conteneurImages.y = 10;</p>
  37. <p>//masque du conteneur des vignettes<br />
  38. conteneurVignettes.mask = masqueVignettes;</p>
  39. <p>//affichage de l'interface<br />
  40. addChild(nextButton);<br />
  41. addChild(previousButton);<br />
  42. addChild(conteneurVignettes);<br />
  43. addChild(conteneurImages);<br />
  44. addChild(traitHaut);<br />
  45. addChild(traitBas);<br />
  46. }

Les gestionnaires d’événements scrollNextButtonOver et scrollPreviousButtonOver seront évoqués lorsque l’utilisateur survolera le bouton nextButton et le bouton previousButton.

Ils abonneront un objet Timer, un objet de gestion du temps, à l’événement TimerEvent.TIMER. Cet événement sera évoqué à intervalle régulier, défini dans le constructeur de l’objet timer.

Le timer sera lancé avec la méthode start().

COPIER-COLLER
Actionscript:
  1. private function scrollNextButtonOver(evt:MouseEvent):void<br />
  2. {<br />
  3. timer.addEventListener(TimerEvent.TIMER, scrollNextTimer); //abonnement à l'événement TimerEvent.TIMER<br />
  4. timer.start(); //démarrage du timer<br />
  5. }</p>
  6. <p>private function scrollPreviousButtonOver(evt:MouseEvent):void<br />
  7. {<br />
  8. timer.addEventListener(TimerEvent.TIMER, scrollPreviousTimer); //abonnement à l'événement TimerEvent.TIMER<br />
  9. timer.start(); //démarrage du timer<br />
  10. }

Les gestionnaires d’événements scrollNextButtonOut et scrollPreviousButtonOut seront évoqués lorsque l’utilisateur sortira du survol du bouton nextButton et du bouton previousButton.

Ils  annuleront l’abonnement à l’événement TimerEvent.TIMER.

COPIER-COLLER
Actionscript:
  1. private function scrollNextButtonOut(evt:MouseEvent):void<br />
  2. {<br />
  3. timer.removeEventListener(TimerEvent.TIMER, scrollNextTimer); //annulation de l'abonnement à l'événement TimerEvent.TIMER<br />
  4. }</p>
  5. <p>private function scrollPreviousButtonOut(evt:MouseEvent):void<br />
  6. {<br />
  7. timer.removeEventListener(TimerEvent.TIMER, scrollPreviousTimer); //annulation de l'abonnement à l'événement TimerEvent.TIMER<br />
  8. }

Le gestionnaire d’événements scrollNextTimer est évoqué lorsque l’utilisateur survole le bouton nextButton. Ce gestionnaire est appelé à intervalles réguliers.

Il a pour but de déplacer le conteneur de vignettes afin de visualiser les vignettes masquées. Le déplacement se fera vers la gauche, il nous faudra donc diminuer la coordonnée x du conteneur.

Cette diminution se fera en fonction d’une constante nommé PAS_DEPLACEMENT et défini en tant qu’attribut de la classe.

COPIER-COLLER
Actionscript:
  1. //Attributs<br />
  2. private var nextButton:NextButton;<br />
  3. private var previousButton:PreviousButton;<br />
  4. private var conteneurVignettes:Sprite;<br />
  5. private var masqueVignettes:Sprite;<br />
  6. private var conteneurImages:Sprite;<br />
  7. private var traitHaut:Shape;<br />
  8. private var traitBas:Shape;<br />
  9. private var messageChargement:TextField<br />
  10. private const ECART_VIGNETTES:int = 10;<br />
  11. private var timer:Timer;<br />
  12. private const PAS_DEPLACEMENT:int = 10;

A chaque appel du gestionnaire d’événements, le conteneur des vignettes sera déplacé de la valeur de la constante PAS_DEPLACEMENT vers la gauche.

Un test sera effectué afin de ne pas déplacer le bord droit du conteneur au delà du bord droit du masque.

COPIER-COLLER
Actionscript:
  1. private function scrollNextTimer(evt:TimerEvent):void<br />
  2. {<br />
  3. 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<br />
  4. {<br />
  5. conteneurVignettes.x -= PAS_DEPLACEMENT; // le conteneur est déplacé vers la gauche<br />
  6. }<br />
  7. else<br />
  8. {<br />
  9. timer.removeEventListener(TimerEvent.TIMER, scrollNextTimer); //annulation de l'abonnement à l'événement TimerEvent.TIMER<br />
  10. }<br />
  11. }

Le gestionnaire d’événements scrollPreviousTimer est évoqué lorsque l’utilisateur survole le bouton previousButton. Ce gestionnaire est appelé à intervalles réguliers.

Il a pour but de déplacer le conteneur de vignettes afin de visualiser les vignettes masquées. Le déplacement se fera vers la droite, il nous faudra donc augmenter la coordonnée x du conteneur.

Cette diminution se fera en fonction d’une constante nommé PAS_DEPLACEMENT et défini en tant qu’attribut de la classe.

A chaque appel du gestionnaire d’événements, le conteneur des vignettes sera déplacé de la valeur de la constante PAS_DEPLACEMENT vers la gauche.

Un test sera effectué afin de ne pas déplacer le bord gauche du conteneur au delà du bord gauche du masque.

COPIER-COLLER
Actionscript:
  1. private function scrollPreviousTimer(evt:TimerEvent):void<br />
  2. {<br />
  3. if (conteneurVignettes.x <= (masqueVignettes.x - PAS_DEPLACEMENT))//si le bord gauche du conteneur est positionné avant le bord gauche du masque<br />
  4. {<br />
  5. conteneurVignettes.x += PAS_DEPLACEMENT; // le conteneur est déplacé vers la droite<br />
  6. }<br />
  7. else<br />
  8. {<br />
  9. timer.removeEventListener(TimerEvent.TIMER, scrollPreviousTimer); //annulation de l'abonnement à l'événement TimerEvent.TIMER<br />
  10. }<br />
  11. }

Affichage de l’image en taille normale

L’image étant déjà chargée dans notre diaporama, nous n’allons pas la recharger une seconde fois dans sa taille initiale. Nous allons utilliser les classes du framework ActionScript 3 qui permettent de manipuler les images. Ces classes sont les classes Bitmap et BitmapData.

Dans le gestionnaire d’événements vignetteClic, qui est évoqué lors du clic sur une vignette, nous allons récupérer l’image grâce à la propriété contentLoaderInfo de l’objet Loader.

En effet, l’objet LoaderInfo est un objet qui est partagé entre le conteneur et l’image chargée. Cet objet contient une propriété content qui nous permet de récupérer l’image.

COPIER-COLLER
Actionscript:
  1. private function vignetteClic(evt:MouseEvent):void<br />
  2. {<br />
  3. var image:Bitmap = (evt.currentTarget as Loader).contentLoaderInfo.content as Bitmap;<br />
  4. }

Nous allons récupérer ensuite les pixels de l’image grâce à la propriété bitmapData de la classe Bitmap.

COPIER-COLLER
Actionscript:
  1. private function vignetteClic(evt:MouseEvent):void<br />
  2. {<br />
  3. var image:Bitmap = (evt.currentTarget as Loader).contentLoaderInfo.content as Bitmap; //image correspondant à la vignette cliquée<br />
  4. var pixels:BitmapData = image.bitmapData; // pixels de l'image<br />
  5. }

Ces pixels vont ensuite être copiés dans un autre objet BitmapData grâce à la méthode copyPixels() . Le constructeur de la classe BitmapData attend en paramètres la largeur et la hauteur de la zone de pixels.

COPIER-COLLER
Actionscript:
  1. private function vignetteClic(evt:MouseEvent):void<br />
  2. {<br />
  3. var image:Bitmap = (evt.currentTarget as Loader).contentLoaderInfo.content as Bitmap; //image correspondant à la vignette cliquée<br />
  4. var pixels:BitmapData = image.bitmapData; // pixels de l'image<br />
  5. var newPixels:BitmapData = new BitmapData(pixels.width, pixels.height); //conteneur de la copie des pixels<br />
  6. newPixels.copyPixels(pixels); //copie des pixels<br />
  7. }

Un objet BitmapData n’étant pas un objet d’affichage, nous allons instancier un objet Bitmap en lui passant en paramètres les pixels copiés. L’objet Bitmap sera ensuite ajouté aux conteneurs des images. L’image déjà présente sera quand a elle supprimée de la liste d’affichage.

COPIER-COLLER
Actionscript:
  1. private function vignetteClic(evt:MouseEvent):void<br />
  2. {<br />
  3. var image:Bitmap = (evt.currentTarget as Loader).contentLoaderInfo.content as Bitmap; //image correspondant à la vignette cliquée<br />
  4. var pixels:BitmapData = image.bitmapData; // pixels de l'image<br />
  5. var newPixels:BitmapData = new BitmapData(pixels.width, pixels.height); //conteneur de la copie des pixels<br />
  6. newPixels.copyPixels(pixels, new Rectangle(0, 0, pixels.width, pixels.height), new Point(0,0)); //copie des pixels<br />
  7. var newImage:Bitmap = new Bitmap(newPixels); //Image en taille réelle<br />
  8. if (conteneurImages.numChildren != 0) //si le conteneur contient déjà une image<br />
  9. {<br />
  10. conteneurImages.removeChildAt(0);// l'image est supprimée de la liste d'affichage<br />
  11. }<br />
  12. conteneurImages.addChild(newImage); //la nouvelle image est ajoutée à la liste d'affichage du conteneur<br />
  13. conteneurImages.x = (stage.stageWidth - conteneurImages.width) / 2; //positionnement du conteneur<br />
  14. conteneurImages.y = 10;<br />
  15. }

Nous venons donc de créer un diaporama dynamique. Il ne vous reste plus qu’à apporter vos améliorations afin de le faire correspondre au maximum à vos besoins.