Tutoriel Vidéo Flash : SWFObject

Dans ce tutoriel vidéo nous verrons comment utiliser l'outil javascript SWFObject pour intégrer proprement des animations flash dans votre site web. Cette méthode permet d'afficher un texte alternatif si la personne ne possède pas la bonne version de flash.


Télécharger la vidéo
(Réservé aux premiums)


Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi

Les interpolations

Les interpolations
16m

Dans ce tutoriel vidéo nous verrons les différents types...

Gérer les classes dans flash

Gérer les classes dans flash
2m

Dans ce tutoriel vidéo nous allons voir comment gérer et organiser les...

35 commentaires
Ajouter un commentaire

Adrien Il y a 4 mois Répondre

Merci

marcoclo Il y a 7 mois Répondre

Bonjour j'ai fait votre tuto du diaporama en action script et je l'ai intégré dans dreamweaver, il ne s'affiche pas, donc j'ai suivi ce tuto pensant qu'il fonctionnerait toujours pas rien ne s'affiche, pouvez-vous m'aider. Merci.

turbider Il y a 1 an Répondre

Bravo... J'ai enfin réglé de manière simple le problème d'absence de lecteur flash sur les iPad et autres: dans la div où le swf aurait été inséré, j'ai mis un <img src =emplacementdel'imageéquivalente>. Maintenant, sur le iPad, on voit l'image fixe et personne ne peut se douter qu'il y aurait dû y avoir une petite animation qui venait enjoliver mon entete de page...

Bravo... J'ai cherché tellement longtemps sans rien comprendre à ce que je trouvais...

Merci!

Luane Il y a 1 an Répondre

Merci pour ce tuto très clair et efficace.

Néanmoins je me demande comment faire si je souhaite afficher 2 vidéo dans une même page HTML. J'ai essayé en créant 2 scritps avec des <div> différentes mais ca ne fonctionne pas...

Quelqu'un aurait-il une idée ?
Merci

evd46 Il y a 2 ans Répondre

Très bon tuto, clair et simple. Sauf que, chez moi, il ne fonctionne pas: je tombe toujours sur la suggestion de télécharger la nouvelle version de Flash, utilisant la version 10+. Est-ce correct ce que The_Tux a publié en mai, et si oui, comment y remédier ou, au pire des cas, le contourner?
Merci d'avance.
Erik

morpheux Il y a 2 ans Répondre

Merci,pour cette vidéo j'ai enfin compris a quoi servais tous ces paramètres
Vous explications sont claires
Merci
PS j'en veux d'autres

Elrohir Il y a 2 ans Répondre

C'est bon j'ai réussi.

Elrohir Il y a 2 ans Répondre

Bonjour,

Voici mon code, mais la seule chose que j'obtient c'est un cadre blanc.

<script type="text/javascript" src="Js/swfobject/swfobject.js"></script>

<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
swfobject.embedSWF("_include/flash/porfolio_alpha.swf","porfolio","400","235","10.0.0","Js/swfobject/expressInstall.swf",flashvars,params);
</script>


Je ne vois pas mon animation.

The_Tux Il y a 2 ans Répondre

Salut à tous,

Ce truc fonctionne parfaitement, mais il y a un bug, et à ce que j'ai pu trouver sur les fofo, swfObject ne fonctionne pas avec le lecteur 10 de flash. La raison, swfobject récupère le numéro de la version (passé en paramètre) en prenant le premier chiffre avant le point.

Je dois pas être bien clair :

dans cette ligne : swfobject.embedSWF("flash/diapo.swf","main", "1024", "780", "10.0.0","js/swfobject/expressInstall.swf", flashvars, params);

il semblerait que swfobject détecte la version de flash comme étant la version 0 donc ça bug.

Qelqu'un aurait une solution pour contourner le problème ?

ipodbook Il y a 2 ans Répondre

Merci beaucoup pour ce tuto magnifque est très très simple et bien expliquer !
P.S ton menu est superbe !! pourrai_tu nous faire un tuto sur comment faire un menu ??
merci beaucoup !!

emilie Il y a 2 ans Répondre

je viens de réaliser le tuto pour insérer un diaporama en background de mon site en html et ca ne fonctionne pas.
Quand j'enleve le code <script> je vois bien mon image que j'ai mis ds ma balise main en html mon animation flash fonctionne toute seule aussi mais quand je mets le code javascript j'ai une page blanche
voici mon code que j'ai mis ds ma balise head:
<script type="text/javascript" src="js/swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
swfobject.embedSWF("flash/diapo.swf","main", "1024", "780", "10.0.0","js/swfobject/expressInstall.swf", flashvars, params);
</script>

pourriez-vous m'aider?
Merci

eacute Il y a 2 ans Répondre

Un grand merci pour ce tuto fort bien expliqué et qui explique parfaitement où mettre quoi.

Une bonne alternative au "flash content" standard

ikarr Il y a 2 ans Répondre

salut, juste pour dire un grand merci.

thr34 Il y a 2 ans Répondre

Super, ça m'a servis à installer et configurer la galerie flash postcardviewer qui utilise swfobject !
Merci bien

Arnaud Il y a 3 ans Répondre

Plus de réponse sur cette article je croit... le cota à été épuiser

ghislain Il y a 3 ans Répondre

Tutoriel très bien fait, cependant l'intégration de mon swf ne fonctionne pas sous IE... J'ai le même problème que chth...

Arnaud Il y a 3 ans Répondre

Chez moi c'est decaller a gauche et en bas as tu une idée ? D'où ça peut venire?

mia2mi Il y a 3 ans Répondre

Excellent le passage des paramètres fonctionne !

Laurent Il y a 3 ans Répondre

Salut, j'avais suivi ce tuto pour intégrer du flash au sein d'un site, perso je trouve la technique vraiment très efficace et simple d'utilisation sauf avec Internet Explorer 8, en effet avec ce dernier il y a un décalage de l'animation vers la droite (et donc hors du bloc défini), est-ce que quelqu'un a une idée pour régler ca ?

Francky Info Il y a 3 ans Répondre

Très utiles, efficace et je dirais même indispensable pour intégrer des swf!

chth Il y a 3 ans Répondre

en faite j'ai un problème...

ça marche pas sous ie pour moi ... j'ai du négliger quelque chose.
Si quelqu'un a une idée...

chth Il y a 3 ans Répondre

Toujours excellent tes tuto...

Je l'ai directement mis en action sur mon site :D

mikiweb Il y a 3 ans Répondre

C bon j'ai trouver pratiquement après avoir posté ce Commentaire. C'est toujours comme ça je cherche de long en large et quand je poste pour demander de l'aide je trouve la réponse juste après
Pour ceux que cela intéresse, pour importer un fichier xml avec la méthode du tuto c'est dire l'importation de fichier swf en dynamique, la variable est : flashvars.xmlURL="nom_fichier.xml";

mikiweb Il y a 3 ans Répondre

bonjour, tout d'abord bravo pour ce tuto très bien expliqué et intéressant pour moi pour le référencement, car avant j'utilisais l'ancienne méthode pour importer mes animes flash. Mais j'ai une question au niveau des paramètres. J'utilise une galerie flash que j'ai fait avec un fichier xml (où il y a toutes mes photos). Ma question est comment, avec ce nouveau code, incorporer mon fichier xml dans ma page html pour la lié à mon fichier swf.

Pour être plus claire j'ai utilisé ce code mais ce n'est pas ta méthode pour avoir des pages html moins lourdes :

var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");
fo.addVariable("xmlURL", "gallery.xml");

Let Il y a 3 ans Répondre

En tant que webdesigner qui n'y comprend pas encore grand chose en javascript, j'ai trouvé ce tutoriel très bien fait, clair, et qui va à l'essentiel. Merci.

Grafikart Il y a 3 ans Répondre

@xuxu : Dans le CSS lié à ta page met la règle : *{outline:0; }

xuxu Il y a 3 ans Répondre

Je sais pas si ça vous fait ça vous, mais si vous cliquez sur l'animation flash, des petits pointillés encadre l'animation... comment l'enlever ?

Grafikart Il y a 3 ans Répondre

@bast_65 : Non pas le choix il doit passer par le site d'Adobe obligatoirement. D'où l'intérêt de lui mettre un contenu alternatif pour l'aiguiller un peu.

bast_65 Il y a 3 ans Répondre

bonjour,
très intéressant pour référencer du flash en mettant la version html en mirroir.
petite question par contre, expressinstall se lance automatiquement si l'utilisateur n'a pas la bonne version de flash, mais quand il n'a pas flash, y a t'il un moyen de lui faire installer pareil sans passer par le site adobe & Co ?

dede18 Il y a 3 ans Répondre

Cela fonctionne, mais apparemment il faut avoir la bonne version de swfobject. J'en ai téléchargé plusieurs mais il n'y a que celle de chez google qui fonctionne.
Merci à Grafikart pour ses tutoriels très détaillés.

dede18 Il y a 3 ans Répondre

Excellent tutoriel, mais il m'a été impossible de le faire fonctionner, même sur une page d'essai. Je dois faire une erreur quelque part mais j'ai beau chercher, impossible de trouver. Mais je suis têtu et je m'y remettrais plus tard.
Pourrais-t-on savoir quelle est cette barre d'outils dans ton navigateur?
Merci

Antoine Il y a 3 ans Répondre

Merci pour ce nouveau tutoriel toujours très pragmatique et utile.
Alexis >Ayant moi-même demandé auparavant a notre chez Webmaster l'explication a ta question, je vais y répondre :
"Pour la liste qui affiche les balises (alt,align...) il faut te rendre dans les préférences et activer l'auto-complétion."
+

Alexis Il y a 3 ans Répondre

Pas mal du tout !
Mais j'ai une toute petite question dans Notepad comment fait tu pour que les mots apparaissent avant que tu les frappes ?
Comme par exemple "href" ou autre.

Merci :p

Grafikart Il y a 3 ans Répondre

Pour la HD il faut attendre que Dailymotion valide les tutoriels. C'est une question de jours

amir Il y a 3 ans Répondre

c'est vraiment bien fait comme toujours de bonne explication respect pour tes tutorial sauf une choses c'est qu'il sont pas en HD. encore merci pour le tutorial

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.