This is a discussion on Cue points and Flash CS3 within the Tutorials forums, part of the English Forums category; This tutorial will be certainly interesting for those of you, who like me a few years ago was spending hours ...
This tutorial will be certainly interesting for those of you, who like me a few years ago was spending hours searching Mr Google for articles or tutorials which would explain how to use videos FLV and cue points.
If you are not sure of the potentiality behind the use of cue points, I recommend you to read and follow carefully what I will show you next.
Using cue points, we can synchronise videos FLV and action scripting. To explain myself better, let us think of a video to which we would like to apply effects at a determinate time.
A classic example could be a video, which reproduce an action at each goal of a football match. At the precise moment of the goal, we could add an animation to the video downloaded progressively via Flash. We can attach a MovieClip from the library, call a function, retrieve values and use them in our animation"in brief; we could whatever Actionscript allows us to do inside the video.
Even more, I will use an XML file, loaded naturally in Flash with the XML Class of Flash CS3 , into which I will write the values of the cue points (time, name and type). I will then tell Flash what to do at the precise moment the cue point is reached during the reproduction of the video.
It is a lot easier to do then explain"so let us get into it. Follow me"
I found on the web a cute video to which I will apply the example of the cue points. Maybe the theme of the video is not best-suited but it renders the idea very well.
I convert the video (WMv format to FLV) using the Adobe Flash CS3 video encoder, without adding any cue points.
In this example, I will use 5 cue points, but we can add some more if needed.
I create a FLA and save it as "main.fla", into which:
- I drag on stage an instance of the FLVPlayback component and name it "player" with the following values in the property panel:
The point of this tutorial is to view a carton type speech balloon each time a cue point is reached inside the FLVPlayback component, I create 5 MovieClip in library named "mc_cloud_1 ', ' mc_cloud_2 ', ' mc_cloud_3 ', ' mc_cloud_4 ', ' mc_cloud_5 ' .
To each one of those MovieClip, I add a speech balloon with a simple fade in and out motion tween and some appropriate text to the moment the respective cue point is reached.
Finally, I associate to those MovieClip the correspondent classes (the "old" linkage id used with the method attachMovie in AS 2.0) named Cloud1, Cloud2, Cloud3, Cloud4, Cloud5,
added automatically by Flash (you can read more about it in the article attachMovie and addChild )
Now, we are ready to create 2 AS files, which will run everything smoothly.
First, I create a Document Class, an AS file saved as "Main.as", implemented the following way:
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);
}
}
}
Next, I use the LoadingXML class (already used frequently in other articles on this site), an AS file, implemented the following way:
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();
}
}
}
I will then create an XML file into which I will add the values of the cue points.
I would like you to pay attention to the 3 tags
Thanks for your response. I am very interested in this player you have created and would very much like to understand it well. So I have a few more questions.
QUESTION 1
You have:
private function loadXML():void
in both the Main class and LoadingXML class. I assume they can be named differently since they are both set to private and neither are being called by the other class.
Is this correct?
QUESTION 2
Is there any relationship between these 'm's?
executeCue(m.info.name);
in the Main class
And...
public function LoadingXML(m:MovieClip)
in the LoadingXML class?
These are probably very simple answers but I get confused with how things are connected in different classes especially when they have the same names but are not related with each other.
I hope you can clear this up for me.
Again, thank you Flep and I really appreciate your great site!!!
This is fantastic. I have been trying to make a similar project of mine more modular and this is a huge step towards that, particularly with the ability to create the cue points via XML, which will spare me a lot of time in the future working with some of my teammates who need to move cue points around but are terrified of opening Flash.
One persistent need that I have not been able to figure out is how to have one control pause both the loaded video and whatever swf is currently playing, and then allow them to restart again, also in synch.
Would you happen to have an idea of how this could be accomplished in the context of your project? Even a hint would be greatly appreciated. I have also scoured the internet with Google, looking for answers to this problem, and have come up short.
Just wanted to chip in my thanks for this tutorial. I based an xml-powered movie with corresponding slideshow project on your code here and it worked out great. Thanks!
Thank you very much for this tutorial, i'm very much a flash novice but since you provided the source files i can easily work through your demo, which is more than i can say for plenty of other tutorials on this subject!
I need to make a modification however, but i'm unsure how to achieve it, could you help?
I'm trying to apply the effect to a video of the earth rotating; i want the captions to appear when X country is in view. The difference is, i don't want the video to pause while the captions appear - i just want it to keep going, and the captions to disappear after the set interval like normal.
Is this possible? Your help is greatly appreciated!