Carrousel Flash AS3
Pour vos applications web, voici un petit carrousel en Flash (Actionscript 3), il reste assez classique, et l'effet est plutôt sympa. Il est très léger (11 kilo-octets).
Vous pouvez avoir un aperçu en action sur la page de démonstration du carrousel d'image.
Implémentation
L'animation charge un fichier XML externe, où les vignettes sont gérées ainsi que d'autres fonctionnalités. Il implémente la classe TweeLite pour une meilleure fluidité dans la gestion des Tween.
Il implémente également la classe OBO_tooltip (légèrement modifiée) disponible sur OneByOneBlog (merci à lui s'il passe par ici).
Avantages :
- Nombre illimité de vignette (potentiellement...)
- Réglage des dimensions dans le XML
- Réglage de la vitesse,
- Possibilité de mettre un lien sur la vignette, ou d'ouvrir une fenêtre de description dans le flash,
- La fenêtre de description accepte le HTML dans le flash (ne pas abuser des mises en forme)
Cette widget cherchera a ouvrir le fichier icons.xml, mais vous pouvez également choisir de générer votre propre XML, pour cela passer une Flashvars "url", il faudra insérer l'animation de cette manière :
<object type="application/x-shockwave-flash" data="caroussel.swf" width="600" height="300">
<param name="movie" value="caroussel.swf" />
<param name="flashvars" value="url=adresse_de_mon_xml.xml" />
</object>
Ou avec Swfobject, pour cela, reportez vous à l'article sur l'insertion d'objets Flash dans du HTML.
Un fois déboguée, cette animation sera placée sur licence creative commons, elle est placée pour le moment en téléchargement gratuit, et vous pouvez l'utiliser et la revendre comme bon vous semble en l'état.
Téléchargement du Flash
Ce fichier contient :
- L'animation flash SWF,
- Un fichier XML exemple,
- Un fichier HTML ou l'animation est intégrée,
- Des images servant d'exemple
N'hésitez pas à nous faire part de vos retours en répondant à ce billet.
Commentaires 
Ajouter un commentaire
Flux RSS
Je bloque cependant sur un détail: comment modifier la taille de la police du tooltip ? Quelqu'un a réussi à faire cette modification ?
J'ai trouvé, pour ceux que cela intéresse, c'est le paramètre wmode qui doit comporter "transparent"
C'est magnifique !
Merci encore
Annick
Merci pour ce magnifique carrousel, tout est ok sauf un détail, j'ai une image en fond de page et le carrousel tourne sur un "carré blanc" bien que j'ai enlevé : 'bgcolor', '#ffffff'.
Où puis-je intervenir pour que le fond soit transparent ?
Merci
Très bon carousel, vraiment le meilleurs de mes recherches sur le web;
mon pb, c'est que je souhaite l'intégrer dans un post wordpress,sur la page http://...e-article/
J'utilise swfObject, et vous pouvez voir en dessous un flash classique pour un panorama 360 qui fonctionne, mais pour ce qui est de l'actionscript3, ça plante...
Quelaun a déjà rencontré ça ? Car hors d'un post wordpress, sur la page index conçue avec le package, tout fonctionne parfaitement !!
Merci
tout d'abord merci pour ce superbe carrousel.
En revanche je n'arrive pas à charger un .xml externe.
Le carrousel cherche toujours le fichier icons.xml meme si je rajoute ceci: <param name="flashvars" value="url=icons_2.xml" />
Le fichier icons_2.xml est bien présent , dans le meme répertoire, et au bon format, donc je ne comprend pas :(
pouvez vous m'aider ? merci
Je suis également interéssé pour faire un zoom genre qui double la taille lorsque l'on clic sur une image.
Ca serait plus sympa !
Merci pour la solution
Stef
Merci tout de même pour l'exemple et peut être le fla
en exécédent (j'ai besoin de 14 items), plus rien n'apparait sur ma page. Qu'est-ce que j'oublie de faire?
Merci d'éclairer ma lanterne
superbe Carrousel, seul bémol sur les liens : pas de gestion de la cible dans le XML, et le HTML du descriptif ne supporte pas les liens. Pour ce dernier point, il n'y a pas de moyen d'y remédier? Sans avoir le fichier source, c'est pas facile de modifier des paramètres ;-)
Merci
mettre mes photos à la place de celles du dossier,
mettre les textes qui vont avec, ainsi que les liens.
Donc ça marche quand j'ouvre dans internet explorer.
Mais je gère mon site (www.lamaisondeditions.fr) avec Webcreatpro, et je ne sais pas comment mettre le carrousel en ligne. Quand je le rentre comme animation flash, rien ne marche...
Bien entendu, je suis assez basique au niveau de mes connaissances en html, xml et tutti quanti...
juste une question, pas possible de mettre le lien en terget="_blank" sur une vignette?
Je travaille actuellement sur un site en serveur interne, j'ai utilisé le caroussel très facilement sur un autre site, cependant ici j'aimerais l'utiliser, mais il faudrait que je change l'url du fichier XML dans le SWF.
Je sais que le flash n'est pas open source et donc il n'est pas possible de faire cela.
Existe t'il une synthaxe à utiliser pour changer l'URL , du meme genre que pour inclure un deuxieme caroussel?
Merci beaucoup!
en tout cas je viens de réussir à mettre un deuxième caroussel en collant le code suivant après le code </noscript> :
<object type="application/x-shockwave-flash" data="carousel_as3.swf" width="1000" height="400">
<param name="movie" value="carousel_as3.swf" />
<param name="flashvars" value="url=icons2.xml" />
<param name="bgcolor" value="#000000" />
avec pour un autre fichier que j'ai nommé icons2.xml et que j'ai laissé dans le m^me dossier que le premier.
Vous pouvez voir le résultat sur mon site
Encore merci pour ce caroussel
Je suis également très intéressé pour mettre 2 caroussels sur une même page. Il faudrai fournir un deuxième fichier swf qui pointe vers un autre fichier que icons.xml.
Merci encore pour ce super caroussel.
Stef
Mes essais me montre bien les 2 carrousels mais avec les 26 mêmes images comment faire pour avoir les 26 autres
d'avance merci
Excellent caroussel que j'utilise d'ailleurs sur mon site.
Je voudrai juste savoir si il est possible d'agrandir ou de zoomer les photos une fois que l'on clique dessus !!
Merci !
Peut on préciser pour chacun des liens le target correspondant ? Par défaut, tous les liens s'ouvrent dans la même fenêtre... Peut on définir une propriété "_blank" ?
Sinon, merci pour cette application !!!
J'ai réussi a insérer le caroussel dans mon site.
Mais comme j'ai un fond de couleur bleue, je voudrais savoir comment changer la police de caractère, et sa couleur.
Merci ))
Ce carrousel est vraiment bien fait, mais je souhaiterais modifier la couleur de la police, voir même la police elle même, comment faire cela sans le fla ?
Merci d'avance pour votre aide.
Déjà, félicitations pour ce magnifique carrousel. Je m'en suis inspirée afin de pouvoir réaliser le mien, avec mes propres images. J'ai donc réalisé de nouvelles vignettes, que j'ai renommé de la même façon (c'est à dire icon1.png, icon2.png etc.). J'ai remplacé chacun des liens en fonction des vignettes (en exemple, j'ai pris google.fr ; voila.fr ; yahoo.fr ...). J'ai également modifié les dimensions des images dans le xml en fonction des miennes.
Lorsque je lance mon fichier html, le carrousel ne s'affiche pas. D'où cela peut-il venir ?
Merci d'avance et encore bravo.
Publiez tout de même ce commentaire, cela peut en aider d'autres, je pense.
Bonne journée.
Bonjour,
Je souhaiterai savoir s'il est possible d'insérer un lien dans la fenêtre de description.
De plus, j'ai intégrer le carrousel dans une page existante et quand je choisi un lien direct quand je cliques sur une des icône, cela charge la page que j'ai demandé dans l'espace du flash & non une nouvelle page entière.
Merci d'avance
PS : il est top votre carrousel !
Mathieu
ex : link="true" url="http://...e.fr"
Bravo pour ce carrousel très réussis.
Très bon travail. Juste une petite remarque :
vous dites : Possibilité de mettre un lien sur la vignette, ou d'ouvrir une fenêtre de description dans le flash
Pourrait-on savoir comment faire ?
De plus est il possible de gérer l'écartement entre 2 images ?
D'avance Merci