ACTIONSCRIPT Les galeries d’images

ACTIONSCRIPT 3 ET MOTION DESIGN

Les galeries d’images

Introduction Pour gérer une galerie d’images, vous pouvez naturellement la travailler dans le scénario et jouer l’animation, mais il est préférable d’externaliser les contenus. D’abord, vous optimisez confortablement le poids de l’application. Ensuite, vous en simplifiez la maintenance. Dans ce contexte de galerie d’images externalisées, il suffit alors de remplacer les visuels importés par d’autres du même nom, pour automatiquement mettre à jour les images de l’animation, sans avoir à rééditer le Flash. Pour construire une galerie d’images, nous devons d’abord apprendre à charger ces images progressivement, puis, à organiser leur affichage en les appelant directement un répertoire externe, et en y associant des informations textuelles, telles que des titres ou des légendes. Pour améliorer la gestion des contenus, nous verrons qu’il peut être intéressant de centraliser ces informations dans un fichier XML de sorte à simplifier la maintenance du projet une fois celui-ci publié. Nous aborderons aussi la manière de rendre ces développements plus pertinents, d’autoriser l’interaction sur chaque objet généré dynamiquement et d’associer à chaque image, un lien, une fonctionnalité de zoom ou toute autre action. La détection de bogues éventuels pouvant survenir suite à une erreur de chargement ou d’exécution du programme, nous traiterons la manière de placer des contrôles afin d’éradiquer les risques de plantage du programme. Enfin, nous évoquerons l’intégration dynamique des données que vous pourriez extraire d’une base de type MySQL ou de tout autre système d’informations, grâce à vos connaissances acquises sur la gestion d’un flux XML.

Afficher des images externalisées et aléatoires

Dans cette première section, nous abordons le chargement d’images externalisées. Cela nous permet d’alléger grandement le poids des documents SWF que nous créons. Nous abordons aussi la gestion de l’affichage d’une image avec le paramètre random de sorte que l’animation publiée affiche un visuel ou un autre et ce, de manière entièrement aléatoire (voir Figure 5.1).  Exemples > ch5_galeriesImages_1.fla Dans la scène du document « ch5_galerieImages_1.fla », au-dessus du calque fond_mc, apparaît un calque masqué nommé cible_mc (voir Figure 5.2). Ce calque affiche un symbole de type MovieClip du même nom. Ce symbole est vide et sert de conteneur pour importer les images appelées dynamiquement par ActionScript.

Dans le calque nommé actions, nous pouvons lire le code suivant : // CHARGEMENT var chargeurFond:Loader = new Loader(); var valeurAleatoire:Number=Math.round(Math.random()*2); var urlFond:URLRequest=new URLRequest(« images/coteBretonne/photo »+valeur ➥ Aleatoire+ ».jpg »); chargeurFond.load(urlFond); // COMPLETE chargeurFond.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET); function chargementCOMPLET(evt:Event) { cible_mc.addChild(chargeurFond); } D’abord, une série de variables initialise le chargement : var chargeurFond:Loader = new Loader(); La variable chargeurFond réserve l’emplacement mémoire pour la définition d’un chargeur (:Loader). Le signe égal (=) affecte une valeur qui désigne, ici, l’instanciation d’un nouvel objet Loader (= new Loader()).

Figure 5.1 Un des aperçus du document à la publication. Figure 5.2 Aperçu du scénario de la scène principale. LivreActionScript.book Page 100 Vendredi, 15. janvier 2010 12:34 12 LES GALERIES D’IMAGES 101 Plus loin, une variable de type nombre (valeurAleatoire) définit une valeur aléatoire comprise entre 0 et 2 inclus. Celle-ci est obtenue grâce à la classe Math.random(). La classe Math.round() utilisée également permet d’arrondir la valeur obtenue à un chiffre entier. Pour combiner les deux méthodes, nous imbriquons la première dans la seconde : var valeurAleatoire:Number=Math.round(Math.random()*2); C’est cette valeur que nous récupérons plus tard et qui déterminera l’image à charger.Une fois la valeur aléatoire définie, une autre variable, urlFond, stocke le chemin d’accès à l’image. L’image est localisée dans un dossier nommé « coteBretonne » situé dans le répertoire « images » qui accompagne les documents Flash des exemples du livre : var urlFond:URLRequest=new URLRequest(« images/coteBretonne/ photo »+valeurAleatoire+ ».jpg »); Le nom de la photo appelée est construit de manière dynamique. Nous concaténons à la volée notre valeur aléatoire entre la racine du nom et son extension (racine + valeurAleatoire + extension). Selon la valeur obtenue par la variable, le chemin enregistré pour le chargement de l’image sera « images/coteBretonne/photo0.jpg », « images/coteBretonne/ photo1.jpg » ou « images/coteBretonne/photo2.jpg ».

 Définir les chemins pour les requêtes externes

. Lorsque vous appelez un contenu situé à l’extérieur d’un document Flash (une image, un autre fichier SWF, un flux XML, un son, une vidéo, etc., sauf pour les classes .as qui sont compilées à la publication), il est important de déterminer l’emplacement du contenu appelé par rapport à l’emplacement de la page HTML qui exécute le fichier Flash, et non par rapport au fichier Flash lui-même. En effet, si le fichier Flash est enregistré dans un emplacement différent de la page qui le contient, le chemin se référant à ce document Flash risque d’être invalide. Considérez toujours que la page HTML qui exécute le Flash modifie de ce fait la position relative de l’animation Flash, en la définissant par rapport à la page HTML ellemême. Une fois le chemin défini pour le chargement de l’image, nous indiquons au chargeur (chargeurFond), à l’aide de la méthode load, de charger cette image (urlFond). chargeurFond.load(urlFond); Plus loin, un écouteur est attaché au chargeur chargeurFond et appelle une fonction :

// COMPLETE chargeurFond.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET); function chargementCOMPLET(evt:Event) { cible_mc.addChild(chargeurFond); }

L’écouteur est attaché à l’objet LoaderInfo du chargeur et non directement au chargeur lui même. La propriété contentLoaderInfo appartient en effet à l’objet Loader et permet d’y lire des informations relatives à la progression du chargement. Pour ajouter des instructions d’affichage suite au chargement, nous devons donc introduire cet objet dans le gestionnaire d’événements, ce qui donne :

chargeurFond.contentLoaderInfo.addEventListener (Event.COMPLETE,chargementCOMPLET); Lorsque le chargement est complet (Event.COMPLETE), c’est-à-dire lorsque l’image appelée avec la méthode load est entièrement chargée sur le poste client, l’écouteur exécute une fonction que nous avons ici nommée chargementCOMPLET : function chargementCOMPLET(evt:Event) { cible_mc.addChild(chargeurFond); } LivreActionScript.book Page 102 Vendredi, 15. janvier 2010 12:34 12 LES GALERIES D’IMAGES 103 Cette fonction affiche l’objet chargé directement dans le MovieClip nommé cible_mc qui sert de conteneur (ou l’ajoute comme enfant à la liste d’affichage), à l’aide de la méthode addChild() : Cible_mc.addChild(chargeurFond); En affichant l’élément chargé dans un symbole de type MovieClip, nous lui faisons bénéficier des propriétés afférentes aux MovieClip.

L’objet importé peut donc, par ce conteneur, être animé et contrôlé par ActionScript (position, effets de couleur, affichage, filtres, animations, etc.). Doit-on toujours placer un écouteur sur un chargeur pour activer l’affichage d’un contenu chargé dynamiquement ? Il est possible, lorsque vous réalisez le document localement, de vous passer de l’écouteur attaché au chargeur et d’invoquer directement l’affichage (addChild) suite au chargement avec la méthode load. Le fichier placé localement est déjà présent sur votre poste et ne requiert pas, dans ce cas, d’être préalablement téléchargé avant d’être affiché. Il est affiché directement, car il est déjà disponible. Mais, pour tout contenu destiné à une publication en ligne, pour un site donc, il convient de passer par l’écouteur qui assurera l’affichage seulement une fois le contenu entièrement chargé. Le cas échéant, les contenus appelés dynamiquement seraient considérés par le lecteur Flash comme inexistants au moment de l’exécution des scripts attachés à ces objets, ce qui pourrait nuire à la bonne exécution de votre programme. Pour placer une action alternative en cas de problème lié au chargement, consultez aussi la section consacrée à la gestion des erreurs au chargement, en fin de chapitre..