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.

Télécharger les sources

Voir le résultat
]]> 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)

Télécharger les sources

Voir le résultat

Pour l’explication du code, tout est commenté dans la source, ou dans le premier article sur le carousel.

Utilisation

1. Téléchargez la source
2. Décompressez l’archive
3. 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,
4. 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
5. 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);
       }