Après de multiples recherches, ce que j’ai trouvé de meilleur, pour sa flexibilité, sa simplicité et surtout sa documentation (en anglais) est JW Image Rotator. Il est Open Source et libre d’utilisation pour usage non commercial.

JW Image Rotator permet d’afficher les images contenues dans une playlist en XML au format RSS, XSPF ou ASX et d’appliquer une multitude de transitions entre elles. Il permet d’utiliser des images de type JPG, GIF et PNG, possède une variété de flashvars qui modifient le comportement du Flash, et une large API en javascript pour la communication entre le monde extérieur et le SWF. De plus, des modules pour différents CMS ont été développés pour faciliter l’installation.

Téléchargement

Page de téléchargement du JW Image Rotator…

Notez qu’il n’est pas obligatoire d’inscrire son adresse e-mail avant de cliquer sur le boutton Download JW Image Rotator. Mais il faut cocher la case d’acceptation de la license d’utilisation.

Un fois téléchargé et décompressé, le dossier imagerotator contient un fichier README.HTML que je vous conseille de lire. Il contient un exemple d’installation et un début de documentation.

Installation

L’installation de JW Image Rotator est relativement facile. La difficulté réside seulement dans la définition des chemins d’accès pour le SWF, le XML et les images.

On peut choisir plusieurs types d’intégration du SWF dans la page (Voir Embedding Flash). La technique la plus simple est d’utiliser une balise <embed> :

<embed
  src="imagerotator/imagerotator.swf"
  width="470"
  height="160"
  allowscriptaccess="always"
  flashvars="file=imagerotator/imagerotator.xml
    &transition=blocks"
/>

Cette technique a fonctionné en local, mais avec le même code et la même structure de fichiers, elle a buggé sur mon serveur et sur Internet Explorer. De plus, elle ne permet pas l’utilisation de l’API Javascript.

Une autre technique fournie avec le JW Image Rotator consiste à utiliser un script en Javascript qui intègre le SWF pour vous :

1. D’abord, définissez un DIV vide pour l’accueil du SWF

   <div id="container"></div>

2. Ensuite, insérez la librairie Javascript

   <script type="text/javascript"
     src="imagerotator/swfobject.js"></script>

3. Enfin, insérez ce code pour créer le SWF

   <script type="text/javascript">
     var s1 = new SWFObject("imagerotator/imagerotator.swf",
       "rotator","400","200","7");
     s1.addVariable("file","imagerotator/madrid.xml");
     s1.addVariable("width","400");
     s1.addVariable("height","200");
     s1.addVariable("shownavigation","false");
     s1.addVariable("transition","fade");
     s1.write("container");
   /script>

Dans cet exemple, tous les fichiers se trouvent dans le même dossier appelé imagerotator, vous devez adapter l’exemple à votre structure de dossiers. ATTENTION : tous les chemins doivent être relatifs à la page contenant le SWF. Vous pouvez utiliser un chemin absolu en cas de besoin : http://votre-domaine.com/imagerotator/…

Le XML

Un exemple est fourni avec le téléchargement : madrid.xml. Les formats possibles sont listés dans cette page du site de JW Image Rotator.

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <title>Grass by Night</title>
      <creator>Jeroen Wijering</creator>
      <location>imagerotator/image1.jpg</location>
      <info>http://www.jeroenwijering.com</info>
    </track>
    [...autres tracks...]
  </trackList>
</playlist>

Une image est contenue dans un enregistrement <track> qui contient aussi d’autres informations concernant l’image. Ces informations peuvent être affichées dans le Flash pour la navigation, la recherche…

Notez qu’un script serveur (en php, aspx …) peut être généré sur le serveur et remplacer le fichier XML. A condition bien sûr que le format généré corresponde.

ATTENTION : Là aussi, le chemin d’accès des images est la page contenant le SWF.

flashvars

Les flashvars sont les données envoyées au SWF à partir du <embed>. Un liste exaustive des flashvars possibles sont listées sur le site du JW Image Rotator.

Grâce au flashvars on peut choisir le fichier XML, le type de fondu, l’affichage ou non de la navigation…

Intéraction avec le Javascript

Le SWF du JW Image Rotator peut communiquer avec le monde extérieur grâce à une API en Javascript. Notez que pour des raisons de sécurité, cela n’est possible qu’avec la version 8+ du plugin Flash et que sur votre serveur en ligne (pas en local).

Toute la documentation requise se trouve sur le site.

J’avais posté, il y a quelques jours, une première version du gabarit du futur site de WebLab (suivre le lien). En voici un second. Personnellement, je le préfère (de loin) au premier… et vous ?

N’hésitez pas à faire des commentaires !

Pourtant, j’ai l’impression d’avoir un oeil assez avisé, car non seulement je sais reconnaitre (un peu comme tout le monde) un site beau d’un autre laid, mais je suis capable de faire pleins de commentaires techniques – à partir de quelques bases théoriques apprises ici et là – concernant l’équilibre des couleurs, des polices ou du layout.

Jusque là, quand je dois concevoir un site, je prend l’inspiration d’un site existant dont je « planifie » (dans ma tête) la quantité et la qualité des changements à effectuer. Je choisis celui qui me fera parvenir au maximum de résultat avec le minimum de travail.

Mais quand il s’agit de créer, c’est un autre paire de manche !

WebLab logo

Arriver à ça m’a pris des jours (et des nuits). Je voulais quelque chose qui aille droit au but : un look jeune, innovant, high-tech et qui reste professionnel. Y a-t-il une méthode ? Je ne crois pas, mais voici mon parcours :

1. Au départ, j’ai passé en revue toutes les polices de caractères qui me sont tombées sous la main – des milliers. Aucune ne m’a satisfait.
2. Ensuite, j’ai commencé à dessiner des formes sous Illustrator que je copiais dans Photoshop pour y appliquer des effets. J’obtenais tout le temps quelque chose d’approximatif, de mal exécuté ou loin de ce que j’avais imaginé.
3. Enfin, j’ai choisi une police qui faisait à peu près l’affaire, j’ai transformé les caractères en vecteurs (sous Illustrator : Type/Create Outlines) et j’ai retouché les vecteurs. J’ai arrondi les coins, déplacé les ouvertures des lettres et ajouté le trait dans le W.

Version alternative avec un background et quelques effets Photoshop

Vous aimez ?

Et vous ? Comment vous y prenez-vous ?