Cue points e Flash CS3

[Flep]

Questo tutorial di sicuro sarà molto apprezzato da chi come me qualche anno fa, passava ore intere cercando con Mr. Google degli articoli o tutorials interessanti che spiegassero come lavorare co i video FLV ed i cue-points.
Per chi non avesse ben chiaro la potenzialità dei cue points, prego di leggere e seguire attentamente quanto andrò a dimostrare.
Con i cue points si possono sincronizzare i video FLV al codice Actionscript. Mi spiego meglio, mettiamo caso che abbiamo un video e che vorremmo applicargli degli effetti ad un determinato tempo preciso.
Un esempio classico potrebbe essere quello di un video che riproduce un' azione da goal durante una partita di calcio. Al momento esatto del goal potremmo aggiungere un' animazione al video che stiamo riproducendo in download progressivo tramite Flash. Possiamo attaccare una MovieClip dalla libreria, chiamare una funzione, recuperare dei valori ed utilizzarli nella nostra animazione... insomma possiamo fare tutto ciò che Actionscript ci permette di fare all' interno di quel video.
Inoltre utilizzerò un file XML ,che naturalmente caricherò con la classe XML di Flash CS3 all' interno di Flash, in cui scriverò i valori dei cue points ( tempo, nome e tipo ) per poi dire a Flash cosa fare ogni volta che un cue point si presenta mentre il video è in riproduzione.
Molto più semplice da fare che da spiegare... per cui entriamo nel vivo, seguitemi...

Ho trovato sul web un simpatico video a cui applicare l' esempio dei cue points. Forse il tema del video non è dei più adatti ma rende bene l' idea.
Converto il video ( che di nascita era WMv, in FLV ) utilizzando Adobe Flash CS3 video encoder senza aggiungere manualmente nessun cue point.

In questo esempio utilizzerò 5 cue points, ma se ne possono utilizzare anche in quantità elevate in base alle nostre necesità.

Creo un FLA che salvo con nome ' main.fla ', al cui interno:
- trascino sullo stage una istanza del componente FLVPlayback che chiamo player con i seguenti valori all' interno del pannello proprietà:



Dato che il fine di questo tutorial è di visualizzare un fumetto ogni qual volta un cue point è letto dal componente FLVPlayback, creo 5 MovieClip in libreria che chiamerò ' mc_cloud_1 ', ' mc_cloud_2 ', ' mc_cloud_3 ', ' mc_cloud_4 ', ' mc_cloud_5 ' .
Ad ogni clip ho inserito una forma di nuvoletta / fumetto con una semplice interpolazione di fade/in e fade/out e del testo adeguato per il momento in cui si presenterà il cue point corrispettivo.
Infine, ad ognuna delle 5 MovieClip, associo una corrispettiva classe ( il vecchio linkage o identificatore con cui si applicava il metodo attachMovie di AS 2.0 ), Cloud1,Cloud2,Cloud3,Cloud4,Cloud5 che Flash aggiungerà in automatico ( se ti è nuova questa cosa, leggi l' articolo attachMovie e addChild).

Adesso siamo pronti per creare due files AS che gestiranno il tutto.

Per prima cosa creo la Document Class, un file AS che salvo con nome ' Main.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.utils.Timer;
	import fl.video.MetadataEvent;
	import flash.events.TimerEvent;
	
	public class Main extends MovieClip
	{
		private var xml:LoadingXML;
		
		public var cuePoints_array:Array;
		public var parameters_array:Array;
		public var clouds_array:Array;
		
		private var cloud:MovieClip;
		
		private var timer:Timer;
		
		private var id:int=0;
		
		public function Main()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			cuePoints_array=new Array();
			parameters_array=new Array();
			clouds_array=new Array(Cloud1,Cloud2,Cloud3,Cloud4,Cloud5);
			
			loadXML();
		}
		
		private function loadXML():void
		{
			xml=new LoadingXML(this);
		}
		
		public function addCuePoints():void
		{
			for(var i:int=0;i < cuePoints_array.length;i++)
			{
				player.addASCuePoint(cuePoints_array[i]);
			}
			addingListener();
		}
		
		private function addingListener():void
		{
			player.addEventListener(MetadataEvent.CUE_POINT,go);
			player.play();
		}
		
		private function go(m:MetadataEvent):void
		{
			player.stop();
			executeCue(m.info.name);
		}
		
		private function executeCue(s:String):void
		{
			cloud=new clouds_array[id];
			addChild(cloud);
			info_txt.appendText('cue point name: '+s+'\n');
			goNext();
			
			switch(id)
			{
				case 0:
				cloud.x=230;
				cloud.y=180;
				break;
				
				case 1:
				cloud.x=170;
				cloud.y=140;
				break;
				
				case 2:
				cloud.x=170;
				cloud.y=140;
				break;
				
				case 3:
				cloud.x=170;
				cloud.y=140;
				break;
				
				case 4:
				cloud.x=230;
				cloud.y=180;
				break;
			}
		}
		
		private function goNext():void
		{
			timer=new Timer(1500,1);
			timer.addEventListener(TimerEvent.TIMER,takeOffCloud);
			timer.start();
		}
		
		private function takeOffCloud(t:TimerEvent):void
		{
			cloud.play();
			id++;
		}
		
		public function restartPlayer():void
		{
			player.play();
			removeChild(cloud);
		}
	}
}

Adesso utilizzo la classe LoadingXML, utilizzata in molti articoli di questo sito, un file AS implementato in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.xml.*;
	import flash.geom.ColorTransform;
	
	public class LoadingXML extends XMLDocument
	{
		private var _fla:MovieClip;
		
		private var cue:Object;
		private var parameter:Object;
		
		public function set fla(m:MovieClip):void
		{
			_fla=m;
		}
		public function get fla():MovieClip
		{
			return(_fla);
		}
		
		public function LoadingXML(m:MovieClip)
		{
			fla=m;
			this.loadXML();
		}
		private function loadXML():void
		{
			var loader:URLLoader=new URLLoader();
			loader.addEventListener(Event.COMPLETE,completeHandler);
			
			var request:URLRequest=new URLRequest('http://www.flepstudio.org/swf/videos/cue_points/cue_points.xml');
			try 
			{
				loader.load(request);
			} 
			catch(error:Error) 
			{
				trace('Impossibile caricare il documento.');
			}
		}
		private function completeHandler(event:Event):void
		{
			var loader:URLLoader=URLLoader(event.target);
			var result:XML=new XML(loader.data);
			var myXML:XMLDocument=new XMLDocument();
			myXML.ignoreWhite=true;
			myXML.parseXML(result.toXMLString());
			var node:XMLNode=myXML.firstChild;
			var firstLength:int=int(node.childNodes.length);
			for(var i:int=0;i < firstLength;i++)
			{
				cue=new Object();
				var secondLength:int=int(node.childNodes[i].childNodes.length);
				for(var j:int=0;j < secondLength;j++)
				{
					if(j==0)
						cue.time=Number(node.childNodes[i].childNodes[j].firstChild.nodeValue);
					if(j==1)
						cue.type=node.childNodes[i].childNodes[j].firstChild.nodeValue;
					if(j==2)
						cue.name=node.childNodes[i].childNodes[j].firstChild.nodeValue;
					/*if(j==3)
					{
						parameter=new Object();
						var thirdLength:int=int(node.childNodes[i].childNodes[j].childNodes.length);
						for(var z:int=0;z < thirdLength;z++)
						{
							var forthLength:int=int(node.childNodes[i].childNodes[j].childNodes[z].childNodes.length);
							for(var w:int=0;w < forthLength;w++)
							{
								if(w==0)
									parameter.name=node.childNodes[i].childNodes[j].childNodes[z].childNodes[w].firstChild.nodeValue;
								if(w==1)
									parameter.value=node.childNodes[i].childNodes[j].childNodes[z].childNodes[w].firstChild.nodeValue;
							}
						}
						_fla.parameters_array.push(parameter);
					}*/
				}
				_fla.cuePoints_array.push(cue);
			}
			_fla.addCuePoints();
		}
	}
}

Adesso mi creo un file XML in cui scriverò i valori dei cue points :

Vorrei attirare l' attenzione sui 3 tags del file XML

<Time>

,

<Type>

,

<Name>

. Questi 3 tags contengono le informazioni del cue point e saranno vitali per assegnarli al video FLV.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<FLVCoreCuePoints Version="1">

  <CuePoint>
    <Time>4</Time>
    <Type>actionscript</Type>
    <Name>cloud_1</Name>
    <Parameters>
      <Parameter>
        <Name></Name>
        <Value></Value>
      </Parameter>
    </Parameters>
  </CuePoint>
  
  <CuePoint>
    <Time>12</Time>
    <Type>actionscript</Type>
    <Name>cloud_2</Name>
    <Parameters>
      <Parameter>
        <Name></Name>
        <Value></Value>
      </Parameter>
    </Parameters>
  </CuePoint>
  
  <CuePoint>
    <Time>21.5</Time>
    <Type>actionscript</Type>
    <Name>cloud_3</Name>
    <Parameters>
      <Parameter>
        <Name></Name>
        <Value></Value>
      </Parameter>
    </Parameters>
  </CuePoint>
  
  <CuePoint>
    <Time>27</Time>
    <Type>actionscript</Type>
    <Name>cloud_4</Name>
    <Parameters>
      <Parameter>
        <Name></Name>
        <Value></Value>
      </Parameter>
    </Parameters>
  </CuePoint>
  
  <CuePoint>
    <Time>38</Time>
    <Type>actionscript</Type>
    <Name>cloud_5</Name>
    <Parameters>
      <Parameter>
        <Name></Name>
        <Value></Value>
      </Parameter>
    </Parameters>
  </CuePoint>

</FLVCoreCuePoints>

Analizziamo il codice

Classe LoadingXML

Proprietà
una istanza MovieClip a cui assegnare la root che viene passata dalla classe Main.as
private var _fla:MovieClip;
due istanze di Object a cui assegneremo delle proprietà che conterranno i valori dei tags del file XML
private var cue:Object;
private var parameter:Object;

Metodi
completeHandler();
In questo metodo, ciò che avviene di importante è:
assegno ad una variabile di tipo XMLNode la root del file XML
var node:XMLNode=myXML.firstChild;
calcolo quanti figli ha la root del file XML
var firstLength:int=int(node.childNodes.length);
applico un ciclo con massima iterazione il numero dei figli della root del file XML
for(var i:int=0;i < firstLength;i++)
{
creo un nuovo Object
cue=new Object();
adesso calcolo quanti figli ha ogni figlio della root principale
var secondLength:int=int(node.childNodes[i].childNodes.length);
e applico un ciclo con massima iterazione il numero dei figli di ogni figlio della root principale
for(var j:int=0;j < secondLength;j++)
{
quì siamo all' interno del tag XML , quindi assegno una proprietà che chiamo time all' oggetto chiamato cue
if(j==0)
cue.time=Number(node.childNodes[i].childNodes[j].firstChild.nodeValue);
quì siamo all' interno del tag XML , quindi assegno una proprietà che chiamo type all' oggetto chiamato cue
if(j==1)
cue.type=node.childNodes[i].childNodes[j].firstChild.nodeValue;
quì siamo all' interno del tag XML , quindi assegno una proprietà che chiamo name all' oggetto chiamato cue
if(j==2)
cue.name=node.childNodes[i].childNodes[j].firstChild.nodeValue;

Il resto delle righe che sono commentate servono solo per assegnare dei parametri al cue point, che non vediamo in questo esempio e le consiglio solo ad actionscripters avanzati.

inserisco nell' array con nome cuePoints della classe Main.as ogni oggetto creato ( 5oggetti )
_fla.cuePoints_array.push(cue);
adesso che abbiamo caricato tutti i dati, chiamo il metodo addCuePoints della classe Main.as che farà il resto.
_fla.addCuePoints();


Classe Main.as

Proprietà
una istanza pronta della classe LoadingXML che abbiamo appena visto
private var xml:LoadingXML;
due Arrays in cui inserirò: gli oggetti che contengono le informazioni di ogni cue point in cuePoints_array e le classi associate alle 5 MovieClip ( i fumetti ) che ho in libreria
public var cuePoints_array:Array;
public var clouds_array:Array;
una istanza della classe MovieClip
private var cloud:MovieClip;
una istanza della classe Timer
private var timer:Timer;
una variabile numerica ( o istanza della classe Number ) che incremeterò per ' navigare ' tra gli indici degli Arrays e recuperare i dati esatti.
private var id:int=0;

Metodi
init();
imposto una velocità di frame rate
stage.frameRate=31;
inizializzo gli Arrays
cuePoints_array=new Array();
nel seguente Array inserisco i nomi di ogni classe a cui sono associate le 5 MovieClip ( fummeti ) che ho nella libreria
clouds_array=new Array(Cloud1,Cloud2,Cloud3,Cloud4,Cloud5);
chiamo il metodo loadXML();
loadXML();

loadXML();
istanzio la classe Loading XML che caricherà il file XML ecc ecc... passandogli la root
xml=new LoadingXML(this);

addCuePoints();
questo metodo viene chiamato dalla classe LoadingXML una volta che ha caricato tutti i dati dal file XML
creo un ciclo con massima iterazione la lunghezza dell' Array cuePoints_array
for(var i:int=0;i < cuePoints_array.length;i++)
{
adesso utilizzo il metodo addASCuePoint della classe FLVPlayback per aggiungere i cue points al video FLV. Guarda caso, questo metodo richiede un oggetto come parametro, cosa che noi prendiamo dall' Array cuePoints_array ( che contiene l' Object per ogni indice il quale a sua volta ha le 3 proprietà time, type e name , i tre valori di ogni cue point )
player.addASCuePoint(cuePoints_array[i]);
}
chiamo il metodo addingListener
addingListener();

addingListener();
aggiungo un listener al player che sarà in ascolto di ogni cue point che incontrerà durante la riproduzione e chiamerà la funzione go
player.addEventListener(MetadataEvent.CUE_POINT,go );
faccio partire il player
player.play();

go();
una volta che Flash ha intercettato un cue point, fermo il player
player.stop();
chiamo la funzione executeCue che eseguirà del codice in base ai dati del cue point trovati, infatti gli passo il nome del cue point ( m.info.name)
executeCue(m.info.name);

executeCue(s:String);
assegno a cloud, una istanza MovieClip, il valore della classe contenuta nell' indice id dell' Array clouds_array
cloud=new clouds_array[id];
aggiungo allo stage la MovieClip cloud ( che non è altro che mc_cloud_1 che ho in libreria )
addChild(cloud);
chiamo il metodo goNext();
goNext();
tramite il comando switch, seleziono le coordinatex e y da assegnare a cloud in base al nome del cue point trovato
switch(s)
{
case 'cloud_1':
cloud.x=230;
cloud.y=180;
break;

case 'cloud_2':
cloud.x=170;
cloud.y=140;
break;

case 'cloud_3':
cloud.x=170;
cloud.y=140;
break;

case 'cloud_4':
cloud.x=170;
cloud.y=140;
break;

case 'cloud_5':
cloud.x=230;
cloud.y=180;
break;
}

goNext();
utilizzo un Timer che dopo tot tempo chiama il metodo takeOffCloud
timer=new Timer(1500,1);
timer.addEventListener(TimerEvent.TIMER,takeOffClo ud);
timer.start();

takeOffCloud();
questo metodo faripartire la timeline della MovieClip attaccata dalla libreria in modo da creare un fade/out
cloud.play();
incremento id di una unità
id++;

restartPlayer();
questo metodo viene chiamato quando la MovieClip attaccata dalla libreria ( il fumetto per intenderci ) raggiunge il suo ultimo keyframe e faccio ripartire il player
player.play();
rimuovo la MovieClip attaccata dalla libreria
removeChild(cloud);

PS: ognuna delle 5 MovieClip che ho nellalibreria, ha questo comando Actionscript:
stop();
var m:*=this.parent;
m.restartPlayer();
Allego i files sorgente:

[pamed]

Ma scusa..Se volessi cambiare i tempi dei cue points, ovvero farli partire piu' tardi o piu' presto, dove dovrei agire?

[pamed]

Intendo dire che, seguendo il tutorial, verrebbe naturale intervenire sui tag Time nel file xml, ma vedo che facendolo non ottengo nulla, le interruzioni avvengono sempre agli stessi punti....E quindi?

[Onsitus]

Intendo dire che, seguendo il tutorial, verrebbe naturale intervenire sui tag Time nel file xml, ma vedo che facendolo non ottengo nulla, le interruzioni avvengono sempre agli stessi punti....E quindi?

Ciao, da l'esempio allegato, altro cambiare l'url al file .xml in LoadingXML.as, cambiare lurl nel fla nei parametri per il flv (tutti 2 collegati al sito di FlepStudio), modificare il tempo (Time) nel file XML e ripubblicare il tutto, funziona benissimo!

[pamed]

Ciao Onsitus,
grazie per la risposta, finalmente svelato il mistero: non avevo cambiato il percorso in LoadingXML.as, convinto che leggesse il file sul mio disco fisso invece che quello on line.
Perfetto, ora funziona tutto bene, in effetti.
Grazie mille.

[webnicola]

Rispondo a questo post visto che ho usato questo tutorial come punto di partenza.
Ho un video flv "lungo" e vorrei sfruttare i cue points per creare dei capitoli, dei tasti che pigiando mi portino in determinati punti del video.

C'è qualche tutorial dove posso imparare questa cosa? Forse non sono stato bravo a trovarlo!

[Joint1973]

Una seplice domanda?
posso applicare e gestire anche i cue Point ai nuovi formati video .mp4 supportati da flash, o solo se conservo il video in flv/f4v?

[macnemo79]

Ciao a tutti, potete aiutarmi?
Sto cercando di far apparire 2 bottoni entrambi dopo un tot di secondi dalla partenza del video.
Il video dura 35 secondi ed io vorrei che i 2 bottoni apparissero dopo 28 secondi. Ho gia' messo un cue point e l'ho nominato "buttons"
che AS dovrei usare per far apparire a schermo i 2 bottoni?
Grazie.
Andrea