my interests and experiences
RSS icon Email icon Home icon
  • create chapters in an FLV like a DVD

    Posted on June 5th, 2008 whodeee 24 comments

    Since flash doesn’t have anything built into it for setting chapters or in and out points in an flv, I thought I would take it upon myself to figure it out.

    Here is what I came up with:

    (Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

    1. Add an instance of the FLVPlayback component to your stage and give it an instance name of “flv” – catchy, hey?

    2. add the following actionscript to the first frame of your timeline

    var listenerObject:Object = new Object();
    var curTime;
    function playChapter (startSecond:Number, endSecond:Number) {
    listenerObject.playheadUpdate = function (eventObject:Object):Void {
    curTime = flv.playheadTime;
    trace(curTime);
    if (curTime>=endSecond) {
    flv.pause();
    }
    }
    flv.seekSeconds(startSecond);
    flv.play();
    }
    flv.addEventListener("playheadUpdate",listenerObject);

    3. link the instance of your FLVPlayback component to an flv of your choice.

    4. create chapter buttons on the stage

    5. place this code on the buttons

    on(release){
    playChapter(2,5); //change these numbers to your start time and stop time, in seconds
    }

    **Note** Make sure you encode your FLV with at least a keyframe every 1 second otherwise you won’t be able to start and stop at the correct times.  For this example I have it keyframe every 15 frames, cause the video plays 15fps.

    Good Luck!

     

    24 responses to “create chapters in an FLV like a DVD”

    1. This is a great tutorial!

    2. [...] seekbar to the flv component and not have the entire skin. I will use my chapterTest flv from an earlier post for the sake of simplicity. Here is a screenshot of the interface with the flv and seekbar seekbar [...]

    3. I would like to do something similar, but with individual flv clips. So say I have flv1, flv2, and flv3, and three corresponding (persistent) buttons that I want to use as “controls” to jump to the start of each clip and play. Can you point me in the right direction? I can’t seem to find anything anywhere on this, but it seems like something that many would want to do.

      Thanks!

    4. are you wanting to do this in AS2 or AS3? Each way would be a little different… let me know and I can point you in the right direction.

    5. AS3 I suppose, since I’m using Flash CS4 Pro. Actually, whichever would be easiest, as I’m pretty new to this. I really appreciate your help!

    6. AS2 – Easier way :-)
      1. create a button on stage
      2. drag an instance of the FLVPlayback component to the stage and give it an instance name of flv
      3. add this AS to the button
      on(release){
      flv.contentPath = “path_to_video_1″ // for example –> “folder/folder/file.flv”
      flv.play();
      }
      4. create 2 more buttons and add the same above AS to them, but just change the content path to match the new video.

      Hope this helps!

    7. Yes, that helps a lot. However I now realize that I also need the clips to play one after another if no action is taken. This is a long training video, broken into clips, that I want to be “navigatable” at any point along the way. So the clips need to run continuously one after the other, but also have navigation buttons available so people can skip backward or forward at any point.

      Do you think it would be better to just have one FLV file, with navigation points embedded directly, as in the link below?

      http://www.adobe.com/devnet/flash/articles/vidtemplate_corppreso.html

      The drawback with this approach is that it’s a very long (progressively downloaded) video, so the navigation points won’t be available right away. This issue is actually addressed in the above link, but gets pretty technical to implement. I thought by breaking it into clips I could avoid this problem, but then I have the “continuous” play issue.

      Akkk! What are your thoughts? Mucho appreciato.

    8. yeah those are the issues that you are going to face with progressive downloads. What you can do is set up a listener for the end of the video and when that on in done, it automatically loads the next one.

      This would be your starting block for that….
      var listenerObject:Object = new Object();
      listenerObject.complete = function(eventObject:Object):Void {
      // insert event-handling code here
      };
      flv.addEventListener(“complete”, listenerObject);

      this actionscript would be inserted on the frame not on the button

    9. Ok, cool, so you think I can combine the two methods (AS2) and the “listener” to effectively string together the clips, but have the navigation available for jumping around between them. If that’s so, then it should work just how I envisioned. Now I’ll see if I can built it.

      Appreciate your help!

    10. Yeah it should work that well fairly well. Let me know what you come up with or if you have any other questions.

    11. ok, so I have the buttons that switch between the FLV clips working, but I’m having trouble with the second part (getting the videos to play consecutively if no buttons are clicked). I found some code that is supposed to play clips consecutively, but am not sure if this should stand alone, or be the “event handling code” between the listener you suggested, as it includes a listener itself.

      In the example below, my flv object is named “video_mc”

      import fl.video.*;
      var myvideoarray:Array=new Array();
      myvideoarray[0] = “video1.flv”;
      myvideoarray[1] = “video2.flv”;
      myvideoarray[2] = “video3.flv”;
      var k:Number = 0;
      video_mc.play(myvideoarray[k]);
      video_mc.addEventListener(VideoEvent.COMPLETE, loadnext);
      function loadnext(complete:VideoEvent):void {

      k++;
      if (k>= myvideoarray.length) {
      k=0;
      }
      video_mc.play(myvideoarray[k]);

      }

      Even when I try to compile this code directly, I get an error: The class or interface ‘VideoEvent’ could not be loaded: function loadnext(complete:VideoEvent):void {

      Can you see what might be wrong? Or am I on the wrong track completely for what I want to do?

    12. So just in case anyone else ever wants to do this, here is the AS2 code for the buttons on the button frame:

      button_1.onRelease=function(){
      video_mc.contentPath = “video/video1.flv”;
      flv.play();
      _root.k = 0
      }

      button_2.onRelease=function(){
      video_mc.contentPath = “video/video2.flv”;
      flv.play();
      _root.k = 1
      }

      button_3.onRelease=function(){
      video_mc.contentPath = “video/video3.flv”;
      flv.play();
      _root.k = 2
      }

      And the AS2 code for the flv element (on the flv layer frame):

      stop();

      var myvideoarray:Array=new Array();
      myvideoarray[0] = “video/video1.flv”;
      myvideoarray[1] = “video/video2.flv”;
      myvideoarray[2] = “video/video3.flv”;

      var k:Number = 0;
      video_mc.play(myvideoarray[k]);

      var listenerObject:Object = new Object();
      listenerObject.complete = function(eventObject:Object):Void {

      k++;
      if (k>= myvideoarray.length) {
      k=0;
      }
      video_mc.play(myvideoarray[k]);

      };
      video_mc.addEventListener(“complete”,listenerObject);

      Works like a charm, flips between clips or plays straight through. Thanks so much for your help!

    13. Iwas using this tutorial on how to create chapters in flv like on DVD but I couldn’t work it out.
      Maybe it’s coz this bit here is not clear to me.

      “**Note** Make sure you encode your FLV with at least a keyframe every 1 second otherwise you won’t be able to start and stop at the correct times. For this example I have it keyframe every 15 frames, cause the video plays 15fps.”

      Somebody please help me. I also need to know the AS version used.

    14. The AS version of this tutorial is AS2. About the encoding note, what did you use to create your FLV, did you encode/compress it yourself. If so there maybe a setting to set the keyframe rate. Let me know if you still need help as I could try to walk you through it if need be.

    15. I used Any Video Converter software to convert to flv from .wmv or .avi.The conversion specification for the flv are video bitrate of 256 and 30fps video frame rate.
      I really need help to create chapters or title links for a clips of more than 50 minutes and of approximately 110MB in size

    16. What is the code that you are using? It is hard to troubleshoot without knowing what you are doing or not doing. What things are happening when you try to play the clip?

      The Note I had in the tutorial basically means that Flash needs to be able to have a keyframe to stop or start on in my example. If encode your flv with something like keyframe every 300 frames and your video flv plays at 30 fps, there would only be a keyframe every 10 seconds.

    17. Thanks.Am new at flash coding.Am using your code.I can’t have the chapters playing as expected though the clip is playing normal as whole.The bit about placing code to the button is what I may not be doing right.

    18. Have you gotten it to work. If not, post the code you are using for the movie and for the buttons and I can take a look at it.

    19. Am using the exact code with no additions as the code given here.Am I supposed to add any

    20. So I followed this and I keep getting a compiler error regarding the “Void” on line 4. It says: 1046: Type was not found or was not a compile-time constant:Void.

      Any thoughts?

    21. NW – the problem that you are probably running into is that you are publishing for AS3 and I originally wrote this in AS2. Go to you publish settings and change it to AS2 and it should work for you. Let me know if it doesn’t or if you need help with an AS3 version of it, I could get one pulled together.

    22. I actually tried that as well. When I change it to AS2 I get “The component ‘fl.video.FLVPlayback’ requires ActionScript 3.0.”

      I’ve learned AS3 only so if you could pull one together that would be fantastic.

    23. I have written a language learning program om Swishmax3. I have a menu to direct the user to different lessons. The program need a lot of user action.FOR EXAMPLE: Play, next, menu etc.
      I am new to programming. Aby suggestions, please!

    24. Hi – this has been really awesome – im no flash coder, but i work in vidoe and being able to make a chapters video is great but the one i have is 40 mins and i got the first tutorial at the top working no problem – but jason – i cant get any of your code to work – im a bit confused over the video_mc thing – is that the name of your file – i followed the first tutorial without any issue but i kept getting erros about the ‘wrong kind of bracket??’ Could you help – hwta vie done now is split my 40 min vidoe into separate videos and was going to make it run as a single piece or insatly jump to a section, that section being a lot smaller than having to lead the whole thing!!!! please help! arrggg!!!

    Leave a reply