WebLab – Création de sites Internet au Maroc

agence web marocaine – moroccan web agency

Rotation d’images en Flash

La plupart de mes clients me demandent d’inclure une rotation d’images en Flash sur leur site.

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.

7 Commentaires, Commentaire ou Rétrolien

  1. j’ai crée un plugin de typo3 avec JW Image Rotator , pour le site : http://www.euro-muslims.eu, s’il y a qlq ‘un interessé, qu’il me contacte sur mon email : info@designplus.be

  2. Adrien

    Bonjour,

    Lorsque tu envoie le fichier Xml au flash avec :
    s1.addVariable(« file », »imagerotator/madrid.xml »);
    Qu’as tu fais dans flash pour qu’il prenne ce Xml ?

    J’ai besoin d’appeler le flash avec addVariable, mais mon flash le prend pas en compte… et je ne trouve pas ce qu’il faut mettre dans le .fla pour qu’il prenne le Xml de addVariable …

    Merci

  3. Wahid Lahlou

    Adrien,

    Désolé pour la réponse tardive.

    Tu n’as pas besoin de changer le FLA pour qu’il prenne en compte ton Flash. Le FLA lit le contenu de la variable [file] que tu lui envoies avec addVariable.

    Assures-toi seulement que tes chemins sont corrects.

  4. Sidy Mohamed

    Bonjour, tout d’abord merci pour cet article sur JW Image rotator.

    Je l’ai mis sur un site que je suis entrain de concevoir mais il y a un problème de compatibilité avec IE6. Sur firefox il marche bien mais quand c’est IE6, il charge infiniment.

    Merci pour votre réponse future.

  5. Wahid Lahlou

    Bonjour Sidy Mohamed,

    Merci pour le commentaire.

    Il se peut que le SWF ne soit pas correctement intégré dans la page. As-tu utilisé la technique en Javascript pour ça ?

    Par contre, si je te comprends bien, et s’il « charge infiniment », ça veut dire que le SWF est chargé par la page, mais qu’il ne trouve pas le XML ou les images. Vérifie tes chemins d’accès. Rappelle-toi qu’ils doivent être relatifs au SWF.

    N’hésite-pas si tu as encore un problème.

  6. Samuel

    Bonjour, merci pour ses infos bien utiles,
    cependant je rencontre un petit soucis sur la durée de la transitions,
    quelle variable faut il utiliser afin de rallonger la durée de son fade ??

  7. Wahid Lahlou

    Bonjour Samuel,

    Voici la liste des variables prises en compte par le Rotator : http://developer.longtailvideo.com/trac/wiki/Flashvars3

    Si je t’ai bien compris, tu veux que la transition dure plus ou moins longtemps ? Tu ne parles pas de la durée d’affichage d’une image.

    Je ne crois pas qu’il est possible de ralonger/réduire la durée des transitions, seulement la durée d’affichage d’une image : rotatetime en secondes.

    Si tu trouves la solution, partage la avec nous. Merci !

Répondre à “Rotation d’images en Flash”