Como insertar SWF de Flash en HTML válido y accesible

Es una pregunta recurrente entre los usuarios de lawebera.es el tema de insertar animaciones de Flash en páginas HTML. Mucha gente me pregunta porque desconoce cual es el procedimiento a seguir, por fin me he decidido a crear un tutorial sencillo para aclarar este punto a todos los que tengáis dudas.

Tengo una animación Flash que no se ve en mi web

El problema más común, es que la gente suele subir por ftp directamente el archivo .fla que te genera Adobe Flash, y este archivo NO se ve en el navegador. Lo que hay que hacer es exportar la película .fla a .swf una vez tengas creada tu animación. El archivo .swf final es el que debe subirse al servidor para ser visualizado en la página web desde un navegador.

Los archivos SWF de Flash

El formato de archivo de Flash (SWF – Small Web Format) básicamente es un archivo comprimido en formato vectorial (también permite audio y video en sus versiones modernas) basado en el archivo original .fla, que necesita el plugin de Flash para ser visualizado en un navegador.

El objetivo principal del formato SWF es obtener animaciones de un tamaño manejable (reducido) que puedan ser visualizadas con comodidad en internet y que funcionen en cualquier plataforma. Lo cierto es que esto resulta un poco irónico desde el momento en que es necesario instalar un plugin adicional para poder ver dichas animaciones.

Exportar un archivo .fla a .swf

Aunque no recomiendo el uso de Flash en las páginas web, al menos no para crear una web completamente en Flash o para crear sus partes principales, cosas tales como pequeñas animaciones que añadan dinamismo son interesantes, así que vamos a dar unos sencillos pasos para pasar de .fla a .swf. En el archivo de Adobe Flash:

• Pinchas en archivo > exportar
• Guardar como SWF
• Te aparece un cuadro de diálogo donde seleccionas la opciones de tu nuevo archivo .swf, tales como el tamaño, páginas a incluir en la película y cosas muy interesantes para este caso (insertar swf de Flash en HTML) como es la opción de generar un archivo html. Este archivo te permite visualizar en el navegador el archivo Flash antes de ser subido a tu web.

Una vez tenemos el archivo exportado queda incrustarlo en el HTML, vamos allá.

Insertar un archivo swf en una página HTML

Para subir tu animación flash (en formato .swf) en tu página web y que se vea, podemos poner el siguiente código HTML (puedes ver la documentación completa aquí):

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10.0.0.0" width="550" height="400">
    <param name="movie" value="archivoflash.swf" />
    <param name="quality" value="high" />
    <embed src="archivoflash.swf" quality="high" type="application/x-shockwave-flash" width="550" height="400" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

Con este código, cuando un visitante no tenga el plugin de Flash instalado en su navegador, se le ofrece la posibilidad de instalar el plugin de Flash para ver la animación. Más adelante veremos que esta no es la mejor manera de mostrar Flash en tus páginas web.

De cualquier manera, en todos los ejemplos de este artículo, hay varias cosas que debes cambiar:

• Una es la ruta del archivo, ¡cuidado con esto!, mucha gente no ve sus animaciones Flash en su página web porque pone mal la ruta. En los ejemplos puedes ver “archivoFlash.swf” en dos lugares distintos, debes cambiar ambos por el nombre de archivo y la ruta correcta en tu servidor web (será del tipo http://www.misitioweb.com/Flash/archivoFlash.swf).
• Por otro lado, hay que cambiar el tamaño de la animación acorde con el tamaño que desees darle. Para este punto también hay dos sitios diferentes donde se establece el tamaño (“width” y “height”) que tienen un valor de 550 y 400 píxeles, respectivamente, en el ejemplo. Debes cambiarlos todos por el tamaño de tu animación.

Insertar swf (Flash) en HTML con Dreaweaver

Insertar Flash en HTML usando Dreaweaver es muy sencillo. En la ventana de documento pones el puntero en el sitio donde quieres incluir la película Flash y simplemente tienes que entrar en:

• Insertar > Media > SWF, y seleccionar tu archivo .sfw

O bien pulsar:

• Ctrl + Alt + F

Insertar swf (Flash) en una página HTML con código válido

Este es sin duda mejor método que el anterior. Es aplicable para todos, pero en especial, para los desarrolladores y diseñadores web no es suficiente con insertar correctamente Flash en HTML, hay que insertarlo y además validarlo y que sea accesible. Para ello, existe el método satay, que simplifica el código a lo siguiente:

<object type="application/x-shockwave-flash" data="archivoflash.swf" width="550" height="400">
    <param name="movie" value="archivoflash.swf" />
    <param name="quality" value="high" />
    <img src="noflash.png" width="550" height="400" alt="Imagen en sustitución de flash" />
</object>

Como ocurría con la versión mala del código para inserta el Flash, si el visitante no tiene el plugin para ver Flash en su navegador, hay un elemento alternativo en su lugar. En su solución, Drew McLellan dispuso una imagen sustituta de Flash (lo que en el ejemplo es noFlash.png), pero evidentemente, no es una solución perfecta. Esta imágen sería conveniente sustituirla por un link a la página de descarga de Flash player, por ejemplo de esta manera:

<a herf="http://www.macromedia.com/go/getflashplayer" title="descargar flash player">Descargar Adobe Flash Player para ver esta animación</a>

El método satay para Flash presenta varios inconvenientes, no obstante es una solución bastante buena. El primero, un visitante con una versión antigua del plugin (muy muy antigua, para la inmensa mayoría de visitantes esto no será problema) no carga la animación y ni tan siquiera puede ver el código alternativo.

Otro inconveniente es que se hacen dos peticiones de archivo (se cargan dos swf), y como ya sabemos cuantos menos archivos cargues, más rápido correrá tu página web.

A parte, este código no hace streaming en Internet Explorer. Para solucionar esto último y que funcione bien en todos los navegadores, incluido Internet Explorer, se crea un archivo archivo swf adicional (por ejemplo content.swf) que va a contener al archivo de película que realmente queremos mostrar, con únicamente esta línea de código:

_root.loadMovie(_root.path,0);

Entonces, el código HTML final, listo para todos los navegadores y que valida, es el siguiente:

<object type="application/x-shockwave-flash" data="content.swf?path=archivoflash.swf" width="550" height="400">
    <param name="movie" value="content.swf?path=archivoflash.swf" />
    <param name="quality" value="high" />
    <img src="noflash.png" width="550" height="400" alt="Imagen en sustitución de flash" />
</object>

Rizando el rizo, insertar Flash en HTML con código válido y accesible

Hay otros métodos ligeramente distintos para insertar flash válido en HTML y mejorar su accesibilidad, como el uso de Javascript o de comentarios condicionales, pero el método satay, a pesar de tener más de 8 años (se creó en 2002) sigue siendo muy útil a la hora de diseñar páginas web y que éstas cumplan con los estándares.

No obstante, los comentarios condicionales son una buena técnica para maximizar la accesibilidad de este tipo de contenidos:

<!--[if !IE]> -->
   <object type="application/x-shockwave-flash" data="archivoflash.swf" width="550" height="400">
<!-- <![endif]-->
<!--[if IE]>
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
      width="550" height="400">
      <param name="movie" value="archivoflash.swf" />
<!--><!--dgx-->
      <param name="loop" value="true" />
      <param name="menu" value="false" />
      <p>Este es el <b>contenido</b> alternativo.</p>
   </object>
<!-- <![endif]-->

Aquí podemos ver el ejemplo en funcionamiento desde la página del autor.