ActionScript 3.0, l'essentiel sous la main Adobe Flash Accueil
Fiches
Boutique
Contact
Créer une galerie de photos dynamique - Diaporama
Création d'un diaporama comme l'on en voit de plus en plus sur les pages d'accueil de site :
Le principe consiste à gongler entre deux zone d'affichage (A et B). Si c'est A qui est affiché, on place B en premier plan et on le fait apparaitre. Si c'est B qui est affiché, idem on place A en premier plan et on le fait apparaitre. Le reste du code reprend les différents méthodes vu dans les autres chapitres du site :
Sur votre scène, vous devez avoir :
Il n'y a qu'une seule page de code :

//Imports
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.display.BlendMode;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.media.Sound;
import flash.media.SoundChannel;

import com.greensock.*;
import com.greensock.easing.*;

//Paramètres de la scène
stage.scaleMode = StageScaleMode.NO_SCALE; //Désactive le redimensionnement
stage.align = StageAlign.TOP_LEFT; //Point d'alignement dans le coin supérieur gauche

//Zone d'affichage des puces
var container_puce:MovieClip = new MovieClip();
addChild(container_puce);

//Variables de stockage des données XML
var xml_url_file:XMLList = new XMLList();
var xml_link:XMLList = new XMLList();
var xml_target:XMLList = new XMLList();
var xml_texte:XMLList = new XMLList();
var xml_texte_x:XMLList = new XMLList();
var xml_texte_y:XMLList = new XMLList();
var xml_texte_align:XMLList = new XMLList();
var xml_texte_color:XMLList = new XMLList();
var xml_texte_size:XMLList = new XMLList();
var xml_texte_leading:XMLList = new XMLList();
var xml_texte_leftMargin:XMLList = new XMLList();
var xml_texte_rightMargin:XMLList = new XMLList();

//Paramètres du diaporama
var numImageON:Number; //Numéro de l'image affiché
var nbImages:Number; //Nombre total d'image dans le diaporama
var zoneActive = "A"; //Zone d'affichage active (A/B)
var timeDisplay:Number; //Temps d'affichage
var timeSwitch:Number; //Temps de transition
var urlSound; //Fichier son du diaporama
var interval:Timer; //Interval de temps entre chaque switch automatique

//Chargement du fichier XML
var fichierXML:URLRequest = new URLRequest("setup.xml");
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);
loader.load(fichierXML);

//Traitement du fichier XML
function onLoaded(e:Event):void
{
//Récupère le flux XML
var xml:XML = new XML(e.target.data);

//Récupèration des paramètres du diaporama
timeDisplay = xml.params.tpsDisplay;
timeSwitch = xml.params.tpsSwitch;
urlSound = xml.params.sound;

//Décomposition du flux XML et stockage des données
xml_url_file = xml.images.image.url_file;
xml_link = xml.images.image.link;
xml_target = xml.images.image.link.attribute("target");
xml_texte = xml.images.image.texte;
xml_texte_x = xml.images.image.texte.attribute("x");
xml_texte_y = xml.images.image.texte.attribute("y");
xml_texte_align = xml.images.image.texte.attribute("align");
xml_texte_color = xml.images.image.texte.attribute("color");
xml_texte_size = xml.images.image.texte.attribute("size");
xml_texte_leading = xml.images.image.texte.attribute("leading");
xml_texte_leftMargin = xml.images.image.texte.attribute("leftMargin");
xml_texte_rightMargin = xml.images.image.texte.attribute("rightMargin");

//Compte le nombre d'image présente dans le diaporama
nbImages = xml_url_file.length();

//Création d'une puce pour chaque image
for(var i=0; i<nbImages; i++)
{
var puce:MovieClip = new btn(); //Création d'une nouvelle puce
container_puce.addChild(puce); //Ajout de la nouvelle puce sur la scène
container_puce["puce"+i] = puce; //Définit le nom de la nouvelle puce
container_puce["puce"+i].x = 15 * (i+1); //Définit la position sur X de la nouvelle puce
container_puce["puce"+i].y = 215; //Définit la position sur Y de la nouvelle puce
container_puce["puce"+i].uid = i; //Enregistre l'identifiant de l'image attribuée à cette puce
}

//Lancement du diaporama
affiche_image(0,true);
}

//Transition entre les images du diaporama (num = numéro de l'image à afficher, dep = démarrage de la bannière oui/non)
function affiche_image(num:uint,dep:Boolean)
{
//Chargement de l'image
var urlImage:URLRequest = new URLRequest(xml_url_file[num]);
var loader:Loader = new Loader();
loader.load(urlImage);

//Si c'est l'ouverture de la bannière, on ajoute un délais d'affichage pour la première image
var tmp:Number;
if(dep == true) { tmp = 1.0; } else { tmp = 0.0; }

//Si la zone d'affichage actuelle est la zone A, alors on affiche avec la zone B
if(zoneActive == "A")
{
//Définit la zone d'affichage active
zoneActive = "B";

//Vide la zone d'affichage
while(diaporama.imageB.zoneLoad.numChildren > 0) { diaporama.imageB.zoneLoad.removeChildAt(0); }

//Masque la zone d'affichage
diaporama.imageB.alpha = 0.0;

//Mise au premier plan de la zone d'affichage
diaporama.addChild(diaporama.imageB);

//Insertion de l'image dans la zone d'affichage
diaporama.imageB.zoneLoad.addChild(loader);

//Création de la zone de texte
affiche_texte("B",num,dep);

//Affiche la zone d'affichage
TweenLite.to(diaporama.imageB, timeSwitch, { delay:tmp, alpha:1.0, ease:Expo.easeOut } );
}
else //Sinon c'est que la zone d'affichage actuelle est la zone B, et donc on affiche avec la zone A
{
//Définit la zone d'affichage active
zoneActive = "A";

//Vide la zone d'affichage
while(diaporama.imageA.zoneLoad.numChildren > 0) { diaporama.imageA.zoneLoad.removeChildAt(0); }

//Masque la zone d'affichage
diaporama.imageA.alpha = 0.0;

//Mise au premier plan de la zone d'affichage
diaporama.addChild(diaporama.imageA);

//Insertion de l'image dans la zone d'affichage
diaporama.imageA.zoneLoad.addChild(loader);

//Création de la zone de texte
affiche_texte("A",num,dep);

//Affiche la zone d'affichage
TweenLite.to(diaporama.imageA, timeSwitch, { delay:tmp, alpha:1.0, ease:Expo.easeOut } );
}

//Déclare le numéro de l'image affichée
numImageON = num;

//Actualise les puces
for(var i=0; i<(container_puce.numChildren); i++) //Réinitialise toutes les puces
{
container_puce["puce"+i].gotoAndStop("off");
}
container_puce["puce"+num].gotoAndStop("on"); //Active la puce de l'image affichée

//Paramétrage pour le switch automatique
interval = new Timer((timeDisplay * 1000),1);
interval.addEventListener(TimerEvent.TIMER_COMPLETE, autoSwitch);
interval.start();
}

//Affichage du texte sur les images (zone=A/B, id=numéro de l'image)
function affiche_texte(zone:String,id:uint,dep:Boolean)
{
//Si c'est l'ouverture de la bannière, on ajoute un délais d'affichage pour la première image
var tmp:Number;
if(dep == true) { tmp = 1.0; } else { tmp = 0.0; }

//Récupère le texte à afficher
var texte:String = xml_texte[id];

//Création du style de la zone de texte
var style:TextFormat = new TextFormat();
style.font = "Arial";
style.italic = false;
style.bold = false;
style.color = xml_texte_color[id];
style.size = xml_texte_size[id];
style.underline = false;

if(xml_texte_align[id] == "left") { style.align = TextFormatAlign.LEFT; }
else if(xml_texte_align[id] == "right") { style.align = TextFormatAlign.RIGHT; }
else if(xml_texte_align[id] == "center") { style.align = TextFormatAlign.CENTER; }
else if(xml_texte_align[id] == "justify") { style.align = TextFormatAlign.JUSTIFY; }
else { style.align = TextFormatAlign.LEFT; }

style.leftMargin = xml_texte_leftMargin[id];
style.rightMargin = xml_texte_rightMargin[id]; style.leading = xml_texte_leading[id];

//Création de la zone de texte
var zoneTXT:TextField = new TextField();
zoneTXT.blendMode = BlendMode.LAYER;
zoneTXT.alpha = 0.0;
zoneTXT.x = xml_texte_x[id];
zoneTXT.y = xml_texte_y[id];
zoneTXT.width = 465 - xml_texte_x[id];
zoneTXT.height = 230 - xml_texte_y[id];
zoneTXT.selectable = false;
zoneTXT.multiline = true;
zoneTXT.background = false;
zoneTXT.border = false;
zoneTXT.defaultTextFormat = style;
zoneTXT.htmlText = texte;

if(zone == "A")
{
//Ajout le texte sur l'image le texte
diaporama.imageA.zoneLoad.addChild(zoneTXT);

//Affiche le texte
TweenLite.to(zoneTXT, 1, { delay:1+tmp, alpha:1.0, ease:Expo.easeOut } );
}
else
{
//Ajout le texte sur l'image le texte
diaporama.imageB.zoneLoad.addChild(zoneTXT);

//Affiche le texte
TweenLite.to(zoneTXT, 1, { delay:1+tmp, alpha:1.0, ease:Expo.easeOut } );
}
}

//Lien sur le diaporama
function goExtURL(e:MouseEvent):void
{
var url:URLRequest = new URLRequest(xml_link[numImageON]);
navigateToURL(url, xml_target[numImageON]);
}
zoneBTN.addEventListener(MouseEvent.CLICK, goExtURL);

//Rotation automatique des images
function autoSwitch(e:TimerEvent):void
{
//Suppression de l'écouteur
interval.removeEventListener(TimerEvent.TIMER_COMPLETE, autoSwitch);

//Détermine le numéro de l'image suivante
var nextIMG = numImageON + 1;

//Boucle entre la dernière et la première image
if(nextIMG > (nbImages-1)) { nextIMG = 0; }

//Affichage de la nouvelle image
affiche_image(nextIMG,false);
}

//Ambiance sonore du diaporama
var fichierSon:URLRequest = new URLRequest("son/musique.mp3");

var conteneurSon:Sound = new Sound();
conteneurSon.load(fichierSon);

var ecouteur:SoundChannel = new SoundChannel();
ecouteur = conteneurSon.play();

Ensuite, dans votre bibliothèque, il faut créer la puce.
function name_puce(e:MouseEvent):void
{
//Suppression de l'écouteur en cours
MovieClip(root).interval.removeEventListener(TimerEvent.TIMER_COMPLETE, MovieClip(root).autoSwitch);

//Affichage de la nouvelle image
MovieClip(root).affiche_image(uid,false);
}
puce.addEventListener(MouseEvent.CLICK, name_puce);

Enfin, voici le fichier XML :

<?xml version="1.0" encoding="UTF-8"?>
<root>
<!-- Paramètres de la bannière -->
<params>
<tpsDisplay>2000</tpsDisplay> <!-- Durée de l'affichage d'une image en secondes -->
<tpsSwitch>1</tpsSwitch> <!-- Durée des transitions en secondes -->
<sound>son/musique.mp3</sound> <!-- URL du fichier son -->
</params>
<!-- Liste des images dans la bannière -->
<images>
<image>
<url_file>images/img1.jpg</url_file> <!-- URL du fichier (JPG/PNG/GIF/BMP) -->
<link target="_blank">http://www.google.fr/</link> <!-- URL du lien sur l'image. Paramètre "target" = mode d'ouverture du lien (_blank/_self) -->
<texte x="25" y="40" align="left" color="0xFF0000" size="8" leading="5" leftMargin="5" rightMargin="5"></texte>
<!--
Paramètres de la zone de texte :
"x" = position sur X [0;465] du coin supérieur gauche de la zone de texte
"y" = position sur Y [0;230] du coin supérieur gauche de la zone de texte
"align" = alignement du texte (left/right/center/justify)
"color" = couleur du texte
"size" = taille de la police
"leading" = valeur de l'interlignage
"leftMargin" = marge du texte à gauche
"rightMargin" = marge du texte à droite

=> Zone de texte prenant en compte les balises <b></b> | <i></i> | <u></u> | <br/>
=> Les caractères "<" et ">" doivent être encodé en UTF-8 : "<" = "&lt;" et ">" = "&gt;"
-->
</image>
</images>
</root>

Aperçus & Sources : (Flash CS5)
Commentaire(s)
Aucun.