Dewslider 2.0, le retour des diaporamas en flash

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

Mise à jour : nouvelle version disponible ici : Dewslider

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 :

Dewslider

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>

146 commentaires pour “Dewslider 2.0, le retour des diaporamas en flash”

  1. Cesy dit :

    Bonsoir,

    Je voulais savoir à tout hasard si quelqu’un avait une astuce pour augmenter la durée du fondu de ce slideshow ?
    Je trouve le passage d’une image à l’autre trop rapide, mais je doute que cet élément soit configurable.

    D’avance merci pour vos précisions !

  2. olivier dit :

    Bonsoir et bonne année a tous
    Dew tu fais du tres beau travail (tiens j’ai deja lu ca quelque part !!)
    une petite question tout de meme
    est il possible d’ajouter un hyperlien sur le dewslider, en effet sur mon site je souhaiterais qu’un mini dewslider ouvre une page de description… (les minis sont deja en pla ce sur le site) mais sans FLA c’est pas facile .. lol
    merci d’avance

  3. dahu dit :

    Bonjour,

    Une petite demande: pour décrire un peu plus les photos, ne disposant plus des infobulles avec Dewslider, j’aimerai pouvoir écrire sur une deuxième ligne.
    Cela peut-il se modifier?
    merci
    Dahu

  4. stefart dit :

    Super comme diaporama en flash, c justement se que je cherche.
    Merci
    Mais y’a pas une fonction qui permetrai de lire directement des images contenu dans une dossier sans avoir a lister ?
    serai juste plus simple a administrer

  5. FrenchSidaz dit :

    Bonsoir à tous =)

    Je voudrais tout d’abord remercier Dew pour les divers éléments flashs qu’il nous fait partager =)

    Cependant j’ai un problème avec celui-ci… J’aimerais mettre un SlideShow sur mon Myspace, mais je n’trouve pas comment faire =( J’arrive à le faire fonctionner ici : menooo.free.fr/flash/dews… mais impossible de le mettre sur mon MySpace =(

    Help =) Merci d’avance !

  6. klod dit :

    Bonjour,

    J’ai découvert par hasard le DEWSLIDER alors que j’étais un utilisateur assidu de DEWPLAYER depuis longtemps : l’occasion de dire merci pour ces superbes outils.
    Et aussi de demander la "fusion" des 2, c’est à dire le mode d’emploi pour mettre de la musique derrière le diaporama,en boucle, sans faire forcément apparaître le DEWPLAYER…
    Bien cordialement

  7. Rémi M dit :

    Bonjour,

    Pour palier le problème de redimensionnement des images, j’ai fait un petit soft freeware en deux temps trois mouvements trouvable ici :

    http://www.blogdessciences.fr/20...

    Voila,
    Bonne journée

  8. Macak dit :

    Dewslider semble poser probleme sous IE7 (et pas sur IE6). :-(

    Le comportement observe est le suivant : il faut attendre un tour complet du diaporama pour enfin voir la premiere image. C’est assez genant, surtout quand le diaporama est long !

    Le prechargement des images pourrait peut-etre regler le probleme…

    Sinon, ce slider est super. Et avec un prechargement et la gestions d’images de differentes dimensions il serait vraiment parfait !

    Bravo pour ce travail.

  9. Bk59 dit :

    Salut!
    Très bien ton Dewslider! Petite question : peut-on l’utiliser librement sans le modifier?
    Merci

  10. lestoile dit :

    Dommage que Dewslider ne tienne pas compte des dimensions différentes des photos : toutes apparaissent sous le même gabarit, qu’elles soient sous forme portrait ou paysage, ou autre. Le fichier xml est trop rigide pour s’adapter à des dimensions variables. Dommage.. dommage. Le logiciel était presque parfait !

  11. laomimi dit :

    ça marche trés bien sur firefox sur ie6 ça marche pas du tout j’ai une image blanche avec titre et n° de photo correct, qui commence aléatoirement a la 1° ou a la nieme position et qui se continue juscqu’a la derniere photo, par contre apres tout etant charge ça reboucle correctementent.

    reponse a lestoile tu peux utiliser une bidouille a l’adresse :
    http://www.blogdessciences.fr/20...
    pour redimensionner les images en mode portrait ça marche bien.
    merci si quelqu’un a une idee

  12. Xay dit :

    Salut,
    je m’y connais très peu mais apparament ton truc est un exploit.
    J’ai un blog sur Live space et je cherche sur le web comment réaliser depuis la liste de mes photos hébergées sur ImageShack comment faire un diaporama (avec une résolution la plus proche des photos originales) mais ce blog n’accepte que le HTML.
    En plus les hébergeurs gratuits nous jettent des cailloux si on leur propose des fichiers *.EXE ou *.SCR (résultats des slideshows auto-éxécutables créés par Xnview) et la plus part des logiciels qui nous créent des fichiers diaporama (*.sld) le font exclusivement depuis des images hébergées sur notre propre disque dur.
    Ma question est donc : connais tu un code HTML pour faire un slideshow d’images hébergées sur le web ?

  13. Cymon dit :

    Xay> en html pur ce n’est pas possible, utise le fichier flash ci dessus ou trouve en un en javascript (ou encore en java).

  14. Marie-Aude dit :

    Bonsoir, je trouve votre galerie superbe, j’essaie de l’utiliser mais je suis face au bug du viewer blanc (erreur de chargement xml)
    J’ai essayé carrément avec votre fichier, j’ai essayé en donnant différent doctype à ma page html, mais cela ne change rien. Et j’ai aussi vérifié que la page html est valide.

    Puisque d’autres personnes ont eu le même problème pouvez vous donner des indications sur ce qui peut causer le problème ?

    Et / ou éventuellement me dépanner ?
    La page est là http://www.client2.lumieredelune...

    Merci d’avance

  15. Hei dit :

    Hello, super slider !! Il fonctionne impec !
    Je l’ai integré en clip dans une bannière pour le fondre dans l’interface ça marche nickel !!
    Par contre y aurait-il un moyen pour obtenir un fond transparent du genre:
    monClip.loadmovie("dewslider.swf?xml=data_1.xml&wmode=transparent)
    Quand le slider se lance j’ai un fond coloré ou blanc "un tout petit peu" gênant si je veux glisser un arrière plan…
    Sinon merci encore !!

  16. Marie-Aude dit :

    En fait ça marche pour moi uniquement si le swf, le xml ET la page html sont dans le même dossier. Comment spécifier un chemin pour aller chercher ailleurs le swf ? J’ai essayé toutes les syntaxes possibles, y compris avec une url externe, et ça ne marche pas.

  17. lsteamgeo dit :

    Bonjour, super script mais j’ai quand même une petite question : Est-il possible de faire défiler les photos de façon aléatoire.

    Merci.

  18. Nesta dit :

    Est-il possible de mettre 2 dewslider différents sur un même site web ?

    Si oui, comment faire ?

    Merci

  19. ArGuS-SergenT dit :

    Encore une question ^^
    Est-il possible de mettre un lien ?
    C’est à dire que lorsqu’on clique sur le slideshow une fenêtre s’ouvre vers un nouveau site.

    Merci par avance pour toute aide,

  20. chacho dit :

    Bonjour et merci pour ce super outil !

    A mon tour, je fais la meme demande que certains : Serait-il possible d’avoir un lien sur l’animation afin d’ouvrir une nouvelle URL ? Ce serait le TOP !

    Merci encore.
    Chacho.

  21. Walou dit :

    Super !

    Merci à celui qui l’a developpé :)

  22. RV dit :

    ben moi ça marche partiellement
    je m’explique la première image est chargée mais dès que je clique pour la seconde ainsi que les autres cela ne m’affiche que du blanc, je sui deg…
    personne ne peut me venir en aide ?

  23. MigBru dit :

    Bonjour. Pas mal du tout comme outil. Bien réalisé et facile à mettre en oeuvre. MAIS … chez moi cela ne marche pas très bien. En local (lorsque je visualise en local le diaporama que j’ai préparé), c’est impeccable. Lorsque je tranfère les mêmes données chez mon hébergeur, cela ne fonctionne plus très bien : j’ai un écran blanc (ou noir selon le paramètre que j’emploie) mais l’étiquette et le numéro de l’image qui devrait s’afficher son corrects. Si j’utilise les boutons de navigation (ce qui interrompt le défilement automatique) tout redevient OK. Quelqu’un peut-il m’aider ? Merci d’avance. Michel.

  24. RV dit :

    personne pour nous venir en aide ?

  25. fab dit :

    Bonjour,

    Quelqu’un pourrait-il m’expliquer comment par exemple, inclure ce diaporama flash dans un site traditionnel en html. Comment faire pour appeler le diaporama depuis une page html?

    Merci, je débute.

  26. fab dit :

    Finalement, en lisant et adoptant une démarche progressive, c’est tout bon. Ca fonctionne du tonnerre. Par contre, comment fait-on pour avoir sa propre police pour les commentaires de photos. Peut-on y appliquer une css?

    Merci.

  27. cajou27 dit :

    Peut on écrire avec des balises html pour la légende

  28. poulette dit :

    Salut!!

    Ce diaporama est de grande qualité !! BRAVO pour le travail.
    D’ailleurs il est tellement bien que j’aimerais l’utiliser.
    Est-il possible d’intégrer ce diaporama sur le site d’un client, sachant que je bosse pour une webagency ? Quelles sont les conditions d’utilisation ?

    D’avance merci.

    Et encore félicitations.

    poulette

  29. dalisse dit :

    Bonjour,

    parfais ce diaporame, c’est que je cherchait.simple et rapide avec un joli fondu.
    Comment se procurer votre licence pour l’exploiter sur mon site?
    cordialement

  30. prevert dit :

    J’aimerais agrandir la zone de la légende. Est-ce possible ? Si oui comment puis-je le faire.

    Merci d’avance pour vos réponses.

  31. Yann dit :

    impeccable ce petit truc merci beaucoup

  32. Christophe dit :

    Merci c’est super. On va l’utiliser pour cette BD.

  33. lili dit :

    Merci pour ce diaporama qui, après maintes recherches et tentatives, est de loin celui que je préfère. Un hic cependant : une de mes photos (en position verticale dans une série photos position horizontale) apparaît déformée. Quelque chose m’aurait-il donc échappé? Merci d’avance pour la réponse! lili

  34. bNj dit :

    Merci pour ce joli slider.
    Cependant l’option de rendre clickable les images serait apprecie ;)

  35. fabien dit :

    comment faire pour modifier la taille de la police de la légende ?

  36. chtouprute dit :

    Merci au développeur, c’est exactement ce que je cherchai, un petite appli flash pour faire un diaporama avec comme entrée du xml. C’est vraiment au top.

    Par contre, je l’ai vu sur un autre slideshow viewer, qui est aussi très bien fait mais limité par une license ( http://www.maani.us/slideshow/ ), c’est la possibilité de pouvoir affecter une transition à chaque image, et c’est pas mal.

    Autre problème que je viens de rencontrer, que j’ai également rencontré sur le slideshow dont je viens de parler, c’est que si le XML change (parce que généré par du php) entre 2 exécutions du flash, le contenu n’est pas modifié, c’est resté dans le cache. L’autre slideshow résolvait le problème en ajoutant un id généré aléatoirement dans les paramètres du flash, et je n’ai pas trouvé d’équivalent ou d’alternative pour celui-ci.

  37. korteks dit :

    Bonjour. Tout d’abord félicitations pour tout slide facilement paramètrable. Ensuite j’aurais une question. J’aimerais savoir si il est possible d’empêcher le diaporama de boucler mais de s’arrêter à la fin du premier tour des photos. Merci

  38. convertisseur dit :

    Merci encore pour avoir developpé ce script.

  39. Djé dit :

    Bonjour,

    A la recherche d’un diaporama xml/ javascript, je me retrouve à tester votre dewslider (firefox 3). J’ai deux soucis : le diaporama ne défile qu’au clic (ce qui n’est pas gênant-, plus gênant : les légendes ne semblent pas s’afficher. J’ai tenté quelques mais rien n’y fait…
    M’y suis mal prise ?

    Merci d’avance pour votre réponse.
    Djé

  40. karine dit :

    Bonjour,
    j’utilise diaporama dans drupal 6 t je rencontre un soucis.
    lorsque je crée le diaporama, j’ai la possibilité de mettre un contenu texte, or celui ci s’affiche sous le diaporama et je voudrais le mettre au dessus.
    or, lorsque je vais dans le fichier diaporama.module, je ne trouve pas l’ordre d’affichage,
    est ce que vous pouvez me renseigner, merci d’avance,
    karine

  41. Patrick Kwinten dit :

    nice work, but too bad I can not align the images inside the flash movie :-(

  42. jim dit :

    Bonjour à tous,

    Visiblement il y’a pas moyen de trouver les sources de cet outils ?

    pleusieurs personne le demande mais il ne semble pas y avoir de réponse…..

    bien à vous tous

  43. Magena dit :

    Bonjour!

    Tout dabord,Merci pour ce diaporama photo très esthétique et aisée à intégrer.

    cependant,Je vois qu’il ne prend pas encore en compte le format portrait et je me demandais, y t’il possibilité de pouvoir gérer les images de manière dynamique (avec la librairie GD de php par exemple) ?

    oui sinon y aurait il d’autres solutions?

    merci d’avance pour vos réponses

  44. AuréFromMars dit :

    mercimercimerci

    Je cherchais à faire plusieurs petits diapo discrets au sein de chacune de mes pages. J’utilise Joomla et je n’y connais absolument rien ni en flash, ni en html.
    Le top cet outil ! Ca fonctionne à merveille exactement comme je voulais !!
    Et c’est rare que je puisse être aussi contente aussi rapidement ! (il m’a bien fallu bidouiller avant d’y arriver… n’y connaissant rien et devant l’intégrer dans un Joomla si complexe pou une newby !)

    4ans et demi après le premier post… fière de vous dire que ça fonctionne toujours aussi bien !

    Merci !!!

  45. Megaten dit :

    Une découverte et hop dans le site de l’association que j’allège et rajeunie.
    Merci pour ce joyaux tout simplement.

  46. culnuteurdebase dit :

    Encore merci pour cette contrib : pas mal !
    Un petit bug pourtant:
    Sous firefox 3.6, lorsque le pointeur de la souris est sur le diaporama et que l’on se sert de la roulette de défilement, les images images défilent en fonction de la souris et non en fonction de la tempo. De même on ne peut plus remonter ou descendre dans la page. Il faut sortir le pointeur du diaporama pour pouvoir reprendre un fonctionnement normal de la molette.

    Suis-je le seul à rencontrer ce problème ?
    Y a t-il un paramètre quelque part pour eviter ce phénomène ?

    Remarque : testé sous IE8 et Chrome : pas de problème.

Laisser un commentaire