Traducción a español de la página oficial de SWFObject

 

Atención: SWFObject es el script de detección de flash antes llamado FlashObject. El nombre ha cambiado debido a problemas legales. Para más información: este post. (inglés)

SWFObject: Detección de Flash y con javascript y script "embed"

(script para evitar la activación de flash en explorer)

SWFObject es un pequeño archivo javascript usado para incrustar contenido de Macromedia Flash. El script puede detectar el plug-in en todos los navegadores importantes (en Mac y PC)  y ha sido diseñado para hacer el incrustado de la película flash lo más sencillo posible. Además, es muy "amigable" para los buscadores, degrada fácilmente, puede ser usado en documentos HTML y XHTML 1.0 válidos* y se espera que sea también compatible hacia adelante, por lo que debería funcionar por muchos años.

* Para páginas enviadas como text/html, no como /xhtml+xml.

Índice de contenidos

¿Qué hay de nuevo?

Para un listado de todos los cambios, por favor accede a mi SWFObject 1.4 blog post. (en inglés)

Cómo funciona

[Para über nerds, podéis ver el archivo javascript aquí.]

Utilizar SWFObject es fácil. Simplemente, incluye el archivo de javascript  SWFObject.js, después utiliza una pequeña porción de Javascript para incluir tu película Flash. Aquí hay un pequeño ejemplo que muestra el código mínimo que se necesita para incrustar la película Flash:

<script type="text/javascript" src="swfobject.js"></script>
		
<div id="contenidoflash">
  Este es el texto que reemplazará la película flash

</div>

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.write("contenidoflash");
</script>

Esto es una pequeña muestra de lo que hace el código:

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

Prepare un elemento HTML que contendrá nuestra película Flash. El contenido colocado en el elemento "continente" será reemplazado por el contenido de Flash, de esta forma, los usuarios con el plugin de Flash instalado nunca verán el contenido (alternativo) del continente. Esta característica tiene el aliciente de que los buscadores podrán escaner el contenido alternativo.

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

Cree un nuevo  SWFObject y pase los parámetros requeridos::

• swf - La ruta y nombre de su archivo swf.
• id - El ID del objeto o etiqueta embed. La etiqueta embed tendrá también este valor en el nombre para los archivos que utilicen las posibilidades de swliveconnect.
• width - El ancho de la película Flash.
• height - El alto de la película Flash.
• version - La versión de Flash player requerida para tu contenido Flash. Esto puede ser una cadena con el formato  'majorVersion.minorVersion.revision'. Un ejemplo sería: "6.0.65". O simplemente puede requerir la versión principal, como "6".
• background color - Este es el valor hex del fondo de la película Flash.

Parámetros opcionales:

• useExpressInstall - Si desea permitir a sus usuarios actualizar utilizando la característica ExpressInstall , utilice 'true'  para este valor.
• quality - La calidad de reproducción de la película Flash. Si no indica este valor, la calidad es alta:  "high".
• xiRedirectUrl - Si desea redirigir usuarios que completen la instalación expres (ExpressInstall), puede especificar una Url alternativa aquí.
• redirectUrl - Si desea redirigir a usuarios que no tengan la versión correcta del plugin, utilice este parámetro y serán redirigidos.
• detectKey - Este es el nombre de la variable de url que el script SWFObject buscará para sobrepasar la detección. Por defecto es 'detectflash'. Ejemplo: Para sobrepasar la detección Flash y simplemente escribir la película Flash directamente en la página, podría añadir  ?detectflash=false  a la url del documento que contenga la película Flash.

so.write("contenidoflash");

Dice al script SWFObject que escriba el contenido Flash en la página (si el plugin correcto está instalado en el sistema del usuario)  reemplazando el contenido del elemento HTML.

Los detalles

SWFObject trabaja en segundo plano de su documento HTML. Cuando desarrolle páginas que usan SWFObject, debería comenzar con el contenido (no Flash) alternativo. Haga funcionar primero su página sin las películas Flash, después añada los pequeños trozos de código Javascript que reemplazan el contenido alternativo con las películas Flash. Esto asegura que el contenido alternativo será escaneado correctamente por los buscadores y los usuarios sin el plugin de Flash todavía verán una página HTML. Incluir las instrucciones para actualizar el plugin o no, depende de usted. Si su contenido alternativo es suficiente, puede no ser necesario informar al usuario de la existencia de un contenido Flash.

SWFObject funciona en los siguientes navegadores, en PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, y Opera. En Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, y Opera 7.5+, y debería seguir funcionando bien en el futuro.

SWFObject detecta la versión de Flash player en estos navegadores desde la versión 3 y en adelante, y sobretodo, permitirá a sus usuarios utilizar su contenido Flash sin necesidad de "activarlo" primero. Para más información sobre esto, lea este blog post sobre la disputa de patente entre  Internet Explorer  y Eolas . (en inglés)

SWFObject  puede detectar versiones menores y revisiones de versiones de Flash Player también, simplemente pasando el valor de cadena de la versión que requiera. Un ejemplo para  Flash player v.6.0 r65 (or 6,0,65,0) sería:

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

La detección de plugin de SWFObject's puede ser sobrepasada. Si aparece un navegador nuevo o por alguna razón la detección falla en el sistema de un usuario, puede incluir un enlace que deshabilitará la detección integrada en SWFObject,  de esta forma siempre se escribirá el contenido Flash en la página. Para sobrepasar la detección, simplemente enlace con la página que contenga el Flash e incluya una variable de url llamada "detectflash=false". Este es un ejemplo de cómo quedaría el enlace:

<a href="mypage.html?detectflash=false">Bypass link</a>

Ejemplos SWFObject

El ejemplo superior es lo principal que se necesita para utilizar  SWFObject,  pero si desea utilizar otros parámetros de los ofrecidos por el plugin de Flash,  SWFObject  hace muy fácil añadir cualquier parámetro extra que necesite incluir. Los ejemplos de abajo son varios métodos que posiblemente necesite utilizar para incrustar su Flash.

Un ejemplo sencillo de adición de parámetros extra

<script type="text/javascript">
   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("contenidoflash");
</script>

Aquí hay una lista completa de todos los parámetros y sus posibles valores en macromedia.com (inglés).

Pasar variables a las películas utilizando el parámetro "Flashvars":

Usar Flashvars es la forma más sencilla de enviar datos desde un HTML a una película Flash,  pero sólo puede pasar los datos con la película cargada. Normalmente, añadiría un parámetro llamado "flashvars" y después, para los valores, añadiríamos una cadena nombre/valor como: variable1=value1&variable2=value2&variable3=value3 y siguiendo. SWFObject  lo hace un poco más sencillo permitiendo añadir tantas variables como se quieran de una forma similar a como se añaden los parámetros adicionales. Aquí hay un ejemplo de como pasar variables utilizando Flashvars:

<script type="text/javascript">
   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("contenidoflash");
</script>

Una vez hecho esto, todas las variables enviadas estarán disponibles inmediatamente dentro de su película Flash. Para acceder a ellas, bastará con utilizarlas desde el _root en la línea de tiempo, como con el método tradicional.

El script SWFObject  contiene también una función extra que permite extraer variables de la cadena de url. Un ejemplo sería teniendo una Url como esta: http://www.example.com/page.html?variable1=value1&variable2=value2. Utilizando la función  getQueryParamValue()  puede extraer estos valores de la url y seguidamente pasarlos a la película Flash.  Mostramos a continuación el ejemplo para el código anterior:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.addVariable("variable1", getQueryParamValue("variable1"));
   so.addVariable("variable2", getQueryParamValue("variable2"));
   so.write("contenidoflash");
</script>

La función getQueryParamValue() también soporta leer variables del location.hash, como se utiliza en ocasiones realizando links profundos en las aplicaciones Flash. Para un ejemplo de cómo realizar links profundos en una película Flash utilizando location.hash ,  acceda a demo de Slideshow Pro, que utiliza SWFObject embebido.

Utilizar la instalación expres (Express Install) con SWFObject

SWFObject tiene soporte completo para la característica de Macromedia Flash Player Express Install. Incluido con el script SWFObject hay un archivo actionscript que funciona junto con SWFObject  para comenzar el proceso de actualización en las películas Flash. Sus usuarios no tendrán que abandonar su página para actualizar su versión de Flash. y serán redirigidos a la página donde la actualización comenzó.

Para usar  ExpressInstall, debe incluir el archivo expressinstall.as en su fla y al comienzo de su película realizar una comprobación sencilla para ver si el usuario necesita actualizar.

#include "expressinstall.as"

// initialize the ExpressInstall object
var ExpressInstall = new ExpressInstall();

// if the user needs to upgrade, show the 'start upgrade' button
if (ExpressInstall.needsUpdate) {

// this is optional, you could also automatically start the
// upgrade by calling ExpressInstall.init() here instead of the following lines

// attach the custom upgrade message and center it
var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1);
upgradeMsg._x = Stage.width / 2;
upgradeMsg._y = Stage.height / 2;

// attach the button actions that will start the ExpresInstall updater
upgradeMsg.upgradeBtn.onRelease = function() {
// the ExpressInstall.init() method is what kicks off the actual update
ExpressInstall.init();
}
// if expressinstall is invoked, stop the timeline.
stop();
}

Es importante no colocar ningún contenido en su primer frame (o donde la comprobación de ExpressInstall ocurra). Requiere Flash player 7 o superior.

Para un ejemplo "en vivo" de este código abra el archivo source/fo_tester.fla incluido en el .zip SWFObject. O si desea ver como funciona, instale  Flash player 7 (or 6.0.65) y visite esta página.

Si su película Flash está en una ventana popup, o desea redirigir al usuario a una localización diferente después de completar la actualización ExpressInstall, puede usar el atributo  xiRedirectUrl para redirigir al usuario de vuelta a la página donde inició la actualización, en lugar de la página actual con su película  Flash.

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699", true);
   so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); 
// tiene que ser una ruta absoluta
   so.write("contenidoflash");
</script>

Por qué es mejor que el resto

A lo largo de los años, han aparecido muchos métodos para detectar las versiones de Flash player y películas Flash en documentos HTML. Esta sección echará un vistazo a cada uno de los métodos más populares y puntualizará los problemas de cada uno.

1) El método por defecto de Macromedia

Todo el mundo conoce el método por defecto de Macromedia. Consiste en una etiqueta object con una etiqueta embed dentro como mecanismo de fallo. Este es el método más popular para incrustar Flash y es el que aparece por defecto si incrusta su película con una herramienta de macromedia. Es el método más compatible y funcionará en la mayoría de los navegadores. A continuación un ejemplo del código por defecto:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
   codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#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.macromedia.com/go/getflashplayer" />
</object>

A pesar de ser el método más común para incrustar películas Flash, tiene algunos problemas:

• No hay detección de plug-in. - Sin detección de plug-in, los usuarios pueden no ver contenido o verlo roto y en caso de no tener plugin, les aparecerá la ventana de diálogo de instalación de ActiveX en IE— un tipo de ventana que muchos usuarios pueden temer debido al spyware y malware— o la "extraña pieza de puzzle que aparece en los navegadores basados en Mozilla. Ninguno de estos sistemas de instalación de  plugins son amigables para el usuario, y normalmente no se explican a ellos mismos suficientemente bien.
• Con los últimos cambios debidos a la patente de  Eolas (bloqueo- activación de flash en Explorer), los usuarios tendrán que hacer clic en el contenido flash para "activarlo" antes de poder interactuar con él.  Más información aquí. (inglés)
• No es válido HTML o XHTML - No existe nada como una etiqueta  embed en ninguna versión de HTML o XHTML. De cualquier forma, dado que muchos navegadores manejan las etiquetas object de forma diferente (o no la manejan, o la implementación es "buggy"), la etiqueta embed era necesaria como mecanismo de fallo.

2) Únicamente etiqueta Object / Flash satay

Este método se hizo popular a partir de un Artículo en A List Apart  en 2002. A continuación mostramos dos ejemplos de  'Sólo etiqueta object'  y  Flash satay:

'Sólo etiqueta object'

<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.swf"
		 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.macromedia.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>

• Problemas de Accesibilidad. - Utilizando Flash Satay, algunos lectores de pantalla (comoJAWS) ignorarán su contenido.
• Con los últimos cambios debidos a la patente de  Eolas (bloqueo- activación de flash en Explorer), los usuarios tendrán que hacer clic en el contenido flash para "activarlo" antes de poder interactuar con él.  Más información aquí. (inglés)
• No hay detección de plug-in. - lo mismo de arriba Sin detección de plug-in, los usuarios pueden no ver contenido o verlo roto y en caso de no tener plugin, les aparecerá la ventana de diálogo de instalación de ActiveX en IE— un tipo de ventana que muchos usuarios pueden temer debido al spyware y malware— o la "extraña pieza de puzzle que aparece en los navegadores basados en Mozilla. Ninguno de estos sistemas de instalación de  plugins son amigables para el usuario, y normalmente no se explican a ellos mismos suficientemente bien.
• Algunos métodos de Flash satay no mandan la película en stream al player  -  Así que este método puede requerir swf "continentes" para cargar la película dentro. Esto hace que pasar las variables se convierta en una ardua tarea, así como mantener el contenido Flash, ya que hay que tener en cuenta un archivo más (el de carga) 
• Versiones antiguas de Safari ignoran etiquetas param - Hasta la versión 2.0 (enTiger) or 1.3 (en Panther) y posiblemente 1.2.8 (pre Panther) Safari ignoraba completamente la etiqueta param . Esto significaría que si se intenta incluir opciones desde la etiqueta param, como FlashVars, Align, Salign, etc. Safari no verá estos valores.

3) Detección: El método 'pequeña película flash en la página de índice'

Este método conlleva colocar una película de Flash en la página de índice de su página web, entonces, esta película comprueba la variable $version en el Flash player y redirige al usuario o a la página con el contenido Flash o a otra con la actualización.

Los problemas con este método incluyen:

• No existe detección de plugin en las páginas interiores - Si un usuario envía una Url interna a otro usuario, el nuevo usuario sobrepasa la detección Flash en la página de índice.
• Con los últimos cambios debidos a la patente de  Eolas (bloqueo- activación de flash en Explorer), los usuarios tendrán que hacer clic en el contenido flash para "activarlo" antes de poder interactuar con él.  Más información aquí. (inglés)
• No es  HTML válido ni XHTML - De nuevo, la etiqueta embed requerida para colocar la película Flash en el documento HTML no validará.
• Daña el ranking en buscadores- Como de esta forma se utiliza una página de índice con un Flash vacio, cuando la gente busque en Google o en otros buscadores, a menudo el texto descriptivo terminará mostrando el texto "Detectando Flash Player" o incluso sin ninguna descripción. Esto conllevará una gran pérdida en el valor del espacio web que debería de servir para promocionar su compañía o producto. A menudo, los desarrolladores no incluirán enlaces hacia el contenido interno, porque los contiene la pelicula así que tampoco será escaneado el contenido de subpáginas.

4) El kit de detección de Macromedia Flash Player

Macromedia ha realizado un excelente trabajo con el nuevo kit de detección de Flash 8. Pero no es suficiente. Contiene dos métodos diferentes para detectar el plugin de Flash:

1. El clásico "pequeña película Flash en la página de índice" - (Ver arriba)
2. Javascript - Si, es cierto. Flash ahora proporciona una detección de Javascript. Desafortunadamente, no es muy sencilla de utilizar para el usuario medio, mezcla Javascript, VBscript, y todo el HTML en una página. Esto conlleva muchos de los problemas de técnicas pasadas de detección de Javascript, y no hace nada por hacernos la vida más fácil como desarrollador de  Flash/HTML. Tampoco valida como XHTML o HTML (Puede importarle este detalle).

Puede acceder a una vista en detalle del kit de detección de Macromedia  aquí.

5) Utilizar Javascript para detectar o incrustar su película

Es complicado criticar este método, porque suele variar de site a site. De cualquier forma, la mayoría de detectores Flash en Javascript suelen tener los siguientes problemas:

• Detección de plugin no expandible - A menudo, la deteccón sólo funciona con las versiones actuales de Flash player, y necesitan ser actualizadas según aparecen nuevas versiones. 
• Añade más codigo a la página - Hace más dificil actualizar o cambiar el contenido. Este método también hace más dificil la actualización de la página por parte del diseñador o colaboradores.
• Solución extremadamente complicada- Muchos scripts de detección Flash conllevan archivos grandes o complicados. SWFObject está diseñado para ser sencillo y pequeño.

FAQ (Preguntas frecuentes)

Q. Cómo puedo hacerlo funcionar en  Netscape 4.x?
             A. Este comentario tiene algún ejemplo que puede utilizar para hacer funcionar SWFObject en Netscape 4.x.

Q. Puedo utilizar SWFObject en mi Blog?

A. Si, hay un par de plugins para Wordpress y Textpattern aquí.

Q. Puedo usar SWFObject con Dreamweaver oGolive?

A. Existe una extensión de Dreamweaver disponible en CommunityMX. Todavía no hay extensión de Golive, pero si desea hacer una, la incluiría en esta página. Debería poder utilizar SWFObject sin ninguna extensión, aunque será más fácil con una extensión, desde luego.

Q. Está esta página disponible en otros idiomas?

A. La presente página es una traducción en español de la página original en inglés (aquí). También hay una versión en Francés de parte de esta página, una traducción Sueca, Italiana, y una Finlandesa. Si alguien desea realizar una traducción, será incluida en esta página (la oficial).

Q. Quien utiliza SWFObject?

A. Websites como CMS10.NET The Library of Congress, windows.com, skype.com, youtube.com, snapple.com, se incluye con Adobe Photoshop (en las  Flash web photo galleries) y en otras miles.  Colin Moock también lo sugiere como alternativa a el Macromedia Detection kit.

Todavía tiene dudas? Pruebe a leer los posts anteriores [1, 2, 3] de este blog (el oficial en inglés) (especialmente los comentarios), ya que muchas preguntas frecuentes se han resuelto ahí.

Gracias

Toby Boudreaux me ayudó en buena medida, haciendo el código de SWFObject más limpio y ordenado..

Hemos cambiado mucho desde el último post. Tanto, que en este impás ha cambiado la razón de ser del cms, su distribución e incluso el diseño interior.  Pensamos, que todo ha mejorado mucho, pero como es normal, también hay alguna mala noticia. En este caso, es que no vamos a continuar la senda de la distribución raw. Esto es, al menos desde ...








Incluimos a continuación un listado de las últimas novedades del cms: - Mejora del interface gráfico en el panel de control. - Creación de diversos toppings. - Mejoras a nivel global (reescritura del código).








Estamos haciendo cambios en la estructura interna del cms a nivel global, por lo que durante un tiempo, vamos a estar inmersos en esta actualización. Por el momento, vamos a deshabilitar la descarga RAW. También vamos a poner en suspenso la página DEMO. De cualquier forma, estamos seguros que estos cambios acabarán siendo muy beneficiosos para el programa. Nuestra ...








Con la última actualización, también cambiamos el cron que restablece la página de demo. Al programarlo, cometimos un error en el intervalo que hacía que el restablecimiento ocurriera cada minuto. Aunque nos hemos dado cuenta bastante rápido, dicho intervalo ha estado activo unos días, por lo que pedimos disculpas a quien haya intentado utilizar ...








Ya tenemos implementados algunos de los cambios para la próxima versión. Como por el momento son pocos, todavía no vamos a cambiar las distribuciones ni la versión, pero los usuarios registrados pueden actualizar sobre la marcha desde el botón de actualizar en la esquina superior derecha del panel de control. También vamos a actualizar la versión ...








Las nuevas distribuciones correspondientes a la versión 1.0 del programa están ya disponibles para su descarga y compra desde la página de Downloads. Con esta nueva versión hemos intentado crear una distribución para cada caso, dependiendo de las necesidades de cada usuario. En definitiva, hemos sacado una distribución gratuita "RAW" sin ...








Os ponemos los dientes un poco más largos si cabe, comentando algunas de las mejoras que lleva incorporada la próxima versión: - Actualización dinámica con un clic para clientes registrados.- Nueva visualización de caja on rollover. (ver www.portfolio.es)- Posibilidad de añadir posts nuevos a los blogs desde la carpeta del topping.- Ajustes de ...








Seguimos con los cambios internos en la dinámica del programa, en lo que respecta a las versiones y su distribución. Tenemos un debate interno sobre cual es la mejor forma de poner CMS10 a disposición del público, pero mientras, seguimos con el desarrollo. Por lo que parece, al final, habrá una versión "raw" disponible para descarga gratuita, ...








Ya tenemos perfilada la próxima versión del producto, que será la 1.0. Esta nueva versión traerá infinidad de cambios, y varias utilidades nuevas, que nos han hecho decidirnos para dejar de ser betas (aunque suene a utopía...). La razón principal para abandonar la fase beta, es una de las mejoras sobre las versiones anteriores. La v 1.0 ...








Tras muchos retrasos, por fin hemos conseguido poner a disposición del público la versión beta 2.0. Las primeras pruebas de betatesters están yendo bastante bien, aunque hemos encontrado alguna que otra cuestión que ya comentaremos más adelante en la ayuda. Como veréis, también estamos cambiando bastante el site, aprovechando las nuevas ...

<<

1  2 3

... 3 Página/s

Siguiente Página>

>>