Alsacréations. Dewslider diaporama photo en Flash
Transcription
Alsacréations. Dewslider diaporama photo en Flash
DEWSLIDER UN DIAPORAMA D'IMAGES EN FLASH SIMPLE À UTILISER alsaservices Création de sites web Utilisez cette animation Flash pour faire défiler des images ou photos ! Définissez une liste d'images et laissez Dewslider faire le reste. Il est possible d'indiquer un titre pour chaque photo, d'utiliser des boutons de défilement, des liens, des actions, et de préciser le temps d'affichage de chaque image. La molette de la souris permet de faire défiler les images. Webdesign et graphisme Intégration XHTML/CSS Formations web Animations Flash Mise en conformité W3C Accessibilité web Outils PHP MySQL Démo Référencement Hébergement réalisations Hager - votre-electricien.fr Dewslider est libre d'utilisation et gratuit même dans un cadre professionnel ou commercial. Néanmoins, si vous désirez une version personnalisée pour une utilisation professionnelle, n'hésitez pas à nous contacter. Téléchargement Le fichier au format SWF est téléchargeable ici : Télécharger dewslider.swf (version 5.2) Utilisation Son utilisation est très simple car il suffit d'utiliser le code HTML fourni pour une animation flash, en spécifiant les noms de fichiers images à lire (de type JPG), dans le code HTML ou via un fichier XML. En précisant les fichiers en argument (ex : dewslider.swf?img=image1.jpg,image2.jpg,image3.jpg) vous ne pouvez pas indiquer de légende pour chaque image, ce n'est possible qu'avec l'emploi d'un fichier XML. De même, il est possible en XML d'indiquer des liens à cliquer pour chaque image (voir l'exemple ci-dessous avec href="..."), des targets, une action rollover, une action rollout. Par défaut, l'animation cherche un fichier dewsilder.xml dans le même répertoire, mais il est possible de préciser toute location grâce à ?xml=chemin/vers/fichier.xml. Exemple HTML seulement <object type="application/x-shockwave-flash" data="dewslider.swf?img=image1.jpg,image2.jpg,image3.jpg" width="500" height="300"> <param name="movie" value="dewslider.swf?img=image1.jpg,image2.jpg,image3.jpg" /> </object> Exemple XHTML + fichier XML Dans ce cas, tous les paramètres (options) et adresses des fichiers images sont Viabloga contenus dans le fichier XML (encodage UTF-8 dans votre éditeur de texte). Attention aux chemins utilisés et à l'endroit où vous avez placé dewslider.swf. <object type="application/x-shockwave-flash" data="dewslider.swf?xml=dewslider.xml" width="500" height="300"> <param name="movie" value="dewslider.swf?xml=dewslider.xml" /> </object> Fichier XML : <?xml version="1.0" ?> <album showbuttons="yes" showtitles="yes" randomstart="yes" timer="5" aligntitles="bottom" alignbuttons="bottom" transition="push" speed="20" > <img src="img/1.jpg" title="Titre 1" /> <img src="img/2.jpg" title="Titre 2" href="test.html" /> <img src="img/3.jpg" title="Titre 3" href="http://www.blup.fr/" /> <img src="img/4.jpg" title="Titre 4" href="http://www.blup.fr/" target="_blank" rollover="alert('yay');" rollout="showdiv('pub');" /> <img src="img/5.jpg" title="Titre 5" /> </album> Tra n s i t i o n s Effets possibles : Fade Slide Push Pop Warp Blur G é n é ra t e u r d e c o d e H T M L Le plus simple est d'utiliser ce générateur de code XHTML, qui va produire deux versions à copier-coller selon vos besoins. La première étant très complète (non valide W3C), la seconde étant plus propre mais avec un fonctionnement non garanti sur des navigateurs préhistoriques. Préférez des noms de fichier sans espace ni caractère accentué. Source URLs* des images ou fichier XML (voir exemple) Options Largeur ? 500 px Hauteur ? 300 px Transition Vitesse transition Délai d'affichage ? Afficher les boutons ? Fade 20 (speed) en ms 5 (timer) en secondes, 0 = infini (showbuttons) © 2006-2008 · www.alsacreations.fr · 5, rue des Couples · 67000 Strasbourg mentions légales · contact · références · haut de page Position en haut Afficher les titres ? (showtitles, XML uniquement) Position en haut Début aléatoire ? (randomstart) en bas en bas OK * chemins relatifs ou absolus : spécifiez les adresses des différents fichiers séparées par le caractère , (virgule). Exemple : /media/images/photo1.jpg,/media/images/photo2.jpg O p t i o n s g é n é ra l e s A préciser en argument du fichier SWF (ex : dewslider.swf?option=valeur) dans le cas d'un non-emploi du fichier XML. Début aléatoire : Il est possible de lancer automatiquement la lecture avec l'option randomstart et la valeur yes, true ou 1. Exemple : dewslider.swf?img=test.jpg,test2.jpg&randomstart=1 Afficher les boutons : boutons image suivante ou précédente, avec showbuttons et la valeur 1, true ou yes. Exemple : dewslider.swf?img=test.jpg,test2.jpg&showbuttons=1 Position des boutons : alignbuttons=top ou alignbuttons=bottom (défaut). Durée d'affichage : grâce à l'option timer, indiquant un délai en secondes. Exemple : dewslider.swf?img=test.jpg,test2.jpg&timer=3. Pour un délai infini, utilisez timer=0. Transition : grâce à l'option transition, indiquant le mode de transition entre chaque image. Exemple : dewslider.swf?img=test.jpg,test2.jpg&transition=blur. Valeurs possibles : fade (défaut), slide, push, pop, warp, blur, none (pas de transition). Vitesse de transition : grâce à l'option speed, indiquant un délai en millisecondes. Exemple : dewslider.swf?img=test.jpg,test2.jpg&speed=20. Options pour chaque slide Titre : grâce à l'option title. Exemple : <img ... title="Légende de l'image" ... />. Lien : grâce à l'option href. Exemple : <img ... href="http://www.blup.fr" ... />. Target : grâce à l'option target. Exemple : <img ... target="_blank" ... />. Rollover : grâce à l'option rollover. Exemple : <img ... rollover="alert('arf');" ... />. Rollout : grâce à l'option rollout. Exemple : <img ... rollout="autre_fonction_js();" ... />. Conception : Dew.