Traducción al Español de la documentación de SWFObject 2

¿Que es SWFObject?

SWFObject 2:

¿Porqué deberías utilizar SWFObject?

SWFObject 2:

¿Porqué SWFObject utiliza JavaScript?

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

¿Debo usar el método de publicación estático o dinámico?

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

  1. 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
  2. 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 método de publicación estático:

  1. Promueve el uso de etiquetas que cumplen las normas estándar.
  2. 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 método de publicación dinámico:

  1. 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 ]
  2. Se integra muy bien con aplicaciones de script

Cómo incluir contenido Flash usando el método de publicación estático 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:

Elemento requerido param:

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 ] :

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

¿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 plugins[ http://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.html ]o 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 librería Javascript SWFObject en el head de tu página 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 librería SWFObject y decirle que hacer con él.

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

  1. El primer argumento (String, requerido) especifica el id usado en nuestra etiqueta.
  2. 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.
  3. 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

  1. Utiliza el generador SWFObject HTML y Javascript para ayudarte con el código http://code.google.com/p/swfobject/wiki/generator
  2. Repite los pasos 1 y 3 para incluir múltiples archivos SWF en una página HTML
  3. 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 método de publicación dinámico con SWFObject

PASO 1: Crea contenido alternativo utilizando etiquetas que cumplen las normas estándar

El método dinámico sigue el principio de mejora progresiva[ ]http://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 librería Javascript SWFObject en el head de tu página 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:

  1. swfUrl (String, requerido) especifica la URL de tu SWF
  2. id (String, requerido) especifica el id del elemento HTML que contiene el contenido alternativo y que será reemplazado por el archivo Flash
  3. width (String, requerido) especifica la anchura del SWF
  4. height (String, requerido) especifica la altura del SWF
  5. version (String, requerido) especifica la versión del Flash Player para la que tu SWF fue publicado (el formato es: "major.minor.release")
  6. 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 ].
  7. 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.
  8. flashvars (Object, opcional) especifica tus variables flash (flashvars) con parejas name:value
  9. params (Object, opcional) especifica los elementos param anidados bajo el elemento object con parejas name:value
  10. 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>
 

¿Cómo configurar tu contenido Flash?

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

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

¿Cómo 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&name2=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

  1. Utiliza el generador SWFObject HTML y Javascript para ayudarte con el código http://code.google.com/p/swfobject/wiki/generator
  2. Repite los pasos 1 y 3 para incluir múltiples archivos SWF en una pagina HTML
  3. 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

  1. SWFObject 2 no es compatible con la versión previa SWFObject 1.5.
  2. 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)
  3. La libreria en si misma esta escrita con minúsculas: swfobject en lugar de SWFObject
  4. A métodos solo se pueden acceder desde la librería, no a través de una instancia SWFObject como en SWFObject 1.5
  5. La API es completamente diferente y más elaborada [ http://code.google.com/p/swfobject/wiki/api ]
  6. 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

  1. 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
  2. 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:

  1. Muy pocos autores web lo usan
  2. 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
  3. Los desarrolladores ahorran un tiempo y un tamaño de archivo considerable no soportando esto

Tutoriales en inglés (Nivel principiante)