Visualizar Flash en IPhone mediante SWFObject.js

Todos sabemos de la guerra abierta entre MAc y Adobe y hasta que no se resuelva tenemos que buscar formas alternativas para poder construir webs con contenido gráfico dinámico que se pueda ver corréctamente en todos los dispositivos, incluidos el dichoso Iphone y otros productos similares de Mac.
Gracias a la librería javascript SWFObject podemos conseguir que se pueda visualizar corréctamente ciertos contenidos en todos estos dispositivos. Pero antes un poco de historia.
Mucho ha llovido desde que el señor Bobby van der Sluis creara junto a Geoff Stearns la librería open-source JavaScript llamada SWFObject 2.0. que nos permite detectar Adobe Flash Player y embeber archivos .swf dentro de las páginas html de una forma sencilla, así como de aplicar diversos parámetros a dicho .swf como pueden ser el típico “nonscale” o el “Wmode=Transparent” además de muchos otros. .
Este post viene en relación a la nueva actualización de dicha librería. Más concretamente la versión SWFObject 2.2. Hablaré de los generadores de código que hay para descargar en la web del proyecto así como de unos experimentos para poder visualizar contenido alternativo en ordenadores sin Flash Player o en dispositivos como IPhone o Ipad.
Este no pretende ser un tutorial de como utilizar dicha librería ya que en la red se pueden encontrar muchos post muy completos sobre este asunto.

Es más, aquí os dejo dos enlaces de los más completos sobre como instalar y usar esta librería:
SWFObject 2_0 blog.unijimpe.net

SWFObject 2.1 www.y por qué no.es

En esta versión han publicado dos nuevos generadores de código. El generador para Air queda descrito en el post de Francisco Guerrero . Yo he bajado e instalado la versión html que es prácticamente igual. Para realizar este tutorial es necesario que tengais los siguientes archivos:
Librería JavaScript SWFObject 2.2
Generador de codigo.
Después solo es necesario descomprimirlos y en el caso de la librería incluirla en el directorio raíz de nuestro proyecto y en el caso del generador de código hacer click en el archivo index.html. Se nos abrirá una página html como la que podemos ver aquí:

En este caso indicamos la configuración que vamos a utilizar:
* Método de publicación es dinámico
* Versión de Flash: 10.0
* Que incluimos el archivo de instalación expresss: expressInstall.swf
* El nombre de la etiqueta del contenido alternativo: “altContent”
* El nombre del archivo .swf: flas_a_insertar.swf
* El tamaño: 800×600
* Los parámetros:
scale:noscale
allowscriptaccess:always
allowfullscreen:true
* Insertamos el contenido alternativo. Este contenido se visualizará en caso de que el dispositivo no tenga flash player o no pueda tenerlo (iphone):

<img src=”doncella.jpg” alt=”" width=”800″ height=”600″ />
<a href=”http://www.adobe.com/go/getflashplayer”><img src=”http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif” alt=”Get Adobe Flash player” /></a>

Y tras realizar estos ajustes solo nos queda pulsar el botón de Generate.
Obtendremos un código que lo copiaremos y pegaremos en nuestro archivo index.html:

Aquí podemos ver lo siguiente:
*Inclusión de la librería swfobject.js

*Parámetros

*Incrustación del archivo .swf

*Etiqueta contenido alternativo

Y es en esta última parte donde podemos hacer cosas interesantes. En mi caso he incluido como contenido alternativo una imagen y un botón para descargar adobe flash player que se visualizará en los dispositivos sin Flash instalado o sin posibilidad de instalarlo. Aquí podemos ver el ejemplo anterior: Ejemplo contenido alternativo.
Y como dice el propio autor, es interesante crear páginas que puedan ser vistas por el mayor número de usuarios, indistintamente del dispositivo que se utilice para visualizarlas. Mediante hojas de estilo, java, etc.. podemos crear un contenido alternativo de gran calidad.

Siguiendo con las pruebas a continuación os pongo otro ejemplo práctico y en este caso he incluido como contenido alternativo un slideshow realizado con JavaScript. Le he puesto un retardo muy pequeño en las transiciones de las fotos en el slideshow de Flash para poder diferenciarlo del slideshow java con un tiempo mayor.

Aquí podemos ver la cabecera, con la inclusión tanto de la librería del swfobject.js como del código del slideshow de java scrips.js así como el comando de incrustación del archivo .swf

Posteriormente en la parte correspondiente en la página podemos ver como he incluido la etiqueta con la id indicada anteriormente “altContent” así como el script correspondiente al slideshow en java.

Si vemos la web desde un ordenador con Flash Player veremos la animación flash pero si lo vemos por ejemplo desde un iphone veremos el slideshow de java. De esta forma, y para casos puntuales evitamos que en algunos dispositivos como los iphone o los ipad se vea el recuadro ese feo y podemos ofrecer un contenido alternativo que en el caso de ser texto ayudará en el posicionamiento.

Y esto es todo por el momento. Esta forma de embeber los archivos .swf con contenido alternativo ofrece muchas posibilidades. En los próximos post hablaré de otras formas de utilizar esta librería conjúntamente con otras librerías para conseguir efectos interesantes.
Un saludo