ActionScript 3.0, l'essentiel sous la main Adobe Flash Accueil
Fiches
Boutique
Contact
Créer une galerie de photos dynamique - Carrousel Circulaire (2D)
Création d'un carousel circulaire 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 rayon_h = 300; //Rayon horizontal
var rayon_v = 50; //Rayon vertical
var largeurVignette:Number = 200; //Largeur des vignettes
var hauteurVignette:Number = 150; //Hauteur des vignettes
var nbVignette:Number;

//Fonctions utiles
// => Arrondir un chiffre à x chiffre après la virgule
function arrondir(n,p)
{
return Math.round(n*Math.pow(10,p))/Math.pow(10,p);
}
// => Récupérer la position d'un élément dans un tableau (abapter ici pour une recherche sur "id")
function searchPosInTable(searchValue,table)
{
for(var i=0; i<table.length; i++)
{
if(searchValue == table[i].id)
{
return i;
break;
}
}
}

//Création du carousel
var carrousel:MovieClip = new MovieClip();
carrousel.x = stage.stageWidth * 0.5;
carrousel.y = stage.stageHeight * 0.5;
carrousel.addEventListener(Event.ENTER_FRAME, calcul_niveau); //Calcul le niveau hiérarchique des vignettes (premier/arrière plan)
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;

nbVignette = parseInt(nb); //Enregistre le nombre de vignette dans le carousel
var angle = Math.round(360/nbVignette); //Angle entre chaque vignette (en degré)
//Création des vignettes
for(var i=0; i<nb; i++)
{
//Création d'une nouvelle vignette
var b:MovieClip = new box();
b.angle = i * angle; //Angle de départ de la vignette
carrousel.addChild(b);

var radian = (i * angle) * Math.PI / 180; //Les angles en trigo sont en radian

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

//Position de la vignette dans le cercle
carrousel["box"+i].x = Math.round(rayon_h * Math.cos(radian)); //Trigo : cos(µ) = x / r, donc x = r * cos(µ)
carrousel["box"+i].y = Math.round(rayon_v * Math.sin(radian)); //Trigo : sin(µ) = y / r, donc y = r * sin(µ)

//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 de la vignette
carrousel["box"+i].addEventListener(Event.ENTER_FRAME, mouvement);

//Positionnement de la vignette (du première plan à l'arrière plan)
carrousel["box"+i].addEventListener(Event.ENTER_FRAME, position);
}
}

//Déplacement des vignettes
function mouvement(e:Event):void
{
//Déplacement
var vitesse = mouseX; //[0;550]
vitesse = vitesse - (stage.stageWidth / 2); //[-225;225]
vitesse = vitesse / 100; //[-2.25;2.25] => réduction de la valeur par 100 pour une vitesse de rotation plus lente
e.target.angle += vitesse;

//Boucle sur [0;360] degré
if(e.target.angle > 360) { e.target.angle = 0; } //Si l'angle dépasse les 360°, on le remet à 0 pour rester sur l'interval [0;360]

//Calcul de la position sur la scène
var radian = e.target.angle * Math.PI / 180; //Convertion degré > radian
e.target.x = Math.round(rayon_h * Math.cos(radian)); //Position sur X
e.target.y = Math.round(rayon_v * Math.sin(radian)); //Position sur Y

//Calcul le zoom (profondeur)
var valScale = e.target.y; //[-100;100]
valScale = valScale / 100; //[-1;1]
valScale = valScale * -1; //[1;-1] => on inverse pour que cela réduise quand on recule
valScale = valScale + 1; //[2;0]
valScale = valScale / 2; //[1;0]
valScale = valScale / 2; //[0.5;0]
valScale = arrondir(valScale,2); //Arrondi la valeur à 2 chiffres après la virgule

//Applique le zoom
e.target.scaleX = 1.0 - valScale;
e.target.scaleY = 1.0 - valScale;
}

//Positionnement des vignettes (du première plan à l'arrière plan)
function position(e:Event):void
{
var item:Sprite = Sprite(e.target);
carrousel.setChildIndex(item, searchPosInTable(e.target.uid,niveaux)); //Repositionne la vignette à partir du tableau des niveaux
}

//Etablissement de la hiérarchie des vignettes (du première plan à l'arrière plan)
var niveaux:Array;
function calcul_niveau(e:Event):void
{
niveaux = new Array();
for(var i=0; i<nbVignette; i++)
{
niveaux.push({id:carrousel["box"+i].uid,level:carrousel["box"+i].y}); //Enregistre la position sur Y (level) de chaque vignette
}
niveaux.sortOn("level", Array.NUMERIC); //Tri les vignettes du plus prêt (y+) au plus loin (y-)
}

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 = MovieClip(root).largeurVignette * -0.5; //Positionne le reflet
reflet.y = MovieClip(root).hauteurVignette * 1.5; //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.