3 Replies Latest reply on Mar 11, 2010 4:47 AM by Matt Le Fevre

    progress bar for player?

    kkc_mca

      Hi All,

       

      I am developing a player,

       

      I not able to get how to create a progress bar  which shows download data and the player

       

      Like YouTube which show the download as well as the player head.

       

      Thanks in advance.

        • 1. Re: progress bar for player?
          Matt Le Fevre Level 4

          Amount downloaded with require you to get the total file size, and compare it against the amount already downloaded.

           

          basically, this example reversed

           

          http://weblog.cahlan.com/files/FileUpload/FileUploadApp.html

           

           

           

          Play position is simply just current media file position subtracted from the total file length.

           

           

          to get the dual progress bar position i'd imagine you'd have 2 progress bars, lay one on top of the other and set one to partially transparent. Quick example for you:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="top"
              horizontalAlign="center" paddingTop="0">
              
              <mx:Script>
                  <![CDATA[
                     
                    private var j:uint=10;
                    private var m:uint=10;
                  
                    private function runit2():void
                    {
                        if(j<=100)
                        {
                           bar2.setProgress(j,100);
                           j+=10;
                        }
                        if(j>100)
                        {
                           j=0;
                        }
                    }
                    
                    private function runit():void
                    {
                        if(m<=100)
                        {
                           bar.setProgress(m,100);
                           m+=10;
                        }
                        if(m>100)
                        {
                           m=0;
                        }
                    }
                  ]]>    
              </mx:Script>
              
              <mx:Panel title="ProgressBar Control" layout="absolute" color="0xffffff" borderAlpha="0.15"
                   paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" x="307" y="297" height="152" width="409">
                  <mx:Button label="Amount downloaded" click="runit2();" color="0x323232" x="123" y="40"/>
                  <mx:Button id="Speed" label="Play position" click="runit();" color="0x323232" x="10" y="40"/>       
                  <mx:ProgressBar id="bar" labelPlacement="bottom" themeColor="#EE1122" minimum="0" visible="true" maximum="100"
                       color="0x323232" direction="right" mode="manual" width="100%" x="10" y="74"/>
                   <mx:ProgressBar id="bar2" labelPlacement="bottom" themeColor="#0088FF" minimum="0" visible="true" maximum="100"
                       color="0x323232" direction="right" label="" mode="manual" width="100%" x="10" y="74" alpha="0.1"/>   
              </mx:Panel>
          </mx:Application>
          

           

           

          link up the maths you need to work out to each progress bar, sort out the transparency and done.

          • 2. Re: progress bar for player?
            kkc_mca Level 2

            Hi,

             

            Is there any other options to do this.

             

            if the video is a live stream how to display.

            • 3. Re: progress bar for player?
              Matt Le Fevre Level 4

              if the video is a live stream, it's impossible to do it.

               

              You can't work out your player position or amount downloaded because the end position and total file size are unknown.

               

               

               

              I'm guessing you may actually mean you want the progress bars to be live and not manually controlled, in which case you could use a timer

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="top"
                  horizontalAlign="center" paddingTop="0" applicationComplete="init()">
                  
                  <mx:Script>
                      <![CDATA[
                         
                        private var j:uint=1;
                        private var m:uint=1;
                        
                        import flash.utils.Timer;
                        import flash.events.TimerEvent;
              
                          private const MS_MASK:String = "000";
                          private const TIMER_INTERVAL:int = 1;
              
                          private var baseTimer:int;
              
                          private var t:Timer;
              
                          private function init():void 
                          {
                              t = new Timer(TIMER_INTERVAL);
                              t.addEventListener(TimerEvent.TIMER, updateTimer);
                              startTimer();
                          }
              
                          private function updateTimer(evt:TimerEvent):void {
                              var d:Date = new Date(getTimer() - baseTimer);
                              var ms:String = (MS_MASK + d.milliseconds).substr(-MS_MASK.length);
                            
                              if (int(ms) > 100)
                              {
                                  //////////////////////////////////////////
                                  //Update & Calculation functions go here//
                                  //////////////////////////////////////////
              
                                  runit2();
                                  runit();
                                  stopTimer();
                              }
                          }
              
                          private function startTimer():void {
                              baseTimer = getTimer();
                              t.start();
                          }
              
                          private function stopTimer():void {
                              t.stop();
                              startTimer();
                          }
                      
                        private function runit2():void
                        {
                            if(j<=100)
                            {
                               bar2.setProgress(j,100);
                               j+=2;
                            }
                            if(j>100)
                            {
                               j=0;
                            }
                        }
                        
                        private function runit():void
                        {
                            if(m<=100)
                            {
                               bar.setProgress(m,100);
                               m+=1;
                            }
                            if(m>100)
                            {
                               m=0;
                            }
                        }
                      ]]>    
                  </mx:Script>
                  
                  <mx:Panel title="ProgressBar Control" layout="absolute" color="0xffffff" borderAlpha="0.15"
                       paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" x="307" y="297" height="152" width="409">
                      <mx:ProgressBar id="bar" labelPlacement="bottom" themeColor="#EE1122" minimum="0" visible="true" maximum="100"
                           color="0x323232" direction="right" mode="manual" width="100%" x="10" y="74"/>
                       <mx:ProgressBar id="bar2" labelPlacement="bottom" themeColor="#0088FF" minimum="0" visible="true" maximum="100"
                           color="0x323232" direction="right" label="" mode="manual" width="100%" x="10" y="74" alpha="0.1"/>   
                  </mx:Panel>
              </mx:Application>
              

               

              a function you might find useful in doing this would be the PHP filesize function

               

              http://php.net/manual/en/function.filesize.php

               

              you could send off a script at the begging on the stream calculating the total filesize, and then compare that against amount downloaded in you AS3, what would be download progress sorted.