Desde la salida de HTML5 se ha vuelto una tendencia creciente migrar de la tecnología Flash pues sin dudas HTML5 muestra mayores beneficios y rendimiento en la web. Una de las ventajas más fáciles de apreciar para el usuario final es que el contenido HTML5 se puede visualizar sin ningún problema en dispositivos móviles pues no necesita de plugines adicionales a diferencia de la tecnología Flash.
Swiffy
Google nos brinda la oportunidad de transformar nuestro contenido Flash en HTML5 a través de su herramienta swiffy, este es un ejemplo de un archivo SWF convertido en HTML5 de la galería de Google Swiffy:
| Flash | HTML5 |
Pasos
-
Básico
- Ingresamos a: www.google.com/doubleclick/studio/swiffy/
- Damos clic en “Seleccionar archivo” y busca en tu PC el archivo Flash que deseas transformar.
- Marcamos donde dice “Important” y damos clic en “Upload and convert“.
- En la página de resultados nos desplazamos hasta Swiffy output, sobre el link que lleva el nombre de nuestro archivo Flash damos clic derecho y seleccionamos “Guardar enlace como…“. Obtendremos un nuevo archivo html.
- Para mostrar nuestro nuevo archivo html alojamos el html en nuestro servidor y usamos el siguiente código:
- Desplázate hasta el final de todo el código, busca la etiqueta <body y justo después de esta pega el siguiente código:
- Busca la etiqueta <div y justo después de esta pega el siguiente código:
Transformar SWF a HTML5
<iframe
align=”center”
src=”http://mi-url/banner.html”
frameborder=”0″
width=”250” height=”250”
></iframe>
Avanzado
Añadir link a HTML5 generado por Swiffy.
Si tu banner en Flash no tenia un link y deseas añadir un link tienes que modificar el archivo html que nos generó swiffy, puedes abrir este archivo con un bloc de notas, yo recomiendo Notepad++.
href=”javascript:void(0)” onclick=”window.open(‘http://mi-url.com/‘, ‘_blank’)”
El resultado sería algo similar a esto:
<body href=”javascript:void(0)” onclick=”window.open(‘http://mi-url.com/‘, ‘_blank’)” style=”margin: 0; overflow: hidden;”>
onmouseover=”” style=”cursor: pointer;”
Tendría que quedar algo así:
<div onmouseover=”” style=”cursor: pointer;” id=”swiffycontainer” style=”width:250px; height: 250px;”></div>
Notas:
- Los textos de color rojo se reemplazan por la URL respectiva.
- Los textos de color verde hacen referencia al tamaño del banner que variará dependiendo de la situación.
- Los dos pasos 6 y 7 permiten que el banner nos lleve a una URL en específico cuando se da clic encima y que el cursor cambie su forma.
- Si el archivo SWF ya tenía un enlace este se mantendrá luego de que se haya transformado a HTML5
Favor puedes explicar mejor lo del agregar el enlace al html5. Hice lo que indicas pero no me resulta.
Hola!
Lo que se realiza en ese paso es agregarle un evento (al dar clic) al todo el cuerpo del archivo html y agregar un efecto de cambio de puntero.
Podrías mostrarme por favor tu código a partir de la etiqueta “
Saludos