Tuto flash : faire un caroussel
Le 5 octobre 2007
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
Flash 8
( Vu : 11220 fois ) Commentaires
64 Réponses à “Tuto flash : faire un caroussel”
Répondre
Super le script !
Par contre il y a un petit bug de collision entre les images lorsqu’elle passe au premier plan, sinon très beau travail !
Merci gotoAndLearn.com ?
Merci pour ce tuto et les sources, puis m’en servir pour mon site ?
En effet il y a ce petit bug de chevauchement d’images lorsqu’elle passent en premier plan.
De plus comment fais ton pour insérer des liens dans chaque image ?
Merci
SaM
Oui bien sur tu peux t’en servir, c’est fait pour.
C’est juste une base, après à toi de broder dessus !
Pour insérer des liens sur les images, il faut que tu rajoute un paramètre url dans le xml qui contient la liste de tes images, que tu le charge dans le flash ,et que tu l’appliques au onRelease sur les images… As tu quelques bases en Flash?
Comme SaM, je suis interessé pour insérer des liens sur les images de façon dynamique. Donc ta solution LutinCapuche m’intéresse beaucoup.
N’ayant que des toutes petites bases en flash, pourrais-tu me détailler un peu plus précisèment ton explication ?
Surtout au niveau du onRelease car ajouter un paramètre url dans le xml je devrais m’en sortir ().
Merci d’avance.
Bonjour Gaet,
Je poste un exemple plus détaillé d’ici 1 jour ou 2.
A+
J’ai rajouté l’exemple en haut. La démarche est toute simple :
Dans le xml tu rajoutes un attribut lien a chaque icone exemple lien=”http ://www.lutincapuche.com”
Dans la boucle du flash qui créer les clips du caroussel
//j’associe l’attribut lien du xml au clip
t.lien=nodes[i].attributes.lien;
//action au clic qui ouvre le lien qu’on vient de lui attribuer au dessus
t.onRelease = function(){
this.getURL(this.lien,”_blank”);
}
Et voila. Apres tu peux rajouter des rollOver rollOut pour enjoliver… ect
Merci beaucoup c’est exactement ce que je voulais. Du super travail.
J’en reviens à cette notion de rollOver,rollOut qui m’intéresse en effet.
Crois-tu qu’il serait possible au clic sur l’image de faire afficher un texte html enregistré dans le fichier xml ?
Je te demande cela car je souhaite faire un site parlant de sport avec un carrousel contenant des icones de sport. Par exemple, on aurait un icone “sport de raquette” et en cliquant dessus on aurait un encadré affichant :
“Sport de raquette :
- tennis
- badmindton
- tennis de table
- etc”
avec un lien sur chaque sport d’où le texte en html.
Bon après j’en demande beaucoup. A toi de me dire si ya moyen ou non. Sinon tant pis, je resterais avec le clic vers une url précise comme tu me l’as gentillement effectué hier.
Merci d’avance.
Hello,
J’ai flash 7 actuellement, est-ce pour cela que je n’arrive pas à ouvrir le .fla ?
Je vous remercie.
Félicitations LutinCapuche, ton site est cool !
Yeah, c’est ca, c’est en flash 8. Par contre je suis embétée, je n’ai rien pour l’enregistrer dans une version antérieure !
Gaet :: oui bien sur que c’est possible, apres il faut que tu fouille un peu pour adapter le code afin qu’il fasse tout ce dont tu as envie!! La base est simple, à toi de la décortiquer et de rajouter tes propres fonctions.
OK merci :-( Bonne continuation.
OK Merci quand même
Merci Lutin,
Encore une fois tu assures grave !
Ce sera prochainement sur mon site!
Si vous allez jeter un oeil, soyez indulgent je suis en plein dev et il n’est pas du tout finis.
Par contre j’ai un souci, je n’ai pas d’affichage de l’anime flash, celle ci marche pourtant quand je l’ouvre en local.
Voici mon code :
Tu as une idée ?
Bonjour sam,
Oui, je vois d’ou ca vient.
Tous les chemins sont en relatifs dans le code du flash (le chargement du xml et le chargement des images)
Il faut donc que tu les modifies en les mettant en absolu, ca sera plus simple:
/public/xml/ au lieu de xml/ et idem pour els images que tu charges.
Et voila :) bonne chance
Céline
.. une très belle source…
On m’a fait connaitre le site parce que je suis à la recherche du même principe.
En fait je voudrai refaire le menu carroussel 360° identique à celui du site de Ogilvy New Zealand ( http://www.ogilvy.co.nz ).
J’ai essayé de paramétrer les sources mais je constate que c’est pas encore assez identique…
Si quelqu’un peut m’aider…
Merci
I couldn’t understand some parts of this article nnial 2007 - salvatore iaconesi - del.icio.us poetry, but I guess I just need to check some more resources regarding this, because it sounds interesting.
merci pour le code vraiment sympa !!!
Après plusieurs tentative mon code ne fonctionner pas correctement, avec le tien j ai pu corriger mes erreurs
Encore bravo
salut, il est super ce script. J’essaie de le bidouiller pour que la rotation se fasse en vertical, mais j’avoue avoir beaucoup de mal, aurais-tu une idée de comment faire celà? Merci !
Salut !
J ai repris ton code avec des modifs graphique.
Mais un probleme reste quand je place l’animation dans ma page les liens url ne fonctionne pas, il me renvoi vers le site flash.
Tu as une astuce pour sa.
Merci d’avance
Salut,
tres beau !!!!!!!!
j’aimerai pouvoir utiliser des photos de taille différente, comment je peut faire , le reflet ne s’affiche pas comme il faut.
d’avance merci
a+
touky:> Tes liens url ne marchent pas… humm, c’est étonnant. C’est un simple getURL que j’utilise, c’est donc surement tes urls qui ne sont pas bonnes… as tu bien le http devant? (et pas seulement www)?
sebalab >> Alors si toutes tes photos sont de tailles différentes, il faut gérer la taille du masque et du reflet en dynamique. Est ce que tu code un peu? Dans la fonction genere caroussel, apres avoir fait ton loadMovie du reflet et de l’image:
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.ref.inner.loadMovie(nodes[i].attributes.image);
Il faut que tu récupere le height et width de t.ref.inner, et que tu l’applique au masque. pour que toute l’image soit affichée. Il faudra aussi surement que tu recentre tes éléments à l’intérieur de chaque apercu, pour garder une rotation logique.
Apres ca, je ne suis pas sur que le rendu soit sympa, ca manquera surement d’homogénéité entre les images.
Sa3m>> Rotation à la verticale, je te poste un exemple dans la semaine, un peu long à décrire ici :)
merci c’est sympas, j’essaierai quand meme, mais j’ai encore du mal avec flash , je susi pas sur d’y arriver !!!
Bonne Année et
Bravo pour cette animation du carousel c’est du super boulot
Je voudrais qu’en appuyant sur une des images le xml appelle
un swf via un loadmovie avec un niveau
exactement comme ton deuxième carousel
sur http://minigalerie.lutincapuche.com/
ou
par un get url mais dans une pop up qui s’ouvrirait au dessus de mon carousel
merci
TT
Salut,
tout d’abord merci et bravo pour ce tuto; c’est exactement ce que je cherchais.
Mais j’ai un souci avec onrelease car dans mon carrousel, j’ai mis des tooltips, c’est une bulle explicant le lien:
{t.toolText = nodes[i].attributes.tooltip;
t.content = nodes[i].attributes.content;
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;
}
Et là ça coince quand j’applique un lien sur la commande onrelease, comme indiqué dans ton exemple, le tooltips disparaît….
Peux-tu m’aiguillé
Merci d’avance
Coucou, déjà, BRAVO et MERCI beaucoup pour ce superbe carrousel, mais voilà, j’ai 2 petites questions:
1) Est-ce qu’il y a un moyen pour qu’en cliquant sur l’image lien, ça nous change complètement de page, au lieu d’ouvrir une autre fenêtre.(pour se servir du carrousel comme menu principal)
2) Y a-t-il un moyen d’empêcher les alertes de sécurité sur IE et Firefox en l’intégrant au html?
Merci d’avance
Salut, bravo pour ce caroussel :)
J’ai voulu mettre des images plus petites en largeur mais j’ai un rectangle gris derrière, que doit on paramétrer pour les largeurs d’images ? merci
Je vois il faut supprimer un fond sur un clip, par contre autre prolbème mais plus important cette fois , la taille de la lecture du flash, 800×600 comment réduire la taille sans deformer la lecture ?
genre 600 x 170 , merci
Bonjour et bravo pour ce carrousel. Je souhaiterais ajouter un effet en rollover sur les images. Je voudrais qu’au survol d’une image, elle zoome un peu vers nous, comme sur cet exemple: http://www.emakina.com/work/index.cfm .
N’étant pas très doué en actionscript, pourrais-tu m’aider? Merci
Après quelques heures j’ai pu m’en sortir héhé,
Est ce qu’il est possible de modifier la ligne suivante:
this.getURL(this.lien,”_blank”);
Le but : pouvoir inscrire directement dans le xml la facon d’ouvrir le lien , je pense que cela serait bien pratique, merci :)
Bonsoir Lanner,
je viens de poster plus haut une v3 qui contient l’intégration de la cible du lien dans le xml. Tu met donc self ou blank selon tes besoins. Le xml a donc changé, un attribut en plus, puis tout simplement lors de la création des images sur la scene, je leur attribut une valeur cibleLien que je réutilise lors du onRelease.
Pour Sam,
J’ai rajouté dans la v3 la rotation verticale, demandée un peu plus haut.
Qu’est ce qui a changé:
Les rayons :
var radiusX:Number=70;
var radiusY:Number=200;
La rotation du carousel, ou il faut inverser les calculs des x et y
//rotation du caroussel
function mover(){
this.swapDepths(Math.round(this._xscale) + 100);
this._x=Math.sin(this.angle)* radiusX + centerX;
this._y=Math.cos(this.angle)* radiusY + centerY;
var s:Number = (this._x - perspective)/(centerX + radiusX- perspective);
this._xscale=this._yscale=s*100;
this.angle += nSpeed;
}
et enfin la détection de la souris, qui se fait maintenant sur le y et non plus le x
//mise a jour de la vitesse du carousel quand la souris bouge
this.onMouseMove = function(){
nSpeed=(this._ymouse-centerY)/15000;
}
et voila, en espérant que ça réponde à tes questions
Beau travail , bravo pour le suivi :)
J’ai une question plus technique, attention :)
Est ce qu’il est possible de mixer ce carroussel avec le “lightbox” connu pour afficher les images avec un effet superbe (il y a plusieurs versions), le but est de mixer l’appel du clic sur le flash et du code externe javascript/php.
Ce serait superbe pour afficher en grand l’image une fois qu’on clic la miniature, je pense que ce serait royal ^^.
Bonjour,
Je dois faire un DVD, avec un carousselle sur le même principe que celui qui est en haut. Je dois avoir que 4 boutons,
1 bouton qui renvoi sur une vidéo,
1 bouton qui renvoi sur des pdf à télécharger
1 bouton qui renvoi sur un mail to
1 bouton qui renvoi sur un lien http
mon carousel doit être statique au départ, lorsque je clique sur n’importe quel bouton il doit venir devant et au deuxième clique ouvrir une fenêtre avec dedans par exemple ma vidéo.
J’ai fait des tutos, mais je ne vois pas comment, charger au une vidéo, ni même un swf, ni même un pdf.
Je sèche, savez-vous comment pourrais-je procéder ? merci
J’oubliais j’ai un exemple ;
http://dev.sheridan.edu/Home_page_int/Swfs/beta.asp?id=1
si l’animation ne marche pas il faut aller en haut à gauche et cliquer sur ; detect.asp
merci beaucoup
Lanner, pour plugguer une lightbox, aucun souci, il te suffit d’insérer dans le lien l’appel de la fonction js de la lightbox avec les bons paramètres! Je ne vais pas te macher le travail, c’est vraiment très simple, il suffit de lire la doc de lightbox.
Enjoy
Bonjour,
euh… personne à une idée pour mon anim ?
ça serait vraiment sympa tout en sachant que je ne suis pas une bête en actionscript… merci
bonsoir kler,
Ce que tu veux faire est très précis, et ne correspond pas trop au tuto présenté ici.
Sur le pincipe, il faut que tu appelle une fonction différente pour chacun des clips de ton carousel, donc tu passes un id dans ton xml qui te permet de savoir quelle fonction appeler.
Pour le http, le pdf et le mail to, ca reste un getURL, pour la vidéo tu met une exception et tu load un movie clip ou tu l’attache sur la scene.
Ce carousel est un exemple, une base, chacun brode ce qu’il veut dessus.
Il faudra que tu modifies aussi la fonction mouseMove pour l’effet que tu souhaite avoir.
Bon courage, c’est en essayant qu’on apprend!a+
bonjour !
je n’arrive pas à prendre la version 2 zipée (page manquante) et en plus, j’ai une version mx2004, donc j’arriverai pas à ouvrir le fichier .fla
en fait, il me manque juste de quoi faire le lien http sur les images…
merci de ton aide !
Bonjour Charline,
Le lien cassé est réparé!
Bonjour!
Merci pour ton excellent travail…ça nous aide énormément!
J’ai une problématique assez simple (je crois) que je n’arrive pas a résoudre. J’utilise ton carrousel et j’ai remplacé les images par des objets (des vase etc).
Le problème c’est que je n’arrive pas a faire en sort que les objets se placent alignés en bas (donc avec le reflet qui se place correctement).
J’ai essayé de changer l’alignement du mc ‘inner’ et aussi ‘item’ mais je n’arrive pas a gérer le placement comme je voudrais. Si un objet est plus haut, le reflet se chevauche avec l’objet.
J’espère m’être bien expliqué….
help!
Merci pour ton aide!
oops….je m’excuse, j’avais pas vue que sebalab avait déjà posé la même question.
Ceci dit, je n’ai pas trop compris ce que suggère:
>>Il faudra aussi surement que tu recentre tes éléments à >>l’intérieur de chaque aperçu, pour garder une rotation logique.
Vue que les éléments sont appelés depuis l’extérieur dans le même mc ‘item’….
c’est donc dans le code qu’il faut ajouter? sinon, ce n’est pas possible de faire en sort que tout les éléments sont aligné en bas….comme sur les site de maison&objets http://www.maison-objet.com/
merci encore!
Bonjour
merci pour cette version de carrousel ! L’attribution différentié de liens dur chaque icon ne semble pas fonctionner : une idée ??!!! je bute
Bonsoir à nouveau
Je ne vois pas vraiment comment placer le lightbox sur les liens de chaque image …..
Si quelqu’un saurait me donner un coup de main , je n’ai pas les compétences requises pour y parvenir
Merci d’avance
Je trouve qu’avec un lightbox ce carroussel serait superbe :)
Hello Laner
Je te propose très bientot une solution
A+
Super nouvelle , j’utilise deja une version de lightbox modifié en diaporama (en esperant que je puisse remplacer les fichiers si tu nous fait un ajout ^^) en tout cas encore bravo pour ton travail
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.
Merci d’avance si vous pouvez m’aider !!!
merci d’avance !!!
Salut, un petit tour voir s’il y a des nouvelles :)
merci
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)
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
Hello MuadDib, bon ben parfait, tu as trouvé la solution avant que je n’ai eu le temps de te répondre! Bien joué..
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
@+
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 ?
Resalut,
Je repasse faire un petit tour pour vous saluer et voir s’il y a eu du nouveau pour ma demande,
merci merci :)
Oups lanner, j’avais bien oublié, tu fais bien de me le rappeler, ca viendra dans le week end sans fautes !!
A+
Nickel ^^
Par contre on pourra toujours choisir de placer un lien ou l’affichage lightbox ?
Merci
[…] Pour l’explication du code, tout est commenté dans la source, ou dans le premier article sur le carousel. […]
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 !