ActionScript 3.0, l'essentiel sous la main Adobe Flash Accueil
Fiches
Boutique
Contact
Créer une galerie de photos dynamique - Carrousel Linéaire
Création d'un carousel linéaire en 2D, donc compatible avec FlashPlayer9 :
Code principal à mettre sur la première image clé vide de la time line. Il ne doit y avoir qu'une seul image clé vide et un seul calcque au final.

//Imports Flash
import flash.display.MovieClip;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

var largeurVignette:Number = 200; //Largeur des vignettes
var hauteurVignette:Number = 150; //Hauteur des vignettes
var espaceVignette:Number = 50; //Espace entre les vignettes
var tailleCarousel:Number;

//Création du carousel
var carrousel:MovieClip = new MovieClip();
carrousel.x = 0;
carrousel.y = 125;
carrousel.addEventListener(Event.ENTER_FRAME, mouvCarousel);
addChild(carrousel);

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

//Création des vignettes
function onLoaded(e:Event):void
{
//Récupère les données du XML
var xml:XML = new XML(e.target.data);

//Traitement des données XML
var nb:XMLList = xml.photos.attribute("nb");
var xmlData0:XMLList = xml.photos.photo.filename;
var xmlData1:XMLList = xml.photos.photo.url;
var xmlData2:XMLList = xml.photos.photo.target;
var xmlData3:XMLList = xml.photos.photo.title;
var xmlData4:XMLList = xml.photos.photo.description;

//Calcul la taille du carousel
tailleCarousel = (parseInt(nb) * largeurVignette) + (parseInt(nb) * espaceVignette) - espaceVignette;

//Création des vignettes
for(var i=0; i<nb; i++)
{
//Création d'une nouvelle vignette
var b:MovieClip = new box();
carrousel.addChild(b);

carrousel["box"+i] = b; //Nom de la vignette

//Positionnement de la vignette
carrousel["box"+i].x = (largeurVignette + espaceVignette) * i;

//Paramètres de la vignette
carrousel["box"+i].uid = i;
carrousel["box"+i].url = xmlData1[i];
carrousel["box"+i].target = xmlData2[i];
carrousel["box"+i].titreImage.text = xmlData3[i];
carrousel["box"+i].descrImage.text = xmlData4[i];
carrousel["box"+i].affiche_photo(dossierPhoto+xmlData0[i]);
}
}

//Déplacement des vignettes
function mouvCarousel(e:Event):void
{
var vitesse = (mouseX - stage.stageWidth/2)/10; //Vitesse de déplacement

//Limite du déplacement
if((carrousel.x >= 0) && (mouseX < stage.stageWidth/2))
{
vitesse = 0;
}
if((carrousel.x < -(tailleCarousel-stage.stageWidth)) && (mouseX > stage.stageWidth/2))
{
vitesse = 0;
}

//Application du déplacement
carrousel.x -= vitesse;
}

Création d'une vignette (on l'appelera "box") :
Insérer ensuite le code suivant dans le clip "box". ("box" n'est pas présent sur la scène, mais uniquement dans la bibliothèque)

//Imports Flash
import flash.display.Loader;
import flash.events.Event;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.MouseEvent;
import flash.net.URLRequest;

var uid:Number; //Identifiant
var url:String; //URL du lien
var target:String; //Mode d'ouverture du lien

//Chargement de la photo
var photo:Loader;
function affiche_photo(urlFile)
{
photo = new Loader();
photo.contentLoaderInfo.addEventListener(Event.COMPLETE, completeLoad);
photo.load(new URLRequest(urlFile));
}

//Affichage de la photo
function completeLoad(e:Event):void
{
photo.contentLoaderInfo.removeEventListener(Event.COMPLETE, completeLoad);
zoneLoad.addChild(photo);
zoneLoad.width = MovieClip(root).largeurVignette;
zoneLoad.height = MovieClip(root).hauteurVignette;
reflet();
}

//Création du reflet
function reflet()
{
var bmd:BitmapData = new BitmapData(MovieClip(root).largeurVignette,MovieClip(root).hauteurVignette);
bmd.draw(zoneLoad); //Duplique la photo

var reflet:Bitmap = new Bitmap(bmd);
reflet.x = 0;
reflet.y = MovieClip(root).hauteurVignette * 2; //Positionne le reflet
reflet.smoothing = true; //Active le lissage
reflet.width = MovieClip(root).largeurVignette;
reflet.height = MovieClip(root).hauteurVignette;
reflet.scaleY = -1; //Renvers l'image sur Y (effet miroir vertical)
addChild(reflet);

addChild(masque); //Repositionne le masque dégradé par-dessus le reflet
}

//Zone cliquable
function onClick(e:MouseEvent):void
{
navigateToURL(new URLRequest(url),target);
}
btn.addEventListener(MouseEvent.CLICK, onClick);

Et enfin le fichier XML :

<?xml version="1.0" encoding="utf-8"?>
<root>
<photos nb="8">
<photo>
<filename>Chrysanthemum.jpg</filename>
<url>http://www.google.fr/</url>
<target>_blank</target>
<title>Image n°1</title>
<description>Description de l'image n°1</description>
</photo>
<photo>
<filename>Desert.jpg</filename>
<url>http://www.google.fr/</url>
<target>_blank</target>
<title>Image n°2</title>
<description>Description de l'image n°2</description>
</photo>

etc...

</photos>
</root>

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