17 Replies Latest reply: May 28, 2013 4:28 PM by Laer2 RSS

    Proper method for interactive video

    Laer2 Community Member

      Hi.  It's been a while since I've used Flash/Actionscript, and I've been having trouble figuring out the proper way to do this.  I'm hoping someone here can outline the proper methods.

       

      Basically, I'm creating a Flash project where it will play a video, then at a certain point, stop and display some buttons, and then go to the appropriate video based on what button was pressed.  Sort of a choose your own adventure type of thing.

       

      Without knowing the current/ideal way of doing it, how I tried it was by having the first video (embedded into the project) on one layer, and at the end of that video, I have a stop()  on another (script) layer (on the last frame of the video in the timeline), and I had the buttons (which appear on top of the video) on another layer at that same frame.  So, in theory, it plays the video, hits the last frame, stops the timeline, and waits for one of the buttons to be clicked.  Each button triggers and gotoAndPlay(), which takes the timeline to one of the other two videos that are located one after the other, after the first video, on the same (video) layer.

       

      Problem is, I have a bit of a catch-22...  I was aware that there would be sync issues between the video and it's audio (addressed by doing the audio as Sync or something in the audio properties)... however, I was suprised to see that the video does not maintain sync with the other layers (script).   So, what happens is that it plays the video, but SEEMS to play it faster than the script layer, so it reaches the end of the video before reaching the (identical frame) location of the actionscript.  As a result, the video loops, and the stop() is hit sometime during the start of the second playing of the video.  The buttons act similar, appearing sometime AFTER the point in the video where they should.

       

      I had embedded the video with the assumption that this would give me hard sync between it and the timeline, since it's physically there in the timeline, and you can see the frame at which it ends... and I thought then putting a stop() on that frame (but on a different layer), would guarantee that the stop code gets hit at the same time the end of the video was.

       

      I've tried a number of things, like putting the actionscript code on the frame after the video on the same layer, figuring a single layer can't go out of sync with itself... but that didn't work either.

       

      Looking into it, I saw that one option was to not embed the video, but to have it reference an external file (which, supposedly, would result in no sync issues).  But, in doing that, I'm not aware of how the rest of the timeline would know when the video has reached certain spots of the video.

       

      I'm sure the proper method is entirely different from what I'm doing, but I'm not familiar with other methods.  I'm hoping someone can outline the proper procedures (in as much detail as possible, since I probably won't know about much of what you are explaining).

       

      Keep in mind, again that this is basically what I want to do:

       

      -Play video 1

      -Stop timeline, display buttons, wait for response

      -Based on which button is pressed, jump in the timeline to video 2 or 3 (...I'm assuming all the vids will be on one layer, one after the other, with a label at the start of each one)

       

      Hope you can help.  Thanks.

        • 1. Re: Proper method for interactive video
          kglad CommunityMVP

          use an flvplayback component to play your videos.

          • 2. Re: Proper method for interactive video
            Laer2 Community Member

            I tried that, but still couldn't get things working.  Would I use the orginal method I outlined?

            • 3. Re: Proper method for interactive video
              kglad CommunityMVP

              did you add an flvplayback component to the stage?

               

              did you assign its source using actionscript or in the  properties panel (with the component selected)?

              • 4. Re: Proper method for interactive video
                Laer2 Community Member

                One of the first issues I ran into was that the video was smaller than it was supposed to be (dimensions).  Not sure why that was happening, nor how to fix that.  It was half size, or something like that, compared to the stage (which was set to the size of the original source).

                 

                As I said, I'm not entirely familiar with these methods, which is why I'm asking what the procedure is.

                • 5. Re: Proper method for interactive video
                  Laer2 Community Member

                  I've sorted out the size thing, and have all the videos using the FLV Playback component, but am unclear on how to utilize this with actionscript, as I intended.  Since the element doesn't take up the same duration on the timeline as is the duration of the video, I have no way of telling where to put the actionscript on the last frame.

                   

                  Do I have the FLV Playback element only take up 1 frame in the timeline (and somehow code it so that it triggers something when it reaches the end, assuming the FLV Playback component can actually detect the end of the video)?  Or do I do it the way I originally did, and have the FLV Playback element take up a set number of frames in timeline equal to the duration of the video, and then have the actionscript (on a different layer) on the last frame of it?  I really don't understand the proper method I should be using here.

                   

                  (BTW, I defined the source material by using the FLV Playback properties page)

                  • 6. Re: Proper method for interactive video
                    kglad CommunityMVP

                    yes, the flvplayback component will be on one frame (eg, on your main timeline) and that timeline will not advance, if ever, without some actionscript executing.

                     

                    if you want the component to trigger some action at the end of the video, you will use add a listener for the videos end.  if you want to trigger some action during the video, you will add cuepoints to the video, and a cuepoint listener to detect those cuepoints.

                     

                    if you want both, you will add both listeners.

                     

                    now, which listener do you want to add and what do you want to happen when that event is detected?

                    • 7. Re: Proper method for interactive video
                      Laer2 Community Member

                      Hi, kglad.  Conceptually, I understand, but I'm totally new to most of these things.  I've worked with actionscript and flash in general, but am still very green when it comes to things like event listeners and some of the more technical coding.

                       

                      I've been frustrated with the tutorial vids I've been finding, as they are often very generic (...5 minutes of video, only to show you how to load the component onto the stage, then point to a video).  But, I did finally find one that seemed to address more detail.  It's the ActionScript 3 Video Basics tutorial on gotoandlearn.com.  All very techy code, which goes right over my head, but at least it's seemingly usable and relevant.  I just don't like using coding/methods I don't fully understand, as then you are helpless if something goes wrong.

                       

                      In answer to your question, what I'm after (in more detail) is this:

                       

                      -A video plays (Intro video)

                      -After that video, a looping video plays, with buttons (Scene selection thumbnails) on top of it (Selection menu with looping background)

                      -Clicking on one of the scene thumbnails then goes to the scene player section

                      -Scene plays, and when it reaches the end of the clip, two buttons appear, and it waits (parked on last frame of the video via a stop() command)

                      -Pressing button A jumps the timeline ahead 2 frames to the A video (which is located right after the initial scene video, right after the stop()), and that video plays, and stops at the end (via another stop() command.

                      -Pressing button B jumps the timeline ahead many frames (past that second A video, over to the B video, which is the third clip on the video timeline, consisting of the initial scene, the A clip, and now the B clip), plays that and stops.

                       

                      Now, I am 90% sure that the way I am currently doing this is inefficient, obsolete, and to anyone half-decent at Flash authoring, completely wrong... but it's the only way I currently know.

                       

                      I've done the above like this:

                       

                      Timeline has the first (Intro) video embedded, then the second (Scene Selection loop), with a label ('Loop') at the first frame, and a gotoAndPlay('Loop') on the last, with the graphics and code for the scene selection thumbnail buttons occupying the duration/span of that loop clip, on a different layer.

                       

                      I have a MovieScreen movieclip, which has a series of one frame movieclips within it.  Each of those movieclips is the full video of a scene.  Think of the MovieScreen mc as a sort of Jukebox, containing a series of 1 frame 'records' (those being a movieclip that contains the video of each scene).  Pressing one of the thumbnail Scene buttons in the Scene Selection simply moves the MovieScreen movieclip timeline to the appropriate 'record' (frame containing the appropriate movieclip that contains the scene you selected), and jumps the main timeline (via a gotoAndPlay()) out of that Scene Selection loop, to the next frame after it, which is a 'Selection made' clip (an exit animation), which plays, and then parks on the 'Play Scene' section.

                       

                      The Play Scene frame of the main timeline simplly contains the Moviescreen movieclip, which (at this point) has had its own timeline jumped to the appropriate 'record' (movieclip within it), and that movieclip plays.  This is my (probably laughably incorrect, yet functioning) method to have a global 'movie player' frame in the main timeline, but have it able to play any of the available videos, rather than having a moviescreen for each scene.

                       

                      Certainly, I'd assume there is a far better way to do this, most likely with pure actionscript, where the scenes are called up, and things are dynamically generated... but, again, I don't know how to do that sort of thing.

                       

                      My first attempt had me embedding the videos directly into the timeline, which had the benefit of having the clip literally there on the timelines, taking up the literal amount of frames, and being visible during the timeline editing.  Problem is, it wouldn't play in sync with the rest of the layers (which was a real surprise, as I assumed that the whole point of embedding it would be to lock it to the timeline).  So, my codes/graphics that were placed on other frames at the end of the video clip's timeline layer didn't trigger in sync with the end of the clip (...which still puzzles me).

                       

                      My second attempt had the videos being called on as external clips, but that also had its share of problems, plus without the clips physically on the timeline, I had no way to know when the clip ended (...assuming I was to have the actionscript/graphics on a particular frame in the timeline... which I suspect now is wrong thinking).

                       

                      My third attempt used the FLV component.  First of all, the videos where about half the size that they should have been, plus where positioned half off the screen.  Today, I managed to figure out how to remedy that, so that works.  However, I soon realized that when placed on the stage, the resulting element on the timeline was an infinite duration, and not representitive of the duration of the clip, like an embedded vid would be... So, again, I had the problem of how to know when the clip ended, and where to place the script/graphics in the timeline.

                       

                      Researching a bit more today, I see that you can read metadata from a clip, which may be relevant to triggering a stop() or a loop back or a gotoAndPlay()...although I'm not entirely sure how it would all work.  I couldn't see an obvious way to loop a clip (from the FLV Playback properties).  So, even though I suspect this is the proper way to be doing this, I'm completely lost on how to utilize it.

                       

                      As well, I've been reading that the current version of the FLV Playback component has an issue with seamless looping... in that it supposedly can't.  So, that's yet another problem.

                       

                      Sorry for the novel, but I wanted to give everyone the full info on what I'm doing and what troubles I'm facing here.  Sorry too for being green on this.  I'd be happy to watch/read some tutorials on this, but really haven't found anything that either addresses things more than just 'load it onto the stage and select the video location', or ones that are the opposite end of the spectrum, and are way over my head.

                      • 8. Re: Proper method for interactive video
                        Laer2 Community Member

                        Okay, so Question1:

                         

                        If I have the FLV Playback component occupying frame 1 of the main timeline, and I have a stop() on this frame as well, how would I have the main timeline advance to the second frame (of the main timeline) once the video has completed?  Would I be doing some sort of listening for the metadata for a 'video ended' type of event?  (I literally JUST learned about the whole metadata events in videos a few minutes ago)

                         

                        Question2:

                         

                        How would I have a FLV Playback component loop a video?  (Sorry, I did a search for that, and just found endless streams of posts of people discussing it, having trouble with it, and generally never actually explaining how to do it!)

                         

                        Question3:

                        Is there, in fact, an issue with seamless looping with CS6 Flash?  If so, any way to fix that?

                         

                        Question4:

                        The Flash CS6 manual has only two mentions of FLV Playback, and in the only relevant one, it says "For more information see The FLV Playback component"... yet there's no link, nor any indication of what it means by that.  Is that a chapter?  (There doesn't appear to be one)  Is it a separate manual document?  (I don't see one here)  Is it referring to the component itself?   Where IS the documentation for the FLV Playback component?

                         

                         

                         

                        Having the main timeline consist of single frame sections (consisting of a FLV Playback component for each section vid) would certainly be a heck of a lot cleaner and easier than my current 'actual duration of clips' setup.

                        • 9. Re: Proper method for interactive video
                          kglad CommunityMVP

                          -A video plays (Intro video)

                          -After that video, a looping video plays, with buttons (Scene selection thumbnails) on top of it (Selection menu with looping background)

                           

                          add an flvplayback component to your frame 1stage and assign it an instance name (in the properties panel), eg, flv_pb.  in the properties panel, use:

                           

                          flv_pb.source="yourpath/yourintroflv.flv";

                          flv_pb.addEventListener(Event.COMPLETE,introCompleteF);

                           

                          function introCompleteF(e:Event):void{

                          flv_pb.removeEventListener(Event.COMPLETE,introCompleteF);

                          flv_pb.source="yourpath/yourloopingvideo.flv";

                          flv_pb.addEventListener(Event.COMPLETE,loopCompleteF);

                          }

                          function loopCompleteF(e:Event):void{

                          flv_pb.seek(0);

                          flv_pb.play();

                          }

                           

                          ////////////////////////////////////////////////////////// that's enough to get you started. let me know if you have a problems, so far.

                          • 10. Re: Proper method for interactive video
                            Laer2 Community Member

                            Cool.  Okay, I can pretty much follow the logic of that.  I'll give that a shot when I have some time, and see where that takes me.

                             

                            Thanks for your help so far, kglad.  Much appreciated.

                            • 11. Re: Proper method for interactive video
                              kglad CommunityMVP

                              you're welcome.

                               

                              (and, if you have no problems with that, let me know and we'll continue with the rest of your project.)

                              • 12. Re: Proper method for interactive video
                                Laer2 Community Member

                                Cheers!

                                • 13. Re: Proper method for interactive video
                                  Laer2 Community Member

                                  Hello again.  Okay, I tried it out, but am getting errors, undoubtably because I don't fully understand the code, as well as it probably not working correctly with my timeline setup.

                                   

                                  Assuming I have frame one as my 'Intro' and frame two as the 'Loop', and frame three as the 'Exit animation', could you outline the proper coding?  It seems the current code is meant to be on one frame, but I need the loop on frame 2 so that I can also put in the thumbnail graphics.

                                   

                                  Frame1: Intro (play once, move to frame 2)

                                  Frame2: Looping scene select (waits on one of the thumbnails to be clicked, which moves the Scene movieclip to the relevant frame/scene, then moves main timeline to frame 3)

                                  Frame3: Exit aniamtion (play once, move to frame 4)

                                  Frame4: Movie player (movie played based on selection during Looping Scene Select)

                                   

                                  For some reason, when I preview the current code (all the code being on frame 1, with a stop() after it), it quickly cycles through frames 1-3, despite the stop().

                                   

                                  I'm assuming I swap the flv_pb's with Vid_Intro (the name of my intro vid instance) for the first three mentions of it in your code, and swap the remaining (last) flv_pb's with Vid_Loop (the name of my looping background vid instance for the scene select), correct?

                                  • 14. Re: Proper method for interactive video
                                    kglad CommunityMVP

                                    the intro and loop are all in frame 1.

                                     

                                    just add an flvplayback component to your frame 1stage and assign it an instance name (in the properties panel), eg, flv_pb.  in the properties panel, use:

                                     

                                    flv_pb.source="yourpath/yourintroflv.flv";

                                    flv_pb.addEventListener(Event.COMPLETE,introCompleteF);

                                     

                                    function introCompleteF(e:Event):void{

                                    flv_pb.removeEventListener(Event.COMPLETE,introCompleteF);

                                    flv_pb.source="yourpath/yourloopingvideo.flv";

                                    flv_pb.addEventListener(Event.COMPLETE,loopCompleteF);

                                    }

                                    function loopCompleteF(e:Event):void{

                                    flv_pb.seek(0);

                                    flv_pb.play();

                                    }

                                    • 15. Re: Proper method for interactive video
                                      Laer2 Community Member

                                      That's going to be a problem, as I need the loop to be on a separate frame so I can bring the thumbnails in at that point (and not before).  I'm sure there's a way to code the thumbnails (and virtually everything else) all on frame 1, but I'm not well-versed enough in this kind of coding to know how to do it.  Unfortunately, I have to keep a few things familiar (if inefficient or unorthadox), just so I know what the heck I'm doing.

                                      • 16. Re: Proper method for interactive video
                                        kglad CommunityMVP

                                        then add flv_pb1 to frame 1 and use:

                                         

                                        flv_pb1.source="yourpath/yourintroflv.flv";

                                        flv_pb1.addEventListener(Event.COMPLETE,introCompleteF);

                                         

                                        function introCompleteF(e:Event):void{

                                        gotoAndStop(2);

                                        }

                                         

                                        and add flv_pb2 to frame 2 and use:

                                         

                                         

                                        flv_pb2.source="yourpath/yourloopingvideo.flv";

                                        flv_pb2.addEventListener(Event.COMPLETE,loopCompleteF);

                                        }

                                        function loopCompleteF(e:Event):void{

                                        flv_pb2.seek(0);

                                        flv_pb2.play();

                                        }

                                        • 17. Re: Proper method for interactive video
                                          Laer2 Community Member

                                          Cool, I'll give that a go.  Thanks.

                                           

                                          That new version also shows me where the conditional actions are to be placed, too, which is good.  That'll be one more step in helping me understand the commands and logic flow.