Wallaby es el nombre clave de una tecnología experimental de Adobe que tiene como propósito principal el poder traducir las animaciones hechas con Flash CS5 para que puedan ser visualizadas en el browser de dispositivos con iOS (iPhone, iPad, etc.)

Adobe Wallaby

Dicho lo anterior, si nos apegamos a esa definición evitaremos posibles frustraciones al momento de trabajar con esta tecnología. Como bien es conocido el browser de iOS (Safari Mobile) es uno de los principales impulsores de HTML5 y CSS3 en dispositivos móviles, pero al mismo tiempo no es capaz de reproducir contenido generado mediante Flash y esto es por razones que van más allá del enfoque principal de este artículo.

Con ese contexto desde el MAX de 2009, Adobe presentó algunos adelantos de lo que sería posible de hacer en próximas versiones de sus tecnologías y algo de lo que más llamó la atención sin duda alguna fue la posibilidad de trabajar con los que serán los próximos estándares para construir la web.

Integración con SVG, primeros pasos

La base gráfica de Wallaby podemos encontrarla en un formato llamado SVG (Scalable Vector Graphics) basado en XML, estándar para W3C y sobre el cuál Adobe ha tomado un papel protagónico dado la naturaleza de sus tecnologías. Lo que permite hacer este formato es expresar los gráficos vectoriales con un lenguaje simple dentro de cualquier navegador, ya que SVG no esta basado en ningún plugin, más bien depende de la implementación que se haga del estándar en el browser.

Hasta ahora la mayoría de los navegadores tienen la posibilidad de interpretar este tipo de archivos y hay aplicaciones de uso masivo que están completamente basadas en este formato. Inclusive utilizando la etiqueta básica para insertar imágenes con HTML podríamos hacer uso de un SVG en cualquier página web.

Illustrator HTML5 Pack

Previo a Wallaby en el sitio de Adobe Labs ya se podía descargar el HTML5 Pack para Illustrator CS5 cuyo enfoque es generar contenido vectorial para la web aprovechando algunas características de HTML5 como Canvas y Media Queries de CSS3 para orientar nuestras creaciones hacia diferentes dispositivos.

HTML5/CSS3 y Javascript, la base de Wallaby

Para poder traducir las animaciones a un formato compatible con iOS, Wallaby emplea como base una característica fundamental de HTML5 llamada Canvas y al mismo tiempo explota algunas transformaciones de CSS3 exclusivas de Webkit (el motor web de Safari, Chrome, AIR entre otras tecnologías).

El elemento Canvas nos permite dibujar tanto vectores como bitmaps de forma dinámica sobre cierta área dentro del browser, originalmente fue utilizado por Apple en Safari pero hoy en día navegadores como Firefox, Opera y recientemente la versión 9 de Internet Explorer también lo soportan.

Su uso es realmente simple, como podemos ver en el código siguiente que sirve para poder dibujar un rectángulo de 200×50 pixeles:

Código HTML:

Código Javascript:

Sin embargo ¿qué pasaría si queremos hacer cosas más complejas que un rectángulo? seguramente necesitaremos un código Javascript más complejo! Y esto es posible de realizar si llevamos tiempo trabajando con este lenguaje, pero si nuestras bases de programación no son buenas seguramente nos encontraremos una barrera para explotar al máximo esta tecnología, y es ahí donde entra Wallaby al rescate.

Wallaby en la práctica

Para probar el potencial de esta tecnología podemos utilizar cualquier archivo Flash generado con la versión CS5 siempre y cuando tengamos en cuenta las siguientes restricciones.

Nosotros utilizaremos una animación sencilla con un logo en movimiento y un texto fijo:

Adobe Wallaby Screenshot

Después instalaremos Adobe Wallaby, que podemos encontrarlo en esta dirección. Es una aplicación AIR que tiene una instalación muy simple e intuitiva. En las opciones del programa seleccionaremos el archivo FLA de nuestra animación, después hacemos click en la opción de convert y hemos terminado 🙂

Adobe Wallaby Screenshot

Cuando utilizamos Wallaby, de manera automática se genera un archivo de tipo HTML que tiene una estructura simple con algunos divs e imágenes con sus respectivas clases de CSS, también encotraremos un archivo CSS con varias reglas de estilo y particularmente notaremos que están utilizando prefijos -webkit para algunas animaciones y transformaciones.

De igual manera en una carpeta aparte se generan las imágenes SVG, hay que tener cuidado de no abusar de los Motion Shapes porque estos generan una cantidad excesiva de imágenes SVG y por ende el peso final de nuestras animaciones con Wallaby versus las generadas por Flash pueden ser muy contrastantes.

Adobe Wallaby Screenshot

Y por último notaremos también un par de archivos con extensión js que son los correspondientes a Javascript, en uno de ellos esta contenido toda la lógica que hace funcionar la animación y el otro es la librería de jQuery utilizada en varios de los proyectos más importantes en la web.

Conclusiones

Como podemos ver las posibilidades de este tipo de tecnologías son bastantes, sobretodo partiendo del hecho que su base la encontramos en estándares abiertos y cada vez más compatibles con los navegadores actuales. Sin embargo no hay que olvidar que esto es solo una prueba de hacia donde está dirigiendo Adobe sus esfuerzos al respecto de combinar las tecnologías web con su Plataforma Flash, si queremos realmente sacar provecho del resultado obtenido con Wallaby un siguiente buen paso sería aprender algo de HTML5, CSS3 y Javascript ya que la interactividad aún no está resuelta sin embargo con algunas líneas de código podríamos llegar a tenerla.

Si tienen algún comentario sobre este artículo me pueden seguir en twitter @edgarparada hasta la próxima!