Développement web indépendant à Montpellier

Publié le dimanche 22 mars 2009 08:35:43

Intégration d'animations flash : SwfObjet, Embed, Object

Quelle méthode d'intégration choisir : en effet, il existe diverses méthodes pour intégrer du contenu flash dans les pages , elles ont toutes leurs avantages et leurs inconvénients : cet article se propose d'en fait la synthèse.

La méthode classique, utilisant la balise

L'intégration préconisée par le est simple, la balise object est recommandée. Je précise que la balise embed est dépréciée.

<!--début de l'animation Flash-->
<object type="application/x-shockwave-flash" data="animation.swf" width="200" height="200">
        <param name="movie" value="animation.swf" />
        <!--début de l'alternative-->
        <p>Alternative de l'animation</p>
        <!-- fin de l'alternative-->
<!--fin de l'animation Flash-->

C'est très simple, et cela permet de rester valide aux normes . Le code généré par certains logiciel est très verbeux, et à plus de la moitié inutile.

Une méthode alternative : SwfObject

C'est la méthode que nous avons choisi pour afficher le bandeau Flash de notre page d'accueil. Elle inclue un petit script Javascript à télécharger sur la page de l'éditeur : voir le site du projet SwfObject.

L'intégration se fait de la manière suivante avec la dernière version de SwfObject :

Inclusion du script :

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

On place un calque qui va accueillir l'animation :

<div id="animation"></div>

Ensuite on fait l'appel au script SwfObject, il faut que le calque "animation" soit chargé, c'est à dire que :

  • soit il faut placer le code Javascript en dessous de l'élément dans lequel on va charger le flash,
  • soit on fait cet appel dans le body.onload.

(Les 2 façons de faire trouvent leur justification au niveau de l'architecture globale de l'application web).

Appel de SWFObject

 //les variables à passer à l'animation   
var flashvars={url:"datas/datas.xml"};
//ici la liste des paramètres
var params={menu:"false"};
//ici l'identifiant de l'élément Object
var attributes={id:"swf_banniere",name:"swf_banniere"};

Il est à noter que si vous utilisez l'ancienne version d'SwfObject, le code généré contient la balise embed dépréciée. Que le soit généré ou non par Javascript, votre code n'est donc dans ce cas plus valide, même s'il passe au validateur. (c'est un peu tatillon cela dit, puisque d'un point de vue utilisateur, rien ne change ).

Quelle est la meilleur méthode ?

Les deux mon colonel ! disons plutôt que je n'ai pas d'opinion à ce sujet, voici les avantages et inconvénients de chacune :

Avantages/Inconvénients de la classique :

  • plus légère, pas d'inclusion de Javascript (pas besoin non plus de support Javascript),
  • pas du gestion du Flash, en cas d'absence, l'alternative s'affiche, et c'est tout.

Avantages et inconvénients de l'inclusion SwfObject :

  • Gestion du
  • on affiche pas l'animation sans Javascript.

Notez cet article !

  • Actuellement 0 sur 5 étoiles
  • 1
  • 2
  • 3
  • 4
  • 5

Note : 0/5 (0 notes attribuées)

Merci d'avoir participé !

Vous avez déjà noté cette page, vous ne pouvez la noter qu'une fois !

Votre note a été changée, merci de votre participation !

Bonne résolution ! j'arrête d'alourdir mes pages avec des boutons de partage, mais vous pouvez continuer de partager :-)


  1. Hello. I have flash version 18,0,0,209 installed on ym computer. When I try and upload a flash file via html editor it works (is visible once saved) in I.E. 11, but when I use chrome, or firefox the flash doesnt load. The rest of the page loads normally, i put the cursor over where the video should be and right click and all it says is, "Movie not loaded...". Any idea as to what might be going on here?

  2. دانلود قس... | دانلود قسمت 14 عاشقانه |

    دانلود قسمت 14 چهاردهم سریال عاشقانه با لینک مستقیم, دانلود رایگان سریال عاشقانه, دانلود سریال جدید عاشقانه ایرانی دانلود سریال عاشقانه با لینک مستقیم, دانلود فیلم های جدید و برتر, دانلود رایگان فیلم و سریال با لینک مستقیم

  3. This is my first time visit here. From the tons of comments on your articles,I guess I am not only one having all the enjoyment right here!

  4. Mobile Le... | Mobile Legends 5v5 MOBA Hack |

    You make such a variety of extraordinary focuses here that I read your article a few times. Your perspectives are as per my own particular generally. This is incredible substance for your perusers.

  5. Looking f... | Looking for local online marketing? Check out Marketing1on1.com |

    You have a real ability for writing unique content. I like how you think and the way you represent your views in this article. I agree with your way of thinking. Thank you for sharing.

  6. Marvelous and fascinating article. Incredible things you've generally imparted to us. Much obliged. Simply keep making this kind out of post.

  7. A debt of gratitude is in order for sharing this helpful information..

  8. subscript... | subscription boxes for women |

    That is the phenomenal mentality, in any case is simply not make each sence at all proclaiming about that mather. For all intents and purposes any strategy an abundance of thanks notwithstanding i had attempt to advance your own particular article into delicius by and by it is evidently a situation utilizing your data locales would you be able to please recheck the thought. much appreciated yet again.

  9. An intriguing dialog is value remark. I feel that it is best to compose more on this matter, it may not be a forbidden theme however normally people are insufficient to chat on such subjects. To the following. Here's to you.

  10. I've been hunting down some tolerable stuff on the subject and haven't had any fortunes up until this point, You just got another greatest fan!..

  11. wedding i... | wedding in the bahamas |

    A debt of gratitude is in order for this article extremely accommodating. much appreciated.

  12. trademark... | trademark registration |

    I've been hunting down some OK stuff on the subject and haven't had any fortunes up until this point, You just got another greatest fan!..

  13. I have bookmarked your site, the articles are path superior to anything other comparative websites.. a debt of gratitude is in order for an awesome web journal!

  14. Your site furnished us with important data to work with. Each and every tips of your post are magnificent. Much obliged for sharing. Continue blogging..

  15. The quality of information that you are providing is simply marvelous.

  16. I acknowledge all that you have added as far as anyone is concerned base.Admiring the time and exertion you put into your online journal and point by point data you offer.Thanks.

  17. Congrats you individuals are doing with this blog site.

  18. numériser... | numériser une cassette mini-DV  |

    Your online journal gave us profitable data to work with. Each and every tips of your post are amazing. You rock for sharing. Continue blogging,

  19. Pleasant learning picking up article. This post is truly the best on this important point.

  20. Extraordinary occupation for distributed such an advantageous site. Your web log isn't just helpful yet it is moreover truly inventive as well. There have a tendency to be relatively few individuals who can unquestionably compose not all that straightforward posts that creatively. Proceed with the decent composition

  21. How To Ki... | How To Kiss A Man To Make Him Fall In Love |

    I acknowledge all that you have added as far as anyone is concerned base.Admiring the time and exertion you put into your online journal and point by point data you offer.Thanks.

  22. paxosretr... | paxosretreats.com paxos villas |

    helpful data on subjects that bounty are intrigued on for this awesome post.Admiring the time and exertion you put into your b!..

  23. That is truly decent to listen. much obliged to you for the upgrade and good fortunes.

  24. I just couldn't leave your website before telling you that I truly enjoyed the top quality info you present to your visitors? Will be back again frequently to check up on new posts.

  25. I really like the dear information you offer in your articles. I’m able to bookmark your site and show the kids check out up here generally.

  26. This article is such a nice and interesting one, I'm very satisfied with the provided contents. I hope more excellent articles would be posted in your website. Thank you so much for this and keep sharing.

  27. moos | comaptibilité swf avec IE8 |


    Très intéressant comme sujet, j'ai un swf qui ne fonctionne pas avec IE8 quelle est d'après vous la bonne méthode d'intégration ?

    voici le code ça fonctionne avec FF12,Safari 5 mais pas avec IE8

    <!-- MODULE Home Featured Carousel Products -->
    {if isset($products) AND $products}
    <embed src="modules/homefeaturedcarousel/3DCarouselDev.swf" flashvars="xmlprovider=modules/homefeaturedcarousel/files/urunxml.php" quality="high" pluginspage="http://...ayer" play="true" loop="true" scale="noscale" wmode="opaque" devicefont="false" bgcolor="#ffffff" name="3DCarouselDev" menu="False" allowfullscreen="false" allowscriptaccess="sameDomain" salign="lt" type="application/x-shockwave-flash" align="lt" height="230" width="750";>
    <!-- /MODULE Home Featured Carousel Products -->

  28. Contrairement, à ce qui est indiqué en haut de cette page, il n'y a plus de Swfobject utilisé en page d'accueil.
    C'est en lisant cette autre page ( http://...vec-jQuery ) que j'ai compris que Swfobject avait été remplacé par un slideshow développé avec jquery.
    Merci pour votre site qui explique très simplement certaines choses qui m'intriguaient.

  29. Creation... | swfobject / indexation des pages |

    Le swfobject permet de donner un Title et description à toutes les pages ?
    Merci !

  30. Stéphane | Re : et le référencement |


    J'ai fait quelques tests à ce sujet, je n'en suis pas si sur que vous à dire vrai, les contenus semblent s'indexer de manière tout aussi honorable lorsqu'il sont placés dans la balise object.
    Je n'ai toujours pas réellement de préférence, sauf dans le cas d'un site full flash ou il est sans doute préférable d'utiliser un framework comme Gaia qui prend en compte les contraintes SEO.

  31. julien Tr... | Et le référencement? |

    Il ne faut pas oublier que le référencement se fera correctement en utilisant le swfobject et pas la méthode traditionnelle...