How to Use Flash Video (FLV) Cue Points
Video cue points can be used for all sorts of things in Flash. Typical uses involve triggering other activity, such as peripheral movie clips whose animations enhance the video content, or triggering text, such as closed captions. I’ve seen some developers in the Adobe forums even use a cue point to signal that a video clip has reached its end. Strictly speaking, cue points aren’t needed for that last goal (see “How to Determine the Completion of a Flash Video (FLV) File”), but it’s certainly a possible way to go.
If you’re interested in cue points yourself, but don’t know where to begin, let’s dive in.
Getting cue point into a video file
You can either define cue points in a way that “bakes” them into the FLV (Flash video) file itself, or you can associate cue points with a video programmatically. If they’re baked in, you have to re-encode the FLV in order to change them. There are pros and cons to either approach, of course. I generally prefer to have my cue points embedded into the FLV file (the baked-in approach), because the Import Video wizard in Flash allows me to determine cue points visually, rather than having to sit there with a timer, noting cue point times for later use. Here’s a quick look at both techniques.
Embedded cue points
Selecting File > Import > Import Video opens the Import Video wizard. Step through each screen until you get to the Encoding screen. In Flash CS3, you’ll see a Cue Points tab along with the other tabs. In Flash 8, you’ll have to click the Show Advanced Settings button first in order to see the tabs. In both versions, the actual cue points interface is the same. On the left side, you’ll see plus (+) and minus (-) buttons. Click the plus button to add a cue point — but before you do, make sure to first specify where it should appear! Here’s how to do that.
You’ll see a preview of the video itself with a slider knob above a horizontal track. You’ll see a split slider knob beneath the horizontal track. The split knob represents the in and out points of the original video file. Drag the left (in) knob toward the right to trim off excess beginning footage; drag the right (out) knob toward the left to trim off excess ending footage. The span between those split knobs dictates the portion of the video that Flash will actually encode as an FLV file. The knob above the horizontal track can be dragged back and forth to determine where cue points should appear.
Choose a position, then click the plus button. You’ll be able to supply a name in the Name heading. For sake of illustration, let’s name our cue point “caption,” (without quotes) because we’re going to use this cue point as a closed caption. The Time heading is determined by the knob you just dragged. Leave the Type heading as the default “Event.” On the right, you’ll see a second set of plus (+) and minus (-) buttons. These are for optionally adding parameters to any given cue point. Since this is a makeshift caption cue point, let’s provide some text to display when this position is reached. Click plus, then provide a name and value in their respective headings. For Name, let’s choose “text” (without quotes) and for Value, let’s supply “Lorem ipsum dolor sit amet” (again, without quotes, even though the value of this parameter is a string).
When we use ActionScript a bit later to listen for cue points, we’re going to actually reach in to the first cue point and pull out the custom text parameter we just made. We’re going to use that to set a dynamic text field with the parameter’s value, Lorem ipsum dolor sit amet. To clear out this text field a second later, we’ll need to add another cue point and set its text parameter to an empty string. (Note, we could have called this parameter oogabooga: it’s not the name that matters. Obviously, text is a good, descriptive name, but keep in mind that much of what we’re doing is arbitrary.)
Drag the top slider knob rightward along the horizontal track. At a position that represents one second later (or whatever time span you like), follow the same steps to add a second cue point whose text parameter’s value is an empty field. You’ll see a default value of “value” when you click the right-hand plus button; just remove that word and replace it with a pair of empty double quotes ("").
Note: Unfortunately, a tricky thing happens when this second cue point is encountered. When ActionScript sees that empty string (""), it should set the dynamic text field to the same value — that is, an empty string — but in actual practice, it ends up setting the dynamic text field to a pair of visible quotation marks. If you leave the original default value instead, you get the word “value”. Neither of those is desirable, but at least the pair of quotes is shorter, and this quirky behavior will be solved with a bit of extra code later in the tutorial. (Special thanks for Grant for bringing this to my attention!)
Repeat the above steps for as many additional cue points as you like. If you’re not using cue points for closed captions, you won’t necessarily have to pair up each text-filled cue point with an empty string partner. Totally up to you. You could easily use the parameters area to specify which addition movie clip to trigger, or which sound to play … you get the idea.
Flash CS3 features an additional button that allows you to draw from pre-notated cue points in an XML document. You can either adhere to an arbitrary Adobe format or a subset of the TT (Timed Text) format specified by the W3C. Tom Green and I cover both of these approaches in Foundation Flash CS3 for Designers.
Assigned cue points
It may be that you’re simply given a ready-made FLV file. If that’s the case, and if that FLV doesn’t already contain cue points, you can still add them at runtime with ActionScript. The approach you use depends on how your FLV is played. If you’re using the FLVPlayback component, which is pretty likely with recent versions of Flash, you’ll drag an instance of FLVPlayback to the Stage and give it an instance name — we’ll use videoPlayer — then enter the following ActionScript into the Actions panel for each cue point you wish to add:
videoPlayer.addASCuePoint(
1.345,
"caption",
{text:"Lorem ipsum dolor sit amet"}
);
videoPlayer.addASCuePoint(
2.345,
"caption",
{text:""}
);This invokes the FLVPlayback.addASCuePoint() method on the chosen FLVPlayback instance. The two cue points shown match the ones previously added by way of the Import Video wizard: the first parameter is the time (in seconds, with up to three decimal places), the second is the name “caption” (this time with quotes), and the third parameter is the parameters property, which is passed in as an object (the {} brackets, with each parameter its own name:value pair). Note: Quotation marks used with the addASCuePoint() method work the way they should: actual string content should be wrapped in quotes, and so should empty strings. The curly brackets are a shorthand for the expression new Object(), so you certainly could use the following syntax:
videoPlayer.addASCuePoint(
1.345,
"caption",
new Object(
text:"Lorem ipsum dolor sit amet"
)
);… but why not use the shorthand? Note that in the object, as before, our specification of “text” appears without quotes, because it’s an object property, while the value appears in quotes, because it’s that property’s string value. Both are connected by a colon. If you wanted to include more than one parameter, you’d separate them with commas:
videoPlayer.addASCuePoint(
1.345,
"caption",
{
text:"Lorem ipsum dolor sit amet",
color:0xFF0000,
someOtherFlag:true
}
);Note: Syntax for the FLVPlayback.addASCuePoint() method is the same in ActionScript 2.0 and 3.0. If you’re going the route of non-component video, such as the approach described in “How to Load External Video (FLV),” you’ll find that, for better or worse, the NetStream class does not provide a way to add cue points at runtime. You can listen for cue points, but not add them programmatically.
If you happen to be using the old Media components designed for Flash Player 6 and 7, you’ll drag an instance of MediaDisplay or MediaPlayback to the Stage, give it an instance name — again, we’ll use videoPlayer — then enter the following ActionScript for each cue point you wish to add:
videoPlayer.addCuePoint("cue point A", 10);
videoPlayer.addCuePoint("cue point B", 12);This invokes the Media.addCuePoint() method on the instance name of the Media component chosen. Note, with these older components, that only two properties may be provided: name and time (in seconds). Thereis noparameters property, which means captioning could get a bit dicey. Theoretically, you could use the name property (the first parameter, above) to store your captions text.
The Media components also provide another way to add cue points, which is handled through the Component Inspector panel. Select your Media instance, open the Component Inspector panel, and scroll down. You’ll see plus (+) and minus (-) buttons that allow you to add Name and Position parameters, which relate to the name and time properties discussed earlier. Cue points added in this manner are still assigned dynamically, rather than baked in.
Listening for cue points
Regardless how cue points are associated with your FLV — dynamic assignment or actually embedded — they’re retrieved in the same way. The mechanism depends, again, on how the video is played back in Flash Player. As it turns out, the ActionScript 2.0 syntax, both for FLVPlayback and the older Media components, is almost identical. ActionScript 3.0 is only available for FLVPlayback, since the Media components don’t run in AS3. Let’s look at AS2 first.
Component-based, ActionScript 2.0 and 3.0
Here’s the basic structure, right out of the Help docs. I’m using my own personal convention for variable names.
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
// instructions here
}
videoPlayer.addEventListener("cuePoint", listener);Again, this works for FLVPlayback and the Media components, with the caveat that the Media.cuePoint event is only available in Flash Player 7 or higher. FLVPlayback requires Flash Player 8 or higher.
In the first line, an arbitrarily named variable, listener, is declared and set to an instance of the Object class. The :Object part after the word listener indicates to Flash that this variable is of type Object; and in fact, boom, there it is: new Object(). In truth, everything in ActionScript is an object — arrays, dates, movie clips, you name it — but the Object class gives you a basic, generic starter kit … an Object object. Instances of the Object class typically used for holding custom data, but in this case, the listener object is going to act as a liaison between the FLVPlayback or Media component and the cuePoint events it’s listening for.
The second line assigns a function to the cuePoint property of our listener object. Because it’s just a generic object, it has no built-in cuePoint property. We’re creating it with this line, and setting it to a function that receives a single parameter, here referenced by the arbitrarily named variable evt (short for “event”). Whatever we want triggered by the cue point is set in the part that currently reads “instructions here” — more on that in a moment.
Finally, the FLVPlayback or Media component is subscribed to the “cuePoint” event by way of the listener object. This happens via the instance name given to the component, which happens to be videoPlayer.
The difference between FLVPlayback’s and Media’s implementation of this outline happens with the incoming parameter, here named evt. With FLVPlayback, the parameter features an info property that points to the data carried by the cue point. What data are we talking about? Pretty simple: they’re the name, time, type, and optional parameters properties specified earlier. To access these, you’ll reference the incoming parameter’s info property, then reference the desired property beneath that. To populate a text field with our caption string, for example, the following would suffice:
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
tfCaptions.text = evt.info.parameters.text;
}
videoPlayer.addEventListener("cuePoint", listener);This assumes a dynamic text field with the instance name tfCaptions. The evt parameter (which carries with it the cue point’s data) is referenced by way of its variable name, then the info property, and finally the text property of the parameters property. To grab the cue point’s name (these were all named “caption,” remember), it would look like this:
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
tfCaptions.text = evt.info.name;
}
videoPlayer.addEventListener("cuePoint", listener);… but that would be silly, because the text field would always read “caption” from the first cue point onward. In the example that references parameter.text, the first cue point would put “Lorem ipsum dolor sit amet” into the text field, and the second text field would replace that sentence with “” (an empty string). To grab the cue point’s time, you’d use the expression evt.info.time. Pretty straightforward.
Now, remember that quirky behavior described earlier? — with the double quotes, when added via the Import Video wizard? To avoid seeing actual quotes in your tfCaptions text field, use an if statement to check if the value of evt.info.parameters.text is literally a pair of quotes. If so, set the value of tfCaptions to a blank string by hand. To do that, your if statement will have to check for a quoted pair of escaped quotes. Here’s what that could look like:
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
if (evt.info.parameters.text == "\"\"") {
tfCaptions.text = "";
} else {
tfCaptions.text = evt.info.parameters.text;
}
}
videoPlayer.addEventListener("cuePoint", listener);For the Media components, you still reference the incoming parameter (here, evt), but there is no info property. The cue point’s name is simply cuePointName and the time is cuePointTime.
e.g.
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
tfCaptions.text = evt.cuePointName;
}
videoPlayer.addEventListener("cuePoint", listener);Remember, Media components don’t have the parameters property, with its optional sub-properties. You could give each cue point its own name and have that be the string used for captioning, but I haven’t tested how long a string such a property would accept. It works for short phrases.
If you don’t want to populate a text field, you could fill the event handler function with whatever ActionScript makes sense to you.
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
evt.target._parent.play();
}
videoPlayer.addEventListener("cuePoint", listener);Interesting. What’s that? What’s this target property? Both the FLVPlayback and Media versions feature a target property. In this context, target points to the component that dispatched the event in the first place. Since both FLVPlayback and Media are ultimately based on movie clips in ActinScript 2.0, the expression evt.target here ultimately points to a movie clip. The MovieClip class features a _parent property, which points to the timeline that contains a given movie clip. So if your incoming parameter is named evt (your choice), then the expression evt.target._parent points to the timeline that contains the FLVPlayback or Media component. You might have other ActionScript that pauses the timeline (stop()), and the above code, every dispatched cue point would set the timeline rolling again.
Maybe you’ve got a reason to categorize cue points into groups. Depending on the group to which the cue point belongs, you’d like to tell a particular movie clip to go to and play certain frame label. Assuming that movie clip has the instance name additionalContent:
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
if (evt.info.parameters.category == "A") {
additionalContent.gotoAndPlay("the A label");
}
if (evt.info.parameters.category == "B") {
additionalContent.gotoAndPlay("the B label");
}
if (evt.info.parameters.category == "C") {
additionalContent.gotoAndPlay("the C label");
}
}
videoPlayer.addEventListener("cuePoint", listener);In this case, a switch statement would do just as well:
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
switch (evt.info.parameters.category) {
case "A":
additionalContent.gotoAndPlay("the A label");
break;
case "B":
additionalContent.gotoAndPlay("the B label");
break;
case "C":
additionalContent.gotoAndPlay("the C label");
break;
}
videoPlayer.addEventListener("cuePoint", listener);Sky’s the limit.
If you’re using ActionScript 3.0, the basic structure goes like this:
import fl.video.MetadataEvent;
videoPlayer.addEventListener(
MetadataEvent.CUE_POINT,
function(evt:MetadataEvent):void {
// instructions here
}
);AS3 doesn’t require a liaison object. Just invoke the EventDispatcher.addEventListener() method on the FLVPlayback instance (again named videoPlayer). The FLVPlayback class inherits from the EventDispatcher class, which makes all its own class members available to FLVPlayback. You’re listening for the MetadataEvent.CUE_POINT event, which makes you’ll have to import the fl.video.MetadataEvent class. This is one of the relatively rare times when the import statement must be used in timeline code (in AS3, it’s always required in code that appears in external text files). The stated event is your first parameter of the addEventListener() method; the second parameter is a function, which lets you perform whatever you’d like. The info property, as before, provides access to your cue point data:
evt.target points to the FLVPlayback instance
evt.info.name points to the cue point’s name
evt.info.time points to the cue point’s time
evt.info.parameters points to the cue point’s optional parameters
Non-Component-based, ActionScript 2.0 and 3.0
If you’re using the NetStream class and a Video object, the object that listens for cue points becomes your NetStream instance. No liaison listener object is required, and the incoming parameter has no info or target properties. This is all very much more direct:
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
videoPlayer.attachVideo(ns);
ns.onCuePoint = function(evt:Object):Void {
trace(evt.name);
trace(evt.time);
trace(evt.parameters);
}
ns.play("videoFile.flv");The first several lines are taken directly from “How to Load External Video (FLV),” and the final bit attaches a function directly to the NetStream.onCuePoint event of the NetStream instance, here named ns. You have as much leeway inside the function as you had with the FLVPlayback/Media approach, except there is no target property to refer to the Video object — because, in this case, it’s the NetStream instance that raises the event.
In ActionScript 3.0, the first block of code is slightly different from the one shown for AS2. For the most part, it should look familiar. Read carefully and you’ll see that much of it overlaps. A full explanation merits its own article, but the following sample code should at least get you started:
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
videoPlayer.attachNetStream(ns);
var listener:Object = new Object();
listener.onMetaData = function(evt:Object):void {};
listener.onCuePoint = function(evt:Object):void {
// instructions here
trace(evt.name);
trace(evt.time);
trace(evt.parameters);
};
ns.client = listener;
ns.play("videoFile.flv");Ironically, the ActionScript 3.0 version reverts back to a liaison object scenario. This is one of the very few times AS3 strays from its overhauled event handler system, which is otherwise 99.9% consistently dependent on EventDispatcher.addEventListener(), as already seen. (I made up the 99.9% figure, of course, but we’re talking darned near.)
After the initial few lines, which are practically the same as their AS2 counterpart, a listener variable is declared and set to an Object instance. There are two event handlers defined. The first is for the NetStream.onMetatData event, and the function doesn’t do anything. This may seem odd, but it’s just a quick-and-dirty way to work around FLVs that happen to have metadata embedded in them. If you don’t handle the event, you’ll see an error message, so this “handles” the event without actually doing anything. The key is the NetStream.onCuePoint function, which (as always) does whatever you program it to do. The incoming parameter, again named evt, points directly to name, time, and parameters properties, which work as illustrated earlier.
Finally, the NetStream instance is subscribed to the listener via the NetStream.client property, and the video file is instructed to play.
November 8th, 2007 at 1:10 pm
If i load a FLV file from a xml list can i play the video from the middle ?
i.e if the flv file length is 2 mins can i start the playback from 1:10 secs ?
November 8th, 2007 at 1:18 pm
mahen,
If you’re loading your video from a true streaming server, such as Flash Media Server, you can start your FLV from any video frame you like (doesn’t even have to be a video keyframe). Unless FMS is in your project’s budget, though, you’ll be using progressive download, and unfortunately, progressively downloaded FLVs can only be sent to video keyframes that have already loaded.
So technically, the answer to your question is yes, but the qualified practical answer is, “Sure, but you’ll have to load the video fully first.” Once the file has been downloaded and cached, you can use the
NetStream.seek()method to send the video to a specified number of seconds in (and it’ll actually go to the nearest keyframe to that specified time).November 8th, 2007 at 2:04 pm
Hey David,
Thank you for a swift reply.. just one more thing .. is it possible to load video’s/ flv based on time .. i.e
• 3 video files
• Play video 1 @ 2 am
• Play video 2 @ 3 am
• Play video 3 @ 4 am
Appreciate your help
November 8th, 2007 at 2:10 pm
mahen,
You bet! To check the current time (according to the user’s computer), use the
Dateclass. Once you instantiate the class, you’ll have an object that features all the properties, methods, and events defined by that class. In the case ofDate, that includes methods likegetHours().In fact, check out the
getHours()entry in the ActionScript 2.0 Language Reference, and you’ll even see sample code that shows how to distinguish AM from PM. When it comes time to play one of your videos, you’ll use anifstatement.November 8th, 2007 at 2:17 pm
Thank you .. will try it out
November 13th, 2007 at 4:45 pm
What if I wanted the cpListener to trigger a new function at each new cue point. Lets say I have 12 cue points and I want something different to happen at each one of them. How do I tell the listener to change the function it calls at each cue_point?
November 13th, 2007 at 9:09 pm
Chase,
That’s where your cue point parameters come in. The function assigned to the
onCuePointevent doesn’t need to change, because you can use aniforswitchstatement in that function to call other functions as necessary.Does that make sense?
November 14th, 2007 at 5:39 pm
Were do you place the code?
November 14th, 2007 at 6:17 pm
I cant get this to work no matter what I do. I am so frustrated. What my main goal is actually, which Im not sure I can even do, is to trigger action script code at certian points during my flv playback.
I have flash movies that I want to track with omniture code. They provided the code for me to place at the beginning, end, and various points during my movie. That would work fine if I had the movies embeded on timelines. But I want to track a flv, so I figured if I can trigger the code using cue points it would work the same way. However I cant get anything to work with cue points!!!
November 14th, 2007 at 6:35 pm
Ok, I got the text to display. I did not have the video component named videoPlayer. But stll, any way to trigger action script the same way? Thanks a lot in advance.
November 14th, 2007 at 7:50 pm
Philip,
The code goes in a keyframe of one of your timelines. Typically, I use the main timeline and put all my code into a layer dedicated just for scripts.
I hear ya! It’s always tough until the concepts sink into place. I can see from your next comment that you gave the Video object the instance name it needs.
Sure thing. In fact, you’re already triggering ActionScript by updating a text field. But I think what you’re asking is, “Can I trigger custom functions using cue points?” and the answer is yes. In the function that acts as your
cuePointevent handler, instead of setting the property of a text field or invokinggotoAndPlay()on someMovieClipinstance, as shown above, you can simply reference functions — whatever functions you please.In my answer to Chase (just above yours), for example, I showed how to take a particular course of action based on cue point parameters. Where it says “do one thing” and “do some other thing,” you could trigger your own custom functions.
November 15th, 2007 at 9:21 am
David,
This is the code I am using currently and preceding it is the error message I am getting. I want to add more to what occurs after the cuepoint is hit, but for now I just need to get this working. What is wrong?
1118: Implicit coercion of a value with static type Object to a possibly unrelated type Function.
stop();
import fl.video.MetadataEvent;
var listener:Object = new Object();
var buttonBlinker:GlowFilter = new GlowFilter();
buttonBlinker.color = 0xFFFF00;
buttonBlinker.blurX = 15;
buttonBlinker.blurY = 15;
buttonBlinker.quality = BitmapFilterQuality.HIGH;
buttonBlinker.strength = 6;
listener.onCuePoint = function(evt:Object):void
{
if(evt.info.parameters.name == “setup”)
{
setup_mc.filters = [buttonBlinker];
}
}
myVideo.addEventListener(”cuePoint”, listener);
November 15th, 2007 at 9:34 am
David,
Sorry I was mixing AS2 and AS3. Got it sorking to some extent but I am still having trouble targeting the parameter name.
November 15th, 2007 at 9:43 am
Chase,
In the expression
evt.info.parameters.name, you would have had to have given this particular cue point a parameter whose name wasname, along with with some value. This is not the same thing as the cue point’s name itself (evt.name) — not sure if that possible confusion is coming into play.In order to see what all the available parameters are for a given cue point, you could try this:
November 15th, 2007 at 10:14 am
Okay, I thought the == operator pointed to the parameter name and .name was a way of targeting that. Thanks!
November 15th, 2007 at 11:30 am
Thanks David for all your help and quick response. I cant tell you how much I appreciate it. Many people are not nice enough to offer such precise, quick help. I’ll give this a try later today and let you know how I make out. Thanks so much again.
November 15th, 2007 at 1:39 pm
To Chase …
Way to go!
To Philip …
Thanks, man.
Good luck with that.
November 15th, 2007 at 3:11 pm
David,
This is the code I am experimenting with
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
evt.target._parent.play(ball_mc);
}
videoPlayer.addEventListener(”cuePoint”, listener);
It basically just makes a ball move when the video passes the cue point. But what if I wanted a different movie clip to play at 4 different cue points? Like a red ball for cue point one, a blue ball for cue point two and so on.
Then, eventually what I plan on doing is placing my Omniture code on each movie clip. You see, I have code that Omniture gave me for different spots in the movie. Like begining, 25% played, 50% played, 75% played and the end. Basically it sends data to Omniture when the code is triggered on the time line. So I think if I have it in each movie clip being triggerd with cue points it will work the same way.
Ideally I’d like to just trigger the omniture code at 6 different cue points without having to put them in movie clips. But I dont think I can figure that out. Here is the code, which would be easy enough to place on a time line if my movie was extended across a time line:
s.addEventListener(”loaded”,this,”onActionSourceLoaded”);
function onActionSourceLoaded() {
/* Specify the Report Suite ID(s) to track here */
s.account = “”;
/* You may add or alter any code config here */
s.pageName = “”;
s.pageURL = “”;
s.charSet = “ISO-8859-1″;
s.currencyCode = “USD”;
s.autoTrack = true;
s.debugTracking = true;
s.products=”;;;;event9=25.00″ //20% since last milestone
/* Turn on and configure ClickMap tracking here */
s.trackClickMap = true;
s.movieID = “”;
/* WARNING: Changing any of the below variables will cause drastic changes
to how your visitor data is collected. Changes should only be made
when instructed to do so by your account manager.*/
s.visitorNamespace = “”;
s.trackingServer = “”;
s.dc = 122;
}
s.loadActionSource(”OmnitureActionSource.swf”);
November 15th, 2007 at 3:42 pm
Philip,
One of the problem with this expression …
evt.target._parent.play(ball_mc);… is that the
MovieClip.play()method doesn’t accept parameters, so I’m not sure exactly what you’re aiming for. My hunch is thatball_mcis the instance name of the ball, but that might even be the Library name, which ActionScript can’t really use. Let’s say, for sake of illustration, that you have a ball in your Library, and the asset’s name is ball_mc. When you drag ball_mc to the Stage, you’ve just created an instance of that movie clip. You can drag as many instance to the Stage as you please, and they’ll all operate independently. You can tint one of them blue or green; you can scale one of them larger than the rest, etc. The Library asset doesn’t change, but individual instances do. (On the other hand, if you update the Library asset, then all instances will automatically reflect that change.)So … in order for ActionScript to know which instance you mean, you need to give your movie clips instance names (see the Property inspector for that). The instance name gives ActionScript a unique way to identify each instance. Let’s say you give one of these balls the instance name
ball_blue.In your code snippet, you’re using
_parent, so that clues me in to the conclusion that you’re using ActionScript 2.0. Either way, though — AS2 or AS3 — theNetStream.cuePointevent doesn’t carry with it atargetproperty. If it did, then the expressionevt.target._parent.play();might be a meaningful object reference. The first part of that expression (evt.target._parent) might refer, for example, to the parent timeline of the object that dispatched the event. In other words, the Video object dispatches an event; the event carries atargetproperty, which refers to the Video object; the Video object might support a_parentproperty, which refers to its parent, the timeline its in. That timeline is aMovieClipinstance, which means you can invokeMovieClip.play()on it … BUT, that’s not what’s going on here. In this case, theNetStreaminstance,ns, is dispatching the event.nsdoesn’t have a_parentproperty, so it can’t point to the timeline it’s in. You follow?If the instance name of your ball happens to be
ball_blue, then something like this might make sense:(Notice there is no
addEventListener()method here, in either AS2 or AS3. The video-related event handlers are a bit wacky in the regard for AS3 projects.)If you add a parameter to each cue point called, say,
color, then you could choose which ball to instruct based on that parameter:or
November 15th, 2007 at 4:11 pm
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
evt.target._parent.play(ball_mc);
}
videoPlayer.addEventListener(”cuePoint”, listener);
This code did in fact work. My movie instance name was in fact ball_mc and it worked. When it passed a cue ponit the ball would move. But I had 3 other movie clips I wanted to play at different cue points so I have been trying that and thats what I cant get to work. I made a new move, have 3 ball movie clips named ball_red, ball_blue, ball_green and I used your code:
ns.onCuePoint = function(evt:Object):Void {
if (evt.info.parameters.color == “red”) {
ball_red.play();
}
if (evt.info.parameters.color == “green”) {
ball_green.play();
}
if (evt.info.parameters.color == “blue”) {
ball_blue.play();
}
}
I have paremeters set for my 3 cue points named color with the values blue, green and red. I just dont get it. It seems like it should work.
November 15th, 2007 at 4:25 pm
Philip,
Woops! My apologies, man. For some reason, I had it in my head — totally wrong, obviously — that you were using a non-component approach. I see now that you’re using FLVPlayback, in which case, absolutely, the
addEventListener()method is correct.Yup.
So
evt.target._parentin that case actually does refer to aMovieClipinstance (the main timeline, probably), andplay()can be invoked on it. That said, neither theMovieClip.play()method nor the stand-aloneplay()function accepts a parameter, so you can drop theball_mcreference in that area.Now that I see a bit more clearly now, I would say you’re telling the main timeline to play — assuming your FLVPlayback instance is sitting in the main timeline — because that’s what the
evt.target._parentexpression points to. I can’t quite picture, then, where your ball movie clips are, but if you want to instruct them directly to play, you’ll have to reference them via their instance names. Ifball_redis also in the main timeline, for example, the following expression would do it:evt.target._parent.ball_red.play()Does that make sense?
November 15th, 2007 at 4:40 pm
I just cant get this to work. I tried your code and no luck. Im losing it over here! I always felt like a had a pretty good grasp on flash. I can figure out how to do most things with a little research. I undertand the basic concepts. But this cue point stuff is nuts. I dont even understand the code Im looking at at all. I think I just need to start from scratch again.
November 15th, 2007 at 4:44 pm
Like I said, I understand the basics of flash and I’ve created some complex stuff with some research but I always feel like Im learning bits and pieces of just what I need to do and I really dont understand things as a whole. Can you recommend a good book, or site where I can just start from a very basic level with AS and build may way up to advanced. I want to become the best programmer I can be. But between flash and the stuff I try to learn about web design and programming it all just seems so overwhelming. Sometimes I wish I just could be a strait graphic designer and just use Photoshop and Illustrator and stuff like that. lol.
November 15th, 2007 at 5:44 pm
I got it to work using different code. I have 3 ball movie clips that I wanted to move at three different cue points and this eems to work.
//
// Array of balls
//
var nextBallIndex:Number = 0;
var balls:Array = [ ball1, ball2, ball3 ];
//
// Listen for cuePoint events on the FLVPlayback component
//
myFlvPlayback.addEventListener ( “cuePoint”, this );
//
// Event handler: cuePoint
//
function cuePoint ( eventObj:Object )
{
var nextBall:MovieClip = balls [ nextBallIndex ];
nextBall.play();
nextBallIndex++;
}
November 15th, 2007 at 9:51 pm
Philip,
Hey, glad to hear you got it! What you’ve done here is to choose the ball movie clips from an array, rather than embedding ball information into the cue points themselves — totally a fine way to go. In this case, you’re choosing to forego the event’s properties as accessed from that
eventObjparameter.November 28th, 2007 at 10:24 pm
David I found your how to make cue points in a flv file very helpful. Though can you help me out as far as, once I have the video clip in a flash document, what codes can I use to locate all the cue points and tell them to stop then play after reaching each cue point. I would like to be able to stop the video at a cue point, create a button and then go back and be able to play the video again.
November 29th, 2007 at 9:26 am
Samantha,
The exact code you’re going to need is dependent on which approach you’re using to display the video (FLVPlayback, Media component(s), Video object), but all you really have to do is instruct your
cuePointhandler to invokepause()on your video player (all approaches do share that method), then eitherpause()again orplay()with your button, depending on your circumstances.The way cue points work, you wouldn’t need to know the whole list beforehand. Does that make sense?
December 7th, 2007 at 4:23 pm
Hi David,
Thanks for your extremely informative blog! It’s a great help to a newbie Flash programmer like me. (And I realized as I was reading it that you wrote the book I’m using!)
Now, for my question.
(I fear that my question is actually answered in your post, but I need to clarify a few things.) I am using an FLVPlayback component and I want to create a button that would allow a user to jump to a certain point in the video if the video is stopped. The FLV was given to us already encoded, so we can’t embed the cue points. Is this possible to do this if I’m using the FLVplayback, and if so, where do I begin? I’ve tried many different things to no avail.
Thanks for your help!
December 10th, 2007 at 10:44 am
Carrie,
Thanks for buying Foundation Flash CS3! I hope you’re enjoying it. Tom and I put some work into making the sample files fun, as well as useful — it was certainly a fun book to write.
As it turns out, your question isn’t necessarily spelled out in this particular cue points article, though you could certainly use cue points as navigation elements in your video. I don’t know what version of ActionScript you’re using, so you’ll have to check the appropriate ActionScript Language Reference (2.0 or 3.0), but take a look at the
FLVPlaybackclass to find specifics onseekPercent(),seekSeconds(), or the handful of methods that involve cue points, starting withseekToNavCuePoint().In this case, these methods pretty much do what their names describe: they seek to a percentage (take me halfway through the video [50%]), a number of seconds (take me two minutes in [120 seconds], or to navigation cue points. Navigation cue points are very like the ones described in the above article; it’s just that they’re made for seeking inside the video, rather than for alerting ActionScript to take action outside the video.
Keep in mind that you can’t seek to a spot in a progressively downloaded FLV unless that portion of the video has already loaded. That said, you’ll want to name your FLVPlayback instance by its instance name and invoke one of the seek methods on it. The code that handles the button event depends on whether or not you’re using AS3:
Note that the
FLVPlayback.addASCuePoint()method allows you to add navigation cue points at runtime, which means it doesn’t matter of the already-encoded video file already has cue points.December 17th, 2007 at 11:38 am
G’day David,
Just have a question - i am just in the midts of a solution for a client. They have a requirement for staff to watch videos (FLV) and take a quiz at the end for inhouse training.
Before, i get into this - is it possible to use a cue point to stop the flv and then load a few quiz questions for them to answer to be able to contiue.
I need to do this for retention sake and i am hoping to handle buffering issues with various conections with this method to.
Thanks,
Gavin
December 17th, 2007 at 4:41 pm
Gavin,
You can indeed use cue points to stop an FLV file (even the FLV that dispatches the cue points), as well as trigger a quiz that when finished resumes the video.
December 18th, 2007 at 9:55 am
Thanks for the information mate!
Gavin
January 3rd, 2008 at 3:04 am
Anyone have a problem with Projector showing Blank screen when adding FS Command FullScreen?? My .flv and skin just disappear - Please I’m losing faith…
January 3rd, 2008 at 10:05 am
HIPPY,
Something’s got to be causing that. Do you still lose the FLV and SWF (the skin) if you remove the FSCommand?
January 18th, 2008 at 2:12 am
We’re working on an AS3 application that listens to an FLV w/ embedded cuepoints to trigger jump-to-marker events. (ie when cuepointX is hit, goto and play markerX) This allows us to precisely sync FLV video/audio w/ Flash animations. The approach is working well but we’ve realized that if we could define these cuepoints as XML data instead of embedding them into the FLV, we could fine tune the timing without needing to re-encode the FLV every time we need a revision. We’ve tried this approach using a timer that “listens” for the XML defined timing of the cuepoint but the timer does not perform consistently enough to be a useful approach. Is there a better way to handle this? Is it feasible to do precise timing w/ XML defined cuepoints?
January 18th, 2008 at 9:45 am
David,
The thought that immediately jumps to my mind is this: along with the cue points, include the path to the FLV file in your XML document. Load the XML, and when it arrives, use the loaded data to a) summon the relevant FLV and b) loop through the cue point data and use
addASCuePoint()to assign actual cue points.That said,
addASCuePoint()is a method of theFLVPlaybackclass, which means it only works with the FLVPlayback component. If you’re using a Video object, I would say a timer is your best bet. You might want to check out my “Handling audio cue points” article for some ideas (the article features aSoundSynchclass for AS2 and AS3). On the other hand, the increased footprint of FLVPlayback might just be worth the benefit ofaddASCuePoint(). If you needed to, you could use the component without a skin and still control it via custom controls (or no controls, which would look just like a Video object).January 28th, 2008 at 11:42 pm
hi i have some problem with action script i am using UI component in flash cs3 for scrolling, and i want to play a video in the root but it is not playing please help me in this.
my_mc1.btn_1.addEventListener(MouseEvent.CLICK, gotoAuthorPage);
function gotoAuthorPage(event:MouseEvent):void
{import fl.video.*;
var my_FLVPlayback = new FLVPlayback();
addChild(my_FLVPlayback);
my_FLVPlayback.x = 116;
my_FLVPlayback.y = 5;
my_FLVPlayback.skin = “SkinUnderPlayStopSeekMuteVol.swf”
my_FLVPlayback.source = “Video1.flv”;
}
please let me know your email id so i can send u my file to solve the problem
Thanks & Regards,
Balakrishna.
January 29th, 2008 at 9:06 am
Balakrishna,
I do occasionally look at source files from people, but I’m afraid I can’t afford to do it often. I literally receive dozens of help requests every week, and while I try to help as often as I can, every question does take time!
In order for your code to work, you’ll have to put a copy of the FLVPlayback component into your Library. To get it there, you can drag an instance to the Stage, then delete it from the Stage (it’ll stay in the Library unless you purposefully delete it from there, too). With that component in your Library, the code works just fine. Personally, I would arrange the lines like this:
… in which the
importstatement is at the top, and theFLVPlaybackinstance isn’t added to the display list (addChild()) until after the configurations have been made.January 30th, 2008 at 12:22 am
Hi David
I am trying to figure out event cue points and how to write AS to trigger movie Clips. I am sure this subject is getting old for you LOL.
Could you provide a simple explanation on how to write the code. I have 5 event cue points in my FLV. I want each cue point to play a movie clip. The movie clip will play then go away then the next one and so on. at the end of the video I would like to go to scene 2 which I set a cue point for as well.
Any help will be greatly appreciated.
Thank you for your time.
Dave L
January 30th, 2008 at 9:13 am
David,
The article itself actually has an example or two that should get you started, but I’ll be happy to clarify. In order to do that, though, I’ll need to know a few things from you: a) what version of ActionScript are you using? b) what mechanism are you using to display your video (FLVPlayback, Video object), c) are you including any parameters information in your cue points?
January 30th, 2008 at 12:20 pm
Hi David,
Thank you very much for your help. I am as far from a programmer as you can get.
I am using AS 2.0, FLVPlayback. No I did not include any parameters in the cue points.
Thank you again.
Dave L
February 1st, 2008 at 12:07 am
Thank you David, but I’m afraid my doubt still remains the same.
I know using the FLV Playback component. Thing is that I used the UIScroll pane component for scrolling the thumbnail buttons. Next, when I click the buttons the relevant FLV gets displayed in the Scroll pane component itself, which actually I want to get displayed on the stage. So, please help me out with this issue. Once again thanks for the timely response.
February 1st, 2008 at 10:03 am
To David …
If the cue points don’t carry any parameters, then each will essentially be identical except, naturally, for the time in which it occurs. Makes sense, right? You could, for example, use a parameter to instruct each cue point what movie clip it should manipulate, but if the parameters are empty, you’ll have to store that information somewhere else. An array (a list) would work.
So at this point, you have a variable,
mcs, that holds an array of references. This array holds the instance names of three movie clips.Now you’ll need a way to keep track of which movie clip you’re referring to currently.
Arrays start at zero, so the expression
mcs[currentClip]&mdash at the moment, anyway — refers toclipA.Now, you’re going to use the suggested AS2 code for FLVPlayback from the article to listen for cue points. The function is going to make a reference to the expression we just looked at, which will tell that particular clip to play. Then it will increment the value of
currentClip:In order for the above code to work, you’ll have to have four movie clips — one for each cue point — with the instance names
clipA,clipB,clipC, andclipD. At some point along the timelines of each of those clips, you will have presumably put astop()action in their keyframes. The cue point listener will refer to each clip in turn and invokeMovieClip.play(). To make each clip “go away,” you could leave the last keyframe of each clip blank (no artwork) and put anotherstop()in that last keyframe. Does that make sense?Finally, to respond to the end of the video, you could either add a fifth cue point and account for that in your listener:
Or use the technique described in “How to Determine the Completion of a Flash Video (FLV) File (AS2).”
To Balakrishna …
It sounds like you have two scroll panes, one for thumbnails and one for the video. Let’s say, for sake of example, that your ScrollPane instances have the following instance names:
scrollButtonsandscrollVideo. Take a look at the following code:If I can assume that
my_mc1is the movie clip that still holds your buttons — this is the reference you had before (my_mc1.btn_1) — then you’ll have to load that movie clip into the appropriate ScrollPane. You can do that by using the Parameters tab of the Property inspector or ActionScript. Once that movie clip is loaded into the ScrollPane, it can be reference via that object’scontentproperty, as seen in the above snippet (scrollButtons.content.btn_1). From there, theCLICKhandler is handled as before. The only difference is that, instead of adding themy_FLVPlaybackinstance to the display list, you add it to theScrollPane.sourceproperty of thescrollVideoinstance).February 2nd, 2008 at 12:32 am
Hi David,
Once again I thank you for your concern on this topic.
I don’t have two scroll pane components. Let me explain the thing. I have an FLV play back component on the stage with ‘my_FLVPlayback’ instance name . Next, I have a scroll pane component on the other layer with the instance name ‘my_Sp’. I have linked the thumbnails movie clip ‘my_mc’ with the help of parameters tab of the scroll pane component. Now, I have the flvs in the same folder where I saved this fla.
Help me with the relevant Actionscript 3.0 so that when I click the thumbnails in the scroll pane the movie gets displayed in the flvplayback component on the stage. If you permit me, I shall give you the link of my files on the server.
Thanks and regards,
Balakrishna.
February 2nd, 2008 at 8:47 pm
Balakrishna,
Aha. If your FLVPlayback instance is already on the Stage, as well as your ScrollPane instance, then all it takes is this:
February 2nd, 2008 at 9:09 pm
Hi David,
Ok I did that and the movie clips do not come up. Allow me to ask some really stupid questions.
Where should the AS for the cue points go? The stop action for the movie clips should go on the first frame correct? What should the intance name for the FLVPlbk be?
Sorry for the dumb questions but I am completly lost.
Thanks
Dave
February 3rd, 2008 at 6:23 pm
I have been on the same problem for over 2 days now and am now running super close to a deadline. Any help is so greatly appreciated you don’t even know!
I have my flv on a FMS and am using a netConnection and netStream then attaching the video to a Video Object that is on the stage.
The cuePoints all shoot off while it is buffering and become meaningless because they then do not sync with anything that is actually playing… Any info on how to make them line up with the video while it is actually playing would be AWESOME!
Thanks so much! code below:
function initConnection() {
nc = new NetConnection();
nc.onStatus = function(info) {
if (info.code == “NetConnection.Connect.Success”) {
startStream(”AppFolder/StreamName”,1); //Inizialize the stream
}
};
nc.connect(”rtmp://stream.my_server.net/ondemand/flash/”);
}
function startStream(stream_name:String) {
startBufferLength=4;
_ns = new NetStream(nc);
_ns.setBufferTime(startBufferLength);
_ns.play(stream_name, 0);
_ns.onCuePoint = function(infoObject:Object){
//– These Go Off While The NS Is Still Buffering –//
trace(”cuePoint: ” + infoObject.name);
trace(”cueTime: ” + infoObject.time);
}
v1.attachVideo(_ns);
}
initConnection();
stop();
February 3rd, 2008 at 8:54 pm
To Dave …
The way I envisioned this, 99% of the code is in frame 1 — the FLVPlayback component is there, and so are the movie clips, and then all the code except for a single
stop()in frame 1 of each of the movie clips’ own timelines, then anotherstop()in the last frame of each of the movie clips’ own timelines. Of course, I realize this may not be how your own project is set up, but my hope is to convey the basic building blocks of what needs to happen.The instance name of the FLVPlayback component should be
videoPlayer. In my suggested code, your movie clips must also be given instance names:clipA,clipB,clipC, andclipD. Now, it may just help if you build up to the whole shebang in small steps. For example, you should definitely experiment in a new FLA file with nothing more than the FLVPlayback component and a cue point event handler, all in frame 1:Point the FLVPlayback component to your FLV, and that alone should at least get you rolling. In response to cue points, you should see the message “Cue point!” in the Output panel as the video plays. Assuming that works, add your array of movie clip references, and draw a handful of quick shapes, making sure to convert each to movie clip symbols with instance names that match what’s sorted in the array. Then update your code:
That next little step should show you the movie clip references in the Output panel as the video plays. In this way, you should be able to slowly build up to your goal.
To Scott …
I notice that you’re invoking the custom
startStream()function inside youronStatushandler. TheonStatusevent is going to fire more than once — possibly even with aninfo.codevalue of"NetConnection.Connect.Success"— so it may be that you’re assigning youronCuePointhandler more than once (perhaps several times), which might be all it takes to confuse Flash.February 4th, 2008 at 2:30 am
Hi,
I would like to use cue point to call External Interface function and thus control other swf movie which id is “pano”.
Here’s my code:
import flash.external.*;
var movieName = “pano”;
var ExternalInterfaceID = “myid”;
var pan:Number;
videoPlayer.addEventListener(”cuePoint”, listener);
var listener:Object = new Object();
listener.cuePoint = function(evt:Object):Void {
if (evt.info.name == “1″) {
function() {
ExternalInterface.call(”window.document[’”+movieName+”‘].”+ExternalInterfaceID+”PanoExecute”, “pano.pan=100″);
}
}
}
Both video and swf file are loaded in the main flash movie using xml.
I cannot make this code work, would you please advice.
Thanks!
February 5th, 2008 at 6:35 am
Hello David,
I did exactly the same you asked me to do. But, there was an output error that said- ‘1046: Type was not found or was not a compile-time constant: Void’.under the description area and ‘function(event:MouseEvent):Void {’ in the source area.
Can you help me out why it is happening so?
The main objective of the project as I mentioned earlier is that there will be an FLV play back instance on the stage and below that there should be a scrolling area of the thumbnail buttons. When any of these scrolling buttons are clicked the relevant flv should get displayed in the playback instance.
Thanks a lot once again for guiding me, David.
Thanks
February 5th, 2008 at 8:09 am
Balakrishna,
My apologies! The “V” in “Void” should be lowercase. I have corrected the code I suggested in my previous reply to you.
February 6th, 2008 at 8:51 pm
Jomla,
You don’t need the function statement you’ve got in your
cuePointhandler. This alone …should do it, appearing as it does inside the function literal already assigned to the
listener.cuePointexpression (”parameters here” are the parameters you already have listed). Just get rid of the extrafunction()declaration and you should be fine, assuming theExternalInterface.call()invocation is correct.February 8th, 2008 at 4:07 am
Hi David,
When I used the script, this time it was displaying ‘1119: Access of possibly undefined property btn_1 through a reference with static type flash.display:DisplayObject’. Might I have made any mistake anywhere?
Thanks,
February 8th, 2008 at 8:38 am
Balakrishna,
The buttons inside your
my_mc1movie clip — this is the movie clip you associated with the ScrollPane — must have instance namesbtn_1,btn_2, etc.February 20th, 2008 at 4:58 pm
I am building a site using a Video Object to display my video. In the past Ive always used the component. But my issue is having some kind of animation happen during a certain cue point. I have read this blog a few times and I can’t seem to find how to do it. I am using AS3 and my code pretty much looks like this:
var connection:NetConnection = new NetConnection();
var stream:NetStream;
var md_obj:Object = new Object();
connection.connect(null);
stream = new NetStream(connection);
vid.attachNetStream(stream);
My video spits out the cue point name the time and then says undefined in the parameters section. Is there a way to have the animation happen when the cue point name is hit and not the parameter. I hope this makes sense I have been trying to figure this out for days now and I am no closer than when I started. Thanks for your help and if you already answered this question I am sorry.
February 29th, 2008 at 1:51 pm
Hey David,
Thanks for your ah sum blogs! I was wondering if it was still possible to read cue points if the video was embedded into the timeline of flash. If it is possible would I still be able use the listener class to read my cure points. Thanks for any help.
March 17th, 2008 at 9:52 pm
To Craig …
Did you add parameters to your cue points when you encoded the video? It isn’t necessary to do so, but if you choose not to, then you will indeed see
undefinedwhen you trace a cue point’s parameters. To respond to a cue point’s name, you could something like this:Does that make sense? I had some lengthy conversation with Philip in November, 2007, so that may give you a bit more to go on.
No worries! Let me know if you’re still not sure what to do.
To mrock …
If your video is embedded in a movie clip timeline, an interesting thing happens. Even though you’re dealing with an actual video file, the object that appears on the stage is actually a movie clip, which means the “video” adheres the functionality defined by the
MovieClipclass, which doesn’t feature cue points. The thing is, cue points are a feature of theNetStreamclass — at least, in ActionScript 2.0 — and since theNetStreamclass isn’t used for displaying this particular sort of video, nothing exists to listen for the event.March 21st, 2008 at 10:53 am
Hi David,
I am using the Video component and am trying to add a cue point using AS2 rather than embedding the cue directly in the FLV. Is this possible? If so, what is the method I use. Ive been looking everywhere and cant seem to find the solution.
Thanks
Keith
March 21st, 2008 at 12:50 pm
Keith,
I’m not sure what component you mean by “Video component” — maybe FLVPlayback? If so, check out the “Assigned cue points” section in the blog entry. The syntax for the
FLVPlayback.addASCuePoint()method is the same in AS2 and AS3.March 24th, 2008 at 7:34 am
Sorry David I should have been more clear. In the library I selected “New Video”. I then wrote a custom flv player class for the video controls. It seems I cannot add cue points using this method. Using this method I attachVideo(ns).
Now, I tried to swap the above method with the FLVPlayback and I cannot seem to get the video to appear. I have attached the sound to its own mc so I can hear the audio but cannot see the video. What is FLVPlayback “attachVideo()” method? I can only find contentPath, but that does nothing for me.
BTW: Im using FMS 2.0.
March 24th, 2008 at 10:11 am
Keith,
Aha, gotcha. Yeah, the
addASCuePoint()method is a member of theFLVPlaybackclass, and as such, only works in cahoots with the FLVPlayback component. If you want to assign cue points dynamically, you’ll have to use FLVPlayback. Fortunately, thecontentPathproperty is all you need.When I use FLVPlayback, I simply enter the RTMP file path into the
contentPathparameter of the Parameters panel or, if using ActionScript, thecontentPathproperty of myFLVPlaybackinstance (that is, the instance name I give my FLVPlayback component).The
attachVideo()method is a member of theNetStreamclass, which means you won’t be needing it if you go the route of FLVPlayback. You won’t use any of theNetConnectionorNetStreammethods with FLVPlayback — they’re unrelated. Does that help? I wonder if you’re combining Video object code with FLVPlayback.March 24th, 2008 at 12:44 pm
I see! That explains it.
Well, for time sake I will have to use my existing class utilizing NetStream and re-write it for FLVPlayback at a later time.
I did find away to add a “pseudo-cue point” using the attachVideo method. I simply use the setInterval() method:
var time_interval:Number = setInterval(checkTime, 500, stream_ns);
which I need to display the running time of the movie anyway… and simply insert a conditional statement to fire whatever event I need at whatever time in the flv:
if (seconds >= 48.5) {
classPath.mcPath.portBtn.tween(”_y”, 150, .5, “easeoutquad”);
}
This may not be the best way to go but it will have to do for now.
thanks so much for your blog… it has helped me numerous times!
Cheers
Keith
March 24th, 2008 at 2:37 pm
Keith,
Your pseudo cue point approach is more or less what I used in my
SoundSyncarticle on the Adobe Developer Connection, “Handling cue points for audio files in ActionScript 2.0 and ActionScript 3.0.”Glad to hear this glad has helped you!
March 24th, 2008 at 4:37 pm
David,
After playing around with the pseudo-cue points, Ive decided to just re-write my class using the FLVplayback component. And of course, stumbled up on this error:
*** Security Sandbox Violation ***
Connection to “rtmp://myhost/myapp/myflv.flv” halted - not permitted from file:///C|/dir/dir/dir/newplayer.swf
How do I prevent this? Funny thing is this is the only code I have in my class so far: lol
mcPath[whichPlayer].isLive = true;
mcPath[whichPlayer].contentPath = “\”" + a_conString + a_vidName + “\”";
mcPath[whichPlayer] is simply a reference to the root of the swf and the component instance name. Any ideas?
thanks
March 24th, 2008 at 8:03 pm
Keith,
This gets curiouser and curiouser! Here’s what I’m doing: I’m in an AS2 document — brand new FLA — and drag an instance of the FLVPlayback component to the Stage. With this component selected on the Stage, I give it the instance name
videoPlayer. Next, I click into frame one of the default layer (which happens to also contain the FLVPlayback instance) and I use the Actions panel to type:… where the referenced path, of course, points to a valid RTMP stream. This works for me without a hitch.
March 25th, 2008 at 9:53 am
David -
The reason I am doing it the way I explained in my last post, is that I have multiple movies that must load into the same player when a user clicks a thumbnail. So I need to pass the flv name dynamically.
However, out of curiosity, I created a brand new movie and used the method you explained above and I get this error:
“Statement must appear within on/onClipEvent handler”
My rtmp path is valid (double and triple checked)
Now Im really curious as to why… Gotta love Flash!
Keith
March 25th, 2008 at 10:02 am
Keith,
Oh, totally on board with that.
There’s nothing wrong with your
mcPath[whichPlayer]reference; I was just trying to narrow the possibilities and create a scenario as simplified as possible.The error you’re seeing is the result of your attaching code directly to an object, rather than to a keyframe. AS1 and AS2 allow for directly-attached code, but that code must be placed within either an
on()oronClipEvent()function (or a combination of both).Select that code, cut, then select a frame and paste. That should do it. If your totally simplified proof of concept works, I would think it should be possible to slowly add complexity to that new FLA until you can transplant working code snippets, piece by piece, into your other file.
March 25th, 2008 at 11:15 am
Opps duh! The code is now in a frame rather than attached to the instance. Flash 101 rule.. *embarassed*…
Anyway, the basic of basics is still not working:
import mx.video.*;
my_FLVPlybk.isLive = true;
my_FLVPlybk.autoPlay = true;
my_FLVPlybk.contentPath = “rtmp://domaincom/app/movie.flv”;
still plays nothing. When I traceback my_FLVPlybk.PLAYING it comes back true!
I have contacted my FMS company to see if something is happening on the server end, although my original player still works great (less the cue points). Im stumped. I will see what the host company says…
thanks much for all your help.
Keith
March 25th, 2008 at 11:12 pm
Keith,
Yeah, checking with your Flash Media Server host is a good bet, especially since the
FLVPlayback.playingproperty is showingtrue. Have you tried, for grins, playing back this same FLV file via progressive download (that is, an HTTP request)?March 27th, 2008 at 10:16 am
i hav a flv player,
inside a html page,in html page one button is there,
that button should be invisible until user click & it will reach a particular cue point or watch half of the flv movie,
aftter reaching particular cue point,that html button should be automatically active,
any idea how to do this type of thing using javascript in flash,plz provide the code if u can
April 2nd, 2008 at 10:35 am
David Stiller,
You are a gentleman and a scholar. Thank you for helping all of us.
My cue points question:
I’m using FLV playback. I want for the final frame of the FLV (the last second, we’ll say) to trigger the closing of the web-browser window where the SWF is embedded into the HTML.
How can I get the video to close itself once it has finished playing?
Thank you.
- Greg
April 2nd, 2008 at 11:54 am
To neeraj …
To hide and show HTML elements, your best bet is to use CSS. You can give your button — or the
<div>tag that contains it — anidattribute so that you can identify it with JavaScript. Then use a JavaScript function later to locate thatidand set itsstyle.displayproperty to"none"(hides it) or"block"(reveals it).From this point, all you have to do is invoke the relevant JavaScript function from inside Flash. You can do so with the
ExternalInterfaceclass in Flash Player 8 and higher, which is the easiest way to go (seeExternalInterface.call()). You’ll use your cue point handler to invoke thecall()method, which in turn calls your JavaScript function.To Greg …
If you actually want to close the browser window itself, your approach will be similar to neeraj’s. In your case, the cue point handler will invoke
I hope that gives you a good start, though!
ExternalInterface.call(), which will call a JavaScript function that references the desired window and closes it. The JavaScript method for that iswindow.close(), which references itself. Many browsers are going to prompt the user for permission, and there are some tricks (I believe) for getting around that, but it’s been a while since I’ve had to close browser windows with JavaScript, so off the top of my head … I’m dry.April 21st, 2008 at 9:39 am
Hello
wonderful tidbits!!! I will try out a few of them for my as3 game I am making. Had a question about “track” for videos– adobe docs didnt have
too much to say about it I need to grasp it better..
For instance, I am using cuepoints with the parameter of “text” to have stuff appear in english. Then, I am using param “text1″ to have spanish words appear at the same time interval–have a snippet of code that showed me how to set it up and it works but I cant figure out how to have
a button switch it—The example said use “track” and I did but it always
traces to the first one- cant get the next- is there another/”better” way?
Does it have Anything to do with “caption.2.0.0 indext1″
Below is the code I found as xml *(I “bake” it but this is the idea):
-
-
3000
event
fl.video.caption.2.0.index1
-
-
text
-
-
-
text1
-
-
-
text2
-
-
-
endTime
-
-
If you get a chance please let me know I’ll check back on the site
April 22nd, 2008 at 9:27 am
Hello,
I am trying to do cue points to make movieclips play, and I’ve looked through the other replies here and created some code.
I have a FLV (instance name is my_FLVPlybk), a pause/play button (instance my_plypausbttn) , a back (backbtn), and a next button (nextbtn). I also have four movieclips called slide2a, slide2b, etc. I want four cuepoints for my movie that will direct the user to each movieclip. I also want them to be able to go back and forward to the certain cuepoints. I went into the FLV component inspector and created four cuepoints called slide2a, slide2b….and then I put the movieclips on the timeline in frame 1 with my actionscript on another layer. I named the movieclips with instance named slide2a, etc.
I don’t know where to go from here:
[Code snipped, because Liz edited it in her next post.]
So anyway, thanks for any help, I’ve been working on this for awhile!
April 23rd, 2008 at 9:19 am
Okay, I’ve simplified the functionality of this so it’s a bit easier to read…my play/pause button works and stops the movieclip and video at the same time. Now I just want a back button that will replay the movieclip and the video at the same time. Here’s what I have:
//
/**
FLV variables
*/
import mx.video.*;
my_FLVPlybk1.playPauseButton = my_plypausbttn1;
// listeners for the play/pause, next, and back buttons
//
var listenerObject:Object = new Object();
listenerObject.stateChange = function(eventObject:Object) {
if (my_FLVPlybk1.paused)
maturity_intro.stop();
};
my_FLVPlybk1.addEventListener(”stateChange”, listenerObject);
//
//I want this code to replay the video, and the movieclip from the beginning
//
var listenerObject:Object = new Object();
listenerObject.backChange = function(eventObject:Video) {
if (backbtn1.press)
my_FLVPlybk1.play();
};
my_FLVPlybk1.addEventListener(”backChange”, listenerObject);
Any help with the replay? Thanks for the blog info!!
April 24th, 2008 at 5:22 pm
Thank you david for this blog, it helped me out a lot. I have one question though if you dont mind.
I made Multiple Cues, not just 2 (the Greek writing and the blank one). I want multiple text so I added about 6 cue points all with different text.
Yet when it comes to that part of the cue point in the movie, what gets displayed in the dynamic text field is “Value Undefined” Which is very confusing to me.
I understand this tutorial must have took you a lot of time to write, but I consider it useless if it does not explain how to display continuous lines of text on many multiple cue points.
Please let me know if there is a fix, thank you.
April 24th, 2008 at 5:51 pm
Ok I saw now that one must place the value as two quotaion marks.
Although now that I do that, instead of nothing showing up the text actually shows “” when it displays on my dynamic text, how do I make it not show anything??
April 25th, 2008 at 1:39 pm
To Gabriel …
Hrm. Honestly, I’m not sure what you mean by “track.” Do you mean the “horizontal track” I mentioned in the blog entry? If so, that’s something you’ll see when you encode your video in Flash.
For something like that, you could use a Boolean variable (
true/false) keep track of the decision to view text as English or Spanish. In your cue point event handler, you chould check that variable in order to decide which parameter to display:For clarity, I might name those parameters
textEnglishandtextSpanish, but that should give you a start.To Liz …
The
FLVPlaybackclass features astateChangeevent, which explains why that particular event handler correctly invokesMovieClip.stop()on yourmaturity_introinstance. So far, so good. But there is nobackChangeevent — not in AS2 or AS3 — so that’s part of the problem with that second event handler. Another problem is that you’re re-declaring yourlistenerObjectvariable a second time: that wipes out the first declaration of that same variable.You can use the same
listenerObjectvariable to listen to as many supported events as you please, but you would do so like this:… always re-using the same object. Make sense?
Now, to get an unrelated button to restart the video and its associated movie clip, you’ll need to write a different sort of event handler. Buttons in AS2 work like this:
… assuming
backbtn1is a button symbol. In this case, you don’t need the “liasion”listenerObjectinstance. In AS2, buttons are instances of theButtonclass, and you’ll see code samples in the docs forButtonevents.This might do it for you:
Remember that each of these objects is defined by its own separate class. To see what methods are available to FLVPlayback, look up the
FLVPlaybackclass entry of the ActionScript Components Reference. For buttons, see theButtonclass entry of the ActionScript 2.0 Language Reference. For movie clips, see theMovieClipentry.To Grant …
That’s a bit harsh, don’t you think?
It sounds like you’re most of the way there. You’re only having trouble with your text fields, which may not even be related to the cue point handler.
I can imagine you might see
undefined(if the referenced value truly was undefined), but I’m having trouble imagining the output “Value Undefined” or actual quotation marks.In order to verify your cue point values, try using the
trace()function — just for the time being — to see if the Output panel also shows quotation marks.I’ll be happy to help you, if I can, but I’m not sure at all how you’ve set up the text field that displays the cue point values.
April 25th, 2008 at 3:57 pm
wow thank you! very understandable response- I apologize- I failed to mention this is for As3- the parameters are still the same text1 and text2
(although I will take your advice and use “textSpanish” etc) and the
FLVPlayvackCaptioning is named myCaptioning if that matters. Im also not
using ns just loading from an array right now….Whenever you get the chance please keep helping! Oh, the track thing is part of the adobe help
“support for multiple language tracks” although Im not using timed text
(just baking the fl.video.caption2.0.0 code right in video parameters!) For instance trace(myCaptioning.track); always outputs 0, I try “track =1;” etc
but nothing. I like your approach better you dont even mention “Track”:)!!!!
PS I did another tutorial which loads a jpg from a video parameter cue:
) but again the whole as3
name: Imageloader type: event name: myurl value “7k.jpg”….AS2!
it works (helpful for anyone that needs to know
thing if you know an easy way to change the code for that please do tell.
OK THANKS AGAIN whew.
April 25th, 2008 at 6:23 pm
Well I have figured a way to just continuously write text yet I still cannot get the quotation marks to dissapear. I wasnt saying this post was useless, I was just saying that to a new guy like me, I could not find where it addressed that certain issue of continuous text, although it was probably due to my lack of understanding to a portion of the tutorial that hindered my progress. It actually showed “undefined”, and then “value” because it took that text I left blank accidently. So all in all this tutorial is literally the only thing I could google that got a newbie like me to produce what I wanted, and I thank you.
April 25th, 2008 at 9:25 pm
To Gabriel …
I’m afraid I’m really lost, now! You’re using FLVPlaybackCaptioning, which handles a lot of this functionality automatically. If that’s your approach, then the Adobe “track” tutorial might well be your best bet. (Not sure, though!) In the examples I’ve shown here, the captioning component doesn’t play into the solution.
I really don’t know what you need!
Did my suggestion about the Boolean variable make sense to you? The concept is always more important than a particular set of suggestions or syntax.
To Grant …
Thanks for your persistence! When I said earlier that I couldn’t imagine what you were seeing, I wasn’t trying to be snarky, honest. I meant it at face value … I was trying to figure out how you were arriving at the quotation marks. After re-testing the original blog entry, I found that — exactly as you described — those quotes really do show up.
That’s a genuine issue/bug, as far as I can see, so I’ve updated the article and put in a note of thanks to you. You’ll find this fix in the article now, but in a nutshell, here’s a possible solution for you:
April 26th, 2008 at 7:07 pm
Hi again Mr Stiller! Thanks for you help. Yes the concepts are (slowwly) making sense to me…Perhaps I can email you a zip file so you can see rather than me try to explain it? (FLVPlaybackCaptioning included) as its
probably really simple once you see it…
I prolly threw you off the beaten track even more with my other question about loading a jpg from a video parameter cue which is working in as2..Id like
to send the working example and see how to tackle this in as3!
Well, hope to get this problem licked via your help! Thanks again
April 28th, 2008 at 3:55 pm
I’ve been struggling with how to seek a specific cue point when I click a button. I’m using AS3 to load and control the video, and it traces the right data when the cue points are hit, but when I try to place the name of the cue point in the ns.seek(), it says the property is undefined. What am I missing here? Here is an example of the code:
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
videoPlayer.attachNetStream(ns);
var listener:Object = new Object();
listener.onMetaData = function(evt:Object):void {};
listener.onCuePoint = function(evt:Object):void {
// instructions here
trace(evt.name);
trace(evt.time);
trace(evt.parameters);
trace(evt.type);
};
ns.client = listener;
ns.play(”flv/Instructional Video_Cue Points.flv”);
function clickHandler(event:MouseEvent):void {
trace(this);
//ns.seek(30);
//this works fine.
ns.seek(chp1);
//this gives the error: Access of undefined property chp1.
}
btn1.addEventListener(MouseEvent.CLICK, clickHandler);
April 29th, 2008 at 11:19 am
David,
Thanks for your replies, but I still need help soooo much! I’m so confused on what code to use and what not to use. Ok, so here’s what I am looking for:
1. A video with four cuepoints, (i.e., slide1, slide2, slide3, slide4).
2. listener Object - so when a cuepoint is reached, it goes to another section of a movieclip (I have labeled frames “slide1″, “slide2″, etc.).
3. A forward and back button that goes to the last or next cuepoint
4. A restart button that takes them to the beginning of the video and to the movieclip section that’s labeled “slide1″.
So…I want the slides of text on one side of the stage to sync with the video on the other. I don’t know why this is getting to be so hard to figure out! Thanks so much for any info!
April 30th, 2008 at 12:33 am
GOT IT!! 95% at least!! I found an example that works fine with external as3!! The code for external as3 (THAT WORKS) is:
package {
import flash.display.Sprite;
import fl.video.*;
import flash.events.MouseEvent;
public class CuePointCaptions extends Sprite {
public function CuePointCaptions():void {
_capsLangBtn.addEventListener(MouseEvent.CLICK, onSwitchFLVCaps);
}
private function onSwitchFLVCaps(evt:MouseEvent):void {
if (myCaptioning.track == 0) {
myCaptioning.track = 1;
trace(”english”);
} else {
myCaptioning.track = 0;
trace(”spanish”);
}
}
}
}
the last step is for me to get it to internal IN the fla…when I am converting I delete the “extend sprite” line but then it doesnt work- here’s what I have hope its something easy to fix! Thanks
import flash.display.Sprite;
import fl.video.*;
import flash.events.MouseEvent;
_capsLangBtn.addEventListener(MouseEvent.CLICK, onSwitchFLVCaps);
function onSwitchFLVCaps(evt:MouseEvent):void {
if (myCaptioning.track == 0) {
myCaptioning.track = 1;
trace(”english”);
} else {
myCaptioning.track = 0;
trace(”spanish”);
}
}
April 30th, 2008 at 3:30 pm
100% Finally. qahhhhh! There should be a book on PARAMETERs for FLV since theres so much to know but little documentation
. For instance, at
this point the flvcaptioning component is dynamically loaded my trouble
may have been I was trying to drag it to the stage- as long as it worrrks!!!
I still have that other issue of loading a jpg on a parameter. Fine in AS2
but as3 is changed. As2 goes like this-
cuepoint name : loader
parameter name: myurl
value nameofjpg.jpg
the as2 code just does a simple loadmovie num. Can this be updated in flash as3? I could probably find it out but it would take like 2 weeks so if the answer is known please let me know. OK thanks gain
May 7th, 2008 at 11:50 pm
To Brian …
In AS2 and AS3, the
NetStreamclass’sseek()method only accepts numerical parameters. If you were using the FLVPlayback component, you could use theFLVPlayback.seekToNavCuePoint()method — different story, though. As it turns out, I wrote an article for Community MX on this very topic in June of 2007.Sign up for a free trial subscription, if you’re up for it.
You can cancel without obligation and you’ll get access to all the articles, including this one:
Navigating to Flash Video Cue Points by Name
To Liz …
I think I’m getting confused by your buttons. For example, this bit of code, here:
my_FLVPlybk1.playPauseButton = my_plypausbttn1;… tells me you’re using a custom button (one of the Video UI Components?) in collaboration with your FLVPlayback component. I’m not sure if you’re doing the same thing for your “forward” and “restart” buttons, or if those are simply button symbols.
This sort of thing can get tricky, but the key is to separate the various objects in your mind — FLVPlayback, button, etc. — and then consult the class entry for each type of object in order to see how that object behaves. I’m still unsure, for example, what you meant by the
backChangeevent in your previous question, because ActionScript doesn’t have a nativebackChangeevent (at least, not that I can see in the documentation).Chin up!
To Gabriel …
GOOD FOR YOU!
It sounds like you’ve made terrific progress! I’m sorry I wasn’t able to help you more … timing is everything, and you happened to find me in the midst of an overwhelming schedule.
To load your JPG in AS3, you’ll need to use aLoader usage looks like this:
Loaderinstance. At its most basic,This is different from
loadMovieNum()orloadMovie(), but easy enough I hope.May 8th, 2008 at 2:36 pm
thank you!! Yes I imagine you are totally a busy beaver! Yes my game is coming along…
Again to try to be clear as2 style video encoding in video iteself=
cuepoint name : loader
parameter name: myurl
value image.jpg
as2 code was “movienum” in fla itself…
so for the as2 version of loading a jpg in the paramters of the video it