Hace unos días Google dió a conocer una tecnología muy interesante llamada Swiffy 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.
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.
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:
Código :
<!DOCTYPE html>
<!-- Created with Adobe(R) technology -->
<html>
<head>
<meta charset="utf-8"></meta>
<link href="animation3.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="animation3.js"></script>
<script type="text/javascript">
function openURL(){
window.open("http://www.activ.com.mx","","");
}
</script>
</head>
<body>
<div class="wlby_movie">
<div class="wlby_1 animacion_mc">
<!-- Start of symbol: animacion -->
<div class="wlby_7 wlby_sprite">
<img src="animation3_assets/svgblock_0.svg" class="wlby_4"></img>
</div>
<!-- End of symbol: animacion -->
</div>
<div class="wlby_5 link_mc" id="link_mc">
<!-- Start of symbol: link_button -->
<img src="animation3_assets/svgblock_1.svg" onClick="openURL()" class="wlby_6"></img>
<!-- End of symbol: link_button -->
</div>
</div>
</body>
</html>
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
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Ahora vendrán los comentarios tipo "blabla muerte de flash blabla" y "blabla html5 es dios blabla"
blabla muerte de flash blabla , blabla html5 es dios blabla
bueno, hace ya un rato que no uso ActionScript 3, pero me encantaba.
Pareciera que si esta muriendo Flash y AS, lastima
egonzalez - gracias
Keith_NT - difiero un poco contigo, no creo que Flash y AS estén muriendo sabes pero en definitiva se están transformando y apenas es el comienzo
Kinduff - Muchas denadas!
danmolo - Bueno el banner precisamente fue para ejemplificar el tipo de cosas para lo que está creado Swifty y Wallaby
emirc122 - El ejemplo de Swifty si funciona en FF5 y el ejemplo de Wallaby no, supongo que es por alguna característica de CSS3 que todavía no esta implementada en FF y si en Webkit.
Por teskostudio el 09 de Julio de 2011
Anda y que vayan a timar a su p*** madre. Estoy hasta los c****** de tanta manzanita y tanto pijerio.
Por Yair Albert el 12 de Julio de 2011
emirc122 - justo acabo de probar ambos y si dan puntaje
antonionavajas - muchas gracias!
teskostudio - leíste el artículo completo? al final recomiendo Jangaroo para eso mismo que estas pidiendo, convertir AS3 "complejo"
m@u - sip desgraciadamente solo estamos viendo la punta del iceberg todavía, pero imagina que haya un apoyo oficial de la marca a un proyecto como easelJS? just wondering!
Yair Albert - gracias, son del tipo de comentarios que hacen tener ganas de seguir escribiendo y compartiendo
Por DiegoVelevu el 15 de Julio de 2011
Como consecuencia de la mezquindad obtenemos un
modelo mucho más pobre...
Por magician1981 el 16 de Julio de 2011
Por kromax el 18 de Julio de 2011
Por carlos el 19 de Julio de 2011
Por wsoul el 19 de Julio de 2011
Tengo que probar este y a veer que juegos soporta...
Por hosting el 27 de Julio de 2011
Por vanvanero el 28 de Julio de 2011
Por otro lado por qe no pensar que si adobe tiene la iniciativa( de hecho ya lo han demostrado en varios proyectos), mas que hacer tipos de bridge y transformación no dependan de un player como plugin de instalación sino que la compilación la lleven a un punto en que genere por ejemplo un resultado tipo html5 seria genial, hacer aplicaciones flex/flash y quitarnos el maldito player de encima que es en ultimas lo que aleja los dos mundos, puede sonar a idea loca pero de ahí parte las ideas exitosas
Por freddy el 01 de Agosto de 2011
Por v3on el 02 de Agosto de 2011
Por Gregorio Manzano el 05 de Agosto de 2011
saludos
Anda y que vayan a timar a su p*** madre. Estoy hasta los c****** de tanta manzanita y tanto pijerio.
Jajajajajaja chamo te doy un beso, eso no quita que mac sea buenisimo pero los precios CARISIMOS, comenzo con una filosofia luchando contra ruindows y ahora se le ha unido a la saga precios desorbitantes guerras abiertas con adobe SO restrictivo a sus maquinas (???) etc etc etc .
Mi opcion si dices viva el software libe es UBUNTU y de hecho profesionalmente trabajo con el y ruindows por lo no haber lo que necesito para linux.
Ahi queda eso.
Un saludo
Por cbunbury20 el 03 de Enero de 2012
Por @Pablo_LuisCT el 08 de Mayo de 2012
Por Ignacio marquez el 11 de Mayo de 2012
Tengo una pagina web hecha en flash y la unica manera de formatearla es desde dreamweber.pero sigue siendo swf
La quise pasar a html con wallaby pero no te reconoce los codigos de action script.(te la pasa como una pelicula y sin stop ).
Por meremilo el 23 de Junio de 2014