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:
- 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); }
Commentaires
113 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 :
myItem.tooltip=nodes[i].attributes.tooltip + «
« +myItem.tooltip+ »«
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
super ce carousel , cependant petit soucis , j’ai laissé vide grande image et utilisé l’index.html pour pouvoir cliquer sur l’image afin d’envoyer vers un lien .
cela marche pas rien ce passe est-ce que j’ai oublié quelque chose
merci de m’aider
Hi m1ka_l,
Peux tu m’envoyer un lien d’exemple?
lut !!!!
http://www.s220025685.onlinehome.fr/sources_caroussel4/index.html
Voila
bonjour, d’abord bravo pour vos tutos, très bien faits…..j’aurai une petite question…je voudrais savoir comment faire pour mettre plus d’images dans le caroussel…il y en a 8 dans votre exemple, que dois je rajouter pour en avoir plus? merci
Salut hook,
Il suffit que tu ajoute des images dans le xml
merci lutincapuche,
alors j’ai essayé celà mais ça ne marche pas!!!…peut etre l’ai je mal fait….
donc disons je rajoute une image nommée 1.jpg dans le xml avec le code
« »" »" »"
et je met l’image 1.jpg dans la source dossier minicards….est ce celà??….j’ai fais comme celà, si j’ai raté un episode, merci de me renseigner
Bonjour lutincapuche,
J ai remplacé les images FAT par des .swf de 400*400, malheureusement ils apparaissent en petit dans
la lightbox ( pas dans la bonne dimension). Et pas du tout avec IE.
Aurais tu une idée?
merci.
Bonjour lutincapuche,
J essaye de loader un .swf a la place des images FAT.
2 problemes ce posent: cela ne marche pas avec IE. (mais les autres oui)
la taille du .swf est reduite.
As tu une idée pour me depanner ?
merci
Bonjour,
J’ai utilisé ton script qui marche très facilement, et très rapidement,mais j’ai une question. Comment changer la couleur du fond, enlever le noir / gris, et le mettre en blanc ?
Doit on ouvrir le Fla ?
Merci bcp
@ideal : ben oui, tu ouvres le fla et tu changes la couleur… tu n’as pas essayé?
Ma société ne possède pas flash, il m’est donc pas possible de le faire ;(
Serait il possible de décliner le swf avec un fond blanc ?
Merci bcp, dans le cas où tu n’as pas le temps je comprendrais, ton blog reste top !
Bonjour LutinCapuche,
Quel tuto bien sympa, merci!
J’ai un peu le meme pblm que tizouit pour ajouter un lien à une image de la lightbox.
Les caractères ci-dessus (ds vos discussions) sont illisibles!!
Peux tu me tirer de là stp?
D’avance merci
Tu peux rajouter dans ton code de la page pour afficher le flash :
<embed src= »nom de l’image.swf »
…….
oups le code est nettoyé j’avais oublié …
<param name= »QUALITY » value= »high »
)
<param name= »BGCOLOR » value= »#000000″
à la fin de chaque ligne
hey merci lanner!
Raaa c’est un peu dur , j’arrive vraiment pas a faire en sorte de placer plusieurs images par groupe (le top serait placer le groupe dans le xml sur chaque ligne d’image)
Autre chose sympathique à évoluer, si l’on met la valeur isLegende:Boolean=true pour afficher la legende, est ce qu’il y a moyen de faire en sorte de pouvoir placer plusieurs ligne voir meme un peu de html , parce que la on ne peu ecrire que sur une ligne via le xml
Voila , enfin le top serait déja de grouper plusieurs image une fois que l’on en clique une seule, donc une aide serait le top
Merci merci
Hello,
Tout d abord bravo pour ton carrousel ! le code est tres clair dans le flash.. par contre de mon cote je galere avec le css. Je voulais l’ integrer dans ma page. mais dans ces cas la, le div de la lightbox passe sous le flash. J ai donc remis les css originaux, et ma gallerie en pop up.. la je ne m en sors pas .. toujours les CSS …
Tu aurais un exemple avec d autres css?
merciii et encore bravo il est magnifique et tres clair
Le lightbox passe sous le flash parce que tu dois changer la couleur de fond non ? , j’ai fait plusieurs tests et je n’ai vu que ce cas, donc en fait il faut laisser le flash en transparent et changer la couleur du fond directement dans un div conteneur.
Concernant tes problèmes de css , je ne sais pas ce que tu utilise comme éditeur html (à moins que ne le fasse à la mano avec wordpad ^^)
Le css se place en fonction du site que tu as , difficile de donner un exemple
.conteneur{
width:800px;
height:350px;
position:absolute;
margin-top:-300px;
left:-139px;
top:467px;
background-color: #FFFFCC;
}
J’englobe toute la partie du code de l’exemple index_lb dans un div « conteneur » pour avoir ma couleur de fond, mon css est en position absolute car je place ce cadre à un endroit précis.
Lanner merci !!
Je me suis juste bloquee a vouloir changer les div existants plutot qu’en creer un autre autour … Logique Logique !
Merciiiiii ^_^
Salut
J’ai testé le carousel sous IE 7 et là, nada, il y a simplement le texte ‘FLASH’ qui s’affiche.
Est-ce que quelqu’un a ce problème ?
Sinon, super sous firefox bien évidement… no comment
fonctionne parfaitement sous IE7 IE6 firefox de mon coté
Au fait un détail comparé à l’ancienne version sur une demande que j’avais formulée, la cible ne fonctionne plus , la variable était presente dans le xml => cible= »_self » (ou _blank etc), pas moyen de la réimplanter ?
Et la avec tout ca , cela devient le caroussel utime ^^
Et voir pour mon histoire de plusieurs images ,ainsi que la possibilité d’avoir un peu de html dans le content de la barre
merci pour tout s’il y a moyen de faire cette évolution
Est-il possible de charger un .swf à la place des images, dans le carrousel ?
En fait, je souhaiterais pouvoir afficher un calque lorsque l’internaute passe son curseur sur l’image… faire un sous-menu, en quelque sorte.
OUi bien sur que tu peux…
… je m’en doutais un peu ;o) mais si je gère le sous-menu dans les clips, ni aura-t-il pas d’interférences entre les deux actions sur le « bouton/icone » ?
SI, mais la c’est toi de changer les niveau d’action pour qu’il n’y ai pas ce conflit.
Tu met le rollOver/release sur le background, comme ca tu pourras aussi mettre des actions sur le sous menu.
Salut tout le monde, désolé de vous embêter avec mes questions aussi poussées
Mais il manque une chose vraiment essentielle pour parfaire le caroussel, c’est d’avoir la possibilité de mettre un morceau de html pour ajouter au moins un lien , soit dans le descriptif au dessus de l’image , soit une fois que l’on clique sur l’image en bas, car si on affiche une image c’est bien mais on n’a aucune possibilité d’ajouter un lien cliquable
Voila au moins si ceci était facilement modifiable ce serait super, merci d’avance
Bonjour,
Serait il possible d’ajouter un lien cliquable soit par le code flash, soit par le lightbox, soit par le fichier xml pour qu’une fois l’image affiché on puisse ajouter une adresse web qui puisse être cliquable
Merci
Wai pas mal mais bof, le coup de la lightbox c vraiment nul, Yaell et d’autre sont dessus et je vois pas l’interet de sortir du flash il faut
UN ZOOM du motif de carroussel vers la taille fullscreen et une ergo CLAIR pour dezoomer OU pour passer au suivant sans zoomer.
Si le lutin me fait un mix de http://labs.blitzagency.com/?cat=21 et de l’admin de Arnotoolbox 0.3 (dead project sniff)
Bah je lui paye un beau sweet a capuche
Rebonjour tout le monde, je n’arrive vraiment pas à modifier pour avoir une url ,beaucoup trop complexe, j’ai voulu faire simple avec une image en flash mais cela ne fonctionne pas, lightbox ne charge pas mon fichier .swf une fois que je clique sur la miniature, est ce que quelqu’un saurait me donner une solution
Merci d’avance
Salut Boon
Comme dit plus haut, le but de ce tuto était simplement de montrer comment faire un effet carrousel… après quelques demandes d’utilisateurs, j’ai rajouté 2/3 options, simplement encore une fois pour EXEMPLE.
Je suis tout a fait d’accord pour dire que la lightbox n’a rien a faire la, mais elle y est, car plusieurs personnes souhaitaient utiliser ce système.
Maintenant, bah je ne suis pas freelance, et encore moins développeur gratuit pour faire des développements spécifiques à chacun… Donc ce blog est la pour donner des bases, à toi de pimper le code pour faire ce dont tu as envie…
Enjoy
Sans vouloir rentrer dans le sujet , juste pour dire à Boon : si cela ne te plait pas , tu n’avais pas à poster ou demander quoi que ce soit, lightbox est placé avec la possibilité de ne pas s’activer, je trouve impoli ta facon de faire.
Le tuto est je dois dire le meilleur que jai vu à ce jour , et pourtant j’en ai testé (je parle bien évidemment d’un tuto avec ses sources).
Juste dommage que d’autres personnes capable de faire les petites modifications ou rajouts ne se manifeste pas, si j’avais le savoir je l’aurais fait et posté , malheureusement tous mes tests sont des echecs, je cherche à placer un lien sur le lightbox car cela rajoute un petit plus mais je n’y arrive pas.
Voila donc si quelqu’un peu me secourir au moins pour ce point , je le remercie
PS : LutinCapuche , si un jour tu place un lien « donate » je me ferais un plaisir d’y faire un tour pour te remercier de ton super travail
Merci pour la suite
Quoi que après avoir écrit ma phrase je viens de comprendre pour le html … il faut en fait placer le code html dans le xml comme ceci :
tooltip= »<a href="http://">le lien</a> »
Si cela peu servir à d’autres
Hello Lanner!
Merci pour ton commentaire, ca fait plaisir!
Peux tu m’envoyer tes sources actuelles ou tu veux rajouter un lien, normalement ca ne devrait pas etre difficile. Si tu m’envoie tes sources exactes ca me fera gagner du temps, et je verrai si le pb ne vient pas d’ailleur.
A+
En fait mon explicatif n’as pas été inscrit comme il faut , le forum l’as mis dans le bon code , car il ne faut pas en fait placer le code normal mais il faut placer le code hexadecimal , lol j’ai plus le nom exact pour l’expliquer, mais surtout ne placer pas le code comme affiché au dessus
…
Par contre juste un detail qui n’est pas top , si l’on met du html dans le tooltip= »" du xml on ne peux plus utiliser l’affichage dans le flash var isLegende:Boolean=true;
Donc ma nouvelle question serait il possible d’ajouter au flash un 2eme tooltip pour que celui ne s’affiche que dans le flash au dessus des images, et ainsi on rajouterai dans le xml :
tooltip2= »texte au dessus de l’image »
Et eventuellement à l’occasion pouvoir faire afficher plusieurs photos une fois que l’on en click une.
Cela permet d’avoir un maximum de possibilité dans la configuration et ainsi chacun peu adapté facilement.
Sinon j’utilise pratiquement de base tes fichiers , donc si tu peux faire la première modification (voir la deuxième) sur tes fichiers ce serait parfait
Merci d’avance
ah j’ai réussi à modifier , peut être pas le top mais simple et ca fonctionne,
j’ai ajouter (juste après celui qui existe en tooltip de base)
myItem.tooltip2=nodes[i].attributes.tooltip2;
et dans la partie :
//fonction d’affichage de la légende
J’appel le tooltip2 :
this.label_txt.text=cible.tooltip2;
Bonjour, SUPER ton caroussel.
Mais j’ai un petit souci, je voudrais que le caroussel ne sois pas centrer verticalement, comment puis je faire?
Car sur mon site une page fait appel au caroussel et l’animation se décale vers le bas.
Pour mieux comprendre voici l’adresse de mon site : http://pagesperso-orange.fr/cv.coudret.patrick
Clique sur le bouton 3D et tu verras de quoi je parle.
Merci d’avance
cordialement
Patrick
Resalut, un détail me revient en tête
En général sur une page on met le code de facon à être sur que la personne utilise flash ou à le plugin d’installé mais la sur l’exemple on a la mise en place en javascript (fichier exemple de la source), comment faire du coup pour placer le code d’appel d’un ajout flash ?
Merci
bonjour a tous !!
1000 Merci pour ce carrousel. Je pause un message pour vous demander de l’aide afin d’avoir sur chaque image un lien différent mais surtout un info bulle. s’il vous plait vous pouvez me mettre sur une piste? merci
Bonjour,
J’essaie d’afficher une liste de liens lorsque l’on passe sur un icône… je me base sur les recherche de
lanner, mais je suis un peu bloque sur le code… voici mon code :
stop();
import mx.utils.Delegate;
var numOfItems:Number;
var radiusX:Number = 300;
var radiusY:Number = 75;
var centerX:Number = Stage.width / 2;
var centerY:Number = Stage.height / 2;
var speed:Number = 0.05;
var perspective:Number = 130;
var home:MovieClip = this;
var tooltip:MovieClip = this.attachMovie(« tooltip », »tooltip »,10000);
tooltip._alpha = 0;
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function()
{
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = home.attachMovie(« item », »item »+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.numIndex=i;
t.nbLiens = 0;
t.onEnterFrame = mover;
switch(t.numIndex){
case 0:
t.toolTitre = « Titre de la Rubrique 1″;
t.tipLien1 = « Lien 1″;
t.tipLien2 = « Lien 2″;
t.tipLien3 = « Lien 3″;
break;
case 1:
t.toolTitre = « Titre de la Rubrique 2″;
t.tipLien1 = « Lien 1″;
t.tipLien2 = « Lien 2″;
t.tipLien3 = « Lien 3″;
t.tipLien4 = « Lien 4″;
t.tipLien5 = « Lien 5″;
t.tipLien6 = « Lien 6″;
t.tipLien7 = « Lien 7″;
break;
case 2:
t.toolTitre = « Titre de la Rubrique 3″;
t.tipLien1 = « Lien 1″;
t.tipLien2 = « Lien 2″;
t.tipLien3 = « Lien 3″;
t.tipLien4 = « Lien 4″;
t.tipLien5 = « Lien 5″;
break;
case 3:
t.toolTitre = « Titre de la Rubrique 4″;
t.tipLien1 = « Lien 1″;
t.tipLien2 = « Lien 2″;
t.tipLien3 = « Lien 3″;
t.tipLien4 = « Lien 4″;
t.tipLien5 = « Lien 5″;
break;
case 4:
t.toolTitre = « Titre de la Rubrique 5″;
t.tipLien1 = « Lien 1″;
t.tipLien2 = « Lien 2″;
t.tipLien3 = « Lien 3″;
t.tipLien4 = « Lien 4″;
t.tipLien5 = « Lien 5″;
break;
}
t.toolText = nodes[i].attributes.tooltip;
t.toolText.html = true;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.r.inner.loadMovie(nodes[i].attributes.image);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;
}
}
function over()
{
home.tooltip.tipTitre.text = this._parent.toolTitre;
home.tooltip.bt1.text = this._parent.tipLien1;
home.tooltip.tipLien2.text = this._parent.tipLien2;
home.tooltip.tipLien3.text = this._parent.tipLien3;
home.tooltip.tipLien4.text = this._parent.tipLien4;
home.tooltip.tipLien5.text = this._parent.tipLien5;
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y – this._parent._height/2;
home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
home.tooltip._alpha = 100;
}
function out()
{
delete home.tooltip.onEnterFrame;
home.tooltip._alpha = 0;
}
function released()
{
}
function moveTip()
{
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y – this._parent._height/2;
}
xml.load(« icons.xml »);
function mover()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
var s = (this._y – perspective) /(centerY+radiusY-perspective);
this._xscale = this._yscale = s*100;
this.angle += this._parent.speed;
this.swapDepths(Math.round(this._xscale) + 100);
}
this.onMouseMove = function()
{
speed = (this._xmouse-centerX)/2500;
}
Pour être un peu plus clair, sur ce que j’ai fait; j’ai modifier le clip « tooltip » en lui ajoutant plusieurs zone de texte dynamique (tipTitre, tipLien1,… bt1 ne sert pas) le contenu de ces zones (pas encore dynamique) est défini en testant « numIndex ».
Actuellement, mon principal souci est de modifier la fonction over() pour faire une boucle sur mes « tipLien » et mieux gérer l’affichage (« undefined » si moins de 5 liens)… et par la suite ajouter les liens.
Je pense qu’il serait bon d’utiliser un tableau mais ça dépasse mes compétences !
… je suis preneur de toute solutions ou direction de recherche !
Merci
Salut,
Super bon le carrousel !
Par contre j’ai une question ! … bah oui forcément !
je voudrais integrer un carrousel dans mon flash sachant que mon decors bouge déjà avec la souris
y aurait-il un conflit entre codes ??
il me dit dans la liste d’erreurs : « import flash external… »
sur un clip statique j’ai pas de souci mais des que je place un decors qui defile, ça me donne plus rien !
snif !
Merci pour vos reponses !
Schuss
Juste un petite chose qui me chagrine, le mot caRRouSel est bien celui auquel je pense (en toute sympathie).
Ceci étant dit après avoir longuement fureter sur votre site qui donne vraiment envie de s’y mettre (à travailler j’entends) qu’elle est la meilleure, voire la plus simple manière d’intégrer à Flash l’AS3.
Si je ne dis pas de bêtise, je n’ai accès qu’à l’AS1 et 2.
Je me répète mais bravo pour toutes ces créations et surtout l’intelligence que vous avez pour partager vos créations à tut un chaun. À notre époque cela devient rare.
Merci encore.
Bizuth
Salut bizuth
Merci pour le bravo
Pour faire de l’as3, il te faut flash cs3 ou flexbuilder. Et c’est tout!
A+
Bonjour, avant tout je tiens a dire bravo pour le travail que tu fais, mais j’ai un gros problème moi je souhaiterais utiliser le carousel pour faire des liens donc quan don clic sur l’image ça renvérais vers une page html (google par exemple)
Je te remercier d’avance de ta réponse
Salut benoit
Il y a déjà la réponse dans les commentaires du carrousel! (v1 ou v2 je ne sais plus)
Bonjour,
Merci pour ce caroussel, voila mon problème, c’est qu’il s’affiche très bien sur firefox et safari sur mon mac et celui de mon ami, mais sur pc la ligthbox s’affiche derière le swf, si vous avez une solution, merci par avance.
j’ai lu tout les commentaires, le truc c’est que tout ce que tu as dis qu’il fallait rajouter sont dans cette version mais a un moment tu as parler de self ou blank, qu’elle est la différence entre les deux??(je ne comprend pas vraiment pourquoi ça ne marche pas, j’ai déjà créer des fichier flash pour des publicitées d’amis et j’ai aussi utiliser des getUrl et ça marchait très bien…)
Je te remercie d’avance de ta réponse
lili pour la lightbox qui passe derriere le swf la solution je l’ai donné plus haut avec un conteneur en css
bonjour,
merci beaucoup pour ton blog très interessant .
je n’arrive cependant pas à visualiser cette animation … ?
je visualisais bien la première version pourtant ..
lutin capuche slt et franchement bravo,
c’est clair net et précis et ça marche,
Une question comme tout le monde,
si l’on veut sur un premier clic que l’image s’agrandissent et avance, en gardant son reflet,
je suppose qu’il faut jouer sur les « scale » des items,
j’avoue avoir fait des essais mais non concluant
peux tu m’éclairer,
d’avance merci
Merci lanner
bonjour a tous ,
beaucoup l’on deja dis , mais il faut bien l’avouer ce petit carousel est tous simplement genial , clair , et ma fois tout ce qu’il y a de plus jolie. je suis un debutant ( un grand débutant ) pour ce qui est de modifie le code de ce carousel, disons que je bricole un petit peut , j’ai reussit a modifie ce que je souhaitais pour me servir en quelque sorte de ce carousel comme un menu sur mon site .
la seule chose que je n’arrive pas a modifie c’est que lorsque je clique sur une image pour acceder a mon lien , une autre fenetre explorer s’ouvre alors que je souhaite ouvrir mon lien sur la meme page . Est ce que cela est possible et si oui comment .
Merci d’avance
et encore une fois j’adore tes créations ,
houdy
houdy@numericable.fr
Bonjour,
Je suis novice en flash mais je souhaiterais utilisé le carousel pour presenter mon portfolio.
J’ai reussi a modifié a ma convenance mais j’aurais une petite requete.
Je souhaiterais que quand je clic sur une image cela m’ouvre un popup de taille definie et non resizable avec la scroll bar.
Je ne sait pas comment faire, j’ai trouvé ceci
getURL (« javascript:launchwin( this.lien , ‘FicheTechnique’ , ‘toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=720,height=800′) »);
Mais j’ai un souci avec le this.lien ca pose probleme pour retrouver l’adresse que j’ai mis dans le XML
Merci si on peut me donner une aide.
bonne journée
Bonjour bonjour,
Un très grand bravo et merci pour vos réalisations !
je suis en train de m’exercer sur Flash et j’essayais de modifier ce joli carroussel!
Cela étant j’ai ajouté des photos, et à la visualisation seulement 4/14 apparaissent!
Je n’arrive vraiment pas à voir d’où ça vient!!
J’ai lu tous les commentaires précédents, une seule personne a déjà parlé de ce sujet mais personne n’y a répondu.
C’est pour cela que je me permets de reposer la question!
Encore merci,
Et bonne soirée,
Bonjour,
Voila j’ai toujours pas trouvé pour ouvrir en faisant un popup comme dans dreamweaver.
Je ne sait pas comment faire, j’ai trouvé ceci
getURL (”javascript:launchwin( this.lien , ‘FicheTechnique’ , ‘toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=720,height=800′)”);
Mais j’ai un souci avec le this.lien ca pose probleme pour retrouver l’adresse que j’ai mis dans le XML
Merci d’avance
Bonjour, encore bravo pour ce tutoriel !
Je souhaiterai seulement lui ajouté une image au centre pour donner l’impression que le carrousel tourne autour de celle-ci… Je ne parviens pas à trouver mon bonheur sur la toile parmis tous les tutos disponibles.
Merci d’avance !
salut je trouve ce tuto genial merci !
Par contre j’aimerai bien l’adapter à la lightbox 2.04 donc pourrais tu m’aider stp
car j’y connais pas grand chose à flash.
Vraiment génial, je me réjouis de découvrir le reste du site.
J’ai aussi appliqué les modifs du tuto précédent pour avoir un carrousel vertical.
De plus comme les images de derrière parasitaient un peu celles d’avant plan, j’ai ajouté un effet de transparence en ajoutant dans la fonction move:
this._alpha=Math.sin(this.angle)*50 + 50;
à faire varier pour avoir l’effet voulu, par exemple pour un effet moins marqué:
this._alpha=Math.sin(this.angle)*30 + 70;
Rebonjour tout le monde
dolly2, saurait tu me dire quel est la modification du code à faire pour que le caroussel soit à la vertical sur cette source v2 ? Merci d’avance (ou quelqu’un d’autre je n’y vois pas d’inconvénients)
Par contre malgré tout le temps passé , je n’ai pas réussi à faire en sorte de placer plusieurs images qiu défilent lorsque l’on a une image agrandit sur le clic , bien dommage , si quelqu’un à cette solution ce serait super sympa aussi
Merci à vous
Kikou
Bon ben dommage j’aurai bien voulu l’avoir en vertical ce caroussel
mais il me faudrait la modification par rapport à l’horizontal, si quelqu’un peu me guider , merci merci
Sniff y’a plus personne ^^
Salut, lanner, si ca t’interesse je l’ai modifier a fin qu’il soit verticale, contact moi a ced2227@hotmail.com
je suis a la recherche d’info, pour pouvoir utiliser une variable a la place du nom du xml
ici:
load_xml(« icons.xml »);
a fin de pourvoir charger d’autre fichier xml generer depuis une base mysql en php, j’ai trouver des exemple pour envoyer et recuperer une variable en php vers l’animation, maisje c pas comment remplacer
load_xml("icons.xml");par le nom de ma variable.@cedric, le nom de ton fichier est une String, tu n’as qu’a la concaténer comme une String!
En faite c’etait une erreure dans le nom de la variable au niveau de mon fichier php.
merci beaucoup pour ta réactivité et pour ce superbe caroussel.
bon ba j’ai cru que ca fonctionner mais c’est pas le cas voila ce que j’ai mis dans mon fichier php a fin de plus tard pour changer de fichier xml:
et voila ce que jai mis dans caroussel pour pourvoir recuperer ma variable $FIC_XML :
var monChargement_lv = new LoadVars();
monChargement_lv.onLoad = function(success) {
if (success) {
_root.lien_xml = monChargement_lv.lien_xml;
}
};
monChargement_lv.load(« http://www.leparislondon/index_lb.php », monChargement_lv, « POST »);
et etant ultra débutant, je trouve pas la solution pour pouvoir charger mon xml a partir de tout sa, j’ai essayer en mettant ca mais ca focntione pas:
load_xml(_root.lien_xml);
Si quelqu’un peut m’aider?
Salut à tous,
Ce carrousel est génial. je suis arrivé dessus en surfant sur le Net car j’en cherchais un
Au passage, je viens d’en voir un, presque identique sur le site de « www.nespresso.fr » et il y en a, aussi, un autre en spirale qui est bluffant
Bonjour et merci pour ce superbe partage.
J’ai une question:
Comment réaliser un zoom (et donc sans utiliser la lightbox) quand on clique sur une image, sans générer de popup évidemment.
Cordialement
Bonjour et merci pour ce caroussel.
Simple question, est il possible, quand on clique sur une image, de l’agrandir sans pour autant faire un popup ou d’utiliser un light box?
Et encore merci.
Tout d’abord désole pour le doublon, je ne savais pas qu’il y avait une modération des commentaires.
En plus de ma dernière question, est-il possible de connaitre le parametre dans le fichier .fla, modifiant la perspective.
Merci bien.
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
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.
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
je ne voyais pas du tout ou la changer
ça fonctionne merci beaucoup
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 !
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
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!
la caroussel et bien fluide, très bon résultat, bravo.
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 ?
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.
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.