En attendant la version Pro de SlideCreator, voici de quoi vous faire patienter un petit peu avec le petit frère SlideCreator LI.
Au programme un SlideShow et un Player Video dans le même .swf pour un poids allégé de 11ko, le tout paramétrable directement dans la page source et non plus via un fichier xml comme c’était le cas avec SlideCreator.
DEMO
TELECHARGEMENT
Avant d’attaquer le code, qui vous allez voir reste relativement simple, je vais résumer les 3 versions de SlideCreator :
- SlideCreator : Diaporama photos paramétrable par fichier xml avec la possibilité d’appliquer des filtres artistiques.
- SlideCreator LI : Diaporama photos + lecteur vidéo paramétrable dans le code source de la page html.
- SlideCreator Pro : Diaporama photos + lecteur video + jukebox mp3 paramétrable en xml ou dans la page html. (cette version est en développement)
Pour utiliser SlideCreator LI, c’est très simple, il suffit de télécharger et de dézipper l’archive ci-dessous:
UTILISATION
Avant de continuer la lecture, je vous recommande de regarder le screencast ci-dessous qui vous expliquera comment intégrer et paramétrer au mieux l’application.
N’hésitez pas à prendre exemple et à tester vos propres paramètres sur la page de démo fournie avec SlideCreator LI.
Pensez bien à renommer vos photos en 0.jpg, 1.jpg, 2.jpg etc… et à bien faire attention d’indiquer le chemin du fichier vidéo par rapport au swf.
Le code est valide W3C en remplaçant les “&” par l’entité HTML dans les paramètres flashvars.
Pour utiliser slideCreatorLI, il vous suffit de copier le code suivant sur votre page html en remplaçant les attributs soulignés par vos propres valeurs.
<object type="application/x-shockwave-flash" data="slideCreatorLI.swf" width="512" height="288">
<param name="movie" value="slideCreatorLI.swf" />
<param name="flashvars" value="mode=mixte&nbrPicture=4&pathPicture=picture&durationPicture=5&durationTransition=2&thumbVideo=3&pathVideo=video.flv&buffering=3&titleSlide=Mes jolies photos...&infoSlide=Photographe: Marcel Dupont&titleVideo=Une lettre d'Amour...&infoVideo=Un petit délire sous After Effects - Cliquez sur play" />
<p> Ce texte doit être remplacé par votre texte alternatif qui sera pris en charge par les moteurs de recherche </p>
</object>
Il faut absolument définir le mode, en effet vous pouvez soit utiliser uniquement le diaporama, soit le lecteur video, soit les deux comme dans l’exemple.
Ci-dessous un récapitulatif des paramètres, il est conseillé de toujours laisser les propriétés dans le code à l’inverse des attributs qui sont facultatifs suivant votre mode.
PROPRIETE |
ATTRIBUT |
| mode | diapo / video / mixte |
| nbrPicture | Nombre de photos du diaporama |
| pathPicture | Chemin du répertoire photo à partir de la page HTML |
| durationPicture | Durée d’affichage photo |
| durationTransition | Durée de la transition |
| thumbVideo | Image video de presentation avant lecture |
| pathVideo | Chemin vidéo à partir du swf (Attention) |
| buffering | Nombre de seconde mis en cache avant la lecture vidéo |
| titleSlide | Texte Titre Diaporama - Ligne 1 |
| infoSlide | Texte Info Diaporama - Ligne 2 |
| titleVideo | Texte Titre Video - Ligne 1 |
| infoVideo | Texte Info Diaporama - Ligne 2 |
Voilou n’hésitez pas à poser vos questions et vos remarques dans les blablas.
Bon courage à tous et bon amusement ;-)
Ps: Retrouvez des exemples concrets de SlideCreator LI sur le site www.stage-de-magie.com (site pour apprendre des tours de magie sous forme de stages éducatifs) dans la section boutique de magie et atelier de magie.
Le 11 juin 2009 à 17 h 21 min
Wahouh! Bravo pour la qualité de ce player et merci de l’offrir en Creative Common. C’est un excellent outil. A peine télécharger et testé, déjà adopté !
J’aimerais savoir si il est possible de changer le texte “Voir Video” et “Voir Photos” ou ceci est inclus dans le swf ?!
En fait, j’aimerais pouvoir le mettre en allemand et en anglais.
Merci pour votre réponse.
Myav’
Le 11 juin 2009 à 18 h 06 min
Merci pour ton com’ ça fait plaisir car ce billet a provoqué une baisse significative sur la fréquentation du blog, difficile de concilier grand public et développeur.
Je suis tiède pour rajouter un param dans l’API en revanche je peux mettre un swf en anglais et un en allemand, c’est bien si tu as une version de site par langue en revanche si tu veux laisser le choix de la langue à l’internaute ça ne sera pas possible mais j’inclurai cette possibilité dans la version pro car c’est une bonne idée :-)
Je te mail quand c’est en ligne. @+
Le 11 juin 2009 à 18 h 34 min
Merci beaucoup pour cette réponse très rapide.
Pour ma part, mettre un swf en anglais et un swf en allemand sur les différentes parties du site ne me dérange pas. Je construis toujours mes sites web avec différentes langues séparément.
L’internaute a la choix de la langue, mais ceci le redirige toujours vers un site spécial pour chaque langue !
Ce qui serait génial (enfin pour moi ^^) serait effectivement juste un swf où il y a “Watch Video” et “Watch Pictures” pour la partie anglaise puis un swf où il y a “Video ansehen” et “Bilder ansehen” pour la partie allemande.
Après, ça peut être déclinable à l’infini :p (espagnol, italien, etc. mais là, je ne parle pas ces langes pour ma part ^^)
Je me suis amusé à parcourir la quasi intégralité de ton blog et suivi les liens des autres sites. Je profite de ce post pour te dire aussi que j’aime beaucoup les autres sites et choses que tu fais. Un grand bravo.
J’attends ton email ;-)
Myav’
Le 14 juin 2009 à 14 h 55 min
Hello,
Juste pour dire que le release de slideCreator LI en anglais et en allemand est disponible dans la section téléchargement.
…et merci pour tes com’s c’est sympa ;-)
Bon développement.
Le 9 juillet 2009 à 12 h 54 min
Bonjour
J’ai trouvé cette adresse en bas de la page FAQ mais je ne viens pas pour demander de l’aide mais juste pour vous remercier.
En effet comment est-il possible de venir vous demander de l’aide lorsque les explications sont aussi claires et détaillées.
D’ailleurs bien que n’étant pas un spécialiste de la chose (flash) et c’est bien la 1ère fois que je réussis du premier coup un tutoriel de ce genre.
J’ajoute que la présentation de votre site est très claire et même très soignée et pour ne rien gâcher, cerise sur le gâteau, c’est écrit dans un Français impeccable et sans faute.
Encore une fois Merci pour toutes ces explications et ce partage.
Bonne journée.
Chris
Le 25 août 2009 à 19 h 33 min
Bonjour,
Tout d’abord, félicitation pour ce code, il est parfait ! Il va très bien s’harmoniser dans mon site. Cependant, j’aimerais pouvoir contrôler les photos : être capable d’avancer ou de reculer d’une photo à l’aide de flèches ou en cliquant sur les côtés au centre, étant le lien, s’il y a lieu). Est-ce possible ?
Merci !
Le 12 septembre 2009 à 17 h 32 min
@ Chris => Merci beaucoup ça fait toujours plaisir…
@Mathieu => Cela sera disponible avec d’autres applications flash que je développerai prochainement.
SlideCreator est un diaporama d’illustration pour page web, un peu comme les pubs en flash qui tourne en boucle, il n’y a donc aucune interactivité à l’exception du lien.
Je vous conseille plus de vous orienter vers le javascript comme le coda slider qui est un excellent slideshow avec bouton.
Le 12 septembre 2009 à 17 h 36 min
Bonjour, merci pour votre travail, j’ai eu du mal à trouver un lecteur vidéo qui fonctionnait sous Firefox et IE correctement et surtout avec PhpBB. C’est la cas pour le votre. Il me manque juste la possibilité de choisir une image de type thumbVideo=http://www.xxxx.com/xxx.jpg afin de ne pas avoir une page noire à l’affichage du lecteur, une solution à mon problème?
Merci beaucoup…
Le 12 septembre 2009 à 17 h 54 min
Bonjour Olivier,
Le paramètre thumbVideo sert à utiliser une image de la vidéo comme image par défaut à l’affichage du lecteur.
Je prends note de votre remarque pour le lecteur video en cours de développement en attirant votre attention sur un point. Il est possible d’utiliser des médias externes au flash à condition que ceux-ci appartiennent au même domaine.
Cela ne pose pas de problème pour une image mais si jamais vous voulez pointer une vidéo externe de votre domaine, je vous invite à lire ce lien :
http://wiki.mediabox.fr/tutoriaux/flash/crossdomain.xml
Bonne continuation et n’hésitez pas à faire part de vos remarques ou améliorations.
xavier
Le 30 octobre 2009 à 1 h 42 min
Bonjour,
Je viens de découvrir ton intéressant site après une recherche de lecteur diapo/vidéo “embarqué” dans des pages web. Novice en la matière, je découvre depuis seulement 1 semaine la programmation xhtml et CSS et cela me passionne. J’ai téléchargé Slidecreator LI et j’ai suivi ton superbe tuto. Tout fonctionne bien sous firefox 3.5 dans une de mes pages en création, mais pas sous IE8 (carré blanc avec croix rouge).
Peux-tu m’aider ?
(J’ai malheureusement aussi découvert que le navigateur le plus répandu ie8 est aussi le moins “compatible” du web…)
Merci d’avance
et merci aussi beaucoup pour Slidecreator LI…
Le 1 novembre 2009 à 12 h 12 min
Hello,
En effet, j’ai eu vent des problèmes du flash avec IE8, cela vient surtout du fait qu’il faut mettre à jour le player pour certaines versions.
Tiens moi au courant si le problème persistait après.
@+
Le 2 novembre 2009 à 17 h 21 min
Oui, je me suis mal exprimé pour ie8, c’est d’ie microsoft en général dont je voulais parler. Effectivement plus de flash sur site web avec ie8. Désinstallation et réinstallation sans effet du flash. Mon problème avec ie8 n’est apparemment pas isolé, voir sur google, ie8+flash pas toujours bon.
Bon, problème réglé en revenant à ie7. Tout marche, ma vidéo et mes photos défilent sur ma page de test sous ie7. On en parle plus :)
Dernière question, mais pas de malaise, y a-t-il un moyen de préserver le cadre vidéo ou photo en cas de manipulation avec ctrl+molette souris sur le site. En effet la zone du lecteur est soit tronqué en cas de réduction soit ajouré en cas d’agrandissement.
(même si j’utilise peu cette fonction, je me suis fait “avoir” en cherchant la cause de cette “dégradation” jusqu’à m’apercevoir que j’avais un peu agrandie par cette fonction le visuelle du site).
Merci pour ta réponse,
goeland57
Le 3 novembre 2009 à 9 h 18 min
Argggh en effet il y a un gros bug lors d’un redimensionnement de la page.
Je ne suis pas passé par la classe BitmapData(), ni par d’écouteur onResize, du coup il faut rafraichir la page pour que tout rentre dans l’ordre.
Je ferai gaffe pour les prochaines versions ;-)
Le 13 juin 2010 à 11 h 49 min
Bonjour et bravo pour votre excellent logiciel.
Je l’ai installé mais j’ai quelques petits problèmes: si sur IE8 les vidéos marchent très bien, par contre sur FireFox, au lieu de l’image fixe d’attente, j’ai un rectangle noir avec un bouton au milieu. Si je clique sur le bouton, rien ne se passe et j’ai simplement un cadre tout noir.
Je précise que j’ai indiqué une taille de cadre vidéo inférieure à celle de la vidéo originale et j’ai créé, dans ma page HTML un tableau avec 4 vidéos.
Pourriez-vous m’aider ?
Merci d’avance.
Le 13 juin 2010 à 12 h 23 min
Bonjour,
Pour la taille de la vidéo ça ne pose pas de problème, en revanche il y a un petit bug pour le diaporama si on commence à zoomer avec le navigateur (voir commentaire du dessus).
Le lecteur vidéo a un fonctionnement quelque peu différent des autres, en effet j’ai privilégié l’affichage automatique d’une image alors que pour les autres lecteurs il faut en désigner une dans les paramètres, ce qui veut dire que dès que vous affichez la vidéo, le lecteur commence à la lire puis se met en pause automatiquement et affiche notre image “d’attente” mais pour être sincère j’ai un doute sur cette technique.
A froid je dirai, que les autres vidéos mettent en cache et comme slideCreator LI démarre en fond et doit afficher une image qui n’est pas encore en cache (à cause des autres vidéos éventuellement) bah ça fait bugguer le flash, ensuite les navigateurs à base de moteur gecko et webkit sont plus performants qu’IE et donc c’est plutôt IE qui ne devrait pas afficher la vidéo :)
Avez-vous un lien pour que je puisse regarder vérifier mes dires, pouvez-vous effectuer un test en supprimant les autres vidéos ?
Merci
Le 13 juin 2010 à 17 h 06 min
Bonsoir,
Je viens de remarquer que vos fichiers test (vidéo seulement, le diaporama fonctionne) ne marchent pas non plus avec FireFox (version 3-6-3).
Cordialement
Marcello.
Le 13 juin 2010 à 17 h 41 min
Je viens de retester car je suis aussi sous FF 3-6-3 et ça marche parfaitement dans les 3 modes, aussi bien sur cette page que dans les fichiers sources que vous avez téléchargé.
Je vous invite à vérifier votre version de Flash Player qui peut ne pas prendre en charge le fichier .flv si inférieure à la version 8 auquel cas une mise à jour sera nécessaire. (le player est different pour chaque navigateur) mais je serai étonné que votre version soit obsolète, surtout si vous arrivez à lire les vidéos You Tube.