Bonjour à tous aujourd'hui je vous propose de créer un slideshow (une galerie automatisé) en as3, cette galerie utilise la classe Timer et charge les images grâce à un fichier xml. Le chargement est affiché directement dans l'interface et les images se placent automatiquement avec rotation.

PS:Ce tutoriel est tiré du tutoriel "galerie automatique" proposé par moi-même sur weecast. Seul la gestion des commentaires, du nombre d'image et la mise en place d'un menu gérant la vitesse de défilement n'est pas présent dans ce tutoriel.

Voici ce que vous obtiendrez à la fin de ce tutoriel:


Le code:

Code:

package fr.galerie
{
   //import
   import flash.display.MovieClip;
   import flash.display.Loader;
   
   import flash.net.URLLoader;
   import flash.net.URLRequest;
   
   import flash.utils.Timer;
   
   import flash.events.Event;
   import flash.events.ProgressEvent;
   import flash.events.TimerEvent;
   
   import gs.TweenMax;
   import gs.easing.Cubic;
   
   //classe de document
   public class SlideShow extends MovieClip
   {
      //vars & const
      private const TEMPS_A                      :int  = 1
      private var contActuel                      :MovieClip;
      private var imageActuelle                  :int = -1;
      private var nbImages                        :int;
      private var timerGalerie                    :Timer;
      public const attente                        :Number = 3000;
      private var conteneur1                      :MovieClip;
      private var conteneur2                      :MovieClip;
      private var loaderGalerie                  :Loader;
      private var urlXML                          :String = "XML/galerie.xml";
      private var xmlLoader                      :URLLoader;
      private var xml                            :XML;
      
      //constructeur
      public function SlideShow():void
      {
         xmlLoader = new URLLoader();
         xmlLoader.addEventListener(Event.COMPLETE, chargementCompletXML);
         xmlLoader.load( new URLRequest( urlXML ) );
         timerGalerie = new Timer ( attente );
         timerGalerie.addEventListener(TimerEvent.TIMER, navigationImages);
         
         conteneur1 = new MovieClip();
         conteneur2 = new MovieClip();
         conteneurImages.addChild( conteneur1 );
         conteneurImages.addChild( conteneur2 );
         
         contActuel = conteneur2;
      }
      
      private function chargementCompletXML (e:Event):void
      {
         xml = new XML( e.target.data );
         nbImages = xml.image.length();
         navigationImages(null);
      }
      private function navigationImages(e:Event):void
      {
         if(timerGalerie.running)timerGalerie.stop();
         if (imageActuelle + 1 < nbImages)imageActuelle++;
         else imageActuelle = 0;
         
         if (contActuel == conteneur2) contActuel = conteneur1;
         else contActuel = conteneur2;
         
         contActuel.alpha = 0;
         contActuel.scaleX = contActuel.scaleY = -1;
         conteneurImages.swapChildren(conteneur2, conteneur1);
         loaderGalerie = new Loader( );
         loaderGalerie.contentLoaderInfo.addEventListener(Event.COMPLETE, chargeCompletImage);
         loaderGalerie.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, chargementImage);
         loaderGalerie.load(new URLRequest( xml.image[imageActuelle].@adresse ));
      }
      private function chargementImage(pe:ProgressEvent):void
      {
         info.texte_chargement.text = Math.round(pe.bytesLoaded * 100 / pe.bytesTotal ) + "%";
      }
      private function chargeCompletImage (e:Event):void
      {
         contActuel.addChild(loaderGalerie.content);
         info.texte_chargement.text = "100%";
         TweenMax.to(contActuel,TEMPS_A,{alpha:1,scaleX:1,scaleY:1,rotation:360,ease:Cubic.easeOut,onComplete:timerGalerie.start()})
      }
   }
}

Le tutoriel:
TUTO_SLIDESHOW

Le tuto est arrivé, enjoy !!!!

plustot pas mal

mais tu devrai charger les images apres avoir afficher l'image précedente, puis apres un timer, si l'image est charger tu l'affiche

Et si tu fais ça, comment veux-tu que t'es images se croisent, c'est là qu"est l'effet justement.

Donc deux images se fondent, alors il est évident qu'il devient indispensable de les charger aux même moment et comme ceux ne sont que deux images à la fois, les ressources ne sont à aucun moment surchargés

dison que moi, la ou je suis avec le debit que j'ai, j'ai une image toutes les 10 secondes environs

Et le rapport avec le chargement d'image une à une il est où, car même à 10 seconde par image, il te faudra toujours les charger deux par deux, sinon tu te retrouves avec un simple timer qui t'affiche une image toute les 10 secondes et non un slideShow qui te permet de fondre les images entre elles...

Bonjour

le lien du tuto est mort , possible de l'avoir Maitre Artkabis ?
Merci^^

Tuto remis en place.


Sachez qu'il est possible que d'autres formations est leurs liens corrompus, en effet nous avions un serveur payant il y à quelques temps, mais faute de moyens à l'époque (et un petit soucis avec la personne qui le gérait) , nous avons perdu l'ensemble des données et le serveur fut fermé. Donc si vous rencontrez d'autres liens morts, n"hésitez pas à nous le faire savoir

super Merci , jai d'autres questions d'amateur a te poser je le ferais ds la partie adéquate ...
super tuto encore , a force de te le dire ça doit etre chiant ^^