Cue points and Flash CS3

[Flep]

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:

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:

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 , , contained in the XML file. Those 3 tags contain the cue point"s information and are vitals to assign them to the FLV video.

<"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>

Let us analyse the code.

LoadingXML Class
Properties
A MovieClip instance to which is assigned the root passed by the Main.as Class
private var _fla:MovieClip;
2 instances of Object to which we will assign properties containing the XML file tags values
private var cue:Object;
private var parameter:Object;

Methods
completeHandler();
In this method the important things are:
I assign the XMLNode variable, the root of the XML file
var node:XMLNode=myXML.firstChild;
I calculate how many child is in the root of the XML file
var firstLength:int=int(node.childNodes.length);
I apply a cycle with the number of child as a maximum iteration
for(var i:int=0;i < firstLength;i++)
{
I create a new Object
cue=new Object();
I calculate how many child"s child are in the main root
var secondLength:int=int(node.childNodes[i].childNodes.length);
I apply a cycle with the number of child"s child as a maximum iteration
for(var j:int=0;j < secondLength;j++)
{
We are inside the XML tag so I assign a property named "time" to the "cue" Object
if(j==0)
cue.time=Number(node.childNodes[i].childNodes[j].firstChild.nodeValue);
We are inside the XML tag so I assign a property named "type" to the "cue" Object
if(j==1)
cue.type=node.childNodes[i].childNodes[j].firstChild.nodeValue;
We are inside the XML tag so I assign a property named "name" to the "cue" Object
if(j==2)
cue.name=node.childNodes[i].childNodes[j].firstChild.nodeValue;
The following lines are used to assign parameters to the cue points. We will not see them in this example and I recommend them to advanced actionscripters.
I insert into the array named "cuePoints" of the Main.as Class each created objects (5 of them)
_fla.cuePoints_array.push(cue);
now that all the data are loaded, I call the method "addCuePoints" of the Main.as Class.
Main.as will deal with the rest.
_fla.addCuePoints();

Main.as Class
Properties
a ready to use instance of the LoadingXML Class seen first
private var xml:LoadingXML;
two Arrays into which I insert: the objects containing the cue points information placed in "cuePoints_array" and the associated classes to the 5 MovieClips (speech balloons) placed in library
public var cuePoints_array:Array;
public var clouds_array:Array;
an instance of the MovieClip class
private var cloud:MovieClip;
an instance of the Timer Class
private var timer:Timer;
a numerical variable (or instance of the Number Class), increased to go through the index of the arrays and retrieve the exact values
private var id:int=0;

Methods
init();
I impost the frame rate
stage.frameRate=31;
I initialise the Arrays
cuePoints_array=new Array();
in the following Array I insert the name of each classes associated the 5 MovieClip (speech balloons) placed in library
clouds_array=new Array(Cloud1,Cloud2,Cloud3,Cloud4,Cloud5);
I call the method loadXML();
loadXML();

loadXML();
I create an instance of the LoadingXML Class which will load the XML file" passing to it the root
xml=new LoadingXML(this);

addCuePoints();
once all the XML file data are loaded, the LoadingXML Class will call this method
I create a cycle with the length of "cuePoints_array" as a maximum iteration
for(var i:int=0;i < cuePoints_array.length;i++)
{
I will now use the method addASCuePoints of the FLVPlayback Class to add the cue points to the video. This method needs an object as a parameter, object that we will take from the "cuePoints_array" which for each index, contains an Object with the 3 properties "time, "type", "name"
player.addASCuePoint(cuePoints_array[i]);
}
I call the method addingListener
addingListener();

addingListener();
I add a listener to the player which will listen to each cue points reached and call the function "go"
player.addEventListener(MetadataEvent.CUE_POINT,go );
I start the player
player.play();

go();
once Flash has reached a cue point, I stop the player
player.stop();
I call the function executeCue which execute the code based on the data of the cue point"s name (m.info.name)
executeCue(m.info.name);

executeCue(s:String);
I assign a cloud, a MovieClip instance, the value of the class contained in the index "id" of the "clouds_array"
cloud=new clouds_array[id];
I add to the stage the MovieClip "cloud" (which would be the "mc_cloud_1" found in library)
addChild(cloud);
I call the function gonext();
goNext();
using the switch command, I selection the x and y coordinate to assign to the cloud, based on the name of the reached cue point
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();
I use a Timer which will call the method "takeOffCloud" after a tot of time
timer=new Timer(1500,1);
timer.addEventListener(TimerEvent.TIMER,takeOffClo ud);
timer.start();

takeOffCloud();
this method will start the timeline of the MovieClip attached from the library so to create the fade out
cloud.play();
I increase id of one unit
id++;

restartPlayer();
this method is called when the MovieClip attached from the library reaches its last keyframe and I restart the player
player.play();
I remove the MovieClip attached from the library
removeChild(cloud);
PS: each one of the 5 MovieClip placed in library has this Actionscript command
stop();
var m:*=this.parent;
m.restartPlayer();

Source files:

[affirmallchance]

Hello, I appreciate your site, thank you from Korea!

I am confused here:

A MovieClip instance to which is assigned the root passed by the Main.as Class
private var _fla:MovieClip;

Is _fla the main timeline?

Also, what are you doing with the set / get funtions?

Sorry if my questions are too simple, I am new to AS3...

Again, thank you!

[Flep]

Hi and welcome

Yes, _fla is the MainTimeLine.

Anyway, you also can use Event.ADDED_TO_STAGE and you do not need to pass the _fla.

[affirmallchance]

Hi Flep,

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!!!

[edoconnell]

Hello,

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.

Thanks again for a marvelous piece of work.

[shortbus]

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!

[codo]

He Fillipo,

Thanks man!!!

Cor
The Netherlands

[kurdt_the_goat]

Hello

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!

[lilbuckeye]

I have been searching for some code to make something similar with our video.
I want to have the speech bubbles appear at different cue points but I would also like to have them as links that someone can click on to open another browser window.
Any thoughts on how I would modify this code? or examples I could use?

[blackrain]

Hi Flep

Awesome tutorial, just one question though, i need to keep the video flowing and have no pauses when the speech bubble appears. i tried lowering the timer pause but the pausejust got bigger. is there a way to remove the pause.

this affects the soundtrack so i am keen to find a solution.

many thanks fro a great piece of work.

Mark