| Télécharger les fichiers sources de cet exemple (format CS5) |
Personnaliser cet exemple
Pour personnaliser les dimensions, la vitesse de rotation des icones, le style des reflets et autre, il vous faudra intervenir sur le fichier d'origine .fla inclus dans l'archive téléchargeable de cet exemple à l'aide du logiciel Flash Pro.
En ce qui concerne la désignation des icones affichés, leur nombre et l'url vers laquelle il redirige, votre éditeur de cod préféré ou simplement le bloc-note de Windows seront suffisants.
<?xml version="1.0" encoding="utf-8"?>
<carousel>
<icon>
<src>icon1.png</src> <!-- Designation de l'icone a afficher -->
<url>#</url> <!-- Url vers laquelle l'utilisateur est rediriger
lorsqu'il clique sur l'icone (remplacer # )-->
<tooltip>Fireworks</tooltip> <!-- Texte affiche au survol de la souris -->
</icon>
<icon>
<src>icon2.png</src>
<url>#</url>
<tooltip>SEO</tooltip>
</icon>
...
<icon>
<src>icon8.png</src>
<url>#</url>
<tooltip>CSS3</tooltip>
</icon>
<!-- L'animation affichera autant d'élément qu'indiquer dans ce fichier -->
</carousel>
Intégration dans votre page
Voici le code d'intégration permettant d'inclure cette animation dans votre page HTML
<param name="name" value="banner" />
<param name="src" value="chemin de votre fichier .swf" />
<param name="base" value="." />
<param name="wmode" value="transparent" />
<param name="flashvars" value="xml_source=chemin de votre fichier .xml" />
<embed src="chemin de votre fichier .swf" width="800" height="400" type="application/x-shockwave-flash" flashvars="xml_source= ../images/default.xml" wmode="transparent" base="."></embed>
</object>
Et voilà, après quelques retouches, vous pourrez présenter vos éléments sous la forme d'un très agréable carousel !