Swiffy convierte tus banners Flash SWF en HTML5

swiffy convertir Flash a HTML5Desde 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
    Transformar SWF a HTML5

  1. Ingresamos a: www.google.com/doubleclick/studio/swiffy/
  2. Damos clic en “Seleccionar archivo” y busca en tu PC el archivo Flash  que deseas transformar.
  3. Marcamos donde dice “Important” y damos clic en “Upload and convert“.
  4. 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.
  5. Para mostrar nuestro nuevo archivo html alojamos el html en nuestro servidor y usamos el siguiente código:
  6. <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++.

  7. 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:
  8. 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;”>

  9. Busca la etiqueta <div y justo después de esta pega el siguiente código:
  10. 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

- Ver más entradas
Blogger, trabajo en el área de TI, busco innovar a través de la tecnología. Algo loco, pienso diferente, sigo mi propio camino. Rock - Tech - Anime

Compartir esta entrada

También puede interesarte:

2 Comentarios para “Swiffy convierte tus banners Flash SWF en HTML5”

  1. recreado dice:

    Favor puedes explicar mejor lo del agregar el enlace al html5. Hice lo que indicas pero no me resulta.

    • Geost dice:

      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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Powered by WordPress · Diseñado por Theme Junkie
QR Code Business Card