14 Replies Latest reply on May 2, 2011 12:49 PM by adninjastrator

    Interactive Video Content

    RobstaHendricks

      Hey Guys,

       

      1st post here, as not finding the exact answer I need from google/forum searching.

       

      Basically, What I want to do is after playing/streaming (all online content) one HD video, preload two others, and after a choice is made, unload the undesired choice.

       

      The choice will be made via a pair of overlay button or an animated choice.

       

      The problem is that I am new to Action Script/After Effects/Streaming in general. Rest assured though, I have a background in programming, so will likely understand the steps in the Action script.

       

      The key is that the 2nd tier videos are preloaded in order to be played seamlessly against the first, and obviously want to free up the memory used from the unwanted choice.

       

      I will be leading into other videos further along, but think that an example of how to achieve this should suffice in latter development.

       

      Any tips on where to start would be great...

       

      All the best,

       

      Robsta

       

      P.S. Have put this in the Flash & After Effects forums, as unsure as to which the question relates. Apologies in advance for the incorrect one, please let me know where appropriate to place. It may also be found that I'm in the wrong section of the Flash forums, so please let me know here also, as I'm new to Flash and don't know all the components.

        • 1. Re: Interactive Video Content
          adninjastrator Level 4

          I'm sure there is a number of ways to do this...

          Here are my thoughts.

          Is this intended for over the Internet delivery or a stand alone application?

          the reason I ask is because of your "preload" comment.

          Completely downloading 3 HD videos could easily take many minutes to accomplish. And really there is no need to do so.

          Here's one option. You progressively download the first video, it buffers far just a couple seconds then the viewer can start watching. As soon as it has completely downloaded you "preload" the other 2 videos, but only the first 10 seconds or so of the 2 "choice" videos. You only need a little bit in the buffer anyway to successfully download a progressily downloaded video file.

          Couple ways to download only a little bit of each file...

          one, use a loader like

          http://www.greensock.com/loadermax/

          or using NetStream, set the buffer of the "choice" set of videos to 10 seconds or so

           

          ns.setBufferTime(10);

          then pause the video so it doesn't start playing until a play button is clicked

          ns.pause();

           

           

          No need to waste bandwidth downloading an entire unwanted video file.

           

          I don't think you can use the same NetStream for 3 videos all at the same time so you will need to give each a separate name. And I would not try to download all three at the same time or you will be dividing the viewers download bandwidth in thirds... making the first video VERY slow to download... so don't get the others downloading until the first one has finished.

           

          More on NetStream here:

          http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/NetStream.htm l

          NetStream will give you much more control and is far more versatile than using components.

          Best wishes,

          Adninjastrator

          • 2. Re: Interactive Video Content
            RobstaHendricks Level 1

            Wow, that sounds like exactly what I need.

             

            I concur completely with the desire to not completely stream 3 complete videos. I think the aim would be to begin the first video, and when I got a certain amount of the way through that one, prebuffer (10 seconds sounds great) the other two in preparation for a choice to be made.

             

            How would I go about setting a point as to where the latter 2 videos would prebuffer that 10 second segment? And is there a mechanism to almost Garbage Collect (unsure of the AS terminology for this) the video that I no longer require?

             

            Also, I think that there will be further choices to make later, so is there a method to keep the NetStream objects (OO), set the unnecessary ones to null, then re-use the NetStreams as and when necessary. For example, 1 video leads to the option of picking from 2 videos... One of these gets loaded (the other not) but either choice would lead into the same 3rd tier video with potential for a further 2 choices on a 4th tier video:

               _   _

            --|_|--|_|-- (Horizontal lines are videos, vertical | pipes are choices or return points.

             

            Hope that makes sense?

             

            Robsta

            • 3. Re: Interactive Video Content
              adninjastrator Level 4

              Interactive video is not a "video" strongpoint, since video of and by itself is not interactive.... so you have to add some stuff to the video file to make it apprear interactive.

              Since this is a fairly large and complex project, I'd suggest you test on small, "proof of concept" models. Break the project down into sections and only add those sections to the main project after they are proven to work.

              So for example... at a certain point in video one, begin download, buffer, and then pause video two.

              To do so you could set a cue point in video one to do some action at a set time in the video. This is called an "event" cue point.

              http://help.adobe.com/en_US/AdobeMediaEncoder/4.0/WSC039D82B-0C0E-4c53-BEBA-4C6C4B400160.h tml

              but Google for more info... using cue points can be a little tricky, but it does give you a way to fire off events at various points in the video:

               

              // This code controls the cue points //
              ns.onCuePoint = function(evt:Object){
                  trace(evt.name);
                  trace(evt.time);
                  if(evt.name == "play_vid1") {
                      trace("YO!Loading wide_holder!");
                      wide_holder.loadMovie("rm/images/black_bear.swf");
                  }

                  if(evt.name == "play_vid2") {
                trace("YO!Loading standard_holder!");
                      standard_holder.loadMovie("rm/images/sqis.swf");
                  }
              };

               

              In this example, at the event cue point "play_vid1", a second video begins playing, even while the main video is still running. In your case you would call the second video to start the download, set the buffer for 10secs or so but then pause the video before it actually begins playing.

              Then that second video also has cue points embedded in it to fire off other events.

              Cue points... looks like that's where some of your answers are.

              Best of luck,

              Adninjastrator

              1 person found this helpful
              • 4. Re: Interactive Video Content
                adninjastrator Level 4

                One more feature of NetStream you might be able to incorporate is the .onStatus.

                Here is an example of multiple options that could be made available when the video reaches the end:

                 

                ns.onStatus = function(info) {
                  if(info.code == "NetStream.Play.Stop") {
                  trace("Video complete")
                    ns.seek(60);
                //  ns.play();
                  ns.pause();
                //  gotoAndStop("end");
                  getURL("http://www.cidigitalmedia.com/video.html", "_blank");
                  }
                }

                if the video "stops", meaning it reaches the end...

                first, trace a "Video complete" message during testing

                then seek back to 60 seconds into the video

                you could play video again from that point but for now "play" is commented out and instead the video is "paused" at 60 seconds, ready to play from that point on if desired.

                The "gotoAndStop" command could direct the user to some other part of the Flash timeline which is not a part of the video and allow user interaction with that part of the project.. however, that is commented out and instead a getURL opens a new window displaying the web site listed.

                 

                So anyway, there are a lot of things that you can make happen at the end of the video....maybe you will find this helpful.

                Best wishes,

                Adninjastrator

                1 person found this helpful
                • 5. Re: Interactive Video Content
                  RobstaHendricks Level 1

                  Thanks again, Adninjastrator,

                   

                  It looks like there are quite a few routes for me to explore now. There was one point that grasped my attention though, and that is the point of actually adding the interactivity.

                   

                  Can you see that there will be any major issues in physically adding buttons that will appear on when NetStream.Play.Stop is fired? What is the best way to add these, and physically in hiding the standard 'Play/Pause' controls? I am assuming that I could create the buttons at the beginning, that hide them from view, and when the appropriate moment arrives, bring them to the foreground (z-order?) and have the action script from them trigger NS.Play on one of the other videos?

                   

                  One concern I have is that I have no prior knowledge of how ActionScript would share various elements to other sections of code. For example, will the code for the buttons have trouble in seeing the NetStreams that have been created elsewhere in the project? Can you globally declare elements, so all code in a project can access them?

                   

                  I am used to coding for the .Net platform (specifically .NetCF in C-Sharp) so am unsure about passing objects around in Flash, and even if the language is OO. Appears to be focused around a scripting (procedural) language, in which case can you foresee issues with globally sharing elements such as the 3 NetStreams?

                   

                  All the best,

                   

                  Rob

                  • 6. Re: Interactive Video Content
                    RobstaHendricks Level 1

                    I am also watching a tutorial about StageVideo from gotoAndlearn.com, and was wondering whether this is something I should attempt to implement as the video content that will be used is currently at 1080P25 and once streamed down, the content could appreciate GPU driven acceleration.

                     

                    Now my worry is that from viewing the first 3 minutes of the tutorial, it involves downloading Flex Hero; another tool that I have never used before, and given the fact that I have roughly a week and a half to develop the solution, I do not want to bite off more than I can chew. Are the features of StageVideo going to conflict with what I am aiming to do, or will they add further features to aid in the development, and worth learning?

                     

                    The help that you have given so far is proving extremely helpful. Basically, I have been set the task to help my partner to code in the framework that allows her to show her video content for her Final Major Project at University, so truly appreciate all the help you are offering.

                     

                    All the Best,

                     

                    Rob

                    • 7. Re: Interactive Video Content
                      adninjastrator Level 4

                      Yes this is a rather big project so just break it down into small sections, getting each section working separately before trying to compine them all .... and yes there will be more than one solution or method for getting this to work.

                      I would suggest some steps like this:

                      First, create a simple custom made NetStream player... with only whatever simple buttons you might want to control the video... or no buttons at all, just get it to play a video... that's all.

                      Second, add some sort of interactivity to the video... embed a couple cue points or use the onStatus to fire some event at the end of the video.

                      This action would come from the metadata inside the video itself and not from any button controls.

                      Third, create a button/buttons that leads to some separate action, and be able to change the visibility.

                      After you have a good handle on the steps above.....

                      Fourth, create a second player, using what was learned in the practice above and create interaction between the two...

                       

                      As for the appearance of buttons, Flash is a very good medium for creating button and using them for interactivity. There are a number of ways to display buttons and change their visibilty.... which you will have to discover in your "create a button" section above. z-indexing is a CSS characteristic, not one that is used in Flash. Instead, to display visible/invisible Flash uses a couple of methods, one is to access the _visible

                      some info here... Google for more on this property:

                      http://www.adobe.com/support/flash/action_scripts/actionscript_dictionary/actionscript_dic tionary109.html

                      another method is to change the _alpha property of the button.

                      For example, here is a function that "turns on a indicator light" depending on which element of an array is selected... this could easily be adapted to turn on (make visible) buttons depending on other circumstances.

                      this first sets the _alpha for all the buttons = 0 (they are invisible)

                      but if the array element [0] is selected, set the _alpha =100 (completely visible)

                       

                      function indLights() {
                        il0._alpha = 0;
                        il1._alpha = 0;
                        
                           
                      if (currentIndex == 0) {
                        il0._alpha = 100;
                        trace ("Index is 0");
                      }
                      else if (currentIndex == 1) {
                        il1._alpha = 100;
                        trace ("Index is 1");
                      }
                        
                      else
                      {
                        il0._alpha = 0;
                        il1._alpha = 0;
                           
                      }
                      }
                      indLights();

                       

                      Code snippet used for the indicator lights on this page:

                      http://www.uncledoodad.com/02_05_11/02_05_11.html

                      Click on different songs or use the forward button on the player to make various buttons appear/disappear. Buttons are always there... just not always visible.

                       

                      For communication with different parts of the project... I was assuming that you would wrap this all up in one Flash project rather than multiple different Web pages. Communication within one project would not be a problem... just be sure you use unique names for all the various elements, that is, their "instance" names.

                      Best of luck on your project!

                      Adninjastrator

                      • 8. Re: Interactive Video Content
                        adninjastrator Level 4

                        Is this application targeted for Internet use or a stand alone kiosk or something like that?

                        Adninjastrator

                        • 9. Re: Interactive Video Content
                          RobstaHendricks Level 1

                          My gosh, I think this is the first time ever that I've received such useful advice so damned swiftly in ANY forum. Thanx again for that

                           

                          I think that, in short, the answer is both. When she shows this to the university, I am uncertain as to whether or not there will be a web server available, but it will need to be available online after, as she has been working with a client for the content being shown. All of which is non profit for her, but needs to be available online after.

                           

                          Also, noticed that a couple of the commands that you gave were from AS2, but I started my project using AS3. Given the amount of help you are giving me, it sure is no problem for me to google the equiv , but if you know the AS3 equivs for future posts that would be great.

                           

                          Are you currently utilising StageVideo, and if so, is there anything that I need to know in particular when it comes to hosting this such as hosting components, HTML code etc. I have already, by example, coded in to ignore StageVideo if unavailable, and also think I'll need to ignore all together if the user is on an android device, as I'll only have one SV stream available using the Video component in favour of SV.

                           

                          I've blocked in a couple of Cue Points now, and am digesting a few examples for implementing them during playback.

                           

                          One further question I have is whether after creating my project with F Builder, I can still then open that project in Flash and still work with Flex Hero (latest build) for the StageVideo stuff?

                           

                          All the best,

                           

                          Rob

                          • 10. Re: Interactive Video Content
                            adninjastrator Level 4

                            I got my start some number of years ago, before AS3 and have not made the switch yet... but for someone starting out, I'd certainly recommend using AS3.

                            But, I really can't be of much help... other than to show you that certain things can be done in Flash (and my examples are all AS2).

                            The reason I ask about Web delivery is because you will have to deal with video bitrate and various Internet connection download speeds. You will have to encode the video with a proper bitrate and format for Web delivery, and with multiple videos, realize that your viewers may not have the Internet connection speed to be able to download more than one file at a time. Here is a little review from another post:

                             

                            Video bit rate

                             

                            One of the principle of goal setting is to "Begin with the end in mind". In this case it'll be very hard to give good recommendations because the end is not defined. So I'll just make a few assumptions and you can correct me as needed.
                            First, I'll assume that since you are converting to Flash, you want to deliver this video over the Internet. If that's true, then we'll have to make some assumptions on the Internet connection download speeds of your potential viewers. Let's just say that most have at least a 1.5Mb connection or faster.
                            OK, that would mean that a video bitrate of half that should usually provide a video download that is not interupped by buffering (most of the time anyway). So assuming a video bitrate of 750kbps, what would the optimum display dimensions be?
                            Before we decide, here's a little info about bitrate. For highest quality playback, the video bitrate is tied directly to the display dimensions. That is, the larger the display, the more incoming data is required to properly display the video. Think of bitrate in terms of a can of paint. If you have 1 quart of paint, you might be able to do a very nice job on a 32 X 24 foot area. But if you try to stretch that same amount of paint out over a 64 X 48 foot area, the coverage will not be nearly as good and you get poor results.
                            In the same way, a video displayed at 640 X 480 pixels will require 4 times the bitrate as a video displayed at 320 X 240 pixels to produce the same quality. So for example a video with a bitrate of 100kbps, displayed at 160 X 120 will produce the same quality results as a video with a bitrate of 1600kbps if displayed at 640 X 480.
                            So to boil it all down, video bitrates of 750kbps, even up to 1000kbps can usually get delivered of the Internet on most high speed connections. Higher bit rates may work for really fast connections but will cause problems for viewers with slower connections. Video display size has a direct bearing on the final quality. In the 750 to 1000kbps range, display size should be kept around 450 or 500 width max (and whatever height the aspect ratio calls for). Yes it can be displayed larger, but the quality will suffer.
                            Sound like your audio settings are fine, especially for Internet delivery.
                            As for framerate, maintain the original raw video framerate for best results. So if the video was shot at 24fps, leave it.
                            As for video converters, do you have the Flash 8 Video Converter? It works just fine for video to be delivered over the Internet. Remember, you are taking a Cadillac version of video (h.264 HD) and stuffing it into a Chevy body to get it to work over the Internet.

                            I have a feeling that by the time you finish this project, you'll be the expert!

                            Best wishes,

                            Adnijastrator

                            • 11. Re: Interactive Video Content
                              RobstaHendricks Level 1

                              That's a fantastic article excerpt and explains a lot. I was already considering having 3 options for formatting, Low (480P), Medium (720P) and High (1080P) but may scrap High if testing causes issues there. Here in England, household Broadband tops out at 38 Mbps and that's not common, and also assumes that you'll actually get that bandwidth. We get around 21 Mbps from the 38, and we live in London, where 24 Mbps (ADSL 2) was first introduced prior to the days of fiber!

                               

                              With your pointers, I've already coded one project which plays video 1, then when the cuepoint is hit, starts buffering the first 10 seconds of videos 2 & 3 and pauses them. After video 1 finishes, I'm auto playing (.resume()) video 2. I can hear the audio playing in video 1 after the cuepoint is hit, but the problem is that the z-index is placing videos 2 and 3 atop vid 1, and upon resuming vid 2, video 3 is still in front.

                               

                              I looked through all the properties for each of the 3 NetStreams I have, but cannot see an obvious route to change which is closest to the camera. A SendToBack() method would be nice, or even a method to .Open(vidURL) rather than .Play(vidURL) as obviously I won't be able to pre buffer (.bufferTime) anything without physically attaching it to content first.

                               

                              Can you think of any way to get around this issue?

                               

                              Again, thanx for all the help thus far

                              • 12. Re: Interactive Video Content
                                RobstaHendricks Level 1

                                Ok, so I found that there is a StageVideo.Depth property, which allows me to change the ordering, though not entirely sure that I understand the numbering... The bigger number appears to bring closer to the front?

                                 

                                The issue now is that if we cannot use StageVideo, then we have to use a Video object which does not have the same properties. Any ideas on how to achieve the same effect?

                                 

                                Many thanx in advance.

                                 

                                Message was edited by: RobstaHendricks

                                • 13. Re: Interactive Video Content
                                  adninjastrator Level 4

                                  Sounds like you are making GREAT progress!

                                  As for download speed... in the US we are improving but having 20Mbps download speed is still pretty rare. Also consider that any viewer using wireless connections will get only a fraction of the total download speed available if hard wired. And that download speed will fall off quickly as distance from the access point increases.

                                  While this may not exactly describe what you need, here are steps that should be included when switching videos.

                                  These steps need to be among the very first actions in either the autoswitching to new video function or using a button to switch videos.

                                  So that button action would be:

                                  First, be sure to stop the current video from playing,... have you tried, NetStream.close();

                                  This will stop any further downloading and/or playing.

                                  Then position the next video screen so it will display... change z-index, visibility, or whatever method you are using.

                                  Then and only after first doing these two steps do you start/switch to the second video.

                                  Easier said than done I know but it's a very common error when starting a second video... oppps I forgot to shut off the first one.... so of course it keeps playing.

                                  Best of luck,

                                  Adninjastrator

                                  • 14. Re: Interactive Video Content
                                    adninjastrator Level 4

                                    From resource:

                                    StageVideo objects always display behind other objects on the stage. If a platform supports more than one StageVideo object, the depth property indicates a StageVideo object's depth level. The bottom StageVideo object's depth property has the smallest value. If multiple StageVideo objects have the same depth setting, the order they appear in the stage,stageVideos Vector determines their relative depth.

                                     

                                    So the higher the number, the higher in the stacking order.

                                     

                                    I can't really advise on using AS3 but it seems like StageVideo should work for this.

                                     

                                    One old fashion way would be

                                    getNextHighestDepth (MovieClip.getNextHighestDepth method)

                                    http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00001303.html

                                    and

                                    swapDepths (MovieClip.swapDepths method)

                                    http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00001303.html

                                    or just change the _visible or _alpha property to make one player visible, another disappear.... but any buttons as a direct part of that player would not be available... they would have to be left out in the open.

                                    Click a button or fire off a function and:

                                    you could even change the dimensions of the player object to 0px wide, 0px high... it's on stage but has no dimensions so will not display

                                    or even move the player off stage until needed, set _x and _y to some negative values great enough to completely remove the player from the stage...

                                    For example:

                                     

                                    play15.pl1.high_band.onRelease = function(){
                                    ns.play("vid_files/cat/CEIOL_for_MD_narrated_8-25-09.flv");
                                    video_screen._width =0;
                                    video_screen._height =0;
                                    video_screen._x = -325;
                                    video_screen._y = -219;
                                    trace("vid_files/cat/CEIOL_for_MD_narrated_8-25-09.flv");
                                    }

                                     

                                    sets video player to 0 width and 0 height and also moves player off stage to -325, -219

                                    These are fake numbers put in to show possibilities. Original is:

                                     

                                    video_screen._width = 450;
                                    video_screen._height = 337;
                                    video_screen._x = 325;
                                    video_screen._y = 19;

                                     

                                    making these changes allows the player to be resized from wide screen to standard 4:3 aspect ratio and positioned in a little different spot on the stage than the wide screen version was.

                                     

                                    Best of luck,

                                    Adninjastrator