comparte el articulo 

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

Actualizado el 02/04/2012 < > 17 Cometarios

Resumen: Código HTML para insertar archivos de Flash (.swf) en tus páginas web de forma que se vea de la mejor forma en todos los navegadores, sea estándar y más 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.

Publicado el 02/09/2010, última actualización 02/04/2012.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia. Permitido citar partes del artículo enlazando a la fuente original, y poniendo el siguiente link:

Autor: Verónica Milán

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

17 Cometarios

  1. Silvana

    Felicitaciones por tan clara explicación. En verdad, es la más útil que he encontrado, porque -entre otras cosas- las cronologías para mí son muy importantes. Saludos.

    Martes, 15 de febrero 2011

  2. edwin

    que tal gracias por el articulo, pero tengo una pregunta yo mis flash los subo para alojarlos en 4-shared u otro servicio de alojamiento como hago para poner esa ruta para que se vea mi swf en mi pagina web.

    Miércoles, 19 de octubre 2011

  3. Daniel

    Sito textual: “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”

    Primero que nada saludar y luego agradecer por compartir la información, a todos nos sirve.
    Mira, he desarrollado algunas paginas web (diseñadas en photoshop, “ejecutadas” ó programadas en “flash”, y luego administradas por dreamweaver para ser subidas a la red. entiendo mucho el concepto de programación pero no lo practico como tal y no lo comparto de cierta forma.

    Quisiera saber el porque no lo recomiendas (uso de flash)?

    Y otra cosa, Cuando se habla de diseñar una web, la programación es una cosa, el diseño es otra. eso deberían explicar o clarificar con más detalle. ( simplemente con código no se puede DISEÑAR una web) y si algunos lo logran, dejan de lado la estética misma del diseño.

    Saludos.

    Sábado, 17 de diciembre 2011

  4. Verónica Milán

    Digo que no recomiendo flash porque:
    – Para el SEO es bastante malo, no lo indexan bien los buscadores.
    – No es en muchos aspectos accesible.
    – Es una tecnlogía propietaria de código cerrado.
    – La mayoría de cosas para las que resultaría útil usar flash, como una animación, una presentación o ciertos efectos, se pueden hacer con CSS3, HTML5 o JavaScript. Y si sabemos profundizar en estos lenguajes, podemos hacerlos compatibles con la mayoría de navegadores.
    – Es hora de reemplazar tecnologías rígidas por lo último en diseño web como lo es HTML5 y CSS3 (diseño web se refiere a todo, por cierto, no sólo la estética del sitio, también su programación en HTML y CSS por ejemplo).

    Saludos!

    Martes, 3 de enero 2012

  5. Jesús

    Quiero hacer un comentario respecto a flash.
    Hace mas de 3 años que flash es totalmente indexable.
    Pero claro, hay que saber como hacerlo y leerse los tutoriales de Flash y de Google.

    Pongo un ejemplo:
    Al pulsar un botón para cambiar de página, Flash se conecta directamente con google y le pasa toda la información del contenido mediante las apis que google proporciona desde su tutorial.
    Al igual que también funcionan las flechas del navegador y puedes enviar la url de la pagina a un mail, y al hacer click en el enlace, entras directamente en la página seleccionada de flash.
    Estas técnicas las desconocen la mayoría de la gente.

    Hace muchos años que programo en flash y puedo decir que flash es la mejor herramienta que existe para internet, pero por desgracia, flash dejo de ser un buen producto en el momento que lo compro Adobe, ya que a esta compañía solo le interesa ganar dinero y en 3 años saco 3 nuevas versiones con lo que solo lo han fastidiado y el nivel de conocimientos es tal alto que hace difícil que la gente sepa hacer otra cosa que simples animaciones, entre otras cosas todas ellas sencillas.

    Programar con AS2 y AS3 requiere años de experiencia, y los que lo dominan, realizan verdaderas obras de arte.

    Ahora mismo hay montada una guerra entre las grandes compañías con el tema de los móviles y Adobe el pasado mes de diciembre, declaro que no daba soporte de Flash Player a móviles.
    Únicamente tiene soporte Android, que es de google.

    Appel no deja instalar flash y Google compra los derechos de flash para los móviles de Android.
    Que se traen entre manos esta gente ????.

    Como resultado de estos trapicheos, he tenido que tomar la decisión de dejar de trabajar con flash y este mes de febrero, lo he empezado con html5 css3.

    Mi sorpresa al adentrarme en html5, ha sido enorme ya que se esta utilizando la misma estructura de programación que tiene flash8 con AS2, con lo cual a sido perfecto para mi y en 20 días, me manejo html5 con fluidez. Ahora me toca pelearme con Java.

    Las etiquetas div son capas o niveles que es lo que viene utilizando flash desde que existe, y a cada capa se le asigna un z-index para posicionarlo.

    En html se llama div y en flahs lo que haces es crear un MovieClip
    En cada div o MovieClip puedes insertar todo el contenido que quieras de manera que al crear el div, empieza con el z-index que le quieras dar y todo lo que vas poniendo dentro, empieza del:
    z-index 0 en adelante.

    De manera que a cada div, le asignas su index, y todo lo que vamos poniendo dentro, empieza de nuevo en el z-index=0

    Bueno, que me emociono y esto empieza a ser un tutorial.

    Aquí dejo una URL que es donde estoy realizando mi proyecto para editar html5 online.

    La gran diferencia de este CMS con los que hay en el mercado, es que permite moverlo y situarlo todo donde se quiera, lo cual permite una personalización total.

    http://www.xmlonline.es

    Gracias por vuestra atención

    Jesús

    Sábado, 25 de febrero 2012

  6. Ingrid Rodriguez

    Excelente explicacion y lo mejor de todo es que me funciono, habia probado con miles, pero en IE, siempre se dañaba, con este sale perfecto.
    Gracias

    Miércoles, 18 de abril 2012

  7. Tamara

    Buenos días y gracias por compartir la información. Quiero compartir mi punto de vista con el de Daniel. El diseño de una página web no es lo mismo que su programación, y son servicios que usualmente, al menos en mi páis, los diseñadores y programadores freelance cobramos por separado.

    Si bien estoy de acuerdo que es mucho mejor optar por códigos abiertos, también es real que hay mucha gente que no los comprende y no podrían programarlos correctamente, como es mi caso. Soy diseñadora y publicitaria, y si bien entiendo de diseño, de códigos poco y nada, y es por eso que siempre me manejo con un programador al lado. El flash y demás programas me dan la posibilidad de trabajar libremente sin los dolores de cabezas que me generan los códigos. Sin embargo, los dolores de cabeza muchas veces vienen por otro lado, como bien decían algunas personas aquí, no siempre las cosas que se generan en base a estos, son “leídas” correctamente por los browsers.

    De hecho ahora estoy peleando con un banner que no entiendo por qué motivo no se ve en la página html ya que aparentemente hice todo bien. Ya veremos que sucede.

    Nada, simplemente comentar un poquito sobre el tema desde el punto de vista de alguien que no conoce nada sobre programación.

    Un saludo a todos

    Miércoles, 15 de agosto 2012

  8. flor

    ¿puedo integrar una galería Flash creada por Lightroom, en un documento Html .?
    hola
    uso Dreamweaver y trato de integrar una galeria que fue creada por Lightroom pero cuando intento visualisar la pagina en modo en vivo o en el modo de prueba. en donde se tiene que ver la galeria me aparece un anuncio que dise que no encuentra el documento

    como debo hacer para integrar las galerías dentro de mi pagina html?

    Sábado, 12 de enero 2013

  9. Daniel

    Muchas gracias por este excelente tutorial, me ha sido muy útil.
    Es claro, sencillo y va al grano que nunca va mal cuando se esta trabajando.

    Un saludo y gracias de nuevo.

    Martes, 21 de mayo 2013

  10. Alfredo

    Igual no se ve mi imagen despues de que hago todos los pasos y luego de subir todo con FTP.

    Viernes, 12 de julio 2013

  11. Jepez

    Este tutorial me ha servido mucho pero aun no logro solucionar lo siguiente:
    tengo que ejecutar comandos de javascript sobre un archivo swf en mi pagina, en mozilla u opera funciona pero en internet explorer o en movil, no es posible ejecutar estos comandos, es mas, el archivo swf al terminarse de cargar deve desencadenar un evento (algo como un onload), pero la funcion no se ejecuta si estoy en Internet explorer

    espero que me puedas ayudar con esto..
    Gracias

    Sábado, 18 de enero 2014

  12. Javier

    Mil Gracias… estoy trabajando con Moodle y tenia problemas con esto, ya que hace poco comencé… me salvaron tus indicaciones… Saludos

    Viernes, 28 de febrero 2014

  13. Mario

    Hola, te parecerá increible que a estas alturas te pregunte casi el mismo problema. Uso DW cs6 y en el menú insertar > Media > SWF y Shockwave. Acaso no son lo mismo? Noto que al insertar Shockwave mi archivo para la web funciona bien, pero de curioso, al hacerlo insertando un SWF (la misma extensión y el mismo archivo por su puesto), me sale un aviso para instalar “expressInstall” bla bla bla… y un link de macromedia…

    Si con shockwave todo me funciona, está bien… pero me sigue la curiosidad por qué esas dos opciones de insertar una misma cosa y con diferente resultado! O acaso hay alguna utilidad que ofrece la ADOBE? Diferenciando swf y shockwave?

    Gracias.

    Viernes, 15 de agosto 2014

  14. Gonzalo

    Como harias para que la pelicula si es de 800×600, se “estire” al tamaño del navegador maximizado?

    Saludos
    Gracias

    Martes, 21 de octubre 2014

  15. John Jaider Vanegas

    Hola cordial saludo amigo, en verdad me ha servido bastante! Gracias por compartir, algunos post y demás ayuda en internet mencionaban que era necesario configurar algunos xml y demás cosas del servidor o algo así, simplemente el error de todo fue el código con el cual se implementaba la película flash, que previamente la generó el mismo adobe flash que básicamente me permitía localmente ver perfecto todo, pero cuando lo subí empezó el lio… Simplemete gracias tú me diste la solución… :D

    Jueves, 11 de diciembre 2014

  16. clara lu

    hola, tengo una pregunta tome un archivo swf y lo convertí a html5 pero si lo abro en un pc sin conexión a internet, no funciona, que puedo hacer?, hay alguna opción en la cual no necesite bajar flash player y que me sirva sin conexion a internet. gracias

    Viernes, 13 de marzo 2015

  17. Otto B

    Buen dia amig.

    Diseñé totalmente mi pagina web en Flash CC y cuando monto la pagina en Dreamweaver para subirla al hosting, solo veo un cuadro blanco y no logro ver mi página.
    Instalé la ultima versión de Flash y aún así no logro ver mi pagina.
    En una oportunidad leí que habia que eliminar algo del codigo HTML para que pudiera verse, lo hice y funcionó, pero al actualizar mi pagina y generar nuevo documento, me sucedió lo mismo y ahora si no logro resolverlo.
    Agradezco tu ayuda

    Jueves, 15 de octubre 2015

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras