6 Replies Latest reply on May 26, 2010 8:09 AM by Matt Le Fevre

    Array Collection and XML

    djh88ukwb Level 1

      Hello all, i trying to figure out how to create an Array Collection based upon an XML file.  The XML file will contain a series of times and image url's.

       

      These will then be used to act as cue points.

       

      The video player code im using is

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Script>
              <![CDATA[
                  import mx.events.VideoEvent;
                  import flash.net.URLRequest;
                            
                  private function formatTime(item:Date):String {
                      return dateFormatter.format(item);
                  }
                  private function videoDisplay_playheadUpdate():void {
                      var pT:Number = videoDisplay.playheadTime || 0.1;
                      var tT:Number = videoDisplay.totalTime;
                      var pTimeMS:Date = new Date(pT * 1000);
                      var tTimeMS:Date = new Date(tT * 1000);
                      timeLabel.text = formatTime(pTimeMS) + " / " + formatTime(tTimeMS);
                  }
                  private function slider_thumbPress():void {
                      videoDisplay.pause();
                  }
                  private function slider_thumbRelease():void {
                      videoDisplay.playheadTime = slider.value;
                      videoDisplay.play();
                  }
                  private function videoDisplay_ready():void {
                      videoDisplay.visible = true;
                      controlBar.visible = true;
                  }
                  private function onload(event:Event):void
                  {      
                      videoDisplay.play();  
                  }
              ]]>
          </mx:Script>
        
          <mx:DateFormatter id="dateFormatter" formatString="K:NN:SS" />
        
              <mx:Panel title="({videoDisplay.state})" x="8" y="8" layout="absolute" id="vidP">
                
                  <mx:VideoDisplay id="videoDisplay"
                                   maintainAspectRatio="true"    autoPlay="false"              
                                   width="400" height="318"
                                   playheadUpdate="videoDisplay_playheadUpdate()"          
                                   live="false"
                                   autoBandWidthDetection="false"
                                   source="rtmp://cp23245.edgefcs.net/ondemand/mp4:23245/mm/flvmedia/2349/t/p/i/tp i_video1_new_h264_564K-350110.f4v"
                                   >
                                                 
                  </mx:VideoDisplay>
                
                  <mx:Button x="5" y="323" width="22" height="15" id="play" visible="{!videoDisplay.playing}"   label="" click="videoDisplay.play()" ></mx:Button>
                  <mx:Button x="5" y="323" width="22" height="15" id="pause" visible="{videoDisplay.playing}"  label="" click="videoDisplay.pause()" ></mx:Button>
                
                  <mx:HSlider x="30" y="321"
                              id="slider" width="200"
                              allowTrackClick="false"
                              invertThumbDirection="true"
                              liveDragging="false"
                              maximum="{videoDisplay.totalTime}"
                              minimum="0"
                              thumbPress="slider_thumbPress()"
                              thumbRelease="slider_thumbRelease()"
                              tickInterval="0"
                              showTrackHighlight="true"
                              showDataTip="false"
                              value="{videoDisplay.playheadTime}"  height="11"/>
                
                  <mx:Label x="230" y="323" id="timeLabel" textAlign="right" verticalCenter="middle"  fontSize="9" height="22"/>

          </mx:Panel>  
      </mx:Application>

       

      I would be thankful if someone could hlpe me or point me in the direction of somewhere i can find out on how to do the following.

       

      Create an ArrayCollection based upon a XML file, and then every second that the videodisplay plays, check the playheadTIme, against the values in the ArrayCOllection, and if there is a match to swap the source of an image being displayed with that which corrospondes to the Time, in the arraycollection.

       

      If someone could help me here i would be very thankful!.

        • 1. Re: Array Collection and XML
          djh88ukwb Level 1

          Ok so i have been digging about and working with my code a bit more,

           

          I have created the following bit of code -

           

          <?xml version="1.0" encoding="utf-8"?>
          <!-- http://blog.flexexamples.com/2008/05/10/displaying-specific-items-from-an-arraycollection- in-flex/ -->
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="middle" backgroundColor="white">

              <mx:ArrayCollection id="arrColl">
                  <mx:source>
                      <mx:Array>
                          <mx:Object time="0" cue="A" image="http://www.blah.jpg" />
                          <mx:Object time="5" cue="B" image="http://www.blah1.jpg" />
                          <mx:Object time="10" cue="C" image="http://www.blah2.jpg" />
                          <mx:Object time="15" cue="D" image="http://www.blah3.jpg" />
                          <mx:Object time="20" cue="E" image="http://www.blah4.jpg" />
                          <mx:Object time="25" cue="F" image="http://www.blah5.jpg" />
                          <mx:Object time="30" cue="G" image="http://www.blah6.jpg" />
                          <mx:Object time="35" cue="H" image="http://www.blah7.jpg" />
                          <mx:Object time="40" cue="I" image="http://www.blah8.jpg" />
                          <mx:Object time="45" cue="J" image="http://www.blah9.jpg" />
                          <mx:Object time="50" cue="K" image="http://www.blah10.jpg" />
                          <mx:Object time="55" cue="L" image="http://www.blah11.jpg" />
                      </mx:Array>
                  </mx:source>
              </mx:ArrayCollection>
              <mx:Image id="pic" x="535.5" y="36"/>

              <mx:ApplicationControlBar dock="true">
                  <mx:HSlider id="slider"
                          minimum="0"
                          maximum="{arrColl.length-1}"
                          liveDragging="true"
                          snapInterval="1"
                          tickInterval="1"
                          dataTipPlacement="right"
                          change="lbl.text = arrColl[event.value].cue, pic.source = arrColl[event.value].image;"/>
              </mx:ApplicationControlBar>

              <mx:Label id="lbl"  x="10" y="10" width="1083" textAlign="center"/>

          </mx:Application>

          WHich works nicely, as you slide the Hslider, the image changes along with the text.  This is exacttly what i need, apart from i need to link it to the videoDisplay.playheadtime, instead of the Hslider,  Does anyone know how i can do this?

           

           

          I would be so thankful if someone could shed some light  ! ! !

           

          Thanks

          • 2. Re: Array Collection and XML
            djh88ukwb Level 1

            Can no one offer some tips on how i can do this ? Point me in the direction of some reading material ?  This is really bugging me now.

             

            I would be really thankful for some advice

            • 3. Re: Array Collection and XML
              djh88ukwb Level 1

              Can no one offer some tips on how i  can do this ? Point me in the direction of some reading material ?   This is really bugging me now.

               

              I would be really thankful for some advice

              • 4. Re: Array Collection and XML
                djh88ukwb Level 1

                Nobody still able to help ?

                • 5. Re: Array Collection and XML
                  djh88ukwb Level 1

                  Still stuck on this, anyone able to offer some help ?

                  • 6. Re: Array Collection and XML
                    Matt Le Fevre Level 4

                    Personally, i'd set a boolean value up to indicate if the video is currently playing or not.

                     

                    whilst it is, have a seperate timer check the playheadTime against values in your collection and alter the image accordingly.

                     

                     

                     

                    or you could try doing the same kinda thing on the video's updateComplete event, although i'm not sure how well that would work... but it would eliminate the need for an additional timer.