Wednesday, November 17, 2010

flv Cuepoints Actionscript 3

We are hearing a lot lastly about the future of video in the web, moreover, here in Spain I´ve seen platforms improving video seo in the web as DigitalNovae does

Besides, we are also seeing really good sites in the FWA website, with what I would call interactive video, for example this one from ACTI or this other from Wrangler

I´m sorry about HTML5 boys, you can not do this by now, only Flash can. So, this is the question: Is it possible to move the video head with Actonscript? Can you play backward?

For the second question I don´t have the code (I welcome solutions), but for the first I do.
First, if you happen to load a video in a website, if you can it would be better to embed it in the timeline and then just use tags with gotoAndPlay or gotoAndStop.

The problem is more complicated if you have to load several videos in streaming and you want to interact with them.

Lastlly we had a project for a customer, he wanted to do something similar, you can see a
demo here. This is a microsite with four streaming videos, we load four .flv with the FlvPlayBack component. The briefing says that whenever the user interacts over or out the video, there must be a listener so that the video shows other message or not.

To do this, we followed some recomendations from our friend luckyPig, the best way is to make an array with the video cuepoints where you will work. For example, let´s take the video of the girl from the right.

If we see the complete video, we will do two loops, standby loop and movement loop. Also we will mark the cuepoints of the jumps from forward to backward. If you record this, you´d better use a croma and export if for .swf from AfterEffects.


//Cuepoints times:

1- Init
2- End Loop 1
3- Beginning of forward step 1
4- Beginning of loop 2
5- End loop 2
6- Beginning of forward step 2
7- End

So lets do an array:

Cuepoints for the young girl
0/10/14/22/36/37/40

Let´s go to the code:

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];

//Adding the cuepoints
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");

//Listeners of the flv
flv_chicajoven.addEventListener(MetadataEvent.CUE_POINT, chicajoven_listener);

//Boolean variables to control
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;}
}

//Movement of the head in 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]);};

//Events
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)
{

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;
}
}

//The same for the other videos...

Well, lastly the customer decided he wanted just static photos instead of videos. But it was a good R+D project.

No comments:

Post a Comment