insérer un diaporama dans spip

Transcription

insérer un diaporama dans spip
INSÉRER UN DIAPORAMA DANS SPIP
Les animations flash ont pour extension .swf (Shockwave Flash Object) et sont au format natif dans SPIP c’est à dire
qu’il n’y a pas besoin de plugin ou de player spécifique.
ATTENTION : Le diaporama ne doit dépasser pas 2 Mo, sinon il sera refusé par le serveur académique
A. CREATION D’UN DIAPORAMA AU FORMAT FLASH
Le diaporama demeure un outil incontournable pour ses présentations. Néanmoins, leur conversion en animation
Flash présente plusieurs avantages comme l’intégration du document dans une page web, un poids de fichiers réduit
jusqu’à 90% et une meilleure diffusion. Suivant la complexité des documents (intégration de sons, de vidéos et
d'animations par exemple), certains logiciels se prêtent plus que d’autres à leur transformation en animation Flash.
L’insertion d’un diaporama est donc possible dans SPIP à condition qu’il soit enregistré au format .swf.
Si votre diaporama a été réalisé avec « Présentation » d’OpenOffice, c’est très facile : il suffit de l’enregistrer au
format .swf en faisant :
Fichier > Exporter ... > puis choisir dans la liste « Macromedia Flash (SWF)
Inconvénient : le diaporama ne se lance pas automatiquement et n’est pas à défilement automatique.
Si votre diaporama a été réalisé avec Powerpoint c’est plus difficile. Il faut utiliser un logiciel spécialisé ou un plugin
Powerpoint mais la plupart sont en anglais et payants. Personnellement j’utilise le plugin Ispring Pro3. Il permet de
choisir le démarrage automatique ou manuel du diaporama, la taille du diaporama....Dans ce cas me consulter.
Une fois que le diaporama est converti en swf suivre le pas à pas vu précédemment.
B. INSERTION DU DIAPORAMA OU TOUTE AUTRE ANIMATION FLASH
1. Créer un article (exemple : APE) et l’enregistrer une première fois pour pouvoir lui attacher des documents.
Exemple : le diaporama ci-dessous est à défilement automatique et vous présente l’APE du collège
2. Repasser en mode édition en cliquant sur "Modifier cet article"
3. Dans le cadre "Ajouter une image ou un
document", utiliser le bouton "Parcourir" pour
choisir le fichier Flash (SWF) sur votre poste de
travail. Envoyez le fichier sur le site avec le
bouton "Télécharger"
4. Trois choix s’offrent à vous :

er
1 choix : Inclure la vignette de l’animation dans la page
Placer le curseur à l’endroit du texte où la vignette doit apparaître et double
cliquer sur le code <doc168|center> (168 correspond à l’identifiant du
document dans le SPIP)
Donner un titre à l’animation
Exemple : Diaporama de présentation de l’APE
Ne pas dépasser 560 x 420
Cliquer sur Enregistrer
Enregistrer l’article en cliquant sur le bouton Enregistrer
Pour lire l’animation, le visiteur devra cliquer sur la vignette.
Remarque : le visiteur pourra aussi la télécharger, en faisant un clic droit sur la vignette puis dans le menu
contextuel il choisira « Enregistrer la cible sous ... »
2ème choix : Intégrer l’animation dans la page
Placer le curseur à l’endroit du texte où l’animation doit apparaître
puis double cliquer sur le code <emb168|center> du cadre de
l’animation (168 correspond à l’identifiant du document dans le
SPIP).
L’animation sera insérée directement dans la page de l’article.
3ème choix : à partir d’un lien qui va ouvrir l’animation dans une nouvelle fenêtre
Tous les fichiers .swf sont rangés dans le dossier swf du dossier IMG du site.
L’URL de ces fichiers est donc de la forme : http://albert-ball.etab.ac-lille.fr/IMG/swf/nom_de_votre_animation.swf
Exemple

Nom du fichier swf : APE.swf
L’URL de cette animation est donc :
http://albert-ball.etab.ac-lille.fr/IMG/swf/APE.swf

Texte de l’article : Diaporama à défilement automatique qui vous permet de découvrir l'APE
(Association de Parents d'Élèves) ».
Par exemple, si vous voulez créer un lien vers l’animation APE.swf à partir du mot « diaporama » qui est dans le texte
écrit précédemment, procéder comme ceci :

placer à gauche de « diaporama » la balise html <a href =" " target="_blank">


Copier l’URL de l’animation qui sera dans notre exemple :
Cliquer entre les deux guillemets de href
http://albert-ball.etab.ac-lille.fr/IMG/swf/APE.swf

Placer à droite du mot « diaporama » la fin de balise </a>
Vous devriez obtenir ceci :
Présentation de l'APE : {{<a href="http://albert-ball.etab.ac-lille.fr/IMG/swf/APE.swf " target="_blank">diaporama</a>}}
à défilement automatique qui vous permet de découvrir l'APE (Association de Parents d'Élèves).
Remarques :

Si on ne met pas target="_blank", le lien s’ouvrira dans la même fenêtre que la page de l’article.

Cette méthode peut aussi être utilisée pour n’importe quel fichier.