0 Replies Latest reply on Sep 10, 2010 3:13 PM by Ghanaman

    Problem With Displaying Movie-Clip/Video in AS3 Created MovieClip in Flash Video Playlist Player

    Ghanaman

      I am having trouble displaying a Movie Clip and Video in a AS3 actionscript created movie clip.  This issue exists with a Flash playlist video player.  The movie clip and video display as zoomed in and appear outside the designated area for the movieclip.  It is live on the web at:

       

      http://www.goldmoorsound.com/video.html

       

      The lines of code I edited are:

       

      // var congoText:MovieClip = new MovieClip();
      // congoText.name = "congoText";
      // Assign variable name for Net Connection (we use nc here)
      var nc:NetConnection = new NetConnection();
      nc.connect(null);
      // Assign Var for the NetStream Object using NetConnection (we use ns here)
      var ns:NetStream = new NetStream(nc);
      // Set the number for buffer time in seconds
      const buffer_time:Number = 2;
      // Set client for Meta Data Function
      ns.client = this;
      // Add the buffer time to the video object
      ns.bufferTime = buffer_time;
      // Boolean value for button functions, to switch in the conditionals
      var isPlaying:Boolean;
      // Assign NetStream to make player start automatically using video 1
      // Just comment out this line to make it not auto play first video
      //var videoNumber;
      var videoNumber:Number = 1;
      ns.play(VideoFolder + "/video" + videoNumber +".flv");
      //ns.pause();
      // Set isPlaying to true because the video is now playing
      isPlaying = true;
      // Set our flashing pauseClip to visibilty of false because the video is now playing
      pauseClip.visible = true;
      // Assign the variable name for the video object
      var vid:Video = new Video();
      // Set first video into the frame now so it is not empty at start up, and display title 1
      vid.attachNetStream(ns);
      // create movieclip for video to play in
      var vid_frame:MovieClip = new MovieClip;
      var congoText:MovieClip = new Congotext_mc();
          vid_frame.addChild(congoText);
          addChildAt(vid_frame, 2);
      var delay:Number = 5000;
      var delayincrement:Number = 5000;
      var Timer1:Timer = new Timer(delay, 1);
      Timer1.start();
      Timer1.addEventListener(TimerEvent.TIMER_COMPLETE, loadmc2);
      function loadmc2(e:Event):void{
          vid_frame.addChild(vid);
          addChildAt(vid_frame, 2);
         
      Timer1.stop();
      }

       

      // Add the video instance to the video frame movieclip we just created through code
      // vid_frame.addChild(congoText);
      // vid_frame.addChild(vid);
      // Set the dimensions to match your videos, you may have to adjust layout and stage size
      // if you make your videos a different size than mine
      vid_frame.width = 512;
      vid_frame.height = 384;
      // I offset video frame position for my layout
      vid_frame.x = 1;
      // Put the video on stage now using "addChildAt 2" to place it on the bottom layer
      // addChildAt(congoText, 2);
      // addChildAt(vid_frame, 2);
      // Set the titles of your video files here
      var title1:String = "Sade / By Your Side";
      var title2:String = "Coming Soon";
      var title3:String = "Coming Soon";
      var title4:String = "Coming Soon";
      var title5:String = "Coming Soon";
      // Add first title to the text field because the first video is playing
      title_txt.text = title1;
      // Add Error listener and listener for our play button
      ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
      playPauseBtn.addEventListener(MouseEvent.CLICK, playPause);
      // Add event listener so we can click our big pause clip center screen to resume play if paused
      pauseClip.addEventListener(MouseEvent.CLICK, pauseClipclick);
      // Error Function
      function asyncErrorHandler(event:AsyncErrorEvent):void{
                 // Do whatever you want if an error arises, I don't do anything, I get no errors
      }
      ////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////

       

       

      The entire code for my this aspect of my player is the following:

       

      // var congoText:MovieClip = new MovieClip();
      // congoText.name = "congoText";
      // Assign variable name for Net Connection (we use nc here)
      var nc:NetConnection = new NetConnection();
      nc.connect(null);
      // Assign Var for the NetStream Object using NetConnection (we use ns here)
      var ns:NetStream = new NetStream(nc);
      // Set the number for buffer time in seconds
      const buffer_time:Number = 2;
      // Set client for Meta Data Function
      ns.client = this;
      // Add the buffer time to the video object
      ns.bufferTime = buffer_time;
      // Boolean value for button functions, to switch in the conditionals
      var isPlaying:Boolean;
      // Assign NetStream to make player start automatically using video 1
      // Just comment out this line to make it not auto play first video
      //var videoNumber;
      var videoNumber:Number = 1;
      ns.play(VideoFolder + "/video" + videoNumber +".flv");
      //ns.pause();
      // Set isPlaying to true because the video is now playing
      isPlaying = true;
      // Set our flashing pauseClip to visibilty of false because the video is now playing
      pauseClip.visible = true;
      // Assign the variable name for the video object
      var vid:Video = new Video();
      // Set first video into the frame now so it is not empty at start up, and display title 1
      vid.attachNetStream(ns);
      // create movieclip for video to play in
      var vid_frame:MovieClip = new MovieClip;
      var congoText:MovieClip = new Congotext_mc();
          vid_frame.addChild(congoText);
          addChildAt(vid_frame, 2);
      var delay:Number = 5000;
      var delayincrement:Number = 5000;
      var Timer1:Timer = new Timer(delay, 1);
      Timer1.start();
      Timer1.addEventListener(TimerEvent.TIMER_COMPLETE, loadmc2);
      function loadmc2(e:Event):void{
          vid_frame.addChild(vid);
          addChildAt(vid_frame, 2);
         
      Timer1.stop();
      }

       

      // Add the video instance to the video frame movieclip we just created through code
      // vid_frame.addChild(congoText);
      // vid_frame.addChild(vid);
      // Set the dimensions to match your videos, you may have to adjust layout and stage size
      // if you make your videos a different size than mine
      vid_frame.width = 512;
      vid_frame.height = 384;
      // I offset video frame position for my layout
      vid_frame.x = 1;
      // Put the video on stage now using "addChildAt 2" to place it on the bottom layer
      // addChildAt(congoText, 2);
      // addChildAt(vid_frame, 2);
      // Set the titles of your video files here
      var title1:String = "Sade / By Your Side";
      var title2:String = "Coming Soon";
      var title3:String = "Coming Soon";
      var title4:String = "Coming Soon";
      var title5:String = "Coming Soon";
      // Add first title to the text field because the first video is playing
      title_txt.text = title1;
      // Add Error listener and listener for our play button
      ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
      playPauseBtn.addEventListener(MouseEvent.CLICK, playPause);
      // Add event listener so we can click our big pause clip center screen to resume play if paused
      pauseClip.addEventListener(MouseEvent.CLICK, pauseClipclick);
      // Error Function
      function asyncErrorHandler(event:AsyncErrorEvent):void{
                 // Do whatever you want if an error arises, I don't do anything, I get no errors
      }
      ////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////

       

      // PlayPause function for toggling the Play-Pause button /////////////////////////////////////////////
      function playPause(event:MouseEvent):void {
        
         if (isPlaying == true) {
            
             ns.pause();
             pauseClip.visible = true;
             isPlaying = false;
             playPauseBtn.gotoAndStop(2);

       

          } else {
                  
             ns.resume();
             pauseClip.visible = false;
             isPlaying = true;
             playPauseBtn.gotoAndStop(1);
          }

       

      }
      ////////////////////////////////////////////////////////////////////////////////////
      // And now we code the function that handles what happens when they resume after clicking pauseClip
      function pauseClipclick(event:MouseEvent):void {
          ns.resume();
          pauseClip.visible = false;
          isPlaying = true;
          playPauseBtn.gotoAndStop(1);
      }
      ////////////////////////////////////////////////////////////////////////////////////
      // Play Function for all thumbnails in your playlist
      function playVideo():void {
          congoText.play();
            ns.pause();
          ns.seek(0);
          ns.play(VideoFolder + "/video" + videoNumber +".flv");
          vid.attachNetStream(ns);
          vid_frame.addChild(vid);
          pauseClip.visible = false;
          playPauseBtn.gotoAndStop(1);
          isPlaying = true;
          // If and else statements to place the correct title in the dynamic text field
          if (videoNumber == 1) { title_txt.text = title1;
          } else if (videoNumber == 2) { title_txt.text = title2;
          } else if (videoNumber == 3) { title_txt.text = title3;
          } else if (videoNumber == 4) { title_txt.text = title4;
          } else if (videoNumber == 5) { title_txt.text = title5;
          }

       

      }
      ////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////

       

      ////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////
      // Now we code out each thumbnail button function, what each does when clicked
      function thumb1click(event:MouseEvent):void {
          videoNumber = 1;
          playVideo(); // run the playVideo function with a videoNumber var of 1
      }
      function thumb2click(event:MouseEvent):void {
          videoNumber = 2;
          playVideo(); // run the playVideo function with a videoNumber var of 2
      }
      function thumb3click(event:MouseEvent):void {
          videoNumber = 3;
          playVideo(); // run the playVideo function with a videoNumber var of 3
      }
      function thumb4click(event:MouseEvent):void {
          videoNumber = 4;
          playVideo(); // run the playVideo function with a videoNumber var of 4
      }
      function thumb5click(event:MouseEvent):void {
          videoNumber = 5;
          playVideo(); // run the playVideo function with a videoNumber var of 5
      }
      ////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////

       

      ////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////
      // META DATA CODE  and displaying Duration Time of Current playing video
      // Set the Meta Object
      var meta = new Object;
      // Here in this function we can access important meta data we need and more
      function onMetaData(infoObject:Object):void {
         
          var key:String;
         
          for (key in infoObject) { // for loop trace test... not needed for script to operate
          //  trace(key + ": " + infoObject[key]); //  trace by pressing Ctrl+Enter to see cool data about file you can access
          } // end test trace... not needed for script to operate
         
          meta = infoObject;
          var durationSecs:Number = Math.floor(meta.duration);
          var durationMins:Number = Math.floor(durationSecs / 60);
          durationMins %= 60;
          durationSecs %= 60;
          var durSecsDisplay:String = "";
          var durMinsDisplay:String = "";
          if (durationMins < 10){   
                durMinsDisplay = "0" + durationMins;
          } else {
                durMinsDisplay = "" + durationMins;
          }
          if (durationSecs < 10){   
                durSecsDisplay = "0" + durationSecs;
          }  else {
                durSecsDisplay = "" + durationSecs;
          }
          // Display the full duration time
          duration_txt.text = durMinsDisplay + ":" + durSecsDisplay;

       

      }
      ////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////

       

      ////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////
      // Timer and NetStream Time display(currently playing video time progress text and bar)
      var t:Timer = new Timer(1000);
      t.addEventListener(TimerEvent.TIMER, onTick);
      t.start();

       

      function onTick(event:TimerEvent):void {
            
                 var nsSecs:Number = Math.floor(ns.time);
              var nsMins:Number = Math.floor(nsSecs / 60);
              nsMins %= 60;
              nsSecs %= 60;
              var nsSecsDisplay:String = "";
              var nsMinsDisplay:String = "";       
              if (nsMins < 10){   
                    nsMinsDisplay = "0" + nsMins;
              }  else {
                    nsMinsDisplay = "" + nsMins;
              }
              if (nsSecs < 10){   
                    nsSecsDisplay = "0" + nsSecs;
              } else {
                    nsSecsDisplay = "" + nsSecs;
              }
              // Display the play time rolling along
              time_txt.text = nsMinsDisplay + ":" + nsSecsDisplay;
             
              // Set the bright blue video position bar in the scrubber to follow video play
              videoScrubber.positionBar.width = ns.time / meta.duration * 300;
              // Set the video scrubber position to follow the playhead as it rolls along
              videoScrubber.follower.x = videoScrubber.positionBar.width;
              // Adjust the width of the dark blue "loaded progress" percent bar in the volume slider movieclip
              var loadedPercent:uint = 100 * (ns.bytesLoaded / ns.bytesTotal);
              videoScrubber.loadedProgressBar.width = loadedPercent * 3;
              // This if statement tells the player to AutoPlay the next video for repeated looped play
              //if (nsSecs == Math.floor(meta.duration)) {
              //       if (videoNumber == 5) {
              //             videoNumber = 1;
              //             playVideo(); // run the playVideo function with a videoNumber of 1 - loop back to video 1
              //       } else {
              //             videoNumber += 1;
              //             playVideo(); // run the playVideo function with a videoNumber incremented by 1                  
              //       }
              //}

       

             
      }

       

       

      Please help.  My email is ncongo@yahoo.com