9 Replies Latest reply on Feb 17, 2010 8:20 PM by ArrowUpRight

    VideoPlayer skinning error

    ArrowUpRight Level 2

      Have a spark VideoPlayer component, wich is skinned with my custom mxml skin. When compiling, everything seems to be nice, but when trying to switch the VideoPlayer to the fullscreen mode, get Flash Player errors: "Undefined state: loadingAndFullScreen...." and "Undefined state: playingAndFullScreen". But, i have never defined those states neither for VideoPlayer nor for it's sub-components. Besides, FlashBuilder4 Help does not contains those kinds of skin states on a spark VideoPlayer component. It contains only fullScreenLoading, fullSrceenPlaying etc. I have defined them in my VideoPlayer skin file. So, what's going on? Anybody maybe knows the solving of this problem?

        • 1. Re: VideoPlayer skinning error
          rfrishbe Level 3

          When you create a skin for a component, you must declare all the skinstates--it's part of the skinning contract.  Did this ever work for you?  At some point the states were renamed, so maybe that's the issue.  Do you have any states declared?  Do you have [HostComponent] metadata declared?  If so, you should get compile-time checking on the states.  What build are you using?  Can you post some of the VideoPlayerSkin code?

           

          -Ryan

          • 2. Re: VideoPlayer skinning error
            ArrowUpRight Level 2

            Ryan, thanks for reply.

            • I use Flash Builder 4 premium Beta (build 253292).
            • My VideoPlayer controls' skins are stored in separated mxmls, is that correct?
            • Sorry, now i can't imagine how to do the compile-time check on skins.

             

            This is my mxmls (not good-looking, training version):

             

            Main app

            <?xml version='1.0' encoding='UTF-8'?>
            <s:Application xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" width="900" height="900" backgroundColor="#000000" preloaderBaseColor="#ffffff">
                <s:VideoPlayer skinClass="components.myVideoPlayer" x="197" y="122" source="video/video1.f4v"/>
            </s:Application>

             

            VideoPlayer skin

            <?xml version="1.0" encoding="utf-8"?>
            <s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
                <fx:Metadata>[HostComponent("spark.components.VideoPlayer")]</fx:Metadata>
                <s:states>
                    <s:State name="connectionError"/>
                    <s:State name="disabled"/>
                    <s:State name="disconnected"/>
                    <s:State name="fullScreenConnectionError"/>
                    <s:State name="fullScreenDisabled"/>
                    <s:State name="fullScreenDisconnected"/>
                    <s:State name="fullScreenLoading"/>
                    <s:State name="fullScreenPlaying"/>
                    <s:State name="fullScreenStopped"/>
                    <s:State name="loading"/>
                    <s:State name="playing"/>
                    <s:State name="stopped"/>
                </s:states>

             

            <s:VideoElement id="videoElement" includeIn="connectionError, disabled, disconnected, fullScreenConnectionError, fullScreenDisabled, fullScreenDisconnected, fullScreenLoading, fullScreenPlaying, fullScreenStopped, loading, playing, stopped"/>

             

            <s:ToggleButton id="playPauseButton" skinClass="components.ppButton" includeIn="connectionError, disabled, disconnected, fullScreenConnectionError, fullScreenDisabled, fullScreenDisconnected, fullScreenLoading, fullScreenPlaying, fullScreenStopped, loading, playing, stopped" />

             

            <s:Button id="fullScreenButton" skinClass="components.fsButton" includeIn="connectionError,
                                disabled, disconnected, fullScreenConnectionError,
                                fullScreenDisabled, fullScreenDisconnected,
                                fullScreenLoading, fullScreenPlaying,
                                fullScreenStopped, loading,
                                playing, stopped" />
            </s:Skin>


            PlayPauseButton skin

            <?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">
                <fx:Metadata>[HostComponent("spark.components.ToggleButton")]</fx:Metadata>
                <s:states>
                <s:State name="disabled"/>
                <s:State name="disabledAndSelected"/>
                <s:State name="down"/>
                <s:State name="downAndSelected"/>
                <s:State name="over"/>
                <s:State name="overAndSelected"/>
                <s:State name="up"/>
                <s:State name="upAndSelected"/>
                </s:states>
                <s:BitmapImage source="@Embed('/assets/images/skin4/ButtonUp.png')"
                               x="0" y="0"
                               id="bitmapimage4"
                               includeIn="disabled,disabledAndSelected,
                               down,downAndSelected,
                               over,overAndSelected,
                               up,upAndSelected" />
               
            </s:Skin>

             

            FullScreenButton skin

            <?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">
                <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
                <s:states>
                    <s:State name="disabled"/>
                    <s:State name="down"/>
                    <s:State name="over"/>
                    <s:State name="up"/>
                </s:states>
               
                <s:BitmapImage source="@Embed('/assets/images/skin4/ArrowGray.png')"
                               x="0" y="0"
                               id="bitmapimage4"
                               includeIn="disabled,down,over,up" />
            </s:Skin>

             

            - Alexey

            • 3. Re: VideoPlayer skinning error
              dave cragg Level 2

              Don't know if this is of any help, but I was skinning the VideoPlayer yesterday, and started by copying the default skin (from SDK 12891). It declares the following states:

               

              <s:states>

              <s:State name="uninitialized" stateGroups="uninitializedStates, normalStates" />

              <s:State name="loading" stateGroups="loadingStates, normalStates" />

              <s:State name="ready" stateGroups="readyStates, normalStates" />

              <s:State name="playing" stateGroups="playingStates, normalStates" />

              <s:State name="paused" stateGroups="pausedStates, normalStates" />

              <s:State name="buffering" stateGroups="bufferingStates, normalStates" />

              <s:State name="playbackError" stateGroups="playbackErrorStates, normalStates" />

              <s:State name="disabled" stateGroups="disabledStates, normalStates"/>

              <s:State name="uninitializedAndFullScreen" stateGroups="uninitializedStates, fullScreenStates" />

              <s:State name="loadingAndFullScreen" stateGroups="loadingStates, fullScreenStates" />

              <s:State name="readyAndFullScreen" stateGroups="readyStates, fullScreenStates" />

              <s:State name="playingAndFullScreen" stateGroups="playingStates, fullScreenStates" />

              <s:State name="pausedAndFullScreen" stateGroups="pausedStates, fullScreenStates" />

              <s:State name="bufferingAndFullScreen" stateGroups="bufferingStates, fullScreenStates" />

              <s:State name="playbackErrorAndFullScreen" stateGroups="playbackErrorStates, fullScreenStates" />

              <s:State name="disabledAndFullScreen" stateGroups="disabledStates, fullScreenStates"/>

              </s:states>

              1 person found this helpful
              • 4. Re: VideoPlayer skinning error
                ArrowUpRight Level 2

                wooh, Dave it's very helpful!

                But, excuse me,

                from where you've copied those states,

                and,

                why my Help on spark VideoPLayer does not contains that information?

                • 5. Re: VideoPlayer skinning error
                  David_F57 Level 5

                  Hi,

                   

                  For any skinnable component you can right click on it and 'open' the skin definition, that way you can see the states that the skin uses, also from that skin you can repeat the process to look at sub/child skins. While learning about skins it is always good practice to start with a default skin (create option when right click on object in design view) and adjust/modify it to your needs.

                   

                   

                  David.

                  • 6. Re: VideoPlayer skinning error
                    ArrowUpRight Level 2

                    But when i'm right-clicking on the VideoPlayer instance in the design mode and selecting the "create new copy of skin" item, Builder says me: "Source of skin definition for VideoPlayer could not be found". And there is no available "edit" item in right-clicking popup-menu. Release snark maybe?

                    • 7. Re: VideoPlayer skinning error
                      dave cragg Level 2

                      I don't usually use the Design View. I access the skins from the Package Explorer pane. Under your project, you'll see Flex 4(build xxxxx). Open that, and navigate to spark.swc/spark/skins/spark/.  You should see VideoPlayerSkin.abc at the bottom of the list. Double-click and it will open in the source pane. Copy and paste into your own skin file. (Elsewhere in the list of skins, you'll see skins.spark.mediaClasses. Inside that are the skins for the various sub-components of the video control bar.)

                       

                      (I mentioned that I'm using SDK Build 12891 because I think the organisation of the video components changed between the Beta 2 release and now.  So things may not be in quite the same place  on all versions. Not sure though.)

                      • 8. Re: VideoPlayer skinning error
                        ArrowUpRight Level 2

                        Thank you all a lot.

                         

                        Now I think the discrepancy is that i use the older release of Flash Builder 4.

                         

                        Dave gaves me some helpful information, but i have not that flashbuilder branch in my project explorer.

                         

                        Now downloading the Beta 2 and then going to try again. Shall report about the result. Thanks again.

                        • 9. Re: VideoPlayer skinning error
                          ArrowUpRight Level 2

                          Everything's nice: www.kinetik.kz/test