Rien d’exceptionnel dans cette source, mais c’est un bon point de départ pour réaliser un caroussel sympa.
Celui ci permet de modifier très simplement le rayon X, le rayon Y, la perspective, la vitesse de rotation, les coordonnées x/y.
Une base xml permet de charger dynamiquement le nombre d’images souhaitées.
1.Définition des variables, les noms parlent d’eux même :
var hScene:Number = Stage.height;
var wScene:Number = Stage.width;
var numOfItems:Number;
var radiusX:Number=300;
var radiusY:Number=110;
var centerX:Number=wScene/2;
var centerY:Number=hScene/2;
var nSpeed:Number=0.05;
var perspective:Number=100;
2. Chargement du xml
//chargement du xml
function load_xml(path:String,type:String){
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad=function(){
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
//appel fonction de création du caroussel quand tout est chargé.
genereCarousel(nodes);
}
xml.load("xml/"+path);
}
3. Création du caroussel
function genereCarousel(nodes){
level = this.getNextHighestDepth();
this.createEmptyMovieClip("carrousel"+iCarousel,iCarousel);
//creation d'un MovieClip vide pour accueillir le caroussel
clipHote = this["carrousel"+iCarousel];
for (var i=0;i<numOfItems ;i++){
//creation des Movieclip du caroussel (t)
var t=clipHote.attachMovie("item","item"+i,i+1);
t.angle = i* ((Math.PI*2)/numOfItems);
t._y=Math.sin(t.angle)*radiusY +centerY;
var s:Number = (t._y - perspective)/(centerY + radiusY - perspective)
t._xscale=t._yscale=s*50;
t._x=Math.cos(t.angle)*150+centerX;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.icon.smoothing=true;
//reflet
t.ref.inner.loadMovie(nodes[i].attributes.image);
t.swapDepths(Math.round(t._xscale) + 100 +i);
//mouvement
t.onEnterFrame = mover;
}
}
4. Rotation du caroussel
function mover(){
this.swapDepths(Math.round(this._xscale) + 100);
this._x=Math.cos(this.angle)* radiusX + centerX;
this._y=Math.sin(this.angle)* radiusY + centerY;
var s:Number = (this._y - perspective)/(centerY + radiusY- perspective);
this._xscale=this._yscale=s*100;
this.angle += nSpeed;
}
5.Gestion de la vitesse de rotation selon la position de la souris
this.onMouseMove = function(){
//mise a jour de la variable de vitesse utilisée dans la fonction mover
nSpeed=(this._xmouse-centerX)/15000;
}
6. Résultat
Ci dessous le résultat :
Flash Carousel AS2 vertical
Télécharger les sources
Télécharger les sources v2 avec ajout d’un lien sur chaque image comme demandé dans les commentaires
102 comments
Yan says:
avr 14, 2008
bonjour,
La source est vraiment terrible !!!
Je souhaiterai savoir comment en cliquant sur une image on peut charger un fichier.swf? je ne sais pas quelle ligne mofifier dans le fla et dans le xml.
Yan says:
avr 14, 2008
Merci d’avance si vous pouvez m’aider !!!
Yan says:
avr 14, 2008
merci d’avance !!!
lanner says:
avr 25, 2008
Salut, un petit tour voir s’il y a des nouvelles
merci
MuadDib says:
mai 8, 2008
Merci beaucoup pour ce super tuto, c’est vraiment du bon boulot
Je tente de l’utiliser pour un gros site et le caroussel devrait animer ma home page
Je bute sur une petite fonction que je voudrais ajouter : faire que l’animation soit immobile lorsque la souris ne la survole pas.
C’est sans doute relativement simple mais mes compétences sont pour l’instant limité (voile de quoi apprendre)
Lorsque j’aurais trouvé la solution, je la posterais, mais un coup de main ne serait pas de refus ;o)
MuadDib says:
mai 9, 2008
Voila, j’ai la solution :
J’initialise nSpeed à 0 :
var nSpeed:Number=0;
Et je crée un clip « cadre » pour détecter la sortie de la souris :
cadre.useHandCursor = false;
cadre.onRollOut = function()
{
nSpeed=0;
}
Ainsi la rotation ne se déclenche qu’au survol
LutinCapuche says:
mai 9, 2008
Hello MuadDib, bon ben parfait, tu as trouvé la solution avant que je n’ai eu le temps de te répondre! Bien joué..
matt says:
mai 13, 2008
Salut,
Très sympa ce petit tuto je me demandais si t’avais déjà envisagé la possibilité de mettre à jour le carrousel pour une application de type diaporama?
Je me lancerais bien dans ce genre de fonctionnalité.
Si tu as des idées pour la mise en oeuvre relatives à ton code ce serait sympa
je m’y pencherais demain
@+
Guillaume says:
mai 15, 2008
Bonjour à toi LutinCapuche ! Très beau travaille ! J’avais repris tes sources il y a quelques temps pour essayer de ma familiariser, de comprendre comment tu avais fais, mais aujourd’hui je dois faire une anim du même type que celle présente sur ce site : http://www.highlife.fr/#salon-1/PS50P9FD (il faut cliquer au départ sur passer l’intro et l’anim/déplacement des télés se lance ensuite toute seule.).
Aurais tu une idée de comment réaliser ça ? Est simplement une base de carrousel où le déplacement serait de type sinusoide ? Ou bien est ce plus compliqué ? Peut on d’ailleurs attacher un clip et le faire déplacer sur un guide de mouvement en actionscript et non pas en interpolation ?
lanner says:
mai 15, 2008
Resalut,
Je repasse faire un petit tour pour vous saluer et voir s’il y a eu du nouveau pour ma demande,
merci merci
LutinCapuche says:
mai 15, 2008
Oups lanner, j’avais bien oublié, tu fais bien de me le rappeler, ca viendra dans le week end sans fautes !!
A+
lanner says:
mai 17, 2008
Nickel ^^
Par contre on pourra toujours choisir de placer un lien ou l’affichage lightbox ?
Merci
LutinCapuche Blog:: Developpeur web : : Tuto flash faire un caroussel v2 says:
mai 17, 2008
[...] Pour l’explication du code, tout est commenté dans la source, ou dans le premier article sur le carousel. [...]
LutinCapuche says:
mai 17, 2008
Guillaume,
Très bel effet sur l’exemple soumis… par contre rien à voir au niveau du code, ce n’est pas du tout ni la même forme, ni le même mouvement, ni la même interaction… Mais je pense que ce n’est pas bien compliqué, 2ptits tweens pour faire simple (ou des jolies équations si tu es motivé), tu incémentes les coordonnées, un masque bien placé, et en avant !
lanner says:
mai 18, 2008
Merci je vais tester tout ca
LutinCapuche says:
mai 24, 2008
Une évolution du tuto ici :
http://www.blog.lutincapuche.com/tuto-flash-faire-un-caroussel-v2/
celie says:
juin 18, 2008
Bonjour,
ce diaporama est superbe j’ai pu le reprendre et le remanier à ma convenance!
cepandant je cherche déspérement à rajouter un titre a chaque image lors du survol de la souris.
Est-ce qu’une âme charitable pourrait m’aider?
Merci d’avance
Patrick says:
juin 26, 2008
Bonsoir.
Comment faire en sorte que la taille d’une image soit automatiquement détectée et que l’effet de trasnparence s’adapte à cette taille?
Je n’arrive pas à comprendre pour la taille de l’ombre transparent s’obstine à rester sur la valeur 200×87.
sachant que cette valeur n’est indiquée nulle part.
Merci par avance pour toute aide
En tout cas, c’est très joli et efficace.
LutinCapuche says:
juin 26, 2008
Hi Patrick!
Dans cette version du carrousel, le masque sur le reflet n’est pas dynamique,… pas très pratique, il faut changer manuellement dans le clip « icon ». Par contre si tu utilises la v2 ici : http://www.blog.lutincapuche.com/tuto-flash-faire-un-caroussel-v2/, la taille du reflet s’ajuste en fonction de ton image, tu as juste un parametre en plus qui permet de rentrer la hauteur souhaitée du reflet.
A+
Seb says:
juil 27, 2008
Bonjour,
Je trouve ton animation superbe mais je débute dans le flash et je voudrais savoir comment on fait pour changer les images que tu as mis.
Merci.
LutinCapuche says:
juil 28, 2008
Salut Seb,
Je te conseille d’aller télécharger les sources du carousel v2 à cette adresse : http://www.blog.lutincapuche.com/tuto-flash-faire-un-caroussel-v2/
C’est beaucoup plus simple pour changer les images, tu n’as qu’a modifier le nom et la légende dans le xml et placer tes images ainsi nommées dans le répertoire approprié!
Et c’est tout
franck says:
sept 4, 2008
salut,
super ton carrousel, est-ce possible de l’intégrer dans un oscommerce et si oui !
comment faire d’après toi?
merci
Franck says:
déc 31, 2008
salut lutincapuche,
excellente animation !
Serait-il possible d’intégrer à ton caroussel un effet d’opacité sur les images dès lors que celles-ci passent en arrière plan ?
En te remerciant.
A+
Gary says:
jan 8, 2009
Bonjour,
j’ai utilisé votre code pour le carroussel, mais j’ai utilisé mes image, et j’ai un souci, au niveau des cadres et de l’efet de mirroir… comment les enlever? car mes images ont une taille plus grande et ne correspondent pas aux images de bases.
tugudul says:
jan 17, 2009
hello
joli travail et bon vent a montreal ou j’ai passé 3 ans…
une question : comment peut on chargé chargé les images à la volée dans ton carrousel quand on veut montrer plusieurs images par page et qu’on a une page par theme et beaucoup de thèmes?
merci
charlotine says:
jan 27, 2009
salut,
je suis une grande débutante, aussi vous allez surement trouvez ca tres stupide comme question..
Jai déja fais mon header en flash, et je voudrais rajouter ce caroussel pour faire tourner des silouetes dessiner sous flash. Faut il que je parte de mon fichier flash déja existant et que je l’importe? comment faire jai essayer tt et nimporte quoi je devient folle! Je cherche par moi meme depuis longtemps maintenant et je désespere, si une ame sensible veut bien se poser sur ma question, ce serait super cool..
oliv says:
mar 10, 2009
Bonjour LutinCapuche,
je voulais d’abord te féliciter pour ce carrousel personnalisable à souhait et très bien conçu pour un graphiste comme moi qui a des connaissances très limitées en AS mais à défaut peut compter sur son minimum de logique.
Là si j’écris c’est que ma logique me fait défaut.
J’ai essayé d’insérer le swf du caroussel dans un page html. Cette page est directement à la racine du site. Le fichier swf, le dossier « minicards » qui contient les images et le dossier « xml » qui contient le fichier xml , eux, sont placés dans le dossier « images » lui aussi situé à la racine. J’ai donc modifié le code flash en spécifiant le lien de chargement du xml [ xml.load("images/xml/"+path) ]. Jusque là c’est cool: dans ma page html, l’anim s’affiche bien mais… sans les images. Du coup, je me dis qu’il faut que je change aussi le chemin vers chaque jpg listé dans le fichier icons.xml . Je pense avoir tout essayer et là mon anim reste désespérément vide.
Crois-tu que tu peux me sortir de l’embarras? Merci d’avance!!!!
LutinCapuche says:
mar 16, 2009
Salut oliv,
Envoie moi le lien de ton exemple je te dirais ce qui ne vas pas dans tes chemins de fichiers.
A+
Doyen says:
mar 13, 2009
Bonsoir ,
Je voudrais rajouter ce carrousel dans un site, je ne maitrise pas et ne possède pas Flash , une simple question , les parametres indiqués en debut de cette page , sont a inclure comment , ceci pour modifier quelques variables , les mettre dans une page , les inclure dans le fichier xml , et dans ce cas , doit-on recompiler le .fla ???
merci de m’éclairer .
Doyen
LutinCapuche says:
mar 16, 2009
Bonsoir doyen, oui, il faut recompiler le flash si tu veux changer des parametres
fabien says:
avr 6, 2009
bonjour,
super le carousel mais j’ai un petit souci :
dans un site normal il fonctionne tres bien mais dans un site joomla je n’arrive pas a afficher le carousel sans faire de iframe !!! et vu que l’iframe appelle des scripts IE7 le bloque ! (foncitonne tres bien avec les autres navigateurs … )
j’ai pourtant changé le path de l’appel du xml dans le .FLA mais sa fonctionne toujours pas …
comment faire ?
encore merci pour ces supers codes
fab
oliv says:
avr 13, 2009
bonjour LutinCapuche
merci pour ta réponse; Il se trouve que j’ai fini par résoudre le pb comme un grand. Mais je n’hésite pas à t’appeler à la rescousse pour les éventuels prochains obstacles qui se dresseront sur mon chemin. A très pluch!
oliv says:
avr 13, 2009
ah si! j’ai une nouvelle interrogation. J’aimerais bien intégrer des png à fond transparent mais le souci est que les encadrements gris subsistent et j’ignore comment les rendre invisibles. Si tu as la soluce, je te serai infiniment gré de me la souffler lorsque tu auras, bien sûr, un petit peu de temps pour consulter ton blog.
Florent says:
mai 4, 2009
Bonsoir,
Tout d’abord très bon tuto ^^
J’ai téléchargé la source pour essayer de l’inclure dans un un projet flash, notamment, je voudrais plus particulièrement l’inclure dans un clip… j’ai essayé de copier le code, de mettre les dossier la ou mon projet se situe mais rien ne s’affiche… et comment changer la taille, par exemple mon clip fait 433.3*349 (c’est un exemple). Comment faire cela ?
Merci d’avance
Cordialement,
Florent
SASA says:
mai 13, 2009
Merci pour ce magnifique travail.
J’ai un bug les images en arriere plan du carrousel sont à l’envers. Une idee d’ou ca peut provenir?
jules says:
mai 25, 2009
Bonjour,
tout d’abord, merci pour ce tuto,
c’est exactement ce que je recherchais !
Une petite question :
a savoir, comment peut-on modifier le format du document ?
je dois réaliser un carousel comme celui la, mais avec un format de 235 x 188.
cordialement
Jules
Guillaume Breuzé says:
juin 2, 2009
Bonjour toutes et à tous,
merci tout d’abord pour ce superbe tuto, cependant j’ai un problème, je souhaiterais que lorsque l’on clique sur une des images, un autre SWF s’ouvre. Je suis débutant en flash et là je suis complètement perdu.
Pourriez vous m’aider s’il vous plaît??
Merci d’avance
Guillaume
julien says:
juil 1, 2009
Guillaume regarde du coté des Loader=new Loader et des URLRequest (gaffe en AS3 si tes swf sont conséquents il faut bien lire la doc surtout pour ce qui est de décharger les Loaders que tu auras créés car contrairement à l’as2, les Loaders AS3 ne se vide pas tout seul.
Un grand bravo à toi lutincapuche pour tout ce travail et bien joué pour les peluche l’exemple est bien sympathique.
Je voulais savoir si tu pouvais me renseigner sur la partie « rotation avec le clavier » comme sur ton mini-site car je dois réaliser cela dans le cadre professionnel et je m’arrache les cheveux à essayer de contrôler la rotation du carrousel avec les touches directionnelles.
Cordialement
LutinCapuche says:
juil 5, 2009
Allo Julien,
Alors pour la partie contrôle du carrousel au clavier, c’est assez simple.
D’abord il faut que tu te fasses une fonction qui va gérer la rotation du carrousel d’un certain angle (360/nombre d’items). Tu lui passes en parametre le sens de rotation, droite gauche, ou previous/next.
Ensuite il te suffit d’ajouter un keyboardEventListener (exemple : addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);)
Puis dans ta fonction keyDownHandler tu check quelle touche a été enfoncée (evt.keyCode) et tu appelles la function de rotation du carrousel en fonction du code reçu.
J’espère que ca t’aidera !
++
Henri says:
juil 13, 2009
Bonjour,
tout d’abord félicitation pour ce tutoriel qui aide beaucoup (surtout des débutant en flash comme moi). Moi j’aimerais juste savoir (ma question est peut être un peu bête) si on peut changer la bordure de chaque image, à la place de la bordure grise présente ici.
Merci.
julien says:
juil 16, 2009
merci à toi lutincapuche je pensais pas que tu répondrais à ma requête vue le nombre de coms déjà postés… J’essaie ça très vite. Au plaisir de voir tes nouvelles créas !
Cordialement.
yoyo says:
août 21, 2009
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 !
Orso says:
août 12, 2010
Salut Lutin,ce caroussel est le fruit d’un dur labeur,en tout cas beau travail!
Cher Lutin peux-tu me donner des plus amples explications sur le code du caroussel pour qu’au cas où l’on me demande: que signifie cette ligne de code que tu as mise ici, ou pourquoi tu as ceci ici?Tu vois, les questions du genre. Le code en soi, je l’ai manipulé, j’ai inséré mes propres images mais il y a un petit quelque chose:c’est que je ne comprends pas les lignes de code et pourquoi elles sont là.Peux-tu m’aider en me fournissant des explications? Merci d’avance.
LutinCapuche says:
août 12, 2010
Salut Orso,
Non je ne vois pas vraiment le genre de questions dont tu parles. Peux tu detailler ce que tu ne comprend pas?
Orso says:
août 13, 2010
Salut Lutin,
J’essaie de m’expliquer ici avec cet exemple: this.swapDepths(Math.round(this._xscale) + 100);
ce que je veux c’est que tu me dise par exemple pour ce cas ci-dessus: » cette ligne de code veut dire qu’on arrondi je ne sais quoi pour qu’on arrive à…. » et cela pour chaque ligne de code.
Oh! je sais, je sais que c’est trop te demander, mais j’en ai quand même besoin .
Merci Lutin de bien vouloir me répondre.
Orso
lafrae says:
août 16, 2010
Merci LutinCapuche, super script, super résultat, j’adore! Tu m’épargne pas mal d’heures de travail !
Bonne continuation
Delaye says:
sept 25, 2010
Merci pour ce caroussel très bien expliqué et facilement modifiable !
poka says:
jan 31, 2011
Bonjour,
j’essaye désespérément de transcrire ce magnifique carrousel en as3 mais je suis une vrai quiche!!!
Lutin, pourrais tu me donner un coup de main…?
J’arrive a placer les icônes comme je veux mais impossible de les mettre en mouvement!
poka
sYma says:
fév 8, 2011
Bonjour, merci beaucoup pour ces sources propres et utiles !
J’ai découvert ce site par hasard, et pas fini d’y venir
sYma says:
fév 9, 2011
Même si ce post nécessiterai la mention de « AS2″ !!
VANOU says:
avr 24, 2011
Bonjour je suis tombee sur ton site , car je recherche de l aide pour flash. Je suis debutante. J’aime ton caroussel mais jaurais aime que tu expliques du debut jusqu a la fin. Etape par etapes, pour les gens comme moi qui ne connaissent rien encore aux codes. J’ai ouvert ton animation flash et je vois deux layers et j ai prepare des photos pour faire les minicards mais apres ca je ne sais plus quoi faire. Un petit coup de main merci.
MyTruck says:
mar 25, 2014
Bonjour LutinCapuche,
Tout d’abord Merci pour avoir mis à disposition les sources de ton carousel !
(la grande majorité des sites les vendent + ou – cher …)
Mais j’ai tout de meme une question :
- est il possible de mettre l’ensemble du projet dans un Symbol Movie Clip ?
- ou alors serait il possible de lancer et de stoper le carousel a partir d’une frame definie ?
exemple :
frame 1 le code + un Boutton > _root.gotoAndStop(10);
frame 10 « le carousel se lance » + Boutton > _root.gotoAndStop(20);
frame 20 « le carousel disparait ou a disparu » + Boutton > _root.gotoAndStop(1);
Je ne sais pas si j’arrive a exprimer correctement mes questions
en tout cas Merci d’avance