Fil d'ariane
Ligams » Publications » Serveur Web » Carrousel Flash AS3
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
Changement de la police
Jeudi 29 Juillet 2010 22:45:02 - Greg
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.
Affichage des images
Jeudi 03 Juin 2010 09:15:02 - Nea
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.
Réponse...
Jeudi 03 Juin 2010 09:00:03 - Nea
Publiez tout de même ce commentaire, cela peut en aider d'autres, je pense.
Bonne journée.
lien
Mercredi 12 Mai 2010 18:00:02 - ml
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
LIEN HTML RÉPONSE
Lundi 03 Mai 2010 16:45:02 - Didier
ex : link="true" url="http://www.didierdefrance.fr"
Bravo pour ce carrousel très réussis.
Lien HTML
Mercredi 03 Mars 2010 14:15:02 - Alex
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
Votez pour cet article
Vote: 4,94/5
(Nombre de votant(s) : 18)
Traduction automatique
Navigation secondaire
Derniers articles
