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.