Blup!

Dewslider permet de réaliser des slideshows d'images en Flash.

Mise à jour : nouvelle version disponible ici : Dewslider

La principale nouveauté réside dans l'utilisation d'un fichier XML pour stocker la liste des images à afficher, ainsi que dans l'ajout d'options pour personnaliser les couleurs, le style et l'ombrage du cadre (qui reste facultatif). La taille de l'animation s'adapte désormais automatiquement aux proportions, sans déformer les images. Elle est modifiable librement dans les options et influe sur les positions des boutons, du cadre et de la légende, ce qui fait qu'au final l'ensemble est beaucoup plus souple à utiliser et peut convenir à n'importe quelle mise en page. L'autre petite correction mineure figurant au programme est la désactivation du mode automatique lorsqu'un des boutons est pressé.

Voici un fichier XML exemple, à nommer dewslider.xml par défaut et à placer dans le même répertoire que le fichier swf :

<?xml version="1.0" ?>
<album
 width="500"
 height="375"
 bgcolor="0x336699"
 framecolor="0xffffff"
 padding="10"
 margin="10"
 shadow="8"
 shadowopacity="20%"
 shadowcolor="0x000000"
 showbuttons="on"
 buttonstyle="transparent"
 showtxt="on"
 txtcolor="0xffffff"
 auto="5"
 fullscreen="off">
  <img src="photo1.jpg" title="Légende de la photo 1" />
  <img src="photo2.jpg" title="Légende de la photo 2" />
  <img src="photo3.jpg" title="Légende de la photo 3" />
</album>

Et voici le détail de ces options :

width="500" height="375"

Largeur et hauteur, en pixels, des images à afficher. Cela doit correspondre à la zone affichant les JPG, pas aux dimensions totales de l'animation SWF qui peut être beaucoup plus grande (en comptant les marges par exemple).

bgcolor="0x336699"

Couleur de fond de l'animation. Il s'agit du même code hexadécimal que pour les couleurs HTML, sans # mais précédé de 0x. Exemple : 0x336699 au lieu de #336699.

framecolor="0xffffff"

Couleur de fond du cadre (Ici du blanc).

padding="10"

Espace entre les bords du cadre et des photos. Il suffit de le mettre à 0 pour ne pas utiliser de cadre.

margin="10"

Marge entre les bords du cadre et ceux de l'animation. En général ce chiffre doit être supérieur ou égal à la taille de l'ombrage.

shadow="8"

Taille de l'ombre sous le cadre. Mettre à 0 pour désactiver.

shadowopacity="15%"

Opacité de l'ombrage. Des valeurs faibles sont recommandées.

shadowcolor="0x000000"

Couleur de l'ombrage. (Ici du noir).

showbuttons="on"

Montrer les boutons suivant/précédent. Mettre à off pour les masquer.

buttonstyle="transparent"

Style des boutons. Il est possible de choisir entre default, transparent et flat.

showtxt="on"

Afficher la légende (attribut title dans le fichier XML) des photos s'il y a lieu et leur numérotation. Mettre à off pour désactiver.

txtcolor="0xffffff"

Couleur de la légende, indiquée de la même façon que la couleur de fond. Ici du blanc.

auto="5"

Délai. Mettre à off ou 0 pour désactiver.

fullscreen="off"

Mode plein écran : l'image remplira toute l'animation, sans marges, masquant cadre, boutons et légende. A réserver pour les cas particuliers.

Le tout est suivi de la liste des images à l'aide de tags img complétés par les attributs src et title, choisis par ressemblance avec le HTML de base pour faciliter la vie à tout le monde. Il est recommandé de se servir de l'Unicode pour constituer ce fichier XML sinon les titres comportant des caractères accentués seront affichés aléatoirement. Voici un exemple sans couleur de fond ni cadre (padding à 0), avec des boutons de style flat :

Je rappelle le code HTML pour se servir de l'animation :

<object type="application/x-shockwave-flash" data="dewslider.swf" width="640" height="480">
<param name="bgcolor" value="#ffffff" />
<param name="menu" value="false" />
<param name="movie" value="dewslider.swf" />
</object>

NB : le paramètre bgcolor du code HTML peut être modifié lui aussi pour être cohérent avec celui du fichier XML, c'est même recommandé. Par contre les dimensions width (largeur) et height (hauteur) spécifiées ci-dessus seront celles de l'animation Flash dans la page, et donc indépendantes de leurs homologues XML, décrivant elles la taille des images à afficher dans l'animation elle-même. Il est possible d'utiliser un nom de fichier XML différent, via l'argument ?xml=nom_du_fichier.xml :

<object type="application/x-shockwave-flash" data="dewslider.swf?xml=arf.xml" width="640" height="480">
<param name="bgcolor" value="#ffffff" />
<param name="menu" value="false" />
<param name="movie" value="dewslider.swf?xml=arf.xml" />
</object>