martes, diciembre 06, 2011

Google Swiffy: Convierte Flash en HTML5


Hace un mes más o menos salió esta extensión para Flash de la mano de Google. Se trata de convertir fácilmente Flash a HTML5

Si vais a su web os la podéis bajar como .mxp. Os recuerdo aquí que si tenéis varias versiones de Flash instaladas podéis tener algún conflicto con el Adobe Extension Manager. Quizás tengáis que desinstalar y volver a instalar. Procesos...

Esto es lo que dicen los de Google sobre la extensión:

Fácil de instalar

Descarga la extensión Google Swiffy como .mxp y ábrela en el Adobe Extension Manager . Fácilmente podrás trabajar con ella desde Flash Professional.

Exporta a HTML5 con un comando

En el menú Comandos aparecerá la opción “Exportar a HTML5 (Swiffy)”, al ejecutarla se convertirá en HTML5 y se abrirá en una ventana del navegdor. Puedes asignar un acceso rápido de teclado para hacerlo más rápido

Rápido feedback

Swiffy no da información sobre el proceso de conversión, en el panel de Salida se verán los resultados.
















Como veis en este último pantallazo queda claro que:
- Los modos blend no tendrán soporte y que puede haber algún problema con los filtros

Entonces, lo tienes instalado ¿y ahora qué?
Hagamos un banner en AS2 sin nada de código y exportemos como HTML5, la primera vez que lo hagas tendrás este Warning:

Después, se te abre una ventana del navegador, si la ruta de tu .swf era:
loquesea/300x250_timeline_animation_as2.swf

Ahora tendrás:
loquesea/300x250_timeline_animation_as2.swf.html

Y si lo subes un servidor y lo embebes dentro de un iframe tendrás esto:



Sale igual que un .swf!!!

Sigamos. Si haces lo mismo en Actionscript 3 y exportas como HTML5:


Tampoco hay diferencia.

Más pruebas: Si haces un banner en Actionscript 3 todo con código, tendrás este warning:

Swiffy Flash Extension for Win v1.0.13 [Swiffy v3.6.1]
- Warnings -
Scenes are not supported.
ActionScript 3.0 is not supported.

Vamos que AS3 no está "soportado"

Si haces lo mismo en AS2 ya sabes, no se pueden usar los blend modes.
La buena noticia es que algunas librerías sí que las convierte, por ejemplo Greensock

Por ejemplo, en este banner todo con código en Actionscript 2:

[CODE]
import com.greensock.*;
import com.greensock.plugins.*;

function infiniteMovement()
{
textbanner._alpha=0;
TweenLite.to(textbanner, 1, {delay:1, _alpha:100});

TweenLite.to(textbanner, 1, {delay:3, _rotation:360, overwrite:false});
TweenLite.to(textbanner, 1, {delay:7, _alpha:0, overwrite:false, onComplete:onFinishTween, onCompleteParams:[4,bg]});
TweenLite.to(textbanner, 1, {delay:6, _rotation:0, overwrite:false});
}

function onFinishTween(parameter1:Number,parameter2:MovieClip)
{
infiniteMovement();
}

infiniteMovement();

stop();
[/CODE]

El resultado una vez exportado a HTML5 es este:



Perfecto.

La duda es: ¿AS3 tendrá soporte en el futuro?
Bueno, esta es una de las opciones para convertir Flash a HTML5, en breve hablaré de más.

No hay comentarios:

Disqus for Actionscript & Comet