Utilisation de swfobject

Dernière mise à jour le 13 novembre 2018 à 16:35 par ashpl .

| SWFObject |
----------------------------------------------------------------------------------------------------------
Voici donc un tutorial ou plutôt une documentation sur ce fameux SWFObject.
Cette doc est tiré intégralement du wiki mediabox qui me parait clair et précise
( source: Wiki mediabox SWFObject)
----------------------------------------------------------------------------------------------------------

SWFObject est un petit script Javascript utilisé pour inclure un contenu swf dans une page HTML. Le script peut détecter le plug-in Flash dans tous les principaux navigateurs (sur MAC et PC) et est conçu pour rendre l’intégration des swf aussi simple que possible. L’intégration dans la page est très propre il peut être employé dans les documents valides HTML et XHTML 1.0 *, et est compatible avec les spécifications futur, ainsi vous pourais continuer a l’utiliser pendant les prochaines années a venir.
_{* Pages text/html, et non pas application/xhtml+xml.}

Comment cela fonctionne

Employer SWFObject est simple. Ajouter simplement le fichier Javascript swfobject.js, puis ajouter un peu de Javascript dans votre page pour inclure votre swf. Voici un exemple montrant la quantité minimum de code requise pour inclure un swf :

Ce texte sera remplacé par votre swf.

var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");
so.write("flashcontent");

</script>

C’est dans ce div que sera inclus votre swf :

[... *

Prévoyez cet élément HTML qui contiendra votre swf. Le contenu placé a l’intérieur sera remplacé par le swf, ainsi les utilisateurs possédant la bonne version du Flash Player ne verront jamais le contenu à l’intérieur de cet élément. Ce dispositif permet en plus de laisser les moteurs de recherche référencer un contenu alternatif.

var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");

Créez un nouveau SWFObject et passez lui les paramètres requis :

swf - le chemin vers votre swf.
id - l’attribut id de votre objet. l’attribut name prendra également cet valeur car c’est l’attribut qui tirent profit du swliveconnect .
width - la largeur de votre swf.
height - la hauteur de votre swf.
version - la version de player requise pour votre swf. Ceci peut être un string du type ‘majorVersion.minorVersion.revision ‘. Exemple : “6.0.65” . ou vous pouvez seulement spécifier la majorVersion, telle que “6” .
couleur de fond - La couleur de fond de votre swf en hexadécimal. Exemple : “#00ff00”

Les paramètres facultatifs sont :

useExpressInstall - si vous voulez proposer a vos internaute la dernière version du player Flash utilisez ExpressInstall en attribuant true a ce paramètre.
qualité - la qualité que vous souhaitez pour votre swf. Si aucune qualité n’est indiquée, Par défaut “high” .
xiRedirectUrl - si vous voulez rediriger les utilisateurs qui accepte la mise a jour, vous pouvez indiquer un URL alternatif ici.
redirectUrl - si vous voulez rediriger les utilisateurs qui n’accepte pas la mise a jour, vous pouvez indiquer un URL alternatif ici.
detectKey - si vous souhaitez changer le nom de la variable d’url que le script doit vérifier pour changer l’état de la detection du player. Par défaut “detectflash”. Par exemple pour annuler la détection du player et simplement insérer l’animation dans la page, vous pouvez ajouter “?detectflash=false” dans l’url de votre document.

so.write("flashcontent");

Appel le script SWFObject pour inclure dans la page le contenu swf (si la bonne version du player Flash est installé) est remplace le contenu de la l’élément à l’ID spécifié.

Les Détails

SWFObject fonctionne tranquillement en tache de fond de votre document HTML. En créent les pages qui utilise FlashObject, vous devriez commencer par votre contenu alternatif. Finalisez vos pages sans les swf, puis les ajoutez dedans par la suite. Ceci assure que le contenu alternatif soit référencé par les moteurs de recherche, et que les utilisateurs qui n’ont pas le player voient toujours une page html cohérente. Si votre contenu alternatif suffit, il ne sera pas forcement nécessaire de dire aux internautes qu’ils ont loupé quelque chose.

SWFObject fonctionne dans tous les principaux navigateurs, incluant, sur PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, et Opéra. Sur MAC: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, et Opéra 7,5+, et devraient continuer à fonctionner dans le futur.

SWFObject détecte les version du Player Flash dans ces navigateurs de la version 3 et +, et permettra aux utilisateurs d’agir sur le swf sans devoir ‘l’activer’ d’abord. Pour plus d’information sur ceci, voir le billet de blog sur Internet Explorer et ça dernière mise a jour 'douteuse'.

SWFObject peut détecter les versions mineures et les versions de révision du Player Flash, simplement en passant le string de la version que vous voulez. Un exemple pour exiger le player v.6.0 r65 (ou 6.0.65.0) serait :

var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");

La détection du plug-in peut être outre passé avec SWFObject. Si un nouveau navigateur incompatible, ou pour n’importe quel problème qui ferait échouer la détection du player, vous pouvez concevoir un lien qui désactiverait la détection automatique, et qui permettrait donc l’insertion direct du contenu Flash. Pour utiliser le lien d’évitement, ajoutez simplement la variable “detectflash” à l’url de votre page, avec la valeur “false”. Voici un exemple :

Ignorer la détection.

SWFObject Exemples

L’exemple donné ci-dessus montre le minimum pour utiliser SWFObject, mais si vous voulez employer les autres paramètres que le swf nous offre ? SWFObject rend très facile l’ajout de n’importe quel paramètre supplémentaire dont vous pourriez avoir besoin. Les exemples vous montre différentes méthodes que vous pouvez employer.

Un exemple simple ajoutant quelques paramètres supplémentaires

var so = new SWFObject("movie.swf", mymovie, 200, 100%, 7, "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");

</script>

Voici une liste de tous les paramètres courants et de leurs valeurs possibles sur adobe.com.

Passage de variables dans vos swf en utilisant le paramètre "Flashvars" :

Employer Flashvars est la manière la plus facile d’obtenir des données de votre HTML dans votre swf, mais vous pouvez seulement passer les données aux chargement. Normalement, vous ajouteriez un paramètre “flashvars” et pour la valeur, vous passeriez un string de nom=valeur comme ceci : variable1=value1&variable2=value2&variable3=value3 et ainsi de suite. SWFObject facilite un peu ceci en vous permettant d’ajouter autant de variables que vous voulez de la même façon que vous ajoutez des paramètres additionnels. Voici un exemple :

var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");
so.addVariable("variable1", "value1");
so.addVariable("variable2", "value2");
so.addVariable("variable3", "value3");
so.write("flashcontent");

</script>

Une fois que ceci est fait, toutes les variables que vous passez seront disponibles immédiatement à l’intérieur du swf. On y accéde via _root 1).

Le script SWFObject offre également une fonction supplémentaire qui vous permet de récupérer des variables dans l’URL. Un exemple nous avons une URL qui ressemble à ceci : http://www.example.com/page.html?variable1=value1&variable2=value2 . En utilisant la fonction getQueryParamValue()vous pouvez facilement récupérer ces valeurs de l’URL et les passer dans a votre swf. Voici un exemple, avec l’URL ressemble de l’exemple ci-dessus :

var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");
so.addVariable("variable1", getQueryParamValue("variable1"));
so.addVariable("variable2", getQueryParamValue("variable2"));
so.write("flashcontent");

</script>

La fonction getQueryParamValue() supporte aussi la lecture de variables depuis location.hash, utilisé parfois pour le deep linking dans le Flash. Pour un exemple sur la manière d’utiliser le location.hash dans un document Flash, allez voir cette démo de Slideshow Pro, qui utilise SWFObject.

Utiliser Express Install avec SWFObject

SWFObject supporte pleinement l’installation Express de Flash (Macromedia Flash Player Express Install). Inclu avec SWFObject sous la forme d’un fichier swf externe, il travaille avec SWFObject pour commmencer une mise à jour dans votre Flash. Vos utilisateurs n’ont jamais à quitter votre site pour mettre à jour leur Player, et quand l’upgrade est fini, ils retournent automatiquement à la page depuis laquelle la mise à jour à été lancé.

Pour utiliser ExpressInstall, vous devez premièrement:

→ uploader le fichier expressinstall.swf ( inclu dans le zip) sur votre serveur (par defaut dans le même dossier que la page HTML qui doit afficher le swf)

→ eventuellement specifier dans le javascript dans l attribut “so.useExpressInstall” si l “expressinstall.swf” a été placé dans un autre dossier...

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");
so.useExpressInstall('expressinstall.swf');
so.write("flashcontent");

</script>

Pour un exemple en live de ce code, ouvrez source/so_tester.fla, inclus dans le zip de SWFObject. Si vous souhaitez voir ExpressInstall en action, vous pouvez installer Flash player 7 (ou 6.0.65) et visiter this page.

Si votre Flash se trouve dans une popup, ou si vous voulez rediriger l’utilisateur a un autre endroit après un ExpressInstall, vous pouvez utiliser l’attribut xiRedirectUrl. Par défaut c’est la page actuelle, avec votre animation qui est rechargé.

→ l’attribut xiRedirectUrl necessite une URL absolut vers la page HTML qui doit etre ouverte!

var so = new SWFObject("movie.swf", "mymovie", 200, 100, 7, "#336699");
so.useExpressInstall('expressinstall.swf');
so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html');

so.write("flashcontent");

</script>

Téléchargement

SWFObject est publié sous MIT License. En gros cela veut dire que vous pouvez l’utiliser pour tout ce que vous voulez sans restrictions.

Download SWFObject 1.5
Download SWFObject 2.1

Pourquoi c'est mieux que les autres solutions

Au fil des années, il y a eu de nombreuses méthodes pour détecter la version du Player Flash et pour insérer des animations dans des pages HTML. Cette section va pointer les défauts majeurs des méthodes les plus populaires.

1) La solution par défaut Macromedia

Tous le monde connait la solution par défaut de Macromedia. Elle utilise la balise object avec une balise embed en secour. C’est la technique la plus utilisé, et pour cause, elle est automatiquement fourni par l’IDE Flash de Macromedia. C’est aussi la solution qui offre le meilleur taux de compatibilité avec les différents navigateurs.

height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Même si c’est la technique la plus commune pour insérer une animation Flash, elle n’est pas exempte de défauts.

Il n’y a pas de détection du Plug-in. - Sans détection du Player, les utilisateurs pourrait voir du contenu cassé, ou même rien, et si il n’y a pas de Flash player installé, ils auront la boite de dialogue ‘Active X Install’ sous IE (une boite qui fait peur à de nombreux utilisateurs car souvent utilisé pour installer des malware) ou la notification avec la pièce de puzzle dans les navigateurs Mozilla. Aucun de ces systèmes d’installation n’est ‘user friendly’, et il n’est pas toujours bien précisé ce que l’utilisateur installe exactement.
Les utilisateurs doivent cliquer sur l’animation une première fois pour ‘l’activer’ avant de pouvoir interagir avec. (Plus d'infos(en)).
Ce n’est pas valide XHTML ou HTML - La balise embed est déprécié en XHTML et HTML. Seulement de nombreux navigateur n’interprète pas object de la bonne façon et il est donc toujours nécéssaire d’utiliser embed pour garantir la rétro compatibilité.

2) Balise Object uniquement / Flash satay

Cette méthode est devenu populaire après ce article sur A List Apart en 2002. Voici deux exemples d’implémentation Flash avec la balise object et avec Flash satay :

Object tag only

<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
width="300" height="120" type="application/x-shockwave-flash">

FAIL (the browser should render some flash content, not this).
</object>

</object>

Flash satay

value="c.swf?path=movie.swf" />

Adresse d'origine

A voir également

Swfobject.js
Swfobject - Forum Flash

Ce document intitulé « Utilisation de swfobject » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Tutoriel as3 (les chargements dynamiques)

Diaporama defilant avec interaction de la souris