Swifty de Flash a HTML5 en segundos

Hace unos días Google dio a conocer una tecnología muy interesante llamada Swifty para convertir archivos SWF de Flash hacia HTML5 y permitiendo con ello reutilizar el mismo contenido en dispositivos que no tengan Flash Player siendo más específicos: iPhones y iPads.

Google Swifty

Adobe había mostrado algo similar con Wallaby, sin embargo el acercamiento de ambas tecnologías en un poco diferente. Swifty es una tecnología que “vive” en los servidores de Google y aprovecha de fuente un archivo SWF para la conversión hacia HTML5 y Wallaby es una aplicación AIR que el desarrollador instala en su computadora y que se alimenta de archivos FLA para convertir a HTML5.

¿Por qué la necesidad de convertir Flash a HTML5?

Si tienes algo que ver con el diseño y/o desarrollo web seguramente alguna vez has tenido alguna experiencia con estas tecnologías y habrás experimentado en carne propia el vía crucis que es, cuando algo a la mitad del camino no funciona, pero el hecho de tener opciones extra siempre se agradecerá enormemente.

En este caso la necesidad de convertir Flash a HTML5 viene a raíz de la ausencia de Flash Player en una plataforma móvil que se ha vuelto muy popular hoy en día, nos referimos a iOS de Apple, sobre la cuál se soportan dispositivos como iPhone, iPad, iPod Touch, etc.

Y ¿qué pasa con Android, BlackBerry, Symbian y los demás jugadores? bueno pues todos ellos participan en un proyecto llamado Open Screen Project donde su principal objetivo es llevar la misma experiencia de usuario a través de diferentes dispositivos, tratando de reducir la fragmentación mediante un runtime consistente a todos los ambientes, dicho proyecto ha tenido buenos resultados hasta el momento.

Google Swifty y Adobe Wallaby

La pregunta obligada es ¿Cómo se comparan ambas tecnologías?, más allá de lo que ya mencionamos sobre que Swifty aprovecha el formato SWF y Wallaby necesita una fuente en formato FLA. En principio podríamos ver a Swifty como un servicio donde dependemos totalmente de Google para decodificar los contenidos del SWF e interpretarlos como algo visible sin Flash Player y Wallaby como una aplicación standalone cuya mayor restricción es que tienen que ser archivos generados con Flash CS5.

El resultado final en ambos casos es un archivo HTML, algo de código CSS y mucho Javascript. A continuación pueden revisar una animación hecha con Flash y compararla con su salida en Swifty y Wallaby respectivamente.

Versión Flash Original

HTML5 generado por Swifty

HTML5 generado por Wallaby

El archivo resultante solamente es visible en navegadores basados en Webkit tales como Chrome o Safari, ¿la razón? depende bastante de ciertas características de SVG y del Módulo Animations de CSS3 con implementaciones en Webkit desde 2009 pero todavía con poco soporte en IE9 y reciente integración en Firefox 5.

Donde comenzamos a ver algunas diferencias es en el soporte de ActionScript, Swifty soporta cierto código ActionScript 2.0 básico pero como en el mismo sitio web nos lo indican “no esperen todavía convertir su juego Flash favorito a HTML5”. En este aspecto un buen tip es configurar las opciones de publicación de Flash para dar salida a archivos compatibles con Flash 5 y AS2.

Google Swifty y Adobe Wallaby
Este es el tipo de ActionScript old-school que Swifty convertirá sin problemas ;-)

Si quieres visualizar el ejemplo

Pero con Wallaby las opciones se reducen a programar las interacciones directamente con Javascript aprovechando código directo o librerías como jQuery, de hecho Wallaby se apoya bastante en ella.

Código de Wallaby mezclando una llamada a función de Javascript:

Google Swifty y Adobe Wallaby
Si quieres visualizar el ejemplo

Conclusiones, aunque muy lejos de ser finales

Seguramente muchos en este momento después de ver las opciones que ofrece Swifty y/o Wallaby irán a probar sus propios banners, animaciones, juegos y en algunos casos el resultado será satisfactorio y podremos hacer felices a nuestros clientes de que sus contenidos se ven en el iPhone pero en otros casos no será tan bueno el resultado.

No estoy seguro de que estemos viendo siquiera una versión final de estas tecnologías, sin embargo nos da una muy buena pista hacia donde esta evolucionando el tema de animación en Internet, siendo Flash la herramienta más utilizada es obvio pensar en una evolución en cuanto a la oferta de Adobe para incorporar HTML5, CSS3 y demás tecnologías web, por ejemplo con herramientas como Adobe Edge.

Por otro lado también es muy interesante ver lo que piensa Google al respecto siendo el principal vendedor de anuncios por internet y muchos de ellos todavía soportados por Flash, pero que tiene que proveer una alternativa HTML5 para tablets y smartphones debido a su rápida distribución y características de interactividad.

Y para los más aventureros quisiera dejarles un par de recomendaciones, por un lado EaselJS una librería de javascript para trabajar con el Canvas de HTML5 inspirada fuertemente en la implementación del display list de Flash, por lo que los desarrolladores de juegos actuales no tendrán problemas en implementarla rápidamente. Y la otra recomendación es para aquellos desarrolladores de aplicaciones RIA que dependen fuertemente de ActionScript 3.0 para sus aplicaciones y consideran todavía el migrar a Javascript, para ellos es Jangaroo un proyecto open source para aprovechat el poder de ActionScript 3.0 en frameworks y aplicaciones de Javascript.

Si tienen algun comentario me encantaría leerlo al final de este post o si prefieren hacerlo vía twitter @edgarparada

2 pensamientos en “Swifty de Flash a HTML5 en segundos

  1. Hola, hice la prueba y convertí un swf en html5 está genial, el único detalle es que la animación se cicla, tu sabes cómo puedo hacer para evitarlo, el original de mi swf hace un stop pero ya transformado a html5 se cicla.

    Ojalá tengas una respuesta para implementarlo ya.
    Mil gracias.

  2. Sylvia, con swifty y wallaby no es tan simple. Tendrías que utilizar jQuery para modificar el código resultante de ambas tecnologías, de querer hacerlo te recomendaría empezar con wallaby porque lo que produce swifty es poco más que complicado de modificar.

    Y otra mejor alternativa para ese tipo de animaciones es usar Adobe Edge (http://labs.adobe.com/technologies/edge/) que es una herramienta que justamente está pensada para tal propósito.

    Próximamente escribiré un post sobre Edge para todos en este blog pero miéntras tanto puedes empezar a jugar con él :-)

    Saludos, Edgar

    PD. Una disculpa en el retraso para contestar pero he andado full de trabajo :-(

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s