2 Replies Latest reply on Jun 4, 2009 12:04 AM by emphasized

    About the Skin class and all the subclasses...

    emphasized

      To test and get to know the workflow of catalyst & fb I've started to create a custom video player. Dragging a psd through catalyst work the magic then port it to flex builder.

      Everything fine and well after some playing arround in catalyst (nontheless the lack of a togglebutton for now but that's neglectable) I've got it ported to flash builder.

       

      In fb; I am using a spark VideoPlayer instance and skin it with a VideoPlayerSkin. Here arrises the first problem; it seems the VideoPlayer mxml tag doesn't recognizes the mxml file extending VideoPlayerSkin.

      Ok I can bypass this using skinClass={CustomVideoSkin}  (CustomVideoSkin is the class name of my actual VideoPlayerSkin).

       

      Now when I look at the button skins catalyst exported (which I made in catalyst) I see the usage of the <s:Skin> class where all states are defined and transitions if there are anny. This get's me kinda confused couse it seems there is for each component an individual skin class but using the <s:Skin> compared to ex: <default:VideoPlayerScrubBarSkin> is completely different.

       

      In the case of using the above example (VideoPlayerScrubBarSkin) I need to extend this to VideoPlayerScrubBarSkin this to assign the face and the track.

       

      I'm getting kinda lost in using what and when and where and more how...

       

      Would appreciate some clarification on this.

       

      Regards, Bart

        • 1. Re: About the Skin class and all the subclasses...
          rfrishbe Level 3

          Hey Bart,

           

          I couldn't really tell if you were running into a Catalyst issue or a Flex SDK issue (or both).  From the Flex SDK perspective, when you skin any component, you create a new MXML class rooted with <s:Skin> (this really means the new file extends the Skin class).

           

          Here's a short and simple custom skin for the Video Player:

           

          <?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">

           

              <!-- states -->
              <s:states>
                  <s:State name="connectionError" stateGroups="connectionErrorStates, normalStates" />
                  <s:State name="disabled" stateGroups="disabledStates, normalStates"/>
                  <s:State name="disconnected" stateGroups="disconnectedStates, normalStates"/>
                  <s:State name="loading" stateGroups="loadingStates, normalStates"/>
                  <s:State name="playing" stateGroups="playingStates, normalStates"/>
                  <s:State name="stopped" stateGroups="stoppedStates, normalStates"/>
                  <s:State name="fullScreenConnectionError" stateGroups="connectionErrorStates, fullScreenStates"/>
                  <s:State name="fullScreenDisabled" stateGroups="disabledStates, fullScreenStates"/>
                  <s:State name="fullScreenDisconnected" stateGroups="disconnectedStates, fullScreenStates"/>
                  <s:State name="fullScreenLoading" stateGroups="loadingStates, fullScreenStates"/>
                  <s:State name="fullScreenPlaying" stateGroups="playingStates, fullScreenStates"/>
                  <s:State name="fullScreenStopped" stateGroups="stoppedStates, fullScreenStates"/>
              </s:states>
             
              <s:VideoElement id="videoElement" top="0" bottom="24" />
              <s:Group height="24" bottom="0">
                  <s:layout>
                      <s:HorizontalLayout />
                  </s:layout>
                  <s:Button id="playButton" label="Play Me" />
                  <s:Button id="pauseButton" label="Pause Me" />
                  <s:VideoPlayerScrubBar id="scrubBar" />
              </s:Group>
          </s:Skin>

           

          Each component has a skin.  By default, VideoPlayerScrubBar uses the default skin we ship with the component.  To skin that sub-part, you'll need to create a new Skin file, something, like:

           

          <s:VideoPlayerScrubBar id="scrubBar" skinClass="CustomVideoPlayerScrubBarSkin" />

           

          This new skin file can be done inline (with Declarations), but it's reccomended just to create a new MXML file for it.

           

          Let me know if you've got any more questions about this process.

           

          HTH,

          Ryan

          • 2. Re: About the Skin class and all the subclasses...
            emphasized Level 1

            Yeah I've gotten it figured out now it was a little bid confusing at first; bud this tut:

            http://blog.flexexamples.com/2009/05/17/setting-the-progress-bar-background-gradient-fill- on-the-spark-videoplayer-control-in-flex-gumbo/

             

            together with your explanation made things clear. Though I find it rather annoying having to know all the states by heart for the component your creating a custom skin for... And since it's beta the livedocs prove not to be so helpfull.

             

            Though thx annyway issue solved