Como convertir ficheros Flash (.swf) a HTML5

2
22468

Como convertir animaciones Flash (.swf) a HTML5 con Google Swiffy

0. Índice de contenidos.

1. Introducción

En este tutorial vamos a ver como convertir animaciones Flash a HTML5 para hacerlar compatibles con los nuevos dispositivos móviles sin necesidad de recurrir a un Flash Player.

Para ello usaremos Google Swiffy beta, una herramienta de google que que nos realiza una conversión automática.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Hp Pavilion dv7 Notebook PC (Intel Core 2 Duo a 2.26 GHz, 4 GB RAM, 450 GB HD).
  • Sistema operativo: Windows Vista Home Premium.
  • Editor gedit 2.30.1

3. Pasos a seguir para convertir la animanción Flash a HTML5.

Lo primero es acceder a la herramienta online, esto es, a la dirección de Google Swiffy beta.

No requiere de autenticación, simplemente seleccionamos el archivo .swf a convertir y pulsamos sobre upload and convert.

A continuación la herramienta nos muestra una vista previa de la animación original de Flash y la conversión de Google Swiffy.

Solo queda descargar el archivo.html que genera Google Swiffy.

Y tendremos un resultado similar al siguente archivo.xhtml.

Solo nos faltaría incorporar el código en nuestra web copiando el script en el <head> y el div en el <body>

En la siguiente tabla vemos las funciones soportadas por Swiffy en los diferentes navegadores.

Swiffy soporta las formas, las fuentes incrustadas, animación, texto timeline (dinámico), clips de película, botones y scripts con ActionScript 2.

5. Referencias.

Google Swiffy beta

6. Conclusión.

De esta manera tan sencilla, podemos incorporar algunas animaciones .swf de Flash en nuetra web HTML5 y que nos puedan ver en cualquier dispositivo sin problemas de incompatibilidad con un Flash Player

Un saludo.

Chema

mailto:chmadi@gmail.com

2 Comentarios

  1. Muy lindo. pero mayores a 1mb no sirve… verdaderamente una limitacion ya que otras paginas me dejan archivos swf hasta 3mb

Dejar respuesta

Please enter your comment!
Please enter your name here