jueves, diciembre 08, 2011

HTML5 Banners


Imaginemos este escenario: Flash muere definitivamente y es reemplazado por HTML5. No es lo que yo personalmente pienso pero podría ser.

Entonces: ¿Qué pasaría con toda la industria de Display? Tenemos que pensar que si este escenario imaginario ocurre, Display será el último en migrar.

¿Y qué pasaría con los banners y con las piezas RichMedia? Ya están apareciendo algunas opciones, hace poco hablamos de Google Swiffy para convertir banners convencionales hechos en AS2 en HTML5 sin problema. De hecho incluso se pueden meter Acciones.

Una de las mayores ventajas de Flash es que se trata de un programa para múltiples perfiles, diseñadores, animadores y desarrolladores. Por ejemplo yo en mi trabajo doy soporte a más de cincuenta agencias creativas para realizar piezas RichMedia, la mayoría de ellos se hacen en Flash. En mi opinión casi la mayoría de los banners convencionales son hechos por diseñadores o animadores, y de los RichMedia yo diría que la mitad, el resto necesitan más conocimientos de programación o animación.

Tenemos que pensar también en la propia historia de Flash, de ser un programa inicialmente para diseñadores y animadores, dio un gran salto y muchos programadores empezaron a usar Flash. Asimismo muchos diseñadores/animadores como yo por ejemplo migramos y nos convertimos en diseñadores-programadores, lo que llaman devigners.

Lo bueno de Flash es que para un diseñador el interface sigue siendo muy fácil de usar. El problema aquí es que no veo a todos los equipos de producción saltando a HTML5 tal y como están las cosas ahora. Haría falta algún software que se adaptara más al ojo de un diseñador/animador.

Y esto es lo que están haciendo en una compañía llamada AdVine, Sprout, podéis ver una idea de su planteamiento en este pantallazo:


O sea, si el usuario tiene Flash se lanza Flash, y si no en HTML5. Al menos de momento, esto podría cambiar en un futuro.

Si veis este vídeo la interface parece bastante user friendly:


Tenéis más info sobre el proyecto en su their website o en su blog
De hecho, Adobe colabora en el proyecto como podéis ver en Adobe Labs 
Tienen también un canal de videos en youtube


La verdad, creo que esto le da bastantes vueltas, al menos de momento, a lo que se está haciendo con
Adobe Edge, de hecho, a esta última herramienta yo creo que le falta bastante rodaje. 

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.

Disqus for Actionscript & Comet