4 Replies Latest reply on Dec 22, 2009 1:39 PM by cyber0897

    video player skinning help

    cyber0897 Level 1

      hey guys... so i havent done any skinning for any component in flex 4 yet... this is the first try...

       

      i need to customise a video player to just have a linkbutton on the bottom of the video instead of an icon... and the link button needs to toggle between play/pause

       

      i also need a progress bar on the video...

      so far i have the following code...

       

      in my component i have

       

      <group>

      ...

      ...

          <s:VideoPlayer id="videoPlayer" width="700" height="375" visible="false" skinClass="modules.apx32.myComponents.videoPlayerSkin" />

      ...

      ...

      </group>

       

      and in the videoPlayerSkin.mxml i have

       

      <?xml version="1.0" encoding="utf-8"?>
      <spark:VideoPlayerSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:spark="spark.skins.spark.*" width="700" height="375">
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <fx:Metadata>
              <![CDATA[
              [HostComponent("spark.components.VideoPlayer")]
              ]]>
          </fx:Metadata>
          <fx:Script>
              <![CDATA[
                  public function playButtonClick():void{
                     
                  }
              ]]>
          </fx:Script>
          <s:Rect bottom="1" left="1" right="1" top="1">
              <s:fill>
                  <s:SolidColor color="0x000000" />
              </s:fill>
          </s:Rect>

       

          <s:Group>
              <s:VideoElement id="videoElement" autoPlay="true" width="700" height="350" />
              <mx:LinkButton label="Play" color="#ffffff" skin="{null}" top="365" left="20" bottom="10" click="playButtonClick()" />
             
          </s:Group>
      </spark:VideoPlayerSkin>

       

       

       

      any ideas?? I just need help with the button toggle and changing the color and displaying the progress bar...

       

       

      thanks in advance !!

        • 1. Re: video player skinning help
          rfrishbe Level 3

          I think you should try to rely on the new Spark components as much as possible.  VideoPlayer has a skinPart called playPauseButton.  If you hook up to this skin part, it will do exactly what you want.  However, it's typed as a Spark ToggleButton--not a LinkButton.  What I would do is use the playPauseButton and skin that button to look exactly how you want.  Taking a peek at the VideoPlayerSkin and the VideoPlayerPlayPauseButtonSkin that we ship with Gumbo will help out a lot here.

           

          As per progress bar, in our skin, we have a scrubbar, which is similar to what you want, but it allows the user to move around the playhead as well.  So, there's no progress bar component built-in, but you could either build out anew skin part, similar to the scrubbar, and hooked it up to the bytesLoadedChange event, or you could probably reskin the scrubbar and leave out the thumb and playedArea (just leave in the loadedRangeArea and the track).  Though I'm not positive that would work as part of the code might make some assumptions about a track and a thumb being present.  If you were to file a bug report on it, I could probably look into fixing up those spots where we don't need to make those assumptions in the scrubbar.

           

          I think relying on the current videoplayerskin and modifying that will get you a long way in this process, and I hope these ideas help with that.

           

          -Ryan

          1 person found this helpful
          • 2. Re: video player skinning help
            cyber0897 Level 1

            hey ryan... thanks for responding, so fast... i really appretiate it!

             

            i did the following, i used the togglebutton, and i skinned it, to what i needed... it works almost exacly to what i need it to, except when press the button and then rollover the button, it displays different text...

            for example, at first the button will say pause, and when you click the button it says play, but when you rollovere the button again it says pause, and when you rolloff it says play again... is tehre anyway for it to not do that??

             

            the code i have now is...

             

            ...

            ...

                <s:Group>
                    <s:VideoElement id="videoElement" autoPlay="true" width="700" height="350"  />
                    <s:ToggleButton id="toggle" color="#ffffff" click="playButtonClick()"
                                    skinClass="modules.apx32.myComponents.textToggle"
                                    height="350" left="50" top="350"/>

                    <s:ScrubBar id="scrub" />
                </s:Group>

            ...

            ...

             

             

            and the skin is

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300">
                <fx:Declarations>
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                </fx:Declarations>
                <s:states>
                    <s:State name="up"/>
                    <s:State name="over"/>
                    <s:State name="down"/>
                    <s:State name="disabled"/>
                    <s:State name="upAndSelected"/>
                    <s:State name="overAndSelected"/>
                    <s:State name="downAndSelected"/>
                    <s:State name="disabledAndSelected"/>
                </s:states>
                <fx:Style>
                    @namespace s "library://ns.adobe.com/flex/spark";
                    @namespace mx "library://ns.adobe.com/flex/halo";
                    @font-face{
                        src: url("fonts/DINOT-Bold.otf");
                        fontFamily: dinB;
                        fontWeight:bold;
                        embedAsCFF:true;
                    }
                </fx:Style>
                <fx:Metadata>
                    <![CDATA[
                        [HostComponent("spark.components.ToggleButton")]
                    ]]>
                </fx:Metadata>
               
                <s:RichText fontSize="18" fontFamily="dinB" color="0x4769C4" text="Pause"
                            text.upAndSelected="Play" />
            </s:Skin>

             

             

             

            and finally

            how do i tie the scrubBar into the video?? lol

            and ive been working on trying to skin the scrubBar.. but no luck so far...:( i need to get rid of the pointing thing from the scrubbar and replace it with just a Cursor looking element which will perform the same thing as the "point" on the scrub bar...

             

            hope im making sence

             

            Thank you soo much ryan...

            • 3. Re: video player skinning help
              rfrishbe Level 3

              Instead of text.upAndSelected="Play", you need to do it in all of the "selected states".  In the default playPauseButton skin, we do this through assigning stateGroups, so something like:

               

              <s:State name="upAndSelected" stateGroups="selectedStates"/>

                      <s:State name="overAndSelected"  stateGroups="selectedStates"/>

                      <s:State name="downAndSelected"  stateGroups="selectedStates"/>

                      <s:State name="disabledAndSelected"  stateGroups="selectedStates"/>

               

              text.selectedStates="Play"

               

              As for ScrubBar, it's just another video part in the videoplayer skin.  For starts, just add:

               

              <s:ScrubBar id="scrubBar" width="100%" liveDragging="true"

                                              skinClass="spark.skins.spark.mediaClasses.normal.ScrubBarSkin"

                                              skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.ScrubBarSkin" />

               

              In to your skin.

               

              Then, look at those skins and modify it to be your own.

               

              -Ryan

              1 person found this helpful
              • 4. Re: video player skinning help
                cyber0897 Level 1

                hey ryan... thank you, that worked like a charm... now i know a little more about grouping states

                 

                and i havent found much info on the scrubbar skinning... from what i understand so far... almost everyelement in a given component is skinnable, i just dont know how to change the thumb on the scrubbar... i dont need to do the full screen, because im not going to have a full screen option on there...

                 

                any ideas?

                 

                 

                oh and also, i have a button in the skin... if i press that button i need a function to be called in the parent actionscript file


                forexample:

                the videoPlayer is in a file called vistaTroubleshooting.mxml (this is a component) so the code in here looks somehting like

                <group>

                ...

                ...

                <script source="vistaAction.as" />

                ...

                ...

                <videoPlayer id="videoPlayer" skinclass="myskinclass".... />

                ...

                ...

                </group>

                 

                i basically nerd to call a function inside my vistaAction from mySkinClass.mxml when the button is pressed...

                 

                any help is greatly appretiated!!

                 

                thank you