Añadir contenido Flash usando SWFObject 2

Traduccion al castellano de la documentacion de SWFObject 2

¿Que es SWFObject2?

Ofrece dos métodos optimizados para el incluir el Flash Player. Uno esta basado en etiquetas y el otro en Javascript.
Ofrece un API Javascript con herramientas para incluir archivos SWF y recuperar información relativa al player de Flash http://code.google.com/p/swfobject/wiki/api
Solamente utiliza un pequeño archivo Javascript (9.5Kb / GZIPed: 3.8Kb)
Es el sucesor de SWFObject 1.5 http://blog.deconcept.com/swfobject/ y UFO http://www.bobbyvandersluis.com/ufo//li>
Reemplazara el Kit de detección de Flash Player de Adobe
Intenta unificar todos los métodos existentes para incluir el Flash Player y proporcionar un nuevo estándar para incrustar contenido Flash.
Es un proyecto de código abierto creado por Geoff Stearns, Michael Williams, y Bobby van der Sluis, y se conoce como SWFFix http://code.google.com/p/swffix/

¿Porque deberias utilizar SWFObject2?

Está mejor optimizado y es más flexible que cualquier otro método para incluir el Flash Player en tus páginas
Ofrece una solución para todo el mundo. No importa si eres un desarrollador de HTML, Flash o Javascript
Rompe el ciclo que obliga a los usuarios a utilizar las etiquetas especificas creadas por el vendedor y promueve el uso de los estándares web y contenido alternativo
Utiliza mejores usos de Javascript que no son molestos para el usuario
Es fácil de usar

¿Porque SWFObject utiliza JavaScript?

SWFObject 2 utliza Javascript para resolver problemas que no se pueden solventar con etiquetas:

Detectar la versión de Flash Player para evitar que versiones antiguas del plugin estropeen el contenido Flash y determinar si el contenido alternativo se debe mostrar o no
Ofrece funcionalidad para volver al contenido alternativo en caso de que la versión del plugin no este actualizada manipulando el DOM (Nota: Si el plugin de Flash no está instalado, muestra automáticamente el contenido HTML del objeto HTML anidado)
Ofrece la opción de utilizar la Instalación Express de Adobe para descargar la última versión del Flash Player
Resuelve el problema producido por previos Webkits que ignoraban los elementos "param" anidados dentro del elemento "embed" usando el elemento "embed" original (Nota: este es el único lugar en el que se utiliza una etiqueta registrada y será descartado en el futuro)
Ofrece la posibilidad de publicar contenido Flash con Javascript y en consecuencia evitar posibles mecanismos que requieran "click para activar"
Ofrece una elaborada API Javascript que permite realizar tareas comunes con el Flash Player y el contenido Flash

¿Debo usar el metodo de publicacion estatico o dinamico?

SWFObject 2 ofrece dos métodos distintos para incluir contenido Flash:

El método de publicación estático incrusta el contenido flash y el contenido alternativo usando etiquetas estándar y utiliza Javascript para resolver los problemas que las etiquetas por sí solas no pueden resolver
El método de publicación dinámico utliza etiquetas para el contenido alternativo y Javascript para remplazar este contenido con contenido Flash si la mínima versión Flash requerida está instalada y el navegador soporta Javascript (como en versiones anteriores de SWFObject y UFO)

Ventajas del metodo de publicacion estatico:

Promueve el uso de etiquetas que cumplen las normas estándar.
El contenido puede alcanzar una audiencia mayor ya que el mecanismo para incluirlo no requiere un lenguaje interpretado (de script):
- Si tienes el plugin instalado pero Javascript deshabilitado o tu navegador no soporta Javascript, todavía podrás ver el contenido Flash
- Flash también puede funcionar en un dispositivo como la Sony PSP que ofrece un soporte muy pobre para Javascript
- Herramientas automatizadas como los lectores RSS son capaces de captar el contenido Flash

Ventajas del metodo de publicacion dinamico:

Evita mecanismos que requieren activar un control para ver el contenido en Internet Explorer 6, 7 y Opera 9+. Microsoft esta retirando de sus navegadores todo el contenido que requiere "click para activar" paulatinamente. http://blogs.msdn.com/ie/archive/2007/11/08/ie-automatic-component-activation-changes-to-ie-activex-update.aspx
Se integra muy bien con aplicaciones de script

Como incluir contenido Flash usando el metodo de publicacion estatico con SWFObject

PASO 1: Introducir Flash y el contenido alternativo utilizando etiquetas que cumplen las normas estándar

SWFObject utiliza etiquetas anidadas (con los comentarios condicionales para Interner Explorer) para asegurar el mejor soporte para todos los navegadores usando sólo etiquetas, siguiendo las normas estándar y ofreciendo un contenido alternativo.

								<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
								<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
								  <head>
								    <title>SWFObject - step 1</title>
								    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
								  </head>
								  <body>
								    <div>
								
								      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
								        <param name="movie" value="myContent.swf" />
								        <!--[if !IE]>-->
								        <object type="application/x-shockwave-flash" data="miContenido.swf" width="780" height="420">
								        <!--<![endif]-->
								          <p>Contenido Alternativo</p>
								        <!--[if !IE]>-->
								        </object>
								        <!--<![endif]-->
								      </object>
								    </div>
								  </body>
								</html>

NOTA: El método de objetos anidados requiere una doble definición de objeto (el exterior para Internet Explorer y el interior para los otros navegadores), por lo que debes definir los atributos y los param anidados dos veces.

Atributos requeridos:

classid (solamente en el elemento object exterior, el valor es siempre clsid:D27CDB6E-AE6D-11cf-96B8-444553540000)
type (solo en el object interior, el valor es siempre application/x-shockwave-flash)
data (solo en el object interior, define la URL del SWF)
width (en ambos elementos object, define la anchura del SWF)
height (en ambos elementos object, define la altura del SWF)

Elemento requerido param:

movie (solo para el elemento object exterior, define la URL del SWF)

NOTA: No se recomienda utilizar el atributo codebase para indicar la URL del instalador del plugin Flash en los servidores de Adobe porque es ilegal según las especificaciones que restringen el acceso al dominio del documento actual. Se recomienda utilizar contenido alternativo para avisar al usuario de que puede disfrutar de una experiencia mejor si descarga el Plugin de Flash.

Como puedes usar HTML para configurar tu contenido Flash?

Puedes añadir los siguientes atributos opcionales al elemento object http://www.w3schools.com/tags/tag_object.asp :

id
name
class
align

También puedes usar el parámetro opcional: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701:

play
loop
menu
quality
scale
salign
wmode
bgcolor
base
swliveconnect
flashvars
devicefont http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_13331
allowscriptaccess http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16494 and http://www.adobe.com/go/kb402975
seamlesstabbing http://www.adobe.com/support/documentation/en/flashplayer/7/releasenotes.html
allowfullscreen http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
allownetworking http://livedocs.adobe.com/flash/9.0/main/00001079.html

¿Por qué debes usar contenido alternativo?

El elemento object te permite anidar contenido alternativo que será mostrado si Flash no está instalado o soportado. Este contenido será indexado por los motores de búsqueda. En resumen, se debe crear contenido alternativo cuando se quiere ofrecer una alternativa para aquellos usuarios que navegan sin utilizar pluginshttp://www.adobe.com/devnet/flash/articles/progressive_enhancement_03.html, para crear contenido amigable para los motores de búsqueda http://www.adobe.com/devnet/flash/articles/progressive_enhancement_04.htmlo para informar a los usuarios de que pueden disfrutar de una experiencia más rica si se descargan el plugin de Flash.

PASO 2: Incluir la libreria Javascript SWFObject en el head de tu pagina HTML.

La librería SWFObject consiste en un archivo Javascript externo. SWFObject se ejecutará tan pronto como sea leído y realizará todas las manipulaciones del DOM en cuanto este se cargue - para todos los navegadores que soportan como IE, Firefox, Safari y Opera 9+ -de lo contrario se ejecutará con un evento onload.

PASO 3: Registrar tu contenido Flash con la libreria SWFObject y decirle que hacer con el.

Primero anade un id único a la etiqueta object exterior que define tu contenido Flash. Despues añade el método swfobject.registerObject method:

El primer argumento (String, requerido) especifica el id usado en nuestra etiqueta.
El segundo argumento (String, requerido) especifica la versión de Flash para la que tu contenido fue publicado. Activa la detección de un SWF para determinar si debe mostrar el contenido Flash o el alternativo manipulando el DOM. Normalmente los números de versión de Flash consisten en major.minor.release.build, SWFObject solo mira a los tres primeros dígitos, "WIN 9,0,18,0" (IE) o "Shockwave Flash 9 r18" (los demás navegadores) se traducirá como "9.0.18" en ambos casos.
El tercer argumento(String, opcional) puede se utiliza para activar Adobe express install http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 y especifica la URL del SWF para la instalación automática. Express Install muestra un cuadro de dialogo estándar para el Flash Plater cuando la versión requerida del plugin no esta disponible. Un archivo expressInstall.swf esta incluído por defecto en el paquete con el proyecto. También contiene los correspondientes archivos expressInstall.fla y AS (en el directorio SRC) que te permiten personalizar la instalación. Express install solamente se ejecuta una vez (la primera vez que es invocado), solo lo soporatn Flash Player 6.0.65 o versiones posteriores en Win y Mac y el SWF requiere un tamaño mínimo de 310x137px.

								<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
								 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
								<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
								 <head>
								 <title>SWFObject - step 3</title>
								 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
								 <script type="text/javascript" src="swfobject.js"></script>
								
								 <script type="text/javascript">
								 swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
								 </script>
								
								 </head>
								 <body>
								 <div>
								
								 <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
								
								 <param name="movie" value="myContent.swf" />
								 <!--[if !IE]>-->
								 <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
								 <!--<![endif]-->
								 <p>Alternative content</p>
								 <!--[if !IE]>-->
								 </object>
								 <!--<![endif]-->
								 </object>
								 </div>
								 </body>
								</html>

CONSEJOS

Utiliza el generador SWFObject HTML y Javascript para ayudarte con el código http://code.google.com/p/swfobject/wiki/generator
Repite los pasos 1 y 3 para incluir múltiples archivos SWF en una página HTML
La manera mas fácil de referenciar el elemento object es usar el API Javascript: swfobject.getObjectById(objectIdStr) http://code.google.com/p/swfobject/wiki/api

Como insertar contenido Flash usando el metodo de publicacion dinamico con SWFObject

PASO 1: Crea contenido alternativo utilizando etiquetas que cumplen las normas estandar

El método dinámico sigue el principio de mejora progresivahttp://www.adobe.com/devnet/flash/articles/progressive_enhancement.html y reemplaza el contenido HTML alternativo por Flash cuando el soporte para Javascript y Flash es el requerido. Primeramente define tu contenido alternativo y asígnale un id:

								<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
								 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
								<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
								  <head>
								    <title>SWFObject dynamic embed - step 1</title>
								    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
								  </head>
								  <body>
								    
								    <div id="myContent">
								      <p>Alternative content</p>
								    </div>
								    
								  </body>
								</html>

PASO 2: Incluye la libreria Javascript SWFObject en el head de tu pagina HTML

La librería SWFObject consiste en un archivo Javascript externo. SWFObject se ejecutará en cuanto se lea y realizará todas las manipulaciones del DOM en cuanto éste sea cargado - para todos los navegadores que soportan como IE, Firefox, Safari yOpera 9+ -de lo contrario será ejecutado con un evento onload.

							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
							 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
							<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
							  <head>
							    <title>SWFObject dynamic embed - step 2</title>
							    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
							  
							    <script type="text/javascript" src="swfobject.js"></script>
							
							  </head>
							  <body>
							    <div id="myContent">
							      <p>Alternative content</p>
							    </div>
							  </body>
							</html>

PASO 3: Incrusta tu SWF con Javascript

							swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params,
							 attributes)

tiene 5 argumentos requeridos y cuatro opcionales:

swfUrl (String, requerido) especifica la URL de tu SWF
id (String, requerido) especifica el id del elemento HTML que contiene el contenido alternativo y que será reemplazado por el archivo Flash
width (String, requerido) especifica la anchura del SWF
height (String, requerido) especifica la altura del SWF
version (String, requerido) especifica la versión del Flash Player para la que tu SWF fue publicado (el formato es: "major.minor.release")
expressInstallSwfurl (String, opcional) especifica la URL del SWF para la instalación automática con Express Install http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75.
Express install solamente se ejecuta una vez (la primera vez que es invocado), solo lo soportan Flash Player 6.0.65 o versiones posteriores en Win y Mac y el SWF requiere un tamaño mínimo de 310x137px.
flashvars (Object, opcional) especifica tus variables flash (flashvars) con parejas name:value
params (Object, opcional) especifica los elementos param anidados bajo el elemento object con parejas name:value
attributes (Object, opcional) especifica los atributos del objeto con parejas name:value

NOTA: Se puede omitir los parámetros opcionales siempre que no se rompa el orden de los parámetros. Si no quieres usar un parámetro opcional pero si el siguiente se puede simplemente pasar un valor falso al primero. Para flashvars, params y attributes JavaScript Objects tu puedes pasar también un objeto vacío: {}

							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
							 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
							<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
							 <head>
							 <title>SWFObject dynamic embed - step 3</title>
							 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
							 <script type="text/javascript" src="swfobject.js"></script>
							 
							 <script type="text/javascript">
							 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
							 </script>
							
							 </head>
							 <body>
							 <div id="myContent">
							 <p>Alternative content</p>
							 </div>
							 </body>
							</html>

¿Como configurar tu contenido Flash?

Puedes añadir los siguientes atributos opcionales al elemento object http://www.w3schools.com/tags/tag_object.asp:

id (NOTA: si no se define, el elemento object hereda el id del elemento que contiene el contenido alternativo)
name
class
align

También puedes usar los siguientes parámetros opcionales: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701:

play
loop
menu
quality
scale
salign
wmode
bgcolor
base
swliveconnect
flashvars
devicefont http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_13331
allowscriptaccess http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16494 and http://www.adobe.com/go/kb402975
seamlesstabbing http://www.adobe.com/support/documentation/en/flashplayer/7/releasenotes.html
allowfullscreen http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
allownetworking http://livedocs.adobe.com/flash/9.0/main/00001079.html

¿Como se usan los Objetos Javascript para derfinir tus flashvars, params y atributos de object?

La mejor manera de definir Objetos Javascript es utilizando la anotación literal:

							<script type="text/javascript">
							
							var flashvars = {};
							var params = {};
							var attributes = {};
							
							swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf",
							 flashvars, params, attributes);
							
							</script>

Puedes añadir tus parejas name:value mientras defines un objeto (nota: por favor asegúrate de no poner una coma detrás del último par name:value dentro del objeto)

							<script type="text/javascript">
							
							var flashvars = {
							  name1: "hello",
							  name2: "world",
							  name3: "foobar"
							};
							var params = {
							  menu: "false"
							};
							var attributes = {
							  id: "myDynamicContent",
							  name: "myDynamicContent"
							};
							
							swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf",
							 flashvars, params, attributes);
							
							</script>

O añadir propiedades y valores después de su creación usando la anotación de puntos.

							<script type="text/javascript">
							
							var flashvars = {};
							flashvars.name1 = "hello";
							flashvars.name2 = "world";
							flashvars.name3 = "foobar";
							
							var params = {};
							params.menu = "false";
							
							var attributes = {};
							attributes.id = "myDynamicContent";
							attributes.name = "myDynamicContent";
							
							swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf",
							 flashvars, params, attributes);
							
							</script>

También se puede escribir como (la forma mas corta para el desarrollador puro y duro que ama el código en una sola línea).

							<script type="text/javascript">
							
							swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf",
							 {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"},
							 {id:"myDynamicContent",name:"myDynamicContent"});
							
							</script>

Si no quieres utilizar un argumento opcional lo puedes definir como falso o como un objeto vacío.
(NOTA: Desde SWFObject 2.1 tambien se puede utilizar null o 0).

							<script type="text/javascript">
							
							var flashvars = false;
							var params = {};
							var attributes = {
							  id: "myDynamicContent",
							  name: "myDynamicContent"
							};
							
							swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", 
							 flashvars, params, attributes);
							
							</script>

El objeto flashvars es una anotación corta y fácil de manejar. También se puede ignorar y especificar las flashvars en el objeto params.

							<script type="text/javascript">
							
							var flashvars = false;
							var params = {
							  menu: "false",
							  flashvars: "name1=hello&aname2=world&name3=foobar"
							};
							var attributes = {
							  id: "myDynamicContent",
							  name: "myDynamicContent"
							};
							
							swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf",
							 flashvars, params, attributes);
							
							</script>

CONSEJOS

Utiliza el generador SWFObject HTML y Javascript para ayudarte con el código http://code.google.com/p/swfobject/wiki/generator
Repite los pasos 1 y 3 para incluir múltiples archivos SWF en una pagina HTML
La manera mas fácil de referenciar el elemento object es utilizando el API Javascript: swfobject.getObjectById(objectIdStr) http://code.google.com/p/swfobject/wiki/api

Actualizar desde SWFObject 1.5 a SWFObject 2

SWFObject 2 no es compatible con la versión previa SWFObject 1.5.
Ahora es preferible que se inserten todos los bloques de script en el head de la pagina html. Situar los scripts en el body de la página puede tener algún impacto visual (flashes del contenido alternativo), porque el código Javascript se ejecutará más tarde (el impacto que esto puede tener depende de la implementación)
La libreria en si misma esta escrita con minúsculas: swfobject en lugar de SWFObject
A métodos solo se pueden acceder desde la librería, no a través de una instancia SWFObject como en SWFObject 1.5
La API es completamente diferente y más elaborada http://code.google.com/p/swfobject/wiki/api
SWFObject 2 reemplaza completamente el bloque de contenido HTML alternativo, incluyendo el contenedor HTML referenciado cuando Javascript y Flash son soportados por el navegador. SWFObject 1.5 solo reemplaza el contenido dentro del contenedor HTML referenciado. Cuando no se especifica un atributo id, el elemento object hereda el id del elemento que contiene el contenido alternativo

Consejos para migrar de UFO a SWFObject 2

SWFObject 2 reemplaza completamente el bloque de contenido HTML alternativo, incluyendo el contenedor HTML referenciado cuando el navegador soporta Javascript y Flash. UFO solo reemplaza el contenido dentro del contenedor HTML referenciado. Cuando no se especifica un atributo id, el elemento object hereda el id del elemento que contiene el contenido alternativo
La funcionalidad de UFO setcontainercssno ha sido incluída en SWFObject 2, sin embargo, se puede replicar fácilmente usando el API Javascipt de SWFObject. swfobject.createCSS(selStr, declStr) in http://code.google.com/p/swfobject/wiki/api

Soporta SWFObject 2 MIME type application/xhtml+xml?

SWFObject 2 no soporta XML MIME types debido a una decisión de diseño. Hay varias razones para no ofrecerlo:

Muy pocos autores web lo usan
Los desarrolladores no están seguros de que éste sea el mejor camino a seguir. Internet Explorer no lo soporta y la mayoría de los vendedores de navegadores apuntan hacia un nuevo estándar basado en HTML 5 con una visión diferente a la que tiene actualmente el W3C que analiza el HTML como XML
Los desarrolladores ahorran un tiempo y un tamaño de archivo considerable no soportando esto

Tutoriales en ingles (Nivel principiante)

Detecting Flash Player versions and embedding SWF files with SWFObject 2 http://www.adobe.com/devnet/flashplayer/articles/swfobject.html
Providing alternative content for SWF files http://www.adobe.com/devnet/flashplayer/articles/alternative_content.html
Embedding Flash with SWFObject 2.0 (video tutorial) by Lee Brimelow http://www.gotoandlearn.com

Juan Mediavilla

Experience Architect and more...

Traduccion al castellano de la documentacion de SWFObject 2

¿Que es SWFObject2?

¿Porque deberias utilizar SWFObject2?

¿Porque SWFObject utiliza JavaScript?

¿Debo usar el metodo de publicacion estatico o dinamico?

Ventajas del metodo de publicacion estatico:

Ventajas del metodo de publicacion dinamico:

Como incluir contenido Flash usando el metodo de publicacion estatico con SWFObject

PASO 1: Introducir Flash y el contenido alternativo utilizando etiquetas que cumplen las normas estándar

Como puedes usar HTML para configurar tu contenido Flash?

PASO 2: Incluir la libreria Javascript SWFObject en el head de tu pagina HTML.

PASO 3: Registrar tu contenido Flash con la libreria SWFObject y decirle que hacer con el.

CONSEJOS

Como insertar contenido Flash usando el metodo de publicacion dinamico con SWFObject

PASO 1: Crea contenido alternativo utilizando etiquetas que cumplen las normas estandar

PASO 2: Incluye la libreria Javascript SWFObject en el head de tu pagina HTML

PASO 3: Incrusta tu SWF con Javascript

¿Como configurar tu contenido Flash?

¿Como se usan los Objetos Javascript para derfinir tus flashvars, params y atributos de object?

CONSEJOS

Actualizar desde SWFObject 1.5 a SWFObject 2

Consejos para migrar de UFO a SWFObject 2

Soporta SWFObject 2 MIME type application/xhtml+xml?

Tutoriales en ingles (Nivel principiante)