script carousel

SCRIPT CAROUSEL
créé par Lutin capuche
oui, il manque un R
TUTO par Clochar
Dans ce carrousel, des images tournent comme sur un manège et en approchant la souris on
ralentit la vitesse de rotation ; on peut arrêter le manège, inverser le sens de rotation et en
cliquant sur une image, on peut soit obtenir une grande image avec une légende, soit renvoyer
sur un lien. Tout est paramétrable; taille, nombre d'images, taille des images, vitesse, effet de
perspective, transparence vers l'arrière plan, couleur du fond reflet des images au sol et même
on peut transformer le manège en grande roue verticale; c'est dire que c'est un beau manège.
1/ Récupérez le script
Téléchargez la source
http://www.lutincapuche.com/tuto-flash-faire-un-caroussel-v2/
C'est le répertoire "sources_carousel4.zip"
Décompressez l’archive
2/ Préparez vos images
Les images doivent être au format PNG obligatoirement
On doit disposer des images en 2 tailles , une petite dite aperçu et qui est celle que l'on voit tourner
et une grande qui est celle qui sera présentée quand on cliquera sur l'image aperçu.; mais ce n'est
pas obligatoire. Bien que le nombre d'images puisse être élevé il faut jouer entre 4 au minimum et 12
au maximum; (l'exemple en comporte 8).
Certains effets peuvent être obtenus en ayant une petite image et une grande différente
3/ Définir les images
Remplissez le fichier xml/icons.xml avec les lignes correspondant aux noms des images que vous
souhaitez afficher. Pour chaque image, renseignez :
image,
l’image en aperçu, obligatoire, utilisée dans le carrousel,
grandeImage, l’image en grand, optionnel,
si remplie: la lightbox est activée avec le chemin relatif de la grande image,
si vide:
la lightbox est inactive, on revoie vers getUrl au clic,
tooltip,
la légende, optionnelle, utilisé pour la légende et la ligthbox,
lien,
le lien optionnel,
si la lightbox est inactive, un clic sur l’image renvoie vers ce lien
si la lightbox est active, inutile (laisser vide)
Les images tourneront dans l'ordre, on peut en mettre plus ou moins
La taille des images aperçu est ajustée à l'écran pour que toutes les images aient la même largeur
(indiquée dans les paramètres) et la hauteur est recalculée en conséquence
On peut mettre pour l'image en grand, la même image que l'image en aperçu et là elle sera présentée
à sa taille réelle
3/dans le répertoire Images mettez vos images en aperçu
4/ dans le répertoire Images/fat mettez vos images en grand ( ca pourrait ne pas être les mêmes;
mais elles doivent avoir le même nom)
1
5/ Paramétrage
Ouvrez "carousel.fla" avec Adobe Flash, Vous devez donc disposer du logiciel Flash d'Adobe
(sinon trouvez un ami qui le possède et qui pourra vous le modifier).
C'est un fichier fait avec la version 8 d'Adobe Flash en AS2, si vous utilisez une version postérieure
faites attention lors de l'enregistrement après modifs.
A l'ouverture du fichier vous aurez un rectangle de couleur correspondant au fond du carrousel (gris
foncé dans l'exemple)
A/ Dans le coin en haut à gauche mettez en surbrillance le calque Settings
Dans le menu allez à Fenêtre puis clic sur Actions
le texte suivant est édité:
//vars to edit
var wScene:Number = 800;
var hScene:Number = 600;
var radiusX:Number = 300;
var radiusY:Number = 70;
var centerX:Number = wScene/2;
var centerY:Number = hScene/2;
var nSpeed:Number = 0.05;
var perspective:Number = 70;
var largeurIcons:Number = 200;
//largeur du clip flash
//hauteur du clip
//rayon horizontal du carousel
//rayon vertical du carousel
//centre horizontal du clip
//centre vertical du clip
//vitesse de rotation
//perspective visuelle du carousel
//largeur des images à afficher dans
le carousel
//taille du reflet
//activation de l’affichage de la légende
au rollOver, true ou false
var hauteurReflet:Number= 80;
var isLegende:Boolean = false;
Modifier les valeurs désirées (ici en rouge)
le rayon horizontal est en fait le grand axe horizontal de l'ellipse décrite par les images et le rayon
vertical en est le petit axe vertical; centre horizontal et vertical = coordonnées du centre de l'ellipse ; ici
au milieu du cadre; perspective= taille de l'image quand elle est en arrière par rapport à 100% quand
elle est juste devant. vitesse = vitesse maximum en
B/ clic droit dans le rectangle gris pour faire apparaitre les Propriétés de l'image
ce qui ouvre une fenêtre avec la possibilité de paramétrer:
- le titre et la description du fichier
- la taille du rectangle de fond ; il doit être de la même taille que celle du clip flash paramétré plus haut
- la couleur du rectangle de fond; actuellement c'est un gris #303030
- la cadence des images du clip ; laisser à 24 images/sec.
Remarques: le clip flash a un fond transparent et on pourrait songer à lui donner directement une
couleur ; mais on a alors une interférence avec la lightbox, d’où le rajout d'un fond de couleur externe
au clip dans le fichier index.
La définition du cadre faite aussi dans les fichiers index.html
Puis sauvegardez le fichier.
6/ Lightbox
la Lightbox c'est le fond qui s'affiche quand on clique sur une image du carrousel et qui le bloque,
affiche la grande image et la légende.
Pour que la lightbox fonctionne, il faut mettre certains éléments dans le fichier index.html:
Si vous ne souhaitez pas utiliser la ligthbox, prenez exemple sur le fichier index.html.
et laissez tous les attributs grandeImage vides dans le fichier icons.xml.
Si vous souhaitez utiliser la ligthbox, prenez exemple sur le fichier index_lb.html
2
Dans le fichier icons.xml, remplissez bien l’attribut grandeImage.
Si cet attribut est vide, un clic sur l’image aperçu ouvre le lien indiqué dans lien.
Si cet attribut est renseigné, alors l’image grande est ouverte avec la lightbox
Tous les fichiers nécessaires au fonctionnement de la lightbox sont inclus dans le zip téléchargé.
7/Publier
Lorsque c`est terminé uploader avec un client FTP, le répertoire carousel4 à la racine du site.
Pour l'utiliser dans une page, y placer une frame à la bonne taille et mettre un lien vers l`adresse du
fichier index_lb.html ou index.html suivant que l'on veut ou non utiliser la lightbox
Ce qui pourrait donner ceci : http://nom_du_site.com/carousel4/index_lb.html
Remarque:
Si les images de derrière parasitent un peu celles d’avant plan, ajoutez un effet de
transparence
Dans carousel.fla dans le code de Action, ajouter
ligne 123 environ dans la fonction mover située au niveau de la rotation du clip :
this._alpha=Math.sin(this.angle)*50 + 50;
à faire varier pour avoir l’effet voulu comme par exemple pour un effet moins marqué:
this._alpha=Math.sin(this.angle)*30 + 70;
Remarque:
Pour avoir 2 lignes de commentaires, on peut ajouter un tooltip
a/ dans icons.xlm ajouter juste après le tooltip de base
tooltip2="texte2…."
b/dans carousel.fla dans le code de Action, ajouter
- vers la ligne 88 environ
myItem.tooltip2=nodes[i].attributes.tooltip2;
- et vers la ligne ligne 146 environ dans la partie //fonction d’affichage de la légende
this.label_txt.text=cible.tooltip2;
Remarque
Si la lightbox ne marche pas en local.
C'est parce que l’endroit où on a téléchargé la source ne faisait pas partie des « sites de confiance »
de notre flashplayer.
Donc à l’affichage du message d'erreur aller sur le site de Adobe flash player puis support puis
Gestion des paramètres à droite >>dérouler Modifier; cliquer sur Ajouter puis sur Rechercher un
répertoire et y mettre le répertoire local où se trouve le flash du carrousel.
3
ROTATION en VERTICAL
Il existe une version ou la rotation se fait comme dans une grande roue.
on utilise alors le fichier carouselVertical.fla
On a intérêt, alors, a avoir des images plus larges que hautes pour une bonne esthétique.
4