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.
modificado el 2 abril, 2012 21:10
Ver comentarios (20)
Hola,
Quisiera saber si es posible convertir una animación de flash que ya agregué a html en un enlace, para que al darle click me mande a otra pagina.
Gracias.
Sé que este pequeño tutorial ya está muy antiguo, pero necesito que alguien resuelva una duda que tengo al respecto.
Estoy creando una página de juegos Flash en Jimdo para una tarea de mi escuela, pero al meter el código HTML y la dirección del archivo Flash sólo aparece lo de la imagen de sustitución o lo del "Contenido Alternativo" en vez de mostrar la animación.
Tristemente Jimdo removió la opción de incluir archivos Flash en su sitio, y aunque utilize sus plugins para meter las animaciones simplemente no cargan.
¿Hay algo que pueda hacer para que carguen los juegos o este tutorial ya es obsoleto al igual que Flash?
Apreciaría que alguien me respondiera ;_;
Hola,
Si por lo que comentas el problema es de Jimdo, tal vez puedas plantearte usar otra herramienta.
Wix es la que mejor conozco y tiene la opción de crear una web gratuita y también la opción de añadir Flash a tus webs: https://support.wix.com/es/article/agregando-flash
Échale un vistazo, quizá te saque del apuro.
Saludos.
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
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
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
Como harias para que la pelicula si es de 800x600, se "estire" al tamaño del navegador maximizado?
Saludos
Gracias
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.
Mil Gracias... estoy trabajando con Moodle y tenia problemas con esto, ya que hace poco comencé... me salvaron tus indicaciones... Saludos
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
Igual no se ve mi imagen despues de que hago todos los pasos y luego de subir todo con FTP.
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.
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 trabajo con un programador que me apoye.
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
Excelente explicación y lo mejor de todo es que me funcionó. Había probado con miles, pero en IE, siempre se rompía, con este sale perfecto.
Gracias
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 dejó de ser un buen producto en el momento que lo compró Adobe, ya que a esta compañía solo le interesa ganar dinero y en 3 años sacó 3 nuevas versiones que solo lo han fastidiado y el nivel de conocimientos es tan alto que hace difícil que la gente sepa hacer otra cosa que simples animaciones.
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, declaró 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 está utilizando la misma estructura de programación que tiene flash8 con AS2, con lo cual a sido perfecto para mí 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.
Gracias por vuestra atención.
Jesús
Hola Jesús,
Me encantan los comentarios así, con tanta información y que aportan cosas nuevas al artículo en sí.
Gracias por tomarte el tiempo de escribirlo y compartirlo con todos, de verdad :)
Y me alegro de que estés aprendiendo HTML5 y te resulte fácil.
Saludos.
Cito 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).
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.
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!
Gracias por el articulo, pero tengo una pregunta: yo mis flash los subo para alojarlos en 4-shared u otro servicio de alojamiento, ¿cómo hago para poner esa ruta para que se vea mi swf en mi pagina web?.
Enhorabuena 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.