lunes, noviembre 15, 2010

flv Cuepoints Actionscript 3

Estamos oyendo mucho últimamente sobre el futuro del vídeo en la web, incluso he visto plataformas que proliferan el vídeo en la web como la de DigitalNovae.

Además, hemos visto últimamente algunas páginas premiadas en FWA con carga de lo que yo llamaría vídeo interactivo, por ejemplo esta de ACTI.

La pregunta: ¿Con Actonscript se puede mover el cabezal de un vídeo en streaming en una web? ¿Y hacer que se reproduzca para atrás?

A la segunda no tengo respuesta (serán bienvenidas), ahora bien, respecto a la primera. Si se trata de un vídeo pequeño puede ser mejor cargarlo en otra película o incluso embeberlo en timeline, porque los labels/etiquetas funcionan muy bien.

El problema es si se trata de cargar varios vídeos en streaming y además jugar con la interacción de los mismos.

Bien, hace poco tuvimos que hacer algo parecido para una micro, podéis ver una demo en beta aquí. Es una micro con cuatro vídeos en streaming, cargamos cuatro .flv por medio del componente flvPlayBack. El briefing decía algo así como que cuando el usuario pasa el ratón por encima el personaje da un paso adelante y muestra el cartel, cuando estás fuera vuelve a su posición inicial.

Para hacer esto, siguiendo algunas recomendaciones de luckyPig, lo mejor es hacer un array con los tiempos del vídeo con el que vas a trabajar. Por ejemplo, en la segunda empezando por la derecha, la chica, tomamos los siguientes tiempos respecto del vídeo original:

Veamos el vídeo de la chica completo, haremos dos bucles, bucle en reposo (bucle1) y bucle en movimiento (bucle2 o cuando está delante). Además marcaremos los tiempos de los saltos, principio y final. Por supuesto, si hacéis esto, tenéis que grabar con croma y desde After exportar para .swf (así veréis el fondo transparente, aunque aquí lo pongo negro)


//Tiempos:

1- Inicio
2- Fin Bucle1
3- Comienzo paso adelante 1
4- Inicio Bucle 2
5- Fin Bucle 2
6- Comienzo paso adelante 2
7- Final

Así construiremos el Array:

Tiempos chica joven
0/10/14/22/36/37/40

Vamos al código (AS3) un poco sucio pero sirve:

import com.greensock.*;
import fl.video.*;
import fl.video.MetadataEvent;

var flv_chicajoven:FLVPlayback;

var tiempos_chicajoven:Array = [0,10,14,22,36,37,40];

//Añadimos los puntos de referencia
flv_chicajoven.addASCuePoint(tiempos_chicajoven[0], "chica_iniciobucle1");
flv_chicajoven.addASCuePoint(tiempos_chicajoven[1], "chica_finbucle1");
flv_chicajoven.addASCuePoint(tiempos_chicajoven[2], "chica_salto_adelante");
flv_chicajoven.addASCuePoint(tiempos_chicajoven[3], "chica_iniciobucle2");
flv_chicajoven.addASCuePoint(tiempos_chicajoven[4], "chica_finbucle2");
flv_chicajoven.addASCuePoint(tiempos_chicajoven[5], "chica_salto_atras");
flv_chicajoven.addASCuePoint(tiempos_chicajoven[6], "chica_final");

//Listener del flv de la chica
flv_chicajoven.addEventListener(MetadataEvent.CUE_POINT, chicajoven_listener);

//Control de tiempos con booleanos
var chica_enbucle1:Boolean=true;
var chica_ensalto:Boolean=false;

function chicajoven_listener(eventObject:MetadataEvent):void {
if (eventObject.info.name == "chica_finbucle1"){chica_irInicioBucle1();}
if (eventObject.info.name == "chica_finbucle2")
{
chica_irInicioBucle2();
chica_enbucle1=false;
}
if (eventObject.info.name == "chica_final")
{
chica_irInicioBucle1();
chica_enbucle1=true;
}
if (eventObject.info.name == "chica_iniciobucle1"){chica_ensalto=false;}
if (eventObject.info.name == "chica_iniciobucle2"){chica_ensalto=false;}
}

//Movimiento del cabezal del vídeo en streaming
function chica_irInicioBucle1():void{flv_chicajoven.seek(tiempos_chicajoven[0]);};
function chica_irInicioBucle2():void{flv_chicajoven.seek(tiempos_chicajoven[3]);};
function chica_irSaltoAdelante():void{flv_chicajoven.seek(tiempos_chicajoven[2]);};
function chica_irSaltoAtras():void{flv_chicajoven.seek(tiempos_chicajoven[5]);};

//Eventos
chicajoven_bt.addEventListener(MouseEvent.MOUSE_OVER, fl_chicajovenON);
function fl_chicajovenON(event:MouseEvent):void
{
trace("fl_chicajovenON");
if(chica_enbucle1==true)
{
chica_irSaltoAdelante();
chica_enbucle1=false;
}
if(ejecutiva_enbucle1==false)
{
ejecutiva_irSaltoAtras();
}
if(viejuno_enbucle1==false)
{
viejuno_irSaltoAtras();
}
}

chicajoven_bt.addEventListener(MouseEvent.MOUSE_OUT, fl_chicajovenOUT);
function fl_chicajovenOUT(event:MouseEvent):void
{
trace("fl_chicajovenOUT");
if(chica_enbucle1==false)
{
if(chica_ensalto=true)
{
//A los 2 segundos chica_irSaltoAtras
TweenMax.to(cuad_mc,0, {delay:2, y:-224, onComplete:onFinishTweenChica, onCompleteParams:[5, cuad_mc]}) function onFinishTweenChica(param1:Number, param2:MovieClip):void
{
chica_irSaltoAtras();
}
}
else
{
chica_irSaltoAtras();
}
chica_enbucle1=true;
}
}

//lo mismo se haría para los demás vídeos

Bueno, al final de todo esto al cliente no le gustó como quedó y optó por imágenes estáticas, una pena, pero el trabajo de i+d+i mereció la pena.

No hay comentarios:

Disqus for Actionscript & Comet