Sommaire
- Téléchargement & Extraction
- Préparation des photos
- Réglage du diaporama
- Intégrer Slide Creator dans son site web
1. Téléchargement et Extraction
- Si cela n'a pas été déjà fait, je vous invite à télécharger Slide Creator 1.3 en cliquant ici.
- Une fois le fichier téléchargé sur votre ordinateur, dézippez le en effectuant un clic droit dessus et en sélectionnant "extraire tout...", suivez les indications pour finir l'extraction.
Le répertoire comprend :
- Un fichier "slideCreator.swf", c'est le diaporama photo sous application Flash.
- Un dossier "stock" comprenant les photos, le fichier "reglage.xml" et le cache "blood.png".
- Un fichier "memo.txt" servant de pense-bête.
- Un fichier "demo.html" dont vous pourrez reprendre le code pour l'adapter à votre site.
2. Préparation des photos
- Cette étape est simple car elle consiste à vous assurer que toutes vos images ont la même taille, pour ma part j'utilise le logiciel XnView pour redimensionner en un clin d'oeil toutes mes photos.
- Le cache doit également être redimensionné mais si vos images ont un ratio égal à 4/3 (largeur/hauteur=1.33), les fainéants pourront utiliser la propriété scale du fichier "réglage.xml" pour transformer le cache directement.
3. Réglagle du diaporama
- Si vous ne possèdez pas d'éditeur HTML, ouvrez le fichier "reglage.xml" avec le Bloc-Notes de Windows.
Vous devez obtenir le code ci-dessous
<?xml version="1.0" ?>
<!--Effect : Fade / Flash / Store / BigPixel / Zoom / Slide -->
<diaporama>
<param effect="Fade" scale="100" timePicture="4" timeTransition="1.8" mask="stock/blood.png" />
<photo>
<diapo id="stock/1.jpg" url="http://www.slide-creator.com/index.html" />
<diapo id="stock/3.jpg" url="http://www.slide-creator.com/index.html" />
<diapo id="stock/2.jpg" url="http://www.slide-creator.com/index.html" />
<diapo id="stock/4.jpg" url="http://www.slide-creator.com/index.html" />
<!--Vous pouvez rajouter autant de photos que vous le désirez, l'url est facultative et peut être différente pour chaque photo-->
</photo>
</diaporama>PROPRIETE |
ATTRIBUT |
| effect | Choix de la tranisition |
| scale | Réglage de l'échelle du cache |
| timePicture | Durée d'affichage photo |
| timeTransition | Durée de transition |
| mask | Chemin du cache |
| id | Chemin des photos |
| url | URL de redirection |
Important:
- Le paramètre timePicture doit être strictement 2 fois supérieur à celui de timeTransition.
- Le fichier "reglage.xml" doit être hébergé sous le même domaine que le fichier "slideCreator.swf".
- Tous les chemins relatifs du fichier XML se font avec la page HTML comme point de référence.
4. Intégrer Slide Creator dans son site web
- Pour pouvoir afficher le diaporama photo dans votre site internet, il vous suffit de copier-coller ce code dans votre page en prenant soin de modifier uniquement les valeurs soulignées.
<object type="application/x-shockwave-flash" data="slideCreator.swf" width="512" height="384">
<param name="movie" value="slideCreator.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="pathXML=stock/reglage.xml" />
<p> Ce texte doit être remplacé par votre texte alternatif qui sera pris en charge par les moteurs de recherche </p>
</object>
Note:
- Ce code est valide XHTML, il présente toutefois l'inconvénient de ne pas vérifier la version du flash player installé côté client.
- Slide Creator est pris en charge à partir du flash player 8 ce qui ne devrait poser aucun problème de compatibilité.