Le défi charger des images aléatoirement et en faire un bandeau qui défile.

Etape1 charge une image?

    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;

    var loader:Loader = new Loader();//on créer un loader
    loader.load(new URLRequest("http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours1.jpg")); //le chargeur charge limage selon l'adresse
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, charger); // l'écouteur, quand le chargeur a fini de charger il déclenche la fonction charger

    function charger(event:Event):void{
        addChild(event.target.content);//on pose le contenu du chargeur sua la scène
    }

    Le Fla ex1.fla

Voila comment on charge une image.

Etape2 redimensionner une image charger? et oui dans exemple au dessus on charge une image et on la pose sur la scène.

    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;

    var loader:Loader = new Loader();//on créer un loader
    loader.load(new URLRequest("http://www.citroen-france-tours-nord.fr/puzzle/citroen/citroen1.jpg")); //le chargeur charge limage selon l'adresse
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, charger); // l'écouteur, quand le chargeur a fini de charger il déclenche la fonction charger

    function charger(event:Event):void{
         var contener:Sprite = new Sprite();//on créer un objet de classe Sprite pour contenir l'image
        contener.addChild(event.target.content);//on met le contenu du loader dans le contener
        contener.x = 100;// place le contener sur l'axe X
        contener.y = 0;// place le contener sur l'axe Y
        contener.width = 120;//on redimensionne le sprite l'image chargé fait 600 x 450
        contener.height = 90;// on ne peut pas redimensionner un loader c'est pour ca que l'on met le loader dans un Sprite
        addChild(contener);// on pose sur la scène
}

    Le Fla ex2.fla

Voila comment on redimmentionne l'image que l'on a chargée.

Etape3 créer une fonction qui choisi les image aléatoirement. de plus il ne faut pas deux fois les mêmes images.

    la classe math a une proprietée Random qui donne un nombre aléatoirement.

    Le Fla ex3.fla

    ce nombre varie de 0 a 1
    j'ai 9 images dans mon dossier. seul un chiffre varie dans leur adresse de 1 a 9 et je sais créer un nombre aléatoire de 0 a 1.

          http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours1.jpg
          http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours2.jpg
          http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours3.jpg
          http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours4.jpg
          http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours5.jpg
          http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours6.jpg
          http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours7.jpg
          http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours8.jpg
          http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours9.jpg

    Pour passer de 0 a 1 (nombre =  Number = virgule) a un résultat de 1 a 9 (entier =int ).
    Je vais multiplié le chiffre aléatoire * 8 et lui ajouter 1. (Math.random()*8)+1 et pour avoir un entier int((Math.random()*8)+1);

    Maintenant on peut créer un chargeur aléatoire. Je reprend l'ex1 

    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;

    var n:int = (Math.random()* 8) +1; //la variable n int donc nombre entier plus de virgule aura une valeur aléatoire

    var loader:Loader = new Loader(); // le chargeur
    loader.load(new URLRequest("http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours"+n+".jpg")); //l'adresse de chargement qui maintenant est instancier dynamiquement grace a la valeur aléatoire de n.
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, charger);

    function charger(event:Event):void{
        addChild(event.target.content);
    }

    A chaque fois que vous rechargé cette page l'image est choisi aléatoirement

    Le Fla ex4.fla

    A ce stade on charge qu'une image aléatoirement et il faut en charger plusieurs
    j'ai dans mon dossier 9 images donc je vais en charger aléatoirement 4.
    Pour cela on va utiliser une boucle

    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;

    for( var n:uint; n < 4; n++){
        var nombre:int = (Math.random()* 8)+1;
        var loader:Loader = new Loader();
        loader.load(new URLRequest("http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours"+nombre+".jpg"));
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, charger);
    }
    function charger(event:Event):void{
        var contener:Sprite = new Sprite();
        contener.addChild(event.target.content);
        contener.x = numChildren * 120;
        contener.y = 0;
        contener.width = 120;
        contener.height = 90;
        addChild(contener);
    }

    A chaque fois que vous rechargez cette page les images sont choisies aléatoirement le problème avec cette réalisation c'est qu'on peut avoir deux fois la même.

    Le Fla ex5.fla

   Pour savoir quel image a été chargé est celle qu'on peut chargée j'utilise un tableau (Array).
    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;

    var tab:Array = new Array(); //je créer un tableau
    tab = ["1","2","3","4","5","6","7","8","9"];  // les numéros des images

    for( var n:uint; n < 4; n++){
        var hazard:int = Math.random()* tab.length; // je créer un nombre au hazard en rapport au nombre de case de mon tableau
        var ref:String = tab[hazard]; // je récupère la case sélectionne
        tab.splice(hazard ,1);//on retire la case qui a été sélectionné du tableau ce qui va avoir comme effet qu'on ne pourra plus séléctionner deux fois la même image
        var loader:Loader = new Loader();
        loader.load(new URLRequest("http://www.citroen-france-tours-nord.fr/puzzle/vignette/citroen-france-tours"+ref+".jpg"));
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, charger);
    }

    function charger(event:Event):void{
        var contener:Sprite = new Sprite();
        contener.addChild(event.target.content);
        contener.x = numChildren * 120;    
        contener.y = 0;
        contener.width = 120;
        contener.height = 90;
        addChild(contener);
    }

   Le Fla ex6.fla

   Cette façon de faire fonctionne. Mais!!! Si un jours j'ajoute des images il faut refaire cette anime.
   Solution créer un fichier php qui nous donne les nom des fichiers et que l'on transforme en tableau.
   C'est cette façon de faire avec laquelle je fais créer ma bannière puzzle.
   Si plus tard je rajoute des images dans mon dossier elle se chargeront dans mon anime.
   De plus mon anime va faire défiler toutes mes images indéfiniment. C'est grâce a la question de kinouillle que j'ai décidé de créer ma bannière puzzle sur ma page d'accueil.

Etape 4 presque la version final.

Chargement dynamique du contenu de mon dossier qui contient mes images et défilement aléatoirement de toutes mes images indéfiniment


    Le fichier php.
    <?php
        $dir = opendir("vignette");
        echo 'ok=ok&tab=';
        while($file = readdir($dir)) {
        echo $file.",";
        }
        echo '&ok=ok';
        closedir($dir);
    ?>

Le code AS3.

   import flash.display.Loader;
   import flash.net.URLRequest;
   import flash.events.Event;
   import flash.net.URLLoader;
   import flash.display.Sprite;

   var tab:Array = new Array();               // le tableau
   var Data:String;                                   // la variable qui va recevoir sa valeur avec le php
   var banniere:Sprite = new Sprite();      // notre clip géneral
   addChild(banniere);                            //on pose banniére sur la scéne

   function listeDimage():void{// fonction qui charge la liste des images grace au php
       var chargeur:URLLoader = new URLLoader(new URLRequest("http://www.citroen-france-tours-nord.fr/puzzle/index2.php"));
       chargeur.dataFormat=URLLoaderDataFormat.VARIABLES;
       chargeur.addEventListener(Event.COMPLETE, trac);
    }

    function trac(event:Event):void{                // fichier php recu
       Data = event.target.data.tab;                 // Data = a la liste des images du dossier sous forme de String ou chaine
       tab = Data.split(",");                              // on transforme la String Data en tableau tab
       tab.splice(0,2);                                     // je vire les deux premières case du tableau.
       tab.splice(tab.length-1,1);                     // je vire la dernière case du tableau je vire ces cases car elle ne comporte pas les infos voulues.
       init(5);                                                  // je lance la fonction init avec un paramètre de cinq
   }

   function init(i:uint):void{                                                         //la fonction sert a charge les images 5 au depart
       for( var n:uint; n < i; n++){                                                // la boucle qui va s' exécuter 5 fois car on a demandé init(5);
           var hazard:int = Math.random()* tab.length;                  //un nombre au hazard
           var ref:String = tab[hazard];                                          //on prend la valeur de la case du tableau qui a été choisi au hazard
           tab.splice(hazard ,1);                                                    //on vire la case choisi
           var loader:Loader = new Loader();                               //le chargeur
           loader.load(new URLRequest("http://www.citroen-france-tours-nord.fr/puzzle/vignette/"+ref)); // l'adresse du fichier choisi au hazard
           loader.contentLoaderInfo.addEventListener(Event.COMPLETE, charger);  // l' écouteur fin de chargement
       }
       addEventListener(Event.ENTER_FRAME, bouge); // on ajoute un écouteur enterFrame pour declencher avec chaque frame la fonction bouge
   }

    function bouge(event:Event):void{                         // fonction bouge qui déplace la bannière
       banniere.x -=1;                                                 // a chaque frame  ou image on deplace la banniere de 1px vers la gauche
       if( banniere.x <= - 120){                                   // si la banniere est a plus de 120 px vers la gauche donsc on ne vois plus image qui est en position 1
           banniere.removeChildAt(0);                         // on vire l'image 1
           banniere.x = 0;                                             // on remet la banniere a 0 en x
            banniere.getChildAt(0).x = 0;                       //on replace les images dans la banniere selon leur ordre d'affichage
            banniere.getChildAt(1).x = 120;
            banniere.getChildAt(2).x = 240;
            banniere.getChildAt(3).x = 360;
            init(1);                                                             //on recharge 1 image au hazard
            if(tab.length == 0){                                         //si le tableau est vide on a chargé toutes les images
                tab = Data.split(",");                                     // on recharge le tableau
                tab.splice(0,2);
                tab.splice(tab.length-1,1);
            }
        }
    }

    function charger(event:Event):void{                 //la fonction qui gere les chargement et redimensionne les images.
        var contener:Sprite = new Sprite();
        contener.addChild(event.target.content);
        contener.x = banniere.numChildren * 120;     // on place les images dans bannière selon le nombre d'enfant de bannière
        contener.y = 0;
        contener.width = 120;
        contener.height = 90;
        banniere.addChild(contener);
    }

    listeDimage();        //l'appel de la fonction qui déclenche le chargement de la variable du php.

   Le Fla ex7.fla

Le truc bizarre dans cet version c'est qu'on utilise un chargement d'une variable apres un appel a un fichier php. alors que l'on se trouve sur une page web. Donc ma page va devnir une page php qui va créer une flashvars

La version final.

    Le code pour integré le swf sur la page web. en italic souligne la flashvars qui est généré par le code php.

    <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="185" height="60">
        <param name="movie" value="../image/bannierePuzzle.swf">
        <param name="quality" value="High">
        <param name="bgcolor" value="#d1adb3">
        <embed src="../image/bannierePuzzle.swf" flashvars="tab=<?php $dir = opendir("../puzzle/vignette"); while($file = readdir($dir)) {echo $file.",";}closedir($dir);?>" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-                flash" name="obj1" width="185" height="60" quality="High" bgcolor="#d1adb3">
    </object>

    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;
    import flash.display.Sprite;
    import flash.events.MouseEvent;

    var tab:Array = new Array();
    var Data:String = root.loaderInfo.parameters.tab ;  //Data prend la valeur directement de la flasvars

    var banniere:Sprite = new Sprite();
    banniere.buttonMode = true;  // pour avoir le symbole de la main quand la souris passe sur la banniere
    addChild(banniere);

    banniere.addEventListener(MouseEvent.CLICK, puzzle);
    function puzzle(event:MouseEvent):void{
        navigateToURL(new URLRequest("../puzzle/puzzle.html"), "cadreCentre"); // quand on clic sur la banniere on change de page web
    }

    function trac():void{ // on refait le tableau comme exemple du desus
        tab = Data.split(",");
        tab.splice(0,2);
        tab.splice(tab.length-1,1);
        init(5);
    }

    function init(i:uint):void{ // comme exemple du dessus
        for( var n:uint; n < i; n++){
                var hazard:int = Math.random()* tab.length;
                var ref:String = tab[hazard];
                tab.splice(hazard ,1);
                var loader:Loader = new Loader();
               loader.load(new URLRequest("http://www.citroen-france-tours-nord.fr/puzzle/vignette/"+ref));
               loader.contentLoaderInfo.addEventListener(Event.COMPLETE, charger);
        }
        addEventListener(Event.ENTER_FRAME, bouge);
    }

    function bouge(event:Event):void{
        banniere.x -=1;
        if( banniere.x <= - 80){
            banniere.removeChildAt(0);
            banniere.x = 0;
            banniere.getChildAt(0).x = 0;
            banniere.getChildAt(1).x = 80;
            banniere.getChildAt(2).x = 160;
            banniere.getChildAt(3).x = 240;
            init(1);
            if(tab.length == 0){
            tab = Data.split(",");
            tab.splice(0,2);
            tab.splice(tab.length-1,1);
        }
       }
    }

    function charger(event:Event):void{
        var contener:Sprite = new Sprite();
        contener.addChild(event.target.content);
        contener.x = banniere.numChildren * 80;
        contener.y = 0;
        contener.width = 80;
        contener.height = 60;
        banniere.addChild(contener);
    }

    trac();

   Le Fla ex8.fla

   Pour plus d'info on peut me contacter en passant par l'animation radio.

   Pour cela vous vous créer un compte en cliquant sur ok en haut a gauche de la page radio.

   Puis sur l'onglet "Bavarder". Si je suis connecté "gustave02" , posé votre question.