Créer un diaporama pas à pas - Dixième partie - Comment créer une barre présentant des images miniatures

Bonjour, voici la suite de cette série de tutoriaux. Pour une présentation de cette série, voir le sommaire ici.

Objectif

Un diaporama intègre souvent une barre de miniatures, c'est-à-dire affiche en petit les images de l'album, pour permettre à l'utilisateur d'y choisir d'un clic l'image qu'il voudrait voir s'afficher en grand.

Une telle barre de miniatures peut également exister dans d'autres programmes qu'un diaporama. Cet article se penche sur la réalisation d'une barre de miniatures, indépendamment du programme du diaporama. Aussi, même un lecteur qui ne suivrait pas cette série de tutoriaux peut sans problème l'aborder. Pour le diaporama, nous verrons par la suite comment l'y intégrer.

Voyez en pièce jointe la barre de miniatures qui sera confectionnée.

...

>>> Lire le tutoriel dans son intégralité

Bonjour Lilive
félicitation pour ton tuto,

je suis vraiment débutant mais ton tuto me soigne …
j'ai hâte de voir la suite "l'intégration du diaporama au vignettes"

merci, A+

Bonjour,

J'ai effectué les consignes avec précision pour la création de ce diaporama. J'ai mis en ligne le diaporama sur mon site. L'interface du diaporama apparaît mais l'animation ne se lance pas. La première photo ne s'affiche même pas et les boutons ne fonctionne pas, même si la main du curseur fait son apparition au survol. L'animation fonctionnait très bien dans l'aperçu du logiciel. Le swf fonctionne également très bien quand je clique en local. Mais il ne se lance pas sur ma page html en local. Aucune erreur est à noter dans la sortie.

Je vous transmet mon code actionscript :

var imageChargementMC:MovieClip = this.createEmptyMovieClip("image1",this.getNextHigestDepth());
var imageCouranteMC:MovieClip = this.createEmptyMovieClip("image2",this.getNextHighestDepth());

imageChargementMC._x = 100;
imageChargementMC._y = 100;
imageCouranteMC._x = 100;
imageCouranteMC._y = 100;

this._x = centreX - this._width / 2;
this._y = centreY - this._height / 2;

// ********* Les boutons ************************************
function chargerImageSuivante() {
imageActuelle++ ;
if (imageActuelle == 4) imageActuelle = 0;
chargerImage();
}
function chargerImagePrecedente() {
imageActuelle-- ;
if (imageActuelle == -1) imageActuelle = 3;
chargerImage();
}
var nextBtn:MovieClip = this["nextBtn"];
nextBtn.onPress = chargerImageSuivante;
var lastBtn:MovieClip = this["lastBtn"];
lastBtn.onPress = chargerImagePrecedente;

// ********** Chargement des images **************************
var mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();

mclListener.onLoadInit = function () {
imageChargementMC._alpha = 100;
imageCouranteMC.onEnterFrame = transition;

}
mcl.addListener(mclListener);

function chargerImage() {
mcl.loadClip("images1/image" + imageActuelle + ".jpg", imageChargementMC);
}

// ********** Transition entre les images ********************************
function transition() {
imageCouranteMC._alpha -= 10;
if (imageCouranteMC._alpha <= 0) {
imageCouranteMC.onEnterFrame = undefined;
permuterProfondeurs(); // Exécute la fonction permuterProfondeurs.
}
}
function permuterProfondeurs() {
imageChargementMC.swapDepths(imageCouranteMC);
var temp:MovieClip = imageCouranteMC;
imageCouranteMC = imageChargementMC;
imageChargementMC = temp;
}

// ********** Chargement de la première image *******************************
var imageActuelle:Number = 0;
chargerImage(); // Charge la première image.



cadre_mc.getNextLowestDepth();




********************************************************************************
***********


Je vous donne également mon code pour l'insertion de mon animation dans ma page html :

<object type="application/x-shockwave-flash" data="photos/diaporama.swf" width="800" height="600">
<param name="movie" value="photos/diaporama.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high"/>
</object>



J'espère que quelqu'un pourra m'aider.
Je vous remercie d'avance.
A bientôt
gmarcilly

EDIT Joni: Pas la peine de poster plusieurs fois le même message dans plusieurs rubriques. J'ai supprimer l'autre.