A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 24

Thread: Syncing FLV playback with Flash document

  1. #1
    Junior Member
    Join Date
    Mar 2005
    Posts
    20

    Syncing FLV playback with Flash document

    Sorry to post this as I am sure little parts of this have been answered but I can't seem to get a 'big picture' idea and since this is my first attempt at video syncing in Flash 8 I thought I'd just start this new post :-)

    MAIN GOAL: I have a flash presentation that shows some maps and such. I wanted to add a video of someone explaining what the maps are about over top of the maps. I have attached an image below of what the video will look like to help you guys grasp what I am talking about:



    I first used Adobe After Effects to make my video transparent and save it to FLV format.

    Then I fired up Flash 8 and put the FLVPlayback component in the timeline. I set the contentPath to the external FLV file because I want it to stream the video. Now this is where I get confused and want to make sure I am doing this the right/best way.

    I am concerned because I know the first part of my presentation is say 30 seconds. The corresponding FLV video is 30 seconds. But if I just put it in there and say the buffering of the video playback took a while then wouldn't that throw the entire timing off?

    I then read about cue points. I think this is a robust solution but I am lost. I don't want to do anything fancy, here's what I am thinking...

    1. Presentation Starts --- Corresponding video starts
    This is simple because the video should start
    streaming because the video is set to autoplay.

    2. Presentation is at 10 seconds and another map is about to be shown. Now the video should be at this spot to because I have timed it all out in the timeline to match the video but what if there was a buffering delay? That means the video would still be talking about the old stuff and I wouldn't want to continue changing the maps until the video is at the 10 second point.
    - How do I use a cue point to confirm this?
    - Is it better to just set a cue point and use that cue
    point to call a command like gotoandPlay(10);?
    - Is there even a need to check this or does Flash sync for me?


    I think my idea of having the cue points set in the video (can Adobe After Effects do this or do I need to set cue points via the FLVPlayer component?) trigger the gotoandplay() commands as necessary would be the simplest way to achieve syncronization... is that what you guys think?

    I am just looking for the simplest and most elegant way of doing this so all of your ideas are welcomed and appreciated. Please help get me on the right track guys! Thanks :-)

  2. #2

    Please

    (Bump)
    I am mystified as to why this functionality seems like a secret. There seems to be no shortage of tutorials on using cue points for seek/navigation functionality. But ones on using them to trigger other events within the Flash file are seemingly non-existent. Please help us....

  3. #3
    Junior Member
    Join Date
    Mar 2005
    Posts
    20
    Ok, well I did a lot of digging and this is what I came up with. Yes, you can do this and it's not that hard to do. I am sure I am missing some points but that's where I hope others will post and help fill us in on the 'really technical' stuff to make sure our videos go off without a hitch.

    Here's the code I add to the first frame of my flash project:

    Code:
    var listenerObject:Object = new Object();
    listenerObject.cuePoint = function(eventObject:Object):Void {
    	if (eventObject.info.name == "myFirsCuePoint") {
    		gotoAndPlay(5);
    	}
    	if (eventObject.info.name == "mySecondCuePoint") {
    		gotoAndPlay(10);
    	}
    }
    my_FLVPlybk.addEventListener("cuePoint", listenerObject);
    Now I clicked on the FLVPlayer component I added to the stage and I added the two corresponding cue points called myFirstCuePoint and mySecondCuePoint. Now I read, you can define these in your actionscript as well as in the FLV file itself but using the component inspector does the trick also.

    And tada, it works!!! :-)

    I did read that since these are 'actionscript' events that the actual cue point might be off by 1/10 of a second but if you are just timing things to be displayed when a video mentions them, this method works fine.

    I am still making my video and fooling around with this so I will post all my results when I am done. My GOAL is to make this a really good newb tutorial on how to sync video with a flash project.

  4. #4
    Thanks for your reply, trapped. Here's what I used in my flash file:

    var listenerObject:Object = new Object(); listenerObject.cuePoint = function(eventObject:Object):Void {
    if (eventObject.info.name == "myFirstCuePoint") {
    gotoAndPlay(2);
    }
    if (eventObject.info.name == "mySecCuePoint") {
    gotoAndPlay(3);
    }
    if (eventObject.info.name == "myThirdCuePoint") {
    gotoAndPlay(4);
    }if (eventObject.info.name == "myFourthCuePoint") {
    gotoAndPlay(5);
    }
    }
    my_FLVPlybk.addEventListener("cuePoint", listenerObject);
    stop();

    I have a stop action in frames 2-5 as well. I tried embedding cue points in the FLVPlayback component. I also tried embedding the cue points in Squeeze. In both cases, I got nothing. (I also tried adding"_root." in front of the gotoAndPlay commands above.) I think we're closer. Problem is, I haven't the foggiest what to enter in the "Name" and "Value" fields in the Flash Video Cue Points parameters dialog (or the corresponding fields in Squeeze's Flash Cue Point Variables dialog box). Is the parameters name the same name as the CuePoint? God, how I wish I had the mind of a programmer. Curse me for skipping Logic 101 too. Thanks for your help!

  5. #5
    var listenerObject:Object = new Object();
    listenerObject.cuePoint = function(eventObject:Object):Void {
    if (eventObject.info.name == "myFirsCuePoint") {
    gotoAndPlay(5);
    }
    if (eventObject.info.name == "mySecondCuePoint") {
    gotoAndPlay(10);
    }
    }
    my_FLVPlybk.addEventListener("cuePoint", listenerObject);

    P.S. The above code (verbatim) didn't work for me either, where my FLVPlayback component had the instance name my_FLVPlybk.

  6. #6
    Junior Member
    Join Date
    Mar 2005
    Posts
    20
    That's weired cause my code works great in Flash 8. I just left the default name of my_FLVPlybk for the FLVPlayback component.

    The code I posted before had a missing "t" in the myFirstCuePoint name, so that's maybe why it didn't work... sorry.

    Here is what my cuePoints look like (and you bring this up by double-clicking the cuePoints text area in the component inspector):



    Also, this shouldn't matter but I put my code on the first layer in frame one. I don't understand why it wouldn't work for you guys.

  7. #7
    Man, this is frustrating. That's how my panel looks too. (I just wasn't sure if I needed to fill anything in the list on the right side of that panel.) After looking at your screen grab, I noticed your top layer has your FLV on it, where presumably as you said, your actionscript code is also-though I couldn't see the little "a" in the first frame. So I tried cutting and pasting the code into the first frame of the top layer, then the bottom, with FLV, without, and still no joy.
    Here's a rundown of what I am trying to do: My employer is conducting a presentation which involves multiple PowerPoint presentations-2 screens, side by side. They want to have a CD-ROM based version with the speaker (talking head) and both slides underneath the speaker. I understand this is (theoretically) easy to do in Captivate 2, which we don't have. So unless someone has another suggestion, cue points triggering slide changes (loadMovie into empty Movie Clip containers), if I can ever get them to work, is the way to go.
    I would think that such a tutorial would be right up Lee Brimelow's alley. It would be a great addition to his already fantastic library of tutorials.
    Thanks again, trapped.
    Last edited by digitalhecht; 03-08-2007 at 12:03 PM.

  8. #8
    Junior Member
    Join Date
    Mar 2007
    Posts
    14
    Man, this is frustrating. That's how my panel looks too. (I just wasn't sure if I needed to fill anything in the list on the right side of that panel.) After looking at your screen grab, I noticed your top layer has your FLV on it, where presumably as you said, your actionscript code is also-though I couldn't see the little "a" in the first frame. So I tried cutting and pasting the code into the first frame of the top layer, then the bottom, with FLV, without, and still no joy.
    Here's a rundown of what I am trying to do: My employer is conducting a presentation which involves multiple PowerPoint presentations-2 screens, side by side. They want to have a CD-ROM based version with the speaker (talking head) and both slides underneath the speaker. I understand this is (theoretically) easy to do in Captivate 2, which we don't have. So unless someone has another suggestion, cue points triggering slide changes (loadMovie into empty Movie Clip containers), if I can ever get them to work, is the way to go.
    I would think that such a tutorial would be right up Lee Brimelow's alley. It would be a great addition to his already fantastic library of tutorials.
    Thanks again, trapped
    Here is what you want to do: You want to Create an FLV player. Than you want to embedd cuepoints into your video file. After you do that you want to write some code that will Move Slides Along depending on what the (talking head) is saying.

    If i am mistaken please correct me.

  9. #9
    Quote Originally Posted by ramarbstr12play
    Here is what you want to do: You want to Create an FLV player. Than you want to embedd cuepoints into your video file. After you do that you want to write some code that will Move Slides Along depending on what the (talking head) is saying.

    If i am mistaken please correct me.
    EXACTLY!!! Do YOU know how?

  10. #10
    Junior Member
    Join Date
    Mar 2007
    Posts
    14
    Quote Originally Posted by digitalhecht
    EXACTLY!!! Do YOU know how?
    Yes its very simple if i could figur it out. LOL What you do is put the cue points in the FLV at the points that you need them. Than in the cue points add parameters such as "cue:beginnning" IN YOUR project you will add code that reads the metadata of the flv PLAYING. the way it works is that the metadata includes information about your FLV including cuepoints and parameters. LOok up parameters in the FLASH Help files thats how i Figured that out. But after that, you will create an eventListener that is built in to the Flash program. Look it up in the Help files its called Oncuepoint. create a function in Oncuepoint that will go to and play certain frames of your Project When it has reached the specific cue point you want.

    I beleive the easiest way to do this for you is to put the slides into your main project and just linearly play it while the talking head speaks. that only requires you to start playing the slides when the talking head begins playing.

    If you want to get more complicatred you can have the slides be FLVs and play each "SLIDE" FLVs as the "talking heads" cuepoint is reached. I would recommened that you place the cue points a couple of seconds before the "the talking head" mentions the slide for any delays in playing.

    If you need more help just ask but right now i got to go to work.

  11. #11
    Argh... Thanks for your reply. What's adding to the complexity of this is a bit of confusion on my part over embedded or actionscript cue points. If I understand, embedded cue points are ones that you specify during (actually prior) to the actual encoding conversion in the Flash Import Video wizard, or presumably in a third party FLV encoder like Squeeze? Compounding all this is the fact that I have been using Squeeze to encode to FLV and using Markers in Squeeze for cue points. But when I link from the FLVPlaybck component, Flash doesn't see the cue points in the component inspector. On the flipside, files I encode with Flash's video encoder aren't encoding audio for some reason (audio encoding is greyed out for both Spark and On2VP6).
    Specifically, I need to know what the actionscript looks like in the first frame, as well as what to fill in the Flash Video Cue Points Parameters section (one on the right). I am more than willing to provide my files is someone is willing to hold my hand...
    Again, a rundown of what I am trying to do: My employer is conducting a presentation which involves multiple PowerPoint presentations-2 screens, side by side. They want to have a CD-ROM based version with the a small 320x240 speaker window (talking head) and both slides, side by side underneath the speaker. Cue points triggering slide changes (loadMovie into empty Movie Clip containers?), if I can ever get them to work, would seem the logical solution.
    Last edited by digitalhecht; 03-12-2007 at 06:48 PM.

  12. #12
    From Flash 8 Pro Help files:
    To add an ActionScript cue point:
    Double-click the value cell of the cuePoints parameter in the Component inspector to open the Flash Cue Points dialog box.
    Click the plus (+) sign in the upper-left corner, above the list of cue points, to add a default ActionScript cue point entry.
    Click the New Cue Point text in the Name column, and edit the text to name the cue point.
    Click the Time value of 00:00:00:000 to edit it, and assign a time for the cue point to occur. You can specify the time in hours, minutes, seconds, and milliseconds (HH:MM:SS.mmm).
    If multiple cue points exist, the dialog box moves the new cue point to its chronological position in the list.
    To add a parameter for the selected cue point, click the plus (+) sign above the Parameters section, and enter values in the Name and Value columns. Repeat this step for each parameter.
    To add more ActionScript cue points, repeat steps 2 through 5 for each one.
    Click OK to save your changes.

    "To add a parameter for the selected cue point, click the plus (+) sign above the Parameters section, and enter values in the Name and Value columns. Repeat this step for each parameter." If I am trying to load external swfs or bitmaps into empty movie clips with the instance names "holder1" and "holder2", what goes in these cells? Please. I'm ready to jump out a window...

  13. #13
    Junior Member
    Join Date
    Mar 2007
    Posts
    14
    Quote Originally Posted by digitalhecht
    From Flash 8 Pro Help files:
    To add an ActionScript cue point:
    Double-click the value cell of the cuePoints parameter in the Component inspector to open the Flash Cue Points dialog box.
    Click the plus (+) sign in the upper-left corner, above the list of cue points, to add a default ActionScript cue point entry.
    Click the New Cue Point text in the Name column, and edit the text to name the cue point.
    Click the Time value of 00:00:00:000 to edit it, and assign a time for the cue point to occur. You can specify the time in hours, minutes, seconds, and milliseconds (HH:MM:SS.mmm).
    If multiple cue points exist, the dialog box moves the new cue point to its chronological position in the list.
    To add a parameter for the selected cue point, click the plus (+) sign above the Parameters section, and enter values in the Name and Value columns. Repeat this step for each parameter.
    To add more ActionScript cue points, repeat steps 2 through 5 for each one.
    Click OK to save your changes.

    "To add a parameter for the selected cue point, click the plus (+) sign above the Parameters section, and enter values in the Name and Value columns. Repeat this step for each parameter." If I am trying to load external swfs or bitmaps into empty movie clips with the instance names "holder1" and "holder2", what goes in these cells? Please. I'm ready to jump out a window...
    You dont necessaryly need to add Parameters to you Cuepoints. If you wish to see whats in your flvs paste this at the bottom of you code.:

    Code:
    ns.onMetaData = function(metaProp:Object) {
    	trace("The metadata:");
    	traceMeta(metaProp);
    	};
    function traceMeta(metaProp:Object):Void {
    	var p:String;
    	_global.FiletypeParams = metaProp.cuePoints[0].parameters["fileType"];
    	_global.Icon2ResumePoint = metaProp.cuePoints[1].time;
    	for (p in metaProp) {
    		switch (p) {
    		case "cuePoints" :
    			trace("cuePoints: ");
    			//cycles through the cue points 
    			var cuePointArr:Array = metaProp[p];
    			_global.cuePointArr2 = cuePointArr;
    			for (var j:Number = 0; j<cuePointArr.length; j++) {
    				//cycle through the current cue point parameters
    				trace("\t cuePoints["+j+"]:");
    				var currentCuePoint:Object = metaProp[p][j];
    				var metaPropPJParams:Object = currentCuePoint.parameters;
    				trace("\t\t name: "+currentCuePoint.name);
    				trace("\t\t time: "+currentCuePoint.time);
    				trace("\t\t type: "+currentCuePoint.type);
    				if (metaPropPJParams != undefined) {
    					trace("\t\t parameters:");
    					traceObject(metaPropPJParams, 4);
    				}
    			}
    			break;
    		default :
    			trace(p+": "+metaProp[p]);
    			break;
    		}
    	}
    	trace("cuePointArr.length: "+cuePointArr.length);
    }
    function traceObject(obj:Object, indent:Number):Void {
    	var indentString:String = "";
    	for (var j:Number = 0; j<indent; j++) {
    		indentString += "\t";
    	}
    	for (var i in obj) {
    		if (typeof (obj[i]) == "object") {
    			trace(indentString+" "+i+": [Object]");
    			traceObject(obj[i], indent+1);
    		} else {
    			trace(indentString+" "+i+": "+obj[i]);
    		}
    	}
    }
    Last edited by ramarbstr12play; 03-12-2007 at 07:33 PM.

  14. #14
    Junior Member
    Join Date
    Mar 2007
    Posts
    14
    Also if you need help on how to use cuepoints for what you need you may contact me using Live messenger at ramarbstr12play@aol.com

  15. #15
    Junior Member
    Join Date
    Mar 2007
    Posts
    14
    Sorry i reveiwed the code and added something double check it is all there.

  16. #16
    Thanks again, ramarb. The code produced no actionscript warnings. That's a good thing! But it doesn't really explain how to trigger loadMovie events into target (empty) movie clips from my cue points...

  17. #17
    Junior Member
    Join Date
    Mar 2007
    Posts
    14
    OK heres what i am in a good mood so if you send me your poject files i will make it for you its actually very simple.

  18. #18
    Quote Originally Posted by ramarbstr12play
    OK heres what i am in a good mood so if you send me your poject files i will make it for you its actually very simple.
    Woo hoo! My lucky day. My fla was too big to upload and still too large after zipping. So it's here:
    http://www.digitalhecht.com/cuepointstest.fla
    (It calls the flv file from my server.)
    THANK YOU!!!

  19. #19
    Junior Member
    Join Date
    Mar 2007
    Posts
    14
    I have been a little busy but if you are still there i finished it for you where do you want m to uplaod it. I just worked on it for an hour today. you have two options of how you want to do it. Post your reply for m to upload this to you.

  20. #20
    Junior Member
    Join Date
    Apr 2005
    Posts
    20
    What is the solution?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center