Tuto flash : faire un caroussel v2
Le 17 mai 2008
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:
<script type="text/javascript" src="js/prototype.js" ></script> <script type="text/javascript" src="js/scriptaculous.js ?load=effects" ></script> <script type="text/javascript" src="js/lightbox.js" ></script> - Inclure la feuille de style de la lightbox :
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> - Placez la fonction suivante dans le head du fichier html
<script type="text/javascript"> function SWFDelegate(url,caption) { var objLink = document.createElement('a'); objLink.setAttribute('href',url); objLink.setAttribute('rel','lightbox'); objLink.setAttribute('title',caption); Lightbox.prototype.start(objLink); } </script> - 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); }
Commentaires
31 Réponses à “Tuto flash : faire un caroussel v2”
Répondre
Bravo pour l’evolution de ce caroussel :)
Par contre j’ai une nouvelle requête , j’utilise ceci :
http://www.inetis.ch/ressources/laboratoire/amelioration-du-script-slimbox.html
(PS si le lien dérange je pense que tu pourras l’enlever), c’est un lightbox modifié qui permet de faire défiler plusieurs images sur un seul affichage une fois que l’on clic.
Donc ma question est ce qu’il y moyen d’évoluer le lightbox que tu propose dans ce sens la, car lorsque l’on clic sur une image il est parfois bien de pouvoir en afficher plusieurs :)
Merci
Hello Lanner,
alors la, tu n’as vraiment plus grand chose à faire, juste lire la doc de la slimbox qui explique comment faire un groupe d’image “image set”!
Donc je te laisse chercher :)
A+
Re :)
Heu le truc c’est que je sais l’utiliser dans une page html , vu qu’il faut placer dans le lien de l’image un : …rel=”lightbox[nom]” … (j’utilise un css pour cacher les images que je souhaite afficher dans le groupe) pour regrouper les images, par contre pour l’utliser dans ton caroussel , la je ne sais pas ou attribuer ce ‘rel’ :)
Donc si tu pouvais juste me guider pour ca
Merci
Alors,
La seule chose qui est faite depuis le fla est d’appeler la fonction javascript SWFDelegate avec des paramètres. La fonction js se trouve dans le fichier html, et crée le lien lightbox dynamiquement en lui mettant les bons attributs.
Donc à cet endroit, tu met le rel que tu souhaites.
Le truc qu’il faudrait que tu rajoutes, pour que le js connaisse les autres images du groupe, c’est les liens sans les images avec le bon rel dans ta page html. Car sinon il considèrera que ton groupe n’a qu’une image… J’espère être claire.
A+
hmm,
J’avoue ne pas réellement saisir, car concretement la fonction dans le html est appelé une fois, mais comment tu attribue un groupe en fonction de l’image clické dans le caroussel?
Car il faudrait à ce compte la avoir une balise dans icon.xml : pour chaque image un groupe : rel “…” si besoin et ensuite dans le page html il faudrait placer les autres images avec le meme ‘rel’ du groupe, ce serait nickel comme cela:
icon.xml :
index_lb.html :
<a href=”test2.jpg” rel=”lightbox[test]” title=”ceci est le test2” style=”display:none”>
<a href=”test3.jpg” rel=”lightbox[test]” title=”ceci est le test3” style=”display:none”>
Dans cet exemple pour une image du caroussel ce serait simple à mettre en place si cela était comme cela , mais je bloque sur l’histoire du groupe ‘rel’ par image affiché dans le caroussel
Merci ^^
oups mon icon.xml à pas pris :)
je voulais montrer la meme ligne actuel du icon.xml avec dedans une balise :
rel “lightbox[test]“
bonjour et merci pour ce magnifique tuto.
J’ai russi a integrer le carousel a mon site, mais je ne parvient pas a afficher mes images grace a la Lightbox. quand je clic sur une image, le carousel disparai mai mon image napparait pas.
Pourrai tu m’éclairer sur la derniere etape :
“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); }”
En fait je ne comprend pas ou je doit inserrer cette fonction. dans le Flash?, dan le HTML???
peut tu m’aider.
Merci d’avance.
jessima.(graphiste débutant)
Bonjour
Merci pour ton carroussel je le trouve vraiment au top !
J’aurais une petite question, comment peut on ajouter un lien sur l’image de la lightbox ?
Est ce possible ?
Merci pour ta réponse
Bonjour tizouit
Alors pour rajouter un lien sur l’image même dans la lightbox, ça me parait un peu compromis, ce n’est pas prévu dans le système de lightbox, il faudrait trifouiller le js.
Par contre tu peux très facilement rajouter un lien dans le texte tooltip de la description de l’image(dans le xml), il s’affichera dans la description en dessous de l’image. (en html bien sur)
Est ce que ça te convient comme ça?
A+
Merci lutinCapuche pour ta réponse mais malheureusement en essayant d’ajouter un lien dans le tooltip comme tu m’a conseillé de le faire le carousel entier n’apparait plus !!
:-s j’ai pourtant tout essayé je pense !
en language simple :
blablabla juste après le descriptif peut être un probleme de syntaxe…
Oups il y a la syntaxe du href qui n’est pas passé dans le message !
tizouit,
Mmh oui effectivement, c’est normal, car tu ne peux pas insérer de code html dans le contenu de l’attribut tooltip.
Il faudrait donc rajouter 2/3 lignes de codes dans le fla pour concaténer le lien mis dans l’attribut lien du xml et le tooltip.
Ce qui donnerai :
jessima,
Peux tu m’envoyer un lien de la démo pour que je vois d’où peux venir l’erreur?
Pour t’éclairer sur la dernière étape : la fonction js est déjà appelé dans le fla source.
C’est la fonction javascript ”SWFDelegate”
Mais pour que cela veuille dire quelque chose, il faut que cette fonction existe dans ton fichier html. Elle y est dans le fichier d’exemple index_lb.html également dans le pack en téléchargement.
J’espère être plus claire!
Bonjour LutinCapuche
Merci pour ton aide mais flash m’indique une erreur de syntaxe suite à l’integration des lignes de codes que tu m’as fournies et malheureusement je suis vraiment novice en flash et je n’arrive pas à déterminer l’erreur.
Au secours !!! Merci
finalement après m’être bien bien cassé la tête ! j’ai intégré ceci et mon .fla compile normalement à présent…
myItem.tooltip=nodes[i].attributes.tooltip + ““+myItem.tooltip+”“;
… mais dans mon xml je n’arrive pas a le réinterprété pour avoir un lien :-(
um, je vois que tu débute vraiment.
Quand tu écris ça :
Ca veut dire que tu place la description une deuxieme fois dans la description (myItem.tooltip), et entre les balises
.. sauf que ca ne veut rien dire car une balise lien toujours un attribut href qui indique la cible du lien. Si pas de cible, pas de lien !
Ce que j’essayai d’écrire dans les commentaires mais ce n’est pas passé, c’était de mettre quelque chose du genre :
Il faut que la propriété myItem.lien existe bien entendu (lien renseigné dans le xml), si tu utilises la dernière source ne t’en préoccupe pas, c’est fait.
Ensuite tu n’as rien a faire de plus, dans la description de la lightbox, le html est interprété sans souci.
Bon courage !
Bonjour,
Super carrousel ! Vraiment classe.
Perso j’ai un peu galérer parce la lightbox ne marchait pas en local.
J’ai trouvé pourquoi : il faut que l’endroit où on a téléchargé la source face parti des “sites de confiance” de notre flashplayer.
Donc à l’affichage : clic droit sur le flash >> a propos d’adobe flash player >> go sur le site de flash : support : setting manager à droite >> a gauche : global notifications settings panel >> cliquer sur l’icone avec le globe et le cadenas.
là il faut ajouter en bas le répertoir en local où est mis le flash du carousel.
C’est Nickel Merci beaucoup pour ton aide LutinCapuche et surtout pour ta patience !! ;-)
J’en ai appris encor en peu plus sur flash grâce à toi ! Re re Merci
@+
Resalut tout le monde :)
Je n’ai toujours pas de solution pour placer plusieurs images pour chaque image ouverte en lightbox …, si une nouvelle lumière pouvait être éclairé ce serait cool, merci d’avance ^^
Hello Lutin,
merci beaucoup pour ce tuto qui est tout simplement parfait… j’ai juste un problême avec la lightbox,
lorsque je clique sur une image de mon carrousel, l’image lightbox s’ouvre et le carrousel arrete de tourner comme l’odonne la fonction timeout implementée dans le fichier flash. Par contre le script light box ne prend pas du tout la main au niveau de la gestion de la souris, du coup dés qu’on bouge un tout petit peu la souris, notamment pour aller clicker sur le bouton close de la fenetre lightbox, le carrousel se reaffiche immediatement par dessus la photo aggrandie et laisse la moitié basse de la photo visible…
voici un lien vers le site ue je suis en train de realiser :
http://inabeathead.free.fr/carousel/indexnew.html
le carrousel est dans la section gallery.
A l’avance merci de ton aide :)
A +
Inabeathead
Salut Inabeathead
J’ai regardé ton exemple avec Firefox (car j’utilise forefox — bouh ie), et il y a bien un souci. Pour le résoudre, il suffirai que tu intègre le swf dans le html comme dans le fichier html fourni avec la source. C’est à dire avec la méthode swfObject + swfIntegrator qui simplifie l’insertion CSS du swf dans la page. C’est par exemple très utile pour centrer, mettre en full screen avec une taille minimum ect…
Plus d’info: daweed.info
Revenons en à nos moutons: sur firefox, ta div lightbox passe complètement derrière le swf, donc on ne voit pas l’image en grand. C’est d’une part parce que le wmode de ton swf n’est pas a transparent, qu’il y a des z-index qui ne sont pas appliqués, et enfin le doctype qui n’est pas renseigné, source de bug sur la lightbox.
Si tu n’as rien compris (je ne sais pas si tu connais tout ca), pars de l’exemple téléchargé, au lieu d’utiliser le AC_FL_RunContent proposé par defaut lors de la compilation du flash.
a+
Hello Lutin,
hé ben c’est ça qu’on aime quand ça marche bien !! Merci pour ta reponse hyper rapide, et pour la methode swfObject + swf integrator c’est super bien foutu :)
bon week-end à toit et bravo pour les tutos!
A +
Olivier
ah bien en fait ça a bien marché sur safari pendant 3 minutes, et puis hop ça c’est mis à deconner, l’image lightbox reste derrière le swf. J’ai checké avec ta version, cad le lien qui est en haut de cette page (le lien “voir le resultat”) et en fait j’ai le même resultat avec ton exemple en ligne. Bizarre…
Par contre avec safari, ta version comme la mienne marchent impecc !!
J’ai bien essayé de vider le cache de mon safari, de le rebooter mais rien n’y fait..
un avis ?
merci et a +
oops il est tard et je commence à fatiguer et j’ecris n’importe quoi :)
je repete donc :
ah bien en fait ça a marché 3 minutes sur FIREFOX et puis hop ça c’est mis à merder de nouveau, l’image lightbox reste derrière le swf (alors que pendant les 10 premiers essais ça marchait bien sauf que le background gris derrière l’image lightbox n’etait pas transparent). J’ai essayé de vider mon cache FIREFOX et de rebooter mais ça ne change rien, et d’ailleurs ça merde tout pareil avec ton exemple en ligne dont le lien (voir le resultat) est en haut de cette page.
Par contre avec SAFARI ça marche tres bien (image lightbox en premier plan avec fond gris transparent au travers duquel on peut voir le carrousel tourner lorsqu’on bouge la souris).
ouf, voilà qui est plus clair, un avis ?
allez je vais me coucher…
a + et merci
Olivier
question : je souhaiterais que le carousel proposé ici (et qui esst vraimment très bien affiche les images en arrière plan (lorsque cela tourne) non pas vers le haut de l’animation mais plutôt vers le bas
je cherche mais si jamais quelqu’un pouvais m’aider…
je reprends ma question. je souhaite avoir une vue d’en haut plutôt qu’une vue d’en bas comme proposé sur ce tuto. mes connaissances en maths sont … pffff
merci d’avance
Bonjour,
Je suis tombé par hazard sur ce tuto génial et ces sources accessibles… :-) BRAVO
J’essaie de le programmer pour un ami et je sui face à mon problème est tout bête… (j’utilise pas la lightbox)
Quand on clique sur l’image, aucun lien ne fonctionne (en relatif ou en absolu), je tourne en rond :-(
Merci d’avance
J’ai a moitié réglé mon PB
Il ne fallait pas mettre
MAIS
Par contre quelque soit l’attribut cible par ex: cible=”_top” et bien il m’ouvre une nouvelle fenêtre !!!
Superbe le caroussel !! Ces ce que recherchais, mais on peut faire en sorte que les images soient immobiles
et quelle ne bouge que lorsqu’on clique dessus ??
rebonsoir tout le monde :)
Je n’ai pas encore solutionné la possibilité qu’offre lightbox de regrouper plusieurs photos une fois que l’on click sur une seule (comme expliqué un peu au dessus), si quelqu’un aurait une solution écrite ce serait super cool :)
Merci