Crea contenido HTML5 desde Flash con Adobe Wallaby

Adobe sacó recientemente una versión de prueba de Wallaby, que permite ,con una interfaz muy básica, cargar un archivo FLA para luego convertirlo en HTML5. Si bien es cierto, esta herramienta es experimental, nos permite pasar nuestras animaciones a HTML5 que puedes probar en navegadores con un motor de renderizado Webkit (Chrome, Safari, Ipad, Iphone, etc).

Lo feo

Sin embargo, al ser una versión de prueba, aun sigue teniendo problemas con los archivos complejos de Flash, así como no soportar:

ActionScript.
MovieClip.
Sonidos.
Eventos de Botón.
Filtros.
Kinematics.
Vídeo.
entre otros.

Como dije, aun es muy básico, pero no dudamos que irán implementando poco a poco más cosas.

La novedad

Al convertir tu archivo .FLA a HTML5, obtendrás:

Un archivo HTML5.
Un archivo jquery-1.4.2.js.
Una carpeta assets.
Un archivo css.
Un archivo js.

Veamos un poco de lo que trae

Podemos observar que para los vectores usa archivos SVG y para el tema de javascript usa JQuery. Ahora veamos el archivo html de una animación que hice:

Código :

<!DOCTYPE html> 
<!-- Created with Adobe(R) technology --> 
<html> 
  <head> 
    <meta charset="utf-8"></meta> 
    <link href="animar.css" type="text/css" rel="stylesheet"></link> 
    <script type="text/javascript" src="jquery-1.4.2.js"></script> 
    <script type="text/javascript" src="animar.js"></script> 
  </head> 
  <body> 
    <div class="wlby_movie"> 
      <div class="wlby_1"> 
        <!-- Start of symbol: Tween 1 --> 
        <img src="animar_assets/svgblock_0.svg" class="wlby_2"></img> 
        <!-- End of symbol: Tween 1 --> 
      </div> 
    </div> 
  </body> 
</html>

Y el código JS es:

Código :

function wlby_calc_timeout(c) {
    var timeout = (new Date).getTime();
    while (c) {
        timeout += parseFloat(getComputedStyle(c)['-webkit-animation-duration']) * 1000;
        c.timeout = Math.round(timeout);
        c = c.nextElementSibling;
    }
}
var wlby_hide_children = function(self) {
    var c = self.firstElementChild;
    while (c) {
        c.style.display = 'none';
        c = c.nextElementSibling;
    }
}
var wlby_activate_sibling = function(evt, self) {
    if (evt.srcElement != self)
        return;
    if (self.style.display == 'none')
        return;
    if (!self.timeout)
        wlby_calc_timeout(self);
   self.style.display = 'none';
    var sibling = self.nextElementSibling;
    if (!sibling)
        return;
    while ((sibling.timeout < evt.timeStamp)&&sibling.nextElementSibling)
        sibling = sibling.nextElementSibling;
//    $('.wlby_fs', sibling).css('display', 'none');
//    var n = new Number((sibling.timeout - (new Date).getTime()) / 1000);
//    sibling.style.webkitAnimationDuration = n.toString() + 's';
    sibling.style.display = 'block';
};
var wlby_activate_children = function(evt, self) {
    if (evt.srcElement != self)
        return;
    wlby_hide_children(self);
    var c = self.firstElementChild;
   if(!c)
      return;
//    $('.wlby_fs', c).css('display', 'none');
    wlby_calc_timeout(c);
    c.style.display = 'block';
   c.style.webkitAnimationDelay = '';
}
var wlby_loop_children = function(evt, self) {
    if (evt.srcElement != self)
        return;
    wlby_activate_children(evt, self);
    var c = self.firstElementChild;
    if (!c)
        return;
    c.style.webkitAnimationDelay = '0s';
}
$(document).ready(function() {
    $('.wlby_sprite').each(function()
      { this.addEventListener('webkitAnimationIteration', function(evt) { wlby_loop_children(evt, this); return false; }, false, false) });
    $('.wlby_sprite, .wlby_graphic').each(function()
      { this.addEventListener('webkitAnimationStart', function(evt) { wlby_activate_children(evt, this); return false; }, false, false) });
    $('.wlby_fs').each(function()
      { this.addEventListener('webkitAnimationEnd', function(evt) { wlby_activate_sibling(evt, this); return false; }, false, false) });
});

El código CSS:

Código :

div.wlby_movie
{
   overflow: hidden;
   position: absolute;
   left: 0px;
   top: 0px;
   width: 550px;
   height: 400px;
}
.wlby_text p { padding: 0; margin: 0; }

a.wlby_classic-link { color: inherit; text-decoration: none; }
a.wlby_classic-link:link { color: inherit; text-decoration: none; }
a.wlby_classic-link:hover { color: inherit; text-decoration: none; }
a.wlby_classic-link:active { color: inherit; text-decoration: none; }
a.wlby_classic-link:visited { color: inherit; text-decoration: none; }

a.wlby_tlf-link { color: inherit; text-decoration: none; }
a.wlby_tlf-link:link { color: inherit; text-decoration: none; }
a.wlby_tlf-link:hover { color: inherit; text-decoration: none; }
a.wlby_tlf-link:active { color: inherit; text-decoration: none; }
a.wlby_tlf-link:visited { color: inherit; text-decoration: none; }

.wlby_button > * { visibility: hidden; }
.wlby_button > .wlby_button_normal { visibility: visible; }
.wlby_button:hover > .wlby_button_normal { visibility: hidden; }
.wlby_button:hover > .wlby_button_hover { visibility: visible; }
.wlby_button:active > .wlby_button_normal { visibility: hidden; }
.wlby_button:active > .wlby_button_hover { visibility: hidden; }
.wlby_button:active > .wlby_button_active { visibility: visible; }

@-webkit-keyframes wlby_frameset-animation {
   from { }
   to { }
}

.wlby_fs, .wlby_graphic 
{
   -webkit-animation-name: wlby_frameset-animation;
}

.wlby_graphic 
{
   -webkit-animation-duration: 1s;
}

.wlby_masked 
{
   height: inherit;
   position: inherit;
   width: inherit;
}

.wlby_sprite 
{
   -webkit-animation-name: wlby_frameset-animation;
   -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes wlby_KF_3 {
from {
   -webkit-transform: matrix(1, 0, 0, 1, 73, 186);
   opacity: 1;
}
95% {
   -webkit-transform: matrix(1, 0, 0, 1, 487.95, 186);
   opacity: 1;
}
95.01%, to {
   -webkit-transform: matrix(1, 0, 0, 1, 487.95, 186);
}
}
.wlby_2
{
   position: absolute;
   -webkit-transform: matrix(1, 0, 0, 1, -46.5, -46.5);
}

.wlby_1
{
   -webkit-animation-duration: 0.833333s;
   -webkit-animation-name: wlby_KF_3;
   -webkit-animation-iteration-count: infinite;
   -webkit-transform: matrix(1, 0, 0, 1, 487.95, 186);
   -webkit-transform-origin: 0px 0px;
   -webkit-animation-timing-function: linear;
}

Si quieres saber más sobre esta herramienta, entra al labs de adobe y busca Wallaby.

http://labs.adobe.com/technologies/wallaby/

Update:

Aquí está el ejemplo de este post:

Aquí puedes ver la animación generada, RECUERDA verlo desde safari o chrome.

¿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.

Por juanjosehzgs el 08 de Marzo de 2011

Esperemos que pronto "lo feo" se vuelva "la novedad" en un post no muy lejano, interesante herramienta
Por Acreonte el 08 de Marzo de 2011

Interesante. Podemos ver el ejemplo de flash que creo todo eso? y podemos ver tambien el HTML5 creado?
Por antonionavajas el 08 de Marzo de 2011

Muy interesante y mucho más cuando sea una versión final. Sin embargo, estos tipos de automatismos suelen dar un código bastante "sucio" en cuanto el archivo origen empieza a ser algo más complejo.
Por Acreonte el 08 de Marzo de 2011

antonionavajas-blog :
...Sin embargo, estos tipos de automatismos suelen dar un código bastante "sucio" en cuanto el archivo origen empieza a ser algo más complejo.

Sip, por eso preguntaba si podiamos ver el SWF original y el HTML5 final, para ver si se puede hacer lo mismo sin tanta cosa...
Por Shan Pool el 08 de Marzo de 2011

I love it!!!
Por juliovas el 08 de Marzo de 2011

Muy bueno pero como dice, lo automático siempre tiene algo malo, pero lo bueno que si existe.
Genial que todo tiene html5
Por Raxiro el 09 de Marzo de 2011

Es increible como Adobe va recibiendo palos y es como que cuantos mas palos mas crece, mas innova y mas mejora y sobre todo para la comodidad de sus usuarios.
De todas formas estoy de acuerdo con que no es bueno algo automatico pero bueno sirve mucho si tenes muchas anims en flash y las queres pasar a html5 sin volver a empezar de 0 y también habría que ver que onda cuando se implemente con AS ya que mi opinión es que hoy en día html5 no le llega a los talones a AS3 (es mi opinión)
Gracias Elder x mantenernos al tanto de todas las novedades!
Por eldervaz el 09 de Marzo de 2011

Acreonte :
antonionavajas-blog :
...Sin embargo, estos tipos de automatismos suelen dar un código bastante "sucio" en cuanto el archivo origen empieza a ser algo más complejo.

Sip, por eso preguntaba si podiamos ver el SWF original y el HTML5 final, para ver si se puede hacer lo mismo sin tanta cosa...

Listo, lo puse en el post al final
Por Raxiro el 09 de Marzo de 2011

Ahora que vi la anim, la hace casí igual, pero a modo de comparacion.. cuantas lineas totales de código genera? mmm 200 +/- entre js,css y html + un svg.
Con cuantas lineas de código generamos un circulo en AS? mm 3/5, con cuantas le hacemos una animación tan simple? 10/20? contando el if de comprobación si llego al final yo creo que con 10 tranquilamente se hace.
No estoy diciendo que la herramienta sea mala ni pretendo que sea perfecta y te genere un código mejor que el humano, lo que digo es que AS es mas cómodo/copado/hermoso que html5 de acá a la china
Ojo quizás con 10/20 lineas de html5 se puede lograr la anim.
Por torrealbaruben el 09 de Marzo de 2011

Muy, pero muy interesante..!
Por Zguillez el 09 de Marzo de 2011

Está muy bueno
Por klamlis el 10 de Marzo de 2011

Estaba probando la aplicación, pero sale error...y específicamente el error habla que la versión no la soporta...
A partir de que versión en flash funcioná?
Por Tifa^ el 18 de Marzo de 2011

¿Alguien ya lo trabajó en su producto?
Por wil el 29 de Marzo de 2011

increible se ve bien la animación.
Por Manuel el 14 de Enero de 2018

Muy bueno, si señor me encanto! Desconecia de que se poderia hacer esa animacion mediante este tipo de aplicacion, html5 es el futuro, digo yo.

Crea contenido HTML5 desde Flash con Adobe Wallaby

Lo feo

La novedad

Veamos un poco de lo que trae

Update:

Publica tu comentario

o puedes...