SWFObject: Javascript Flash Player detection and embed script

Please read: SWFObject 2.0 has been released and is now hosted on github: https://github.com/swfobject/swfobject. Please consider the information found here obsolete.
Hey! Own an iOS device? You should check out Geoffs new game, Snap, Snap, Go!

If you are curious what Geoff is up to these days, you can follow him on Twitter or check out his latest project, Snap, Snap, Go! (an iPhone game for awful people). SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.
* Pages sent as text/html, not application/xhtml+xml.

Table of Contents

Whats new in this version? How it works SWFObject Examples Using ExpressInstall with SWFObject Download Why its better than the rest FAQ

Whats new in this version? For a full list of changes, please see my SWFObject 1.5 blog post. How it works [For the ber nerds, you can view the raw javascript here.]

Using SWFObject is easy. Simply include the swfobject.js Javascript file, then use a small amount of Javascript on your page to embed your Flash movie. Here is an example showing the minimum amount of code needed to embed a Flash movie:
<script type="text/javascript" src="swfobject.js"></script> <div id="flashcontent"> This text is replaced by the Flash movie. </div> <script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699"); so.write("flashcontent"); </script>

Here is a breakdown of what the code does:

<div id="flashcontent">[...]</div>

Prepare an HTML element that will hold our Flash movie. The content placed in the holder element will be replaced by the Flash content, so users with the Flash plug-in installed will never see the content inside this element. This feature has the added bonus of letting search engines index your alternate content.
var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);

Create a new SWFObject and pass in the required arguments:

swf The file path and name to your swf file. id The ID of your object or embed tag. The embed tag will also have this value set as its name attribute for files that take advantage of swliveconnect. width The width of your Flash movie. height The height of your Flash movie. version The required player version for your Flash content. This can be a string in the format of majorVersion.minorVersion.revision. An example would be: "6.0.65". Or you can just require the major version, such as "6".

background-color This is the hex value of the background color of your Flash movie.

Optional arguments are:

quality The quality you wish your Flash movie to play at. If no quality is specified, the default is "high". xiRedirectUrl If you would like to redirect users who complete the ExpressInstall upgrade, you can specify an alternate URL here redirectUrl If you wish to redirect users who dont have the correct plug-in version, use this parameter and they will be redirected. detectKey This is the url variable name the SWFObject script will look for when bypassing the detection. Default is detectflash. Exam ple: To bypass the Flash detection and simply write the Flash movie to the page, you could

add ?detectflash=false to the url of the document containing the Flash movie. so.write("flashcontent");

Tell the SWFObject script to write the Flash content to the page (if the correct version of the plug-in is installed on the users system) by replacing the content inside the specified HTML element.

THE DETAILS

SWFObject works quietly in the background of your HTML document. When developing pages that use SWFObject, you should start with your alternate (non-Flash) content first. Get your pages working without your Flash movies, then add them in later with little Javascript snippets that replace your alternate content with the Flash movies. This ensures that the alternate content will be indexed by search engines, and that users without the Flash plug-in will still see a working HTML page. Whether you provide upgrade instructions or not is up to you. If your alternate content can suffice, there may be no reason at all to tell people they are missing out on Flash content. SWFObject works in all the current web browsers, including, on PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, and Opera. On Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+, and should continue to work well into the future. SWFObject detects Flash player versions in these browsers from version 3 and up, and will allow users to interact with your Flash content without activating it first. For more information on this, see this blog post on the Internet Explorer Eolas patent dispute. SWFObject can detect minor versions and revision versions of the Flash Player as well, simply by passing the string value of the version you want. An example of requiring Flash player v.6.0 r65 (or 6,0,65,0) would be:
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");

SWFObjects built in plug-in detection can be bypassed. If a new browser is ever launched or for some reason the plug-in detection fails on a users system, you can include a bypass link that will disable the detection built into SWFObject, and it will always write the Flash content to the page. To use the bypass link, simply link to the page with your Flash content on it, and include a single url variable called detectflash and set it to false. Here is an example of what that link would look like:
<a href="mypage.html?detectflash=false">Bypass link</a>

SWFObject Examples The example given above is what you need for the bare bones use of SWFObject, but what if you want to use some of the other parameters the Flash plug-in has to offer? SWFObject

makes it very easy to add any extra parameter you may need. The examples below are a number of different methods you may wish to use to embed your Flash content.

A SIMPLE EXAMPLE ADDING A FEW EXTRA PARAMETERS

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", "100%", "8", "#336699"); so.addParam("quality", "low"); so.addParam("wmode", "transparent"); so.addParam("salign", "t"); so.write("flashcontent"); </script>

Here is a full list of the current parameters and their possible values on adobe.com.
PASSING VARIABLES INTO YOUR MOVIES USING THE FLASHVARS PARAMETER:

Using Flashvars is the easiest way to get data from your HTML into your Flash movie, but you can only pass the data in when your movie first loads. Normally, you would add a parameter called flashvars and then for the value, you passing a string of name/value pairs like this: variable1=value1&variable2=value2&variable3=value3 and so on. SWFObject makes this a bit easier by allowing you to add as many variables as you like in a similar manner in which you add additional parameters. Here is an example of passing values into your Flash movie using Flashvars:
<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699"); so.addVariable("variable1", "value1"); so.addVariable("variable2", "value2"); so.addVariable("variable3", "value3"); so.write("flashcontent"); </script>

Once this is done, all of the variables you pass in will be available immediately inside the Flash movie. Just access them as you would any variable on the _root timeline. The SWFObject script also comes with an extra function which allows you to pull variable values from the url string. An example is you have a url that looks like this:http://www.example.com/page.html?variable1=value1&variable2=value2 . Using the function getQueryParamValue() you can easily pull these values from the url and then pass them into your Flash movie. Here is an example, well assume that the url looks lik e the above example:
<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699"); so.addVariable("variable1", getQueryParamValue("variable1")); so.addVariable("variable2", getQueryParamValue("variable2")); so.write("flashcontent"); </script>

The getQueryParamValue() function also supports reading variables from thelocation.hash, as used sometimes when deep linking into your Flash applications. For an example of how deep linking to your Flash movies using the location.hash variable, check out this demo of Slideshow Pro, which uses the SWFObject embed.
USING EXPRESS INSTAL L WITH SWFOBJECT

SWFObject has full support for the Adobe Flash Player Express Install feature. Your users never have to leave your site to upgrade their player.

To use ExpressInstall, you must first upload the expressinstall.swf to your web server. Then, use the useExpressInstall method to specify the path to your expressinstall.swf. If no path is specified, SWFObject will look in the same folder as the current HTML page.
<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699"); so.useExpressInstall('expressinstall.swf'); so.write("flashcontent"); </script>

If you want to see ExpressInstall in action, you can install Flash player 7 (or 6.0.65) and visit this page. If you wish to customize the Express Install feature, the source code to the expressinstall.swf is included with SWFObject. If your Flash movie is in a popup window, or you wish to redirect the user to a different location after they complete the ExpressInstall update, you can use the xiRedirectUrlattribute to redirect the user back to your landing page instead of the actual page with your Flash movie.
<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699"); so.useExpressInstall('expressinstall.swf'); so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); // must be the absolute URL to your site so.write("flashcontent"); </script>

Download SWFObject is released under the MIT License. This means (basically) that you can use it for whatever you want with no restrictions. Download SWFObject 1.5 Zip file, includes swfobject.js and the example html templates below. Or, if you are more of a hands on type, you can view my example pages:

Standard Flash embed No bells and whistles, just a straigt forward Flash movie on a page with a variable passed in. Valid XHTML 1.0 Strict.* 100% width and height Flash embed Having trouble getting your Flash movie to fill the screen? Try this template. Valid XHTML 1.0 Strict.* Standard Flash embed with Express Install enabled This page will attempt to upgrade your Flash player if you have a version lower than 8 (requires version 6.0.65 or higher)

* Pages are sent as text/html, not application/xhtml+xml.

While youre at it, you may want to sign up for the SWFObject mailing list. This list is a discussion list for asking questions about problems you might be having using SWFObject or to request and discuss new features. > Need help with SWFObject? Try asking for help in the SWFObject forum! Why its is better than the rest

Over the years there have been many methods to detect Flash player versions and embed Flash movies into HTML documents. This section will take a look at each of the most popular methods and point out the problems with each.

1) THE DEFAULT ADOBE PROVIDED EMBED

Everyone knows the default Adobe provided Flash embed. It consists of an Object tag with an Embed tag placed inside as a fallback mechanism. This is the most popular Flash embed method and is the default choice when publishing your Flash movie from the Adobe Flash IDE. This is the most compatible way to embed a Flash movie, and will work in the widest range of browsers. Here is a sample of the default Flash embed code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.c ab#version=7,0,0,0" width="550" height="400" id="Untitled-1" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="mymovie.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> </object>

While this is the most common method of embedding your Flash movies, it does have a few issues.

There is noplug-in detection. With no plug-in detection, users may see broken or no content, and if there is no plug-in installed at all, they will either get the ActiveX install dialog box on IE a box many users now fear because of rampant spyware and malware or the strange puzzle piece box in Mozilla based browsers. Neither of these plug-in install systems are very user friendly, and usually dont explain themselves very well as to what exactly a user is installing.

With changes from the Eolas patent dispute, users will have to first click on your Flash content to activate it before interacting with it. More info here. It is not valid HTML or XHTML There is no such thing as an embed tag in any version of HTML or XHTML. However, since many browsers handle object tags differently (or not at all, or the implementation is too buggy), the embed tag was needed as a fallback mechanism.

2) OBJECT TAG ONLY / FLASH SATAY

This method gained popularity after the A List Apart article came out back in 2002. Here are two examples of object tag only embedding and Flash satay: Object tag only

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=6,0,40,0" width="300" height="120"> <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash. swf"> <param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> <!--[if !IE]> <--> <object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.s wf" width="300" height="120" type="application/x-shockwave-flash"> <param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer"> FAIL (the browser should render some flash content, not this). </object> <!--> <![endif]--> </object>

Flash satay
<object type="application/x-shockwave-flash data="c.swf?path=movie.swf" width="400" height="300"> <param name="movie" value="c.swf?path=movie.swf" /> <img src="noflash.gif" width="200" height="100" alt="" /> </object>

Accessibility issues. Using Flash Satay, some screen readers (like JAWS) will ignore your Flash content. With changes from the Eolas patent dispute, users will have to first click on your Flash content to activate it before interacting with it. More info here. There is noplug-in detection. Same as above With no plug-in detection, users may see broken or no content. When the Flash player encounters a Flash movie embedded in a page, it will try to play it no matter what the version is. So if you have Flash player 6 installed, and encounter a Flash 7 movie, your plug-in will try to play it, possibly causing odd behavior.

Some methods of Flash satay dont stream the Flash movie to the player So this method may require holder swf movies that your movie is loaded in to. This makes passing variables from FlashVars parameters a hassle and make it a pain to maintain Flash content as you now have twice as many swf files floating around your web server.

Older Safari versions ignore param tags Up until version 2.0 (on Tiger) or 1.3 (on Panther) and possibly 1.2.8 (pre Panther) Safari would completely ignore the paramtag. This meant that if you tried to set other options using them, like Flashvars or Align, Salign, etc. Safari would not see those values.

3) DETECTION: THE SMALL FLASH MOVIE ON THE INDEX PAGE METHOD

This method involves placing a single Flash movie on the index page of your website, and this Flash movie then checks the $version variable in the Flash player and redirects the user either to the Flash content inside the site, or an upgrade page. Problems with this method include:

There is noplug-in detection on internal pages. If a user sends an internal url to another user, that new user bypasses the Flash detection on the index page.

With changes from the Eolas patent dispute, users will have to first click on your Flash content to activate it before interacting with it. More info here. It is not valid HTML or XHTML Again, the embed tag required to place the Flash movies in your HTML documents will not validate. Hurts your search engine ranking Since you are now using your index page as an empty Flash detection page, when people search for you in Google or other search engines, often the description text ends up showing up as Detecting Flash Player or even no description at all. This is a huge waste of prime website real estate that should be used to promote your company or products. Often times developers will not include a link to the other content in the site (since the Flash movie contains the links) so the rest of the site wont be indexed either.

4) THE ADOBE FLASH PLAYER DETECTION KIT

Adobe has done an excellent job with the new Flash 8 detection kit but not quite excellent enough. It contains two different ways to detect the Flash plug-in: 1. The classic small Flash movie on the index page (See above) 2. Javascript Yes, thats right, Flash now includes a Javascript plug-in detection template. Unfortunately, its very not very user friendly at all, mixing Javascript, VBscript, and all your HTML all into one page. This has many of the drawbacks as past Javascript detection and embed techniques, and doesnt do anything to make your life easier as a Flash/HTML developer. And it doesnt validate as XHTML or HTML (If you care about that sort of thing). Ive put together a more in-depth look at the Adobe detection kit over here.
5) USE RAW JAVASCRIPT TO DETECT AND EMBE D YOUR MOVIES

Its hard to critique this method as it usually varies from site to site. However, most Javascript Flash detection schemes I have come across generally suffer from the same faults:

Unreliable plug-in Detection Often the detection only works with current versions of the Flash player, and needs to be manually updated as new versions of the plug-in are released.

Adds more code to the page Making it even harder to update or change your content. This method also makes it harder for designers or other people that may be working with your pages to change or add Flash movies.

An overly complicated solution Many Flash embedding scripts can grow to large file sizes or be overly complicated. SWFObject is designed to be simple and small.

FAQ

SWFObject now has a forum for people looking for help implementing it. Please send all support requests to the forum, there are plenty of capable people there to help you. Q. What is this Internet Explorer Active Content Update Ive been hearing about, and does SWFObject fix it? A. The short answer is yes, SWFObject will fix the Activating Active Content issues in the new IE Update. You read more about the subject here. Q. Why does my alternate content flicker quickly on the screen before my Flash content loads? (only happens in IE on Windows) A. This seems to be related to the FOUC bug. It can be fixed by adding a link tag in the head of your document to any stylesheet. Q. Can I use SWFObject to embed more than one SWF on an HTML page? A. Yes. Just give each SWF and each div or HTML element that will hold a SWF a unique Id. Q. How can I make SWFObject work in Netscape 4.x? A. This comment has some example code that you can use to make SWFObject work in Netscape 4.x. Q. Can I use SWFObject with my Blog? A. Yes, there are a couple of plug-ins for WordPress and Textpattern here. Q. Can I use SWFObject with Dreamweaver or Golive? A. There is a Dreamweaver extension available at CommunityMX. There is currently no Golive extension, but if you would like to make one, Ill gladly link it up from this page. You should be able to use the SWFObject script without an extension, but the extension should make it much easier. Q. Is this page available in other languages? A. Here is a French translation of parts of this page, a Swedish translation, Italian,German, Spanish, Norwegian, Polish (partial), Japanese, Portuguese (Brazilian),Chinese, and here is a Finnish translation. If anyone would like to translate this page into other languages, I would be happy to post a link here. Q. Is there a publishing template I can use with Flash? A. Yes. You can download one from the Fluid Flash Blog. Q. Who uses SWFObject/FlashObject? A. Websites like The Library of Congress, Adobe.com (A slightly customized version), Amazon.com, Windows.com, YouTube.com, skype.com, Snapple.co m, it is included with Adobe Photoshop (in the Flash web photo galleries) and thousands of others. Colin Moock also suggests it as an alternative to the Adobe Detection kit.

Still having problems? Try reading through the previous SWFObject posts [1, 2, 3] on this blog (especially the comments), as many common questions have been covered there.
THANKS

Toby Boudreaux gave me tons of advice, helped make the code for SWFObject much cleaner and name spaced it all at the same time.

SWFObject: Javascript deteccin de Flash Player y embed guin

Lea: SWFObject 2.0 ha sido liberado y ahora est alojado en GitHub: https://github.com/swfobject/swfobject . Por favor considerar la informacin contenida aqu obsoleto.
Hey! Poseer un iOS dispositivo? Usted debe comprobar fuera de juego nuevo de Geoff,Snap, Snap, Go!

Si tienes curiosidad por lo que Geoff es hasta estos das, usted puede seguirlo en Twitter o echa un vistazo a su ltimo proyecto, Snap, Snap, Go! (un juego de iPhone para personas horribles). SWFObject es un pequeo archivo javascript usado para incrustar Adobe contenido Flash. El script puede detectar el plugin de Flash en todos los navegadores web ms importantes (en Mac y PC) y est diseado para hacer que incrustar pelculas Flash lo ms fcil posible. Tambin est muy motores de bsqueda, se degrada con gracia, se puede utilizar en los documentos XHTML 1.0 * HTML y vlida, y es compatible hacia adelante, por lo que debera funcionar en los prximos aos.
* Pginas enviados como texto / html, no application / xhtml + xml.

Tabla de contenidos

Qu hay de nuevo en esta versin? Cmo funciona? Ejemplos SWFObject

Usando ExpressInstall con SWFObject Descargar Por qu es mejor que el resto Preguntas ms frecuentes

Qu hay de nuevo en esta versin? Para obtener una lista completa de los cambios, por favor, ver a mi SWFObject 1.5 blog de mensaje . Cmo funciona? [Para el ber nerds, se puede ver el javascript prima aqu .] Usando SWFObject es fcil. Basta con incluir el swfobject.js archivo Javascript, a continuacin, utilizar una pequea cantidad de Javascript en su pgina para insertar la pelcula Flash. He aqu un ejemplo que muestra la cantidad mnima de cdigo necesario para incrustar una pelcula Flash:
<script type="text/javascript" src="swfobject.js"> </ script> <div id="flashcontent"> Este texto se sustituye por la pelcula Flash. </ Div> <script type="text/javascript"> var so = new SWFObject ("movie.swf", "mymovie", "400", "200", "8", "# 336699"), de modo que. escribir ("flashcontent"); </ script>

He aqu un desglose de lo que hace el cdigo:

<div id="flashcontent"> [...] </ div>

Prepare un elemento HTML que contendr nuestra pelcula Flash. El contenido colocado en el elemento titular se sustituye por el contenido de Flash, por lo que los usuarios con el plug-in instalado nunca vern el contenido dentro de este elemento. Esta caracterstica tiene el aadido de bonificacin de dejar motores de bsquedas indexan el contenido alternativo.
var so = new SWFObject (swf, id, ancho, alto, versin, color de fondo [, calidad, xiRedirectUrl, redirectUrl, detectKey]);

Crear un nuevo SWFObject y pase los argumentos necesarios:

swf - La ruta y el nombre de su archivo swf. id - El identificador del objeto o etiqueta embed. La etiqueta embed tambin habr este valor establecido como su atributo de nombre de los archivos que se aprovechan de SWLIVECONNECT .

Ancho - El ancho de la pelcula Flash. Altura - La altura de la pelcula Flash. version - La versin del reproductor requerido para el contenido de Flash. Esto puede ser una cadena con el formato de 'majorVersion.minorVersion.revision'. Un ejemplo sera: "6.0.65" . O simplemente puede requerir la versin principal, como"6" .

background-color - Este es el valor hexadecimal del color de fondo de la pelcula Flash.

Los argumentos opcionales son:

la calidad - La calidad que usted desea que su pelcula de Flash para jugar en. Si no se especifica la calidad, el valor predeterminado es "alto" .

xiRedirectUrl - Si a usted le gustara redirigir a los usuarios que completen la actualizacin ExpressInstall, puede especificar una URL alternativa aqu

redirectUrl - Si desea redirigir a los usuarios que no tienen la correcta versin plug-in, utilice este parmetro y sern redirigidos. detectKey - Este es el nombre de la variable url del script SWFObject buscar al pasar por la deteccin. El valor predeterminado es 'detectflash'. Ejemplo: Para omitir la deteccin de Flash y simplemente escribir la pelcula Flash a la pgina, puede agregar detectflash = false? a la url del documento que contiene la pelcula Flash.

so.write ("flashcontent");

Enva el guin SWFObject para escribir el contenido de Flash a la pgina (si la versin correcta del plug-in est instalado en el sistema del usuario) reemplazando el contenido dentro del elemento HTML especificado.
LOS DETALLES

SWFObject trabaja silenciosamente en el fondo del documento HTML. En el desarrollo de las pginas que usan SWFObject, usted debe comenzar con la alternativa (no flash) el contenido en primer lugar. Cmo sus pginas de trabajo sin su pelcula de Flash, a continuacin, agregarlos ms tarde con pequeos fragmentos de Javascript que reemplazan el contenido alternativo con las pelculas Flash. Esto asegura que el contenido alternativo ser indexado por los motores de bsqueda, y que los usuarios sin el plugin de Flash todava vern una pgina HTML de trabajo. Ya sea que usted proporciona instrucciones para la actualizacin o no depende de usted. Si su contenido alternativo puede ser suficiente, puede que haya ninguna razn para decirle a la gente que se estn perdiendo en el contenido Flash. SWFObject funciona en todos los navegadores web actuales, incluyendo, en PC: IE5/5.5/6, Netscape 8.7, Firefox, Mozilla y Opera. En Mac: IE5.2, Safari, Firefox, Netscape 7.6, Mozilla y Opera 7.5 +, y deben seguir trabajando en el futuro. SWFObject detecta versiones de Flash Player en los navegadores de la versin 3 o superior, y permitir a los usuarios interactuar con el contenido de Flash y sin 'activar' primero. Para obtener ms informacin sobre este tema, consulte esta entrada del blog en el Explorador de disputa de patentes Eolas Internet . SWFObject puede detectar versiones menores y las versiones de la revisin del Flash Player, as, simplemente pasando el valor de cadena de la versin que desea. Un ejemplo de que requiere flash player v.6.0 r65 (o 6,0,65,0) sera:
var so = new SWFObject ("movie.swf", "mymovie", "200", "100", "6.0.65", "# 336699");

SWFObject integrada del plug-in de deteccin pueden ser anuladas. Si un nuevo navegador est siempre en marcha, o por alguna razn el plug-in de deteccin de falla en el sistema del usuario, se puede incluir un vnculo de derivacin que desactiva la deteccin integrada en

SWFObject, y siempre va a escribir el contenido de Flash en la pgina. Para utilizar el enlace de desvo, simplemente vaya a la pgina con el contenido de Flash en ella, e incluyen una sola variable url llamado "detectflash 'y ponerlo en' false '.He aqu un ejemplo de lo que enlazan sera el resultado:
<a href="mypage.html?detectflash=false"> enlace Bypass </ a>

Ejemplos SWFObject El ejemplo anterior es lo que necesita para los huesos al descubierto el uso de SWFObject, pero lo que si desea utilizar algunos de los otros parmetros del plug-in Flash tiene para ofrecer? SWFObject hace muy fcil agregar cualquier parmetro adicional que pueda necesitar. Los ejemplos siguientes son una serie de mtodos diferentes que usted puede desear utilizar para incrustar el contenido de Flash.
UN EJEMPLO SIMPLE ADICIN DE ALGUNOS PARMETROS ADICIONALES

<script type="text/javascript"> var so = new SWFObject ("movie.swf", "mymovie", "400", "100%", "8", "# 336699"); so.addParam (" calidad "," low "); so.addParam (" wmode "," transparente "); so.addParam (" salign "," t "); so.write (" flashcontent "); </ script>

Aqu est una lista completa de los parmetros actuales y sus posibles valores en adobe.com.
PASAR VARIABLES A SUS PELCULAS UTILIZANDO EL PARMETRO "FLASHVARS":

Utilizacin de FlashVars es la forma ms fcil de obtener datos de su HTML en su pelcula Flash, pero slo se puede pasar los datos en cuando su primera carga la pelcula. Normalmente, debe agregar un parmetro llamado "FlashVars" y luego por el valor, que pasan una cadena de pares nombre / valor de la siguiente manera: variable1 =
valor1 y variable2 = valor2 y variable 3 = value3 y as sucesivamente. SWFObject hace esto un

poco ms fcil ya que le permite aadir tantas variables como desee de una manera similar en el que se agregan parmetros adicionales. Aqu est un ejemplo de pasar valores en su pelcula Flash mediante FlashVars:
<script type="text/javascript"> var so = new SWFObject ("movie.swf", "mymovie", "400", "200", "8", "# 336699"); so.addVariable ("variable1 "," valor1 "); so.addVariable (" variable 2 "," valor2 "); so.addVariable (" variable 3 "," valor3 "); so.write (" flashcontent "); </ script>

Una vez hecho esto, todas las variables se pasan en estar disponible inmediatamente dentro de la pelcula Flash. Slo acceder a ellos como lo hara cualquier variable en el_root lnea de tiempo. El script SWFObject tambin viene con una funcin adicional que le permite tirar de valores de las variables de la cadena de url. Un ejemplo es que hay una url que tiene este aspecto: http://www.example.com/page.html?variable1=value1&variable2=value2 . Uso de la funcin getQueryParamValue () se puede tirar fcilmente estos valores de la url y luego pasarlos a la pelcula Flash. He aqu un ejemplo, vamos a suponer que la url se parece al ejemplo anterior:
<script type="text/javascript"> var so = new SWFObject ("movie.swf", "mymovie", "400", "200", "8", "# 336699"); so.addVariable ("variable1 ", getQueryParamValue (" variable1 ")); so.addVariable (" variable 2 ", getQueryParamValue (" variable 2 ")); so.write (" flashcontent "); </ script>

El getQueryParamValue () funcin tambin admite variables de lectura de la location.hash, tal como se utiliza a veces cuando los enlaces profundos en las aplicaciones de Flash.Para un ejemplo de qu tan profundo que une a sus pelculas de Flash mediante ellocation.hash variables, echa un vistazo a esta demo de Slideshow Pro , que utiliza el SWFObject embed.
UTILIZACIN DE EXPRESS INSTALL CON SWFOBJECT

SWFObject tiene soporte completo para Flash Player Express Install funcin de Adobe.Sus usuarios nunca tienen que dejar su sitio a actualizar su reproductor. Para utilizar ExpressInstall, primero debe cargar el expressinstall.swf a su servidor web. A continuacin, utilice el useExpressInstall mtodo para especificar la ruta de acceso al expressinstall.swf. Si no se especifica ninguna ruta, SWFObject se ver en la misma carpeta que la pgina HTML actual.
<script type="text/javascript"> var so = new SWFObject ("movie.swf", "mymovie", "200", "100", "8", "# 336699"); so.useExpressInstall ('expressinstall . swf '); so.write ("flashcontent"); </ script>

Si quieres ver ExpressInstall en la accin, puede instalar Flash Player 7 (o 6.0.65) y visitaresta pgina . Si desea personalizar la funcin Install Express, el cdigo fuente de la expressinstall.swf se incluye con SWFObject. Si la pelcula Flash no est en una ventana emergente, o si desea redirigir al usuario a una ubicacin diferente despus de completar la actualizacin ExpressInstall, puede utilizar el xiRedirectUrl atributo para redirigir al usuario a la pgina de destino en lugar de la pgina real con su pelcula Flash.
<script type="text/javascript"> var so = new SWFObject ("movie.swf", "mymovie", "200", "100", "8", "# 336699"); so.useExpressInstall ('expressinstall . swf '); so.setAttribute (' xiRedirectUrl ',' http://www.example.com/upgradefinished.html '); / / debe ser la URL absoluta a su sitio so.write ("flashcontent"); < / script>

Descargar SWFObject se distribuye bajo la licencia MIT . Esto significa que (bsicamente) que se puede usar para lo que quieras sin restricciones. Descargar SWFObject 1.5 - Archivo zip, incluye swfobject.js y las plantillas HTML siguiente ejemplo. O, si usted tiene ms de una mano sobre el tipo, puede ver mis pginas de ejemplo:

Flash estndar embed - No hay comodidades y lujos, slo un avance straigt pelcula Flash en una pgina con una variable pasada pulg Valid XHTML 1.0 Strict *.

100% de ancho y altura de Flash embed - Tiene problemas para obtener su pelcula Flash a pantalla completa? Pruebe esta plantilla. Valid XHTML 1.0 Strict. *

Flash estndar embed con Instalacin rpida habilitada - Esta pgina intentar actualizar su reproductor Flash, si usted tiene una versin inferior a 8 (requiere la versin 6.0.65 o superior)

* Las pginas se envan como texto / html, no application / xhtml + xml.

Mientras ests en ello, puede que quiera suscribirse a la lista de correo SWFObject . Esta lista es una lista de discusin para hacer preguntas acerca de los problemas que pueden surgir al utilizar SWFObject o para solicitar y discutir nuevas caractersticas. -> Necesita ayuda con SWFObject? Intenta pedir ayuda en el foro SWFObject! Por qu es mejor que el resto A travs de los aos ha habido muchos mtodos para detectar las versiones de Flash Player y incrustar pelculas Flash en documentos HTML. Esta seccin le eche un vistazo a cada uno de los mtodos ms populares y sealar los problemas con cada uno.
1) EL VALOR PREDETERMINADO ADOBE PROPORCIONA INCRUSTAR

Todo el mundo conoce el valor por defecto de Adobe proporciona flash embed. Se compone de una etiqueta de objeto con una etiqueta Embed colocado en el interior como un mecanismo de reserva. Este es el mtodo ms popular para incrustar flash y es la opcin por defecto al publicar la pelcula Flash de Adobe Flash IDE. Esta es la forma ms compatible para insertar una pelcula Flash, y trabajar en la ms amplia gama de navegadores. Este es un ejemplo del cdigo embed flash por defecto:
<Objeto classid = "clsid: d27cdb6e-AE6D-11cf-96B8-444553540000" cdigo base = "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab # version = 7,0,0, 0 "width =" "height =" 550 "id =" 400 Untitled-1 "align =" centro "> <param name="allowScriptAccess" value="sameDomain" /> <param name =" "value =" movie mymovie . swf "/> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src =" "quality =" mymovie.swf alta bgcolor "= anchura "# ffffff" = altura "550" = name "400" = "mymovie" align = "middle" allowScriptAccess type = "sameDomain" = "application /-shockwave-flash x" pluginspage = "http://www.adobe com / go / getflashplayer "/> </ object>

Si bien este es el mtodo ms comn de incrustar sus pelculas Flash, tiene algunos problemas.

Hay noplug-in de deteccin. - Sin deteccin de plug-in, los usuarios pueden ver roto o no el contenido, y si no hay plug-in instalados en todo, o bien conseguir el cuadro de dilogo "Instalar ActiveX" en IE-a caja de muchos usuarios temen ahora por el spyware y el malware rampante o la "pieza del rompecabezas extrao" caja en los navegadores basados en Mozilla. Ninguno de estos plug-in sistema de instalacin es muy fcil de usar, y no suelen explicarse muy bien en cuanto a qu es exactamente lo que un usuario est instalando.

Con los cambios de la disputa de patentes Eolas, los usuarios tendrn que hacer clic primero en el contenido de Flash en 'activar' antes de interactuar con l. Ms info aqu .

No es vlido HTML o XHTML - No hay tal cosa como una insercin de etiquetas en cualquier versin de HTML o XHTML. Sin embargo, ya que muchos navegadores manejan objetos de etiquetas diferente (o no del todo, o la ejecucin es demasiado errores), se necesitaba la etiqueta embed como un mecanismo de reserva.

2) ETIQUETA DE OBJETO NICO / FLASH SATAY

Este mtodo se hizo popular despus de la A List Apart artculo sali en 2002. Aqu hay dos ejemplos de "etiqueta de objeto nico" incrustacin y Flash satay: "Slo etiqueta Object '
<Objeto classid = "clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" cdigo base = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab # version = 6,0,40, 0 "height =" 300 "> <param name = <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf">" calidad "=" width 120 "value =" high "> <param name="bgcolor" value="#FFFFFF"> <- [if IE!]> <-> <datos de objeto =" http://www.macromedia.com/ shockwave / download / triggerpages_mmcom / flash.swf "width =" "height =" 300 "type =" 120 application / x-shockwave-flash "> <param name="quality" value="high"> <param name =" bgcolor "value =" # FFFFFF "> <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer"> FAIL (el navegador debe rendir un cierto contenido de Flash, no este). </ Object> <-> <[endif] -> </ object>

Flash satay
<object width="400" height="300"> type="application/x-shockwave-flash data="c.swf?path=movie.swf" <param name = valor de "pelcula" = "c.swf? path = movie.swf "/> <img width="200" height="100" src="noflash.gif" alt="" /> </ object>

Los problemas de accesibilidad. - Utilizacin de Flash Satay, algunos lectores de pantalla (como JAWS) se ignore el contenido de Flash . Con los cambios de la disputa de patentes Eolas, los usuarios tendrn que hacer clic primero en el contenido de Flash en 'activar' antes de interactuar con l. Ms info aqu .

Hay noplug-in de deteccin. - Igual que el anterior - Sin deteccin de plug-in, los usuarios pueden ver roto o no contenido. Cuando el reproductor de flash se encuentra con una pelcula Flash embebido en una pgina, se tratar de jugar no importa lo que la versin es. As que si tienes Flash player 6 instalado, y encuentro una pelcula Flash 7, el plugin se trate de jugar, lo que puede causar un comportamiento extrao.

Algunos mtodos de flash satay no corriente de la pelcula Flash en el reproductor - As que este mtodo puede requerir pelculas swf 'titular' de que la pelcula se ha cargado en a. Esto hace pasar variables de parmetros FlashVars una molestia y lo convierten en un dolor para mantener el contenido de Flash que ahora tiene el doble de archivos swf flotando alrededor de su servidor web.

Las versiones anteriores de Safari ignoran param etiquetas - Hasta la versin 2.0 (en Tiger) o 1.3 (en Panther) y posiblemente 1.2.8 (pre

Panther) Safari ignorara por completo el param etiqueta. Esto significa que si se trat de establecer otras opciones que los utilizan, como FlashVars o Alinear, SALIGN, etc Safari no ver esos valores.
3) DETECCIN: LA 'PEQUEA PELCULA FLASH EN LA PGINA DE NDICE "MTODO

Este mtodo consiste en colocar una sola pelcula Flash en la pgina de ndice de su sitio web, y esta pelcula Flash a continuacin, comprueba la versin de $ variable en el reproductor de flash y redirige al usuario que el contenido de Flash en el sitio o una pgina de actualizacin. Los problemas con este mtodo incluyen:

Hay noplug-in de deteccin en las pginas internas. - Si un usuario enva una direccin URL interna a otro usuario, ese usuario nuevo no pasa por la deteccin de Flash en la pgina de ndice.

Con los cambios de la disputa de patentes Eolas, los usuarios tendrn que hacer clic primero en el contenido de Flash en 'activar' antes de interactuar con l. Ms info aqu .

No es HTML o XHTML vlido - Una vez ms, la etiqueta embed requerido para colocar las pelculas Flash en los documentos HTML no validar.

Hurts su ranking en los buscadores - Ya que ahora est usando su pgina de ndice como pgina de deteccin de Flash vaco, cuando la gente busca para usted en otros motores de bsqueda Google, o, a menudo el texto de la descripcin termina apareciendo como "Detectando Flash Player" o incluso no Descripcin del todo.Este es un enorme desperdicio de bienes races de primera pgina web que se debe utilizar para promover su empresa o productos. Muchas veces los desarrolladores no van a incluir un enlace al resto del contenido en el sitio (ya que la pelcula Flash contiene los enlaces) para que el resto del sitio no ser indexado tampoco.

4) EL FLASH KIT DE DETECCIN DE ADOBE JUGADOR

Adobe ha hecho un excelente trabajo con el nuevo kit de deteccin de Flash 8 -, pero no lo suficiente como excelente. Contiene dos maneras diferentes para detectar el plug-in: 1. El clsico "pequea pelcula Flash en la pgina de ndice" - (ver ms arriba) 2. Javascript - S, es cierto, Flash incluye ahora un Javascript plug-in de deteccin de plantilla. Por desgracia, es muy poco amigable en absoluto, mezclando Javascript, VBScript, y con toda tu HTML a todos en una sola pgina. Esto tiene muchos de los inconvenientes que el pasado y las

tcnicas de deteccin de Javascript embed, y no hace nada para hacer su vida ms fcil como desarrollador Flash / HTML. Y no valida como XHTML o HTML (Si usted se preocupa por ese tipo de cosas). He creado un ms profundo vistazo al kit de deteccin de Adobe aqu .
5) UTILICE JAVASCRIPT PRIMA PARA DETECTAR E INTEGRAR SUS PELCULAS

Es difcil criticar este mtodo, ya que por lo general vara de un sitio a otro. Sin embargo, la mayora de los esquemas de deteccin de Flash Javascript he encontrado por lo general sufren de los mismos defectos:

Fiable plug-in de deteccin - A menudo, la deteccin slo funciona con las versiones actuales de Flash Player, y se debe actualizar manualmente las nuevas versiones de los plug-in son liberados.

Aade ms cdigo a la pgina - Lo que hace an ms difcil de actualizar o modificar su contenido. Este mtodo tambin hace ms difcil para los diseadores o de otras personas que puedan estar trabajando con sus pginas para cambiar o aadir pelculas Flash.

Una solucin excesivamente complicado - Muchos scripts incorporacin de Flash puede llegar a archivos de gran tamao o ser demasiado complicado. SWFObject est diseado para ser simple y pequea.

Preguntas ms frecuentes SWFObject tiene ahora un foro para gente que busca ayudar a implementarlo. Por favor enve todas las solicitudes de apoyo al foro, hay un montn de gente capaz ah para ayudarle. P. Qu es este Internet Explorer " Active Update Content 'He estado oyendo acerca, y no SWFObject soluciona? A. La respuesta corta es s, SWFObject fijar cuestiones del "Activacin de contenido activo" en la nueva actualizacin de IE. Puedes leer ms sobre el temaaqu . P. Por qu el contenido alternativo parpadeo rpido en la pantalla antes de que mis cargas de contenido de Flash? (Slo ocurre en IE en Windows) A. Esto parece estar relacionado con el FOUC error. Se puede fijar mediante la adicin de una etiqueta de enlace en la cabecera de su documento a cualquier hoja de estilos. P. Puedo utilizar SWFObject para insertar ms de un SWF en una pgina HTML?

A. S. Slo dar a cada SWF y cada div o un elemento HTML que contendr un archivo SWF de un identificador nico. P. Cmo puedo hacer el trabajo SWFObject en Netscape 4.x? A. Este comentario tiene un cdigo de ejemplo que puede utilizar para hacer el trabajo SWFObject en Netscape 4.x P. Puedo utilizar SWFObject con mi blog? A. S, hay un par de plugins para WordPress y Textpattern aqu . P. Puedo utilizar SWFObject con Dreamweaver o GoLive? A. Hay una extensin de Dreamweaver disponible en CommunityMX . Actualmente no existe una extensin GoLive, pero si usted desea hacer una, yo con mucho gusto vincularlo a partir de esta pgina. Usted debe ser capaz de utilizar el script SWFObject sin una extensin, pero la extensin debe hacer que sea mucho ms fcil. P. Es esta pgina disponible en otros idiomas? A. Esta es una traduccin al francs de partes de esta pgina, una traduccin al sueco , italiano , alemn , espaol , noruego , polaco (parcial) , japons ,portugus (Brasil) , chino , y aqu es una traduccin al Finlands . Si alguien quiere traducir esta pgina a otros idiomas, yo estara encantado de publicar un enlace aqu. P: Hay una plantilla de publicacin que pueda usar con Flash? A. S. Puede descargar uno de Fluid Blog de Flash . P. Quin utiliza SWFObject / FlashObject? A. Sitios web como la Biblioteca del Congreso , Adobe.com (Una versin ligeramente modificadas), Amazon.com , Windows.com , YouTube .com ,skype.com , Snapple.com , que se incluye con Adobe Photoshop ( en la web Flash galeras de fotos ) y miles de otros. Colin Moock tambin sugiere que

como una alternativa para el kit de deteccin de Adobe. Todava tiene problemas? Trate de leer a travs de los mensajes anteriores SWFObject [ 1 , 2 , 3 ] en este blog (en especial los comentarios), ya que muchas preguntas comunes se han tratado all.
GRACIAS

Toby Boudreaux me dio un montn de consejos, ayud a que el cdigo mucho ms limpio y el nombre SWFObject espaciados todo al mismo tiempo.
Con la tecnologa de WordPress