tuto

Galerie d’ image en AS3 et XML

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:

Arborescence

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:

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

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 <(^^,)>.

115 commentaires

S'abonner au RSS des commentaires
  1. yann
    Posté le 17/07/2009 à 12h43

    Hello, comment ajouter une ouverture d’url lorsque l’on clique sur une image ?

    merci

  2. François
    Posté le 16/07/2009 à 20h34

    En fait au final dans le src final de ton appli flash tu dois renseigné le chemin pour accéder à ton image à partir du fichier fla…
    Utilise des trace () pour vérifier que tu as le bon chemin (j’entends par chemin: le dossier qui mène à l’image+ le nom de l’image).

    C’est normal d’avoir quelques soucis au bout de 2 semaines… Mais je pense que c’est un bon exercice pour apprendre à manier des composants, du XML, des effets , etc…

  3. Aurélien
    Posté le 16/07/2009 à 17h50

    [citation][de]Réponse à Fran:[/de]
    En fait l’attribut source doit être rempli à partir d’une URL relative, c’est ) dire l’adresse de l’image à partir du fichier XML ( par exemple dossierImages/tonfichier.jpg)[/citation]
    merci Fran pour ta réponse, j’y arrive tjrs pas. En fait faut-il que je rentre le chemin dans mon fichier XML, ou dans le code monObjetXML.maBaliseImage[positionDeLaBalise].attribute(‘src’); ?
    Désolé de poster des questions sûrement évidentes,après 2 semaines de flash c pas évident mais j’aimerai vraiment arriver a intégrer un fichier XML dans flash. Merci de m’aider ou éventuellement de me rediriger vers un forum sympa.

  4. Fran
    Posté le 15/07/2009 à 23h30

    [citation][de]Réponse à Aurélien:[/de]salut!
    merci François pour cette super galerie, et ce super tuto, très bien expliqué. Etant débutant sous Flash,
    J’ai appris beaucoup de chose en suivant ce tuto. Mais, je n’arrive pas à le refaire complètement, quand je lance un aperçu, j’ai ce message:

    Error #2044: ioError non pris en charge : text=Error #2035: L’URL est introuvable. URL: file:///Macintosh%20HD/%20galerie/images/2.jp
    plus le même message pour toute mes miniatures.
    Si j’ai bien compris, c qu’il n’arrive pas chargé l’URL? pour tant avec la variable (adresse) on lui indique où il est, non? Le texte de mon XML s’affiche mais pas mes images, je comprends pas trop.
    En tout cas merci encore pour ce tuto, même si je galère un peu, je continue d’apprendre.Réponse à François:Pour les miniatures et leurs position c’est de la ligne 25 à 35 de l’étape 4[/citation]

    En fait l’attribut source doit être rempli à partir d’une URL relative, c’est ) dire l’adresse de l’image à partir du fichier XML ( par exemple dossierImages/tonfichier.jpg)

  5. Aurélien
    Posté le 15/07/2009 à 12h25

    salut!
    merci François pour cette super galerie, et ce super tuto, très bien expliqué. Etant débutant sous Flash,
    J’ai appris beaucoup de chose en suivant ce tuto. Mais, je n’arrive pas à le refaire complètement, quand je lance un aperçu, j’ai ce message:

    Error #2044: ioError non pris en charge : text=Error #2035: L’URL est introuvable. URL: file:///Macintosh%20HD/%20galerie/images/2.jp
    plus le même message pour toute mes miniatures.
    Si j’ai bien compris, c qu’il n’arrive pas chargé l’URL? pour tant avec la variable (adresse) on lui indique où il est, non? Le texte de mon XML s’affiche mais pas mes images, je comprends pas trop.
    En tout cas merci encore pour ce tuto, même si je galère un peu, je continue d’apprendre.[citation][de]Réponse à François:[/de]Pour les miniatures et leurs position c’est de la ligne 25 à 35 de l’étape 4[/citation]

  6. François
    Posté le 13/07/2009 à 15h58

    Pour les miniatures et leurs position c’est de la ligne 25 à 35 de l’étape 4

  7. ajhx
    Posté le 12/07/2009 à 15h37

    yop !

    très belle gallerie merci. Petite question, comment déplacer les thumbs en bas de l’image principale et non à coté ? J’aimerais eventuellement les placés en bas pour ajouter des fleches suivant/précedent, mais je vois pas trop comment le placement des thumnails est géré.

    merci en tout cas pour le boulot

  8. yayaDesigner
    Posté le 09/07/2009 à 15h35

    Voici le lien comme promis de ma galerie avec l’idée que j’ai citée un peu plus haut … : http://yayadesigner.fr.nf//galerie/index.php

    ps : s’il y a des idées pour améliorer, je prend en compte ya pa de soucis n’hésite pas, et s’il y a des problèmes de CSS également !

    A bientot et oublie pas de me donner tes impressions.

  9. Hekthor
    Posté le 09/07/2009 à 10h31

    [citation]
    Essaye de creuser sur l’évènement mouseMove…
    [/citation]

    Ah je ne connais pas cet évènement… Sinon en bidouillant, j’ai réussi à faire une scrollbar horizontale, mais avec des images fixes… Dès que j’intègre du xml, le défilement n’est plus pris en compte…

    var centerX:Number = stage.stageWidth / 2;
    var galleryWidth:Number = monClip_mc.width;
    var speed:Number = 0;
    addEventListener(Event.ENTER_FRAME, moveGallery);
    function moveGallery(e:Event):void {
    speed = -(0.05 * (mouseX – centerX));
    monClip_mc.x+=speed;

    if (monClip_mc.x>0) {
    monClip_mc.x= (-galleryWidth/2);
    }
    if (monClip_mc.x<(-galleryWidth/2)) {
    monClip_mc.x=0;

    }
    }

    monClip_mc étant le conteneur où les images s’affichent…

    Une idée ? :x

  10. francois
    Posté le 10/07/2009 à 21h33

    J’aime bien yayaDesigner, c’est bien parti en tout cas! Par contre les images en taille normale mettent du temps à se charger tu devrais peut être indiquer à l’utilisateur que ca charge…Après chez moi j’ai un débit pas tip top ^^

    Sinon Hektor vérifie que tes images sont dans le bon élement parent.

  11. yayaDesigner
    Posté le 09/07/2009 à 0h16

    [citation][de]Réponse à François:[/de]Ah oui bien joué….
    Pour le reste de ton code le principe est la même

    pour générer la position aléatoirement tu mets du random sur le x et le y et peut être sur l’angle de rotation… après tu agrandis ton UILoader quand tu as cliqué dessus… Après ce sont des maths… Je veux bien voir le rendu quand t’auras fini! [/citation]

    Oui tout a fait … Pour sa, j’ai su y faire après ! Et comme je suis perfectionniste, ton idée est exactement celle que j’avais imaginé au départ smile Je te prévois un lien demain sur le rendu final, je pense que c’est pas trop mal pr le moment … A voir :p

  12. francois
    Posté le 08/07/2009 à 20h30

    [citation][de]Réponse à Hekthor:[/de]Salut !

    Superbe galerie que voilà…
    Je pensais à une petite amélioration, dans le cas ou il y a beaucoup de miniatures… Je les ai toutes alignées en dessous de l’image principale, et il me faudrait créer une fonction qui repère la position de la souris et qui fait défiler cette galerie à gauche ou a droite.

    J’arrive a penser la chose en as2, mais étant assez débutant en as3, j’ai quelques soucis…

    Aurais tu quelques pistes à me proposer ?

    Merci ![/citation]

    Essaye de creuser sur l’évènement mouseMove…

    Zed, tu peux supprimer la ligne 7 de l’étape 5…

  13. Zed
    Posté le 08/07/2009 à 14h27

    Bonjour !
    Superbe galerie : D

    j’aurais une question.
    Est-ce possible de faire en sorte qu’au démarrage, aucune image ne soit afficher ?

    Que la 1ere photo ne s’affiche qu’a partir d’un clic sur une vignette ?

    Merci

  14. Hekthor
    Posté le 07/07/2009 à 18h08

    Salut !

    Superbe galerie que voilà…
    Je pensais à une petite amélioration, dans le cas ou il y a beaucoup de miniatures… Je les ai toutes alignées en dessous de l’image principale, et il me faudrait créer une fonction qui repère la position de la souris et qui fait défiler cette galerie à gauche ou a droite.

    J’arrive a penser la chose en as2, mais étant assez débutant en as3, j’ai quelques soucis…

    Aurais tu quelques pistes à me proposer ?

    Merci !

  15. Mimi
    Posté le 01/07/2009 à 19h01

    J’ai réalisé ton tuto, mais j’ai parfois des problèmes lorsque je clic sur la miniature.
    - parfois le bouton ne marche pas, donc l’image ne load pas
    - les transitions ne se font pas jusqu’à la fin (la grande image reste en transparence par exemple)
    J’ai regardé le démo et des fois aussi il y a ces problèmes. Est-ce que c’est juste moi (peut-être parce que je suis sur Mac) et y a-t-il une façon de corriger? Merci!

  16. François
    Posté le 30/06/2009 à 23h29

    Oui en rajoutant des lignes au fichier XML, c’est conçu pour ca à la base smile

  17. Skittles
    Posté le 29/06/2009 à 22h40

    Très intéressant le tuto.

    J’ai une question par exemple, est-il possible de rajouter plus de 9 miniatures? Si oui, comment. Merci pour la réponse!

  18. François
    Posté le 29/06/2009 à 21h45

    Salut!
    En fait tout le code se trouve dans la premiere image clé….Sinon télécharge la source si tu as un soucis…
    Bonne soirée

  19. BikS
    Posté le 28/06/2009 à 23h25

    Salut!! merci pour le tuto! il est coool.
    mais (il y a toujours un mais!^^) pour un débutant comme moi j’ai des problèmes de compréhension…
    voila je me demande si les codes présents ci dessus sont bien distinct l’un de l’autre et collés séparément sur une image clés ou s’ils sont l’un a la suite de l’autre sur la meme image clé…. enfin je m’emmèlle les pinceaux c’est hallucinant! Oo vraiment merci s’il y a des réponses par ce que la je sèche! sa fait depuis 3/4 mois que je cherche a faire une gallerie as3 mais chaque fois je pige queudale! Oo … un très grand merci si réponse positive il ya! ^^

    bonne soirée.

  20. François
    Posté le 22/06/2009 à 22h52

    Ah oui bien joué….
    Pour le reste de ton code le principe est la même
    pour générer la position aléatoirement tu mets du random sur le x et le y et peut être sur l’angle de rotation… après tu agrandis ton UILoader quand tu as cliqué dessus… Après ce sont des maths… Je veux bien voir le rendu quand t’auras fini! smile

  21. yayaDesigner
    Posté le 22/06/2009 à 19h20

    En fin de compte j’ai trouvé mon erreur par moi même.

    Pour ceux que sa interesse, au lieu d’utiliser e.currentTarget il faut lui preciser que c’est un displayobject que l’on utilise, et ensuite appliquer la fonction :

    var uil:UILoader = e.currentTarget as UILoader;
    setChildIndex(uil,numChildren – 1);

  22. yayaDesigner
    Posté le 22/06/2009 à 14h53

    Salut ton tuto est super merci beaucoup !

    Par contre je cherche un peu d’aide pour un point particulier. En faite je cherche à créer une galerie où les images s’affichent un peu aleatoirement sur ma scène.

    Dans mon code, au niveau de la fonction "overImage()", j’aimerais que l’image actuel passe au premier plan. Cela fait déjà des heures que je cherche la solution et je n’ai pas encore trouvé. J’ai déjà tenter d’utiliser cette fonction :
    e.currentTarget.setChildIndex() : mais sans succès.

    Si tu pouvais me donner un petit coup de main, ce serait génial. Merci beaucoup !

  23. nihi
    Posté le 12/06/2009 à 17h30

    aaaa excellent merci ça marche nikel!

    Merci encore!

  24. François
    Posté le 12/06/2009 à 1h14

    ben dans ton fichier flash principal tu l’importes comme ca:
    var maGalerie:UILoader = new UILoader();
    maGalerie.source = "galerie.swf";
    //les coordonnées de ta galerie

    maGalerie.x = 0;
    maGalerie.y= 0;
    //et tu l’affiches
    this.addChild(maGalerie);

    ca devrait fonctionner si tu as bien importer le composant UILoader
    (ca doit être faisable soit avec la bibliothèque, soit avec un import en AS)

    A+

  25. nihi
    Posté le 11/06/2009 à 20h42

    J’ai bien mis le UILoader dans ma bibliotheque, pourtant je ne trouve pas comment positioner la galerie… sad

    Sinon j’ai essayé de charger la galerie depuis un .swf mais la encore toujours ce probleme de positionnement…

    Si vous avez une solution je suis preneur car j’y ai passé l’après-midi et n’ai rien trouvé!

    Merci d’avance

  26. François
    Posté le 11/06/2009 à 18h41

    Tu l’utilises de la même manière que tu utilises une miniature dans le fla, c’est à dire avec le composant UILoader

  27. nihi
    Posté le 11/06/2009 à 17h53

    Très bon tuto, très clair!

    Une question toutefois :

    Si je souhaite placé ma galerie a des coordonnées précises dans mon .fla, comment faire?

    Merci

  28. François
    Posté le 29/05/2009 à 0h20

    [citation][de]Réponse à ninine2002:[/de]Bonjour,

    le tuto est très sympa et bien réalisé, cependant je n’arrive pas à ouvrir le fichier flash source…

    J’ai Adobe CS3, comment puis-je faire ?[/citation]

    Euh ouai le fichier a été fait sur CS4 et au niveau de la compatibilité c’est pas vraiment top.
    Sinon ce que tu peux faire c’est téléchargé la version d’eval CS4 sur Adobe et le convertir ensuite pour CS3…Sinon un copier coller du code semble plus rapide :)

  29. ninine2002
    Posté le 26/05/2009 à 11h20

    Bonjour,
    le tuto est très sympa et bien réalisé, cependant je n’arrive pas à ouvrir le fichier flash source…
    J’ai Adobe CS3, comment puis-je faire ?

  30. lazy
    Posté le 14/05/2009 à 23h15

    Merci pour ce tuto, c’est propre et précis ! Bon boulot, c’est top.

1 Trackback

  1. [...] d'interfaces de site web, en passant par l'ActionScript, avec Flash & Flex.Galerie d'images AS3/XMLCe tutoriel va vous apprendre à manipuler en ActionScript 3 un document XML afin d'en extraire du contenu. [...]

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>