Voici une dernière mise à jour sur la source du carousel as2. Ensuite, je proposerai une version AS3/PaperVision, car l’AS2… ça commence à dater 
Vous êtes plusieurs à avoir demandé des options particulières, et même si le but était que vous les développiez vous même, je n’ai pas pu m’empécher d’en piocher certaines et de les implémenter sur cette nouvelle version.
J’ai donc ajouté:
-appel de la ligthbox depuis le flash
-gestion de la taille des images que vous souhaitez afficher. Le masque et le reflet s’adaptent, vos images peuvent avoir des dimensions différentes.
-ajout d’une option pour gérer si on affiche une infobulle ou pas au rollOver
-ajout de la gestion de la transparence dans les images que vous balancez dans le carousel (.png)
Pour l’explication du code, tout est commenté dans la source, ou dans le premier article sur le carousel.
Utilisation
- Téléchargez la source
- Décompressez l’archive
- Remplissez le fichier xml/icons.xml avec les images que vous souhaitez afficher. Pour chaque image, renseignez :
- image, l’image aperçu, obligatoire, utilisée dans le carousel,
- grandeImage, l’image en grand, optionnel, si vide: pas de lightbox, getUrl au clic, si rempli: lightbox, chemin relatif de la grande image,
- tooltip, la légende, optionnel, utilisé pour la légende et la ligthbox,
- lien, le lien optionnel, si la lightbox n’est pas active, un clic sur l’image link vers ce lien,
- Ouvrez carousel.fla, et éditez les paramètres sur le calque settings, puis enregistrez et publiez le fla.
- var wScene:Number = 800;
//largeur du clip flash - var hScene:Number = 600;
//hauteur du clip - var radiusX:Number = 300;
//rayon horizontal du carousel - var radiusY:Number = 70;
//rayon vertical du carousel - var centerX:Number = wScene/2;
//centre horizontal du clip - var centerY:Number = hScene/2;
//centre vertical du clip - var nSpeed:Number = 0.05;
//vitesse de rotation - var perspective:Number = 70;
//perspective visuelle du carousel - var largeurIcons:Number = 200;
//largeur des images à afficher dans le carousel - var hauteurReflet:Number= 80;
//taille du reflet - var isLegende:Boolean = false;
//activation de l’affichage de la légende au rollOver, true ou false
- var wScene:Number = 800;
- Pour que la lightbox fonctionne, il faut bien pensez à mettre certains éléments dans le html:
- Si vous ne souhaitez pas utiliser la ligthbox, prennez exemple sur le fichier index.html. Laissez tous les attributs grandeImage vides dans le fichier xml.
- Si vous souhaitez utiliser la ligthbox, prennez exemple sur le fichier index_lb.html
- Dans le xml, remplissez bien l’attribut grandeImage. Si cet attribut est vide, un clic sur l’image ouvre le lien indiqué dans lien. Si cet atttribut est renseigné, alors l’image est ouverte avec la lightbox
- Inclure les fichiers js suivants pour que la lightbox fonctionne:
- Inclure la feuille de style de la lightbox :
- Placez la fonction suivante dans le head du fichier html
- Dans le flash, importez la classe ExternalInterface
import flash.external.*; - Depuis le flash, appelez la fonction js qui vous permet d’ouvrir la lightbox en lui passant les bons paramètres
myBtn.onRelease = function(){ ExternalInterface.call("SWFDelegate", this.grandeImage,this.tooltip); }
113 comments
lanner says:
juil 11, 2010
cedric ton idée est pas mal car moi il afallu que je fasse plusieurs flash pour arriver à ta solution, je n’ai pas non plus trouver comment modifier pour appeler un fichier
Par contre les tests que j’ai fait montre qu’il faut recharger la page complètement si on ne change que le contenu du xml , donc je pense que tu va avoir un soucis même si tu réussi, il n’y a que la solution d’appeler un autre fichier flash qui recharge le xml et le met à jour directement
chupa says:
août 19, 2010
Petite question j’aimerais savoir s’il est possible d’augmenter la police du label de chauqe image que l’on affiche sur le carroussel. J’ai beau essayé mais je ne trouve pas la variable. S’il y en a qui l’ont déjà fait ou essayé merki d’avance.
lanner says:
août 30, 2010
le texte au dessus des images se règle directement sur la partie creation et non dans la partie du code
sous flash : Fenêtre > Bibliothèque
Ensuite à droite clic sur icone legende_mc
A partir de la au milieu tu peux ajuster la police , couleur etc
chupa says:
août 30, 2010
je ne voyais pas du tout ou la changer
ça fonctionne merci beaucoup
Jo says:
sept 7, 2010
J’essaie d’afficher en permanence une info tirée du XML que j’ai ajoutée (« prix= »). Le problème c’est que soit je le mets dans le rollover et ça fonctionne (il va bien chercher l’info et m’affiche le clip), soit ça ne s’affiche pas et ça reste « undefined ».
Tout en haut j’ai mis :
if(isLegende==true){
hote_carousel_mc.attachMovie(« legende_mc », »legende_mc »,2);
clipLegende= hote_carousel_mc["legende_mc"];
clipLegende._alpha=0
// Rattachement prix
hote_carousel_mc.attachMovie(« prix_mc », »prix_mc »,3);
clipPrix= hote_carousel_mc["prix_mc"];
}
Ensuite j’ai fait une fonction :
//fonction d’affichage du prix
function affichePrix(cible:MovieClip){
clipPrix.onEnterFrame = function(){
this._x = cible._x ;
this._y = cible._y – (cible._height/2) + 65;
this.prix_txt.text=cible.prix;
this.prix_txt.autoSize = true;
this.bg_prix._width=this.prix_txt._width+10;
this.bg_prix._height=this.prix_txt._height+10;
}
}
Et j’appelle : affichePrix(this);
Merci d’avance si vous avez une solution !
sarahbernard says:
oct 8, 2010
Bonjour,
J’ai télécharger le caroussel v2 , il est vraiment super. J’aimerais lorsque je clique sur la vignette, elle pivote sur elle-meme en verticale et ouvre l’image en grand . Est-ce que c’est possible ? Quel serait le code et surtout où le placé ?
Merci pour votre aide
Cordialement
LutinCapuche says:
oct 8, 2010
Allo sarahbernard
Et bien avec flash 10 c’est maintenant tres simple de faire pivoter l’item verticalement, puisque tu as acces a la propriete z (en plus de x et y). Il faut juste faire un peu d’AS, si tu comprends le code tu trouveras tres facilement!
Sinon, je travaille aussi en freelance, a 50$ de l’heure
Bonne soiree!
Création site web Annecy says:
jan 13, 2011
la caroussel et bien fluide, très bon résultat, bravo.
jojo says:
mar 22, 2011
Bonjour,
bravo pour ce script !!!! mais j’ai un problème en local j’ai ralenti la vitesse pil poil au ralenti comme je veut mais dès que je l’envoie sur le serveur et que j’accède a la page ou le carousel ce trouve ca tourne a une vitesse folle!! comment puis je régler ce probleme svp ?
Rico says:
mai 28, 2011
Très bon tuto et facile à suivre. Cependant je n’arrive pas à afficher les infobulles sur les images. J’ai fait des recherches sur le net en vain. Aidez-moi s’il vous plaît. Merci.
Jack Monnet says:
déc 6, 2011
Salut les gars. Produit très intéressant, mais il est si simple. Je pensais que ce sera avec de vraies photos et plus de personnalisation, comme celle de http://www.flashxml.net.