This is a discussion on Cue points e Flash CS3 within the Articoli e tutorials forums, part of the Flash CS3 e Actionscript 3.0 category; Questo tutorial di sicuro sarà molto apprezzato da chi come me qualche anno fa, passava ore intere cercando con Mr. ...
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:
Code:
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:
Code:
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
Quote:
HTML Code:
<Time>
,
Quote:
HTML Code:
<Type>
,
Quote:
HTML Code:
<Name>
. Questi 3 tags contengono le informazioni del cue point e saranno vitali per assegnarli al video FLV.
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
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?
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!
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.
21-09-07, 08:45
Re: Cue points e Flash CS3
Linear Mode
