Email:  
  Register  /  Login  
Home
CrystalPlayer
Company
Русский
OverviewSkinsSupportForum

Skin Making Documentation. Revision 3.

New! Updated for Vista glass and shadow skin elements

This document is about skin writing for CrystalPlayer. The details of skin creation, interoperability and example are here. No any programming knowledge is needed to understand it.

Introduction

Skins are described in XML format, chosen as most perspective and flexible one. You can write dynamic XML skin having really no knowledge of programming. The only needed things are graphics editor (like Photoshop) and text editor for editing actual .xml file.

Skins are based on so called "finite state machine", mostly because it's well known and bug-free technology. You may find more about this technology at is.ifmo.ru. Finite state machine approach allows dividing skin on parts those can be in several determined states. For example: control panel with Start, Pause, Stop buttons may be hidden in case it's unneeded, but in other case, can extend, showing additionally forward and backward. It means that panel can be in 3 states. Developer defines all 3 states and defines the rules of transition between them. For example, he can hide panel when mouse leaves its borders and show additional buttons if user clicks on the panel twice. Every logically individual part of skin (e.g. panel mentioned above) becomes finite state machine, and each state of it – the state of finite state machine.

Finite state machines (FSM) can interact. For example, there can be help button (with sign '?') on expanded, pulled out panel, by clicking on which, the other panel (with help text) pulls out. This panel becomes individual FSM with states hidden and pulled out. This way, help button, defined in extended state of 'control panel' FSM defines arc, leading help window FSM to pulled out state. This is very flexible possibility and it's implemented without introducing programming languages at all. It's completely enought to develop obvious transitional graph and to write it in some text format.

The example of transitional graph

Transitional graph illustrates the interaction between individual parts of the skin – FSMs.

Here below the example of transitional graph describing control panel and help panel behaviour is displayed.

Logical units – FSMs – are marked with bright color. Every FSM can be in only one of its states (e.g. for Control Panel they are: Hidden, Pulled Out, Expanded). In every state, the control elements are defined (most dark color) – these can be buttons or textures. Also, in state field several properties of applications are defined, for example, the color of playlist. There are transitions chained with control elements – pressiong of Hide button of Control Panel FSM in expanded state will lead Control Panel FSM to pulled out state – so panel is reduced and several additional buttons are not more shown. We'll describe syntax of defining FSM structure of skin below.

Skin detailed syntax

XML format was chosen for describing FSM structure of skin. XML looks mostly like HTML and has tree like structure. Every point of it is described using opening and closing tags:

    <TAG [parameters]> tag body </TAG>

There can be child tags in tag body. If the tag does not have child tags, it can be written as:

    <TAG [parameters]/>

[parametes] – is the optional field in which several parameters of the tag can be specified. The syntax is:

    param1 = "value1" [param2 = "value2"] ...

here param1 is the parameter with name 'param1' and with value 'value1'. Here is the example of paired tag with two params:

    <thetag param1="value1" param2="value2"> ... </thetag>

Header

The whole skin is described between <SKIN RequiredVersion="Version"> and </SKIN>, so it's described in tree like structure with 'SKIN' root. The obligatory parameter "RequiredVersion" – is the minimal version of CrystalPlayer supporting this skin. For example:

    <SKIN RequiredVersion="120"> ... </SKIN>

means that minimal CrystalPlayer version supporting this skin should be not lower that 1.20. It's done for supporting compatibility between more recent, extended formats of skins. This format was extended twice as for now – new features were added and skins, written for old versions worked correctly. But loading new skins in old CrystalPlayer will be unseccessful – CrystalPlayer will refuse to interpret it correctly.

In skin body there can be title tag, where the description and authors of skin can be specified. Example:

    <TITLE author="John Smith">My super skin</TITLE>

Finite state machines

FSMs in skin are described using SWITCH tag:

    <SWITCH name="SwitchName"> FSM body </SWITCH>

SwitchName is the name of FSM – it's unique identifier within skin. At least one FSM should be in skin. FSMs may or may interact or may exist individually. The appearance of the CrystalPlayer is built by the all FSMs consequently. In FSM body the states of this FSM are described. The first state becomes initial state, FSM starts its life in it.

The state is described by STATE tag:

    <STATE name="StateName"> state body </STATE>

StateName – is the name of the state, its unique identifier in the FSM. There should be at least one state in each FSM. For the whole time, FSM is in one of states and active state is the only determinator for behaviour and appearance of FSM. The description of the state is in 'state body'.

Controls

The standart element with the help of which the state is described is control element – the rectangle area, which has associate appearance and associate actions. It's described as follows:

    <CONTROL topleft="TLCoord" bottomright="BRCoord"
    chit="ChitMode" gradient="ControlGradient"
    normal="NormalBitmap" mouse="MouseBitmap"
    leftdown="DownBitmap" 
    leftaction="ControlAction" rightaction="RightAction"
    mouseaction="MouseAction"/>

TLCoord – is the coordinate of left top corner of control. Coordinates are specified conserning one of the four corners of base window – the window of the video output. The coordinates are: TL(x,y), TR(x,y), BL(x,y), BR(x,y) – top-left, top-right, bottom-left and bottom-right corners correspondingly. The displacement (x,y) can have negative numbers and the counting stats from left top corner. Example: topleft = "BR(-10,15)" means that top left corner of the control is 10 pixels left and 15 pixels below the right bottom corner of the video output window. BRCoord specifies coordinates of right bottom corner of the control.

ChitMode defines the way the control influence the movements and size of video window. Possible values:

  • client – standard way. Also default one if 'ChitMode' is not specified in 'CONTROL' tag;
  • title – dragging control will drag the whole window – in fact, the behaviour is the same like dragging title of the window;
  • top – dragging control will lead to resizing video output window like dragging the top part of standart window;
  • bottom – dragging control will lead to resizing video output window like dragging the bottom part of standart window;
  • left – dragging control will lead to resizing video output window like dragging the left part of standart window;
  • right – dragging control will lead to resizing video output window like dragging the right part of standart window;
  • topleft – dragging control will lead to resizing video output window like dragging the top left part of standart window;
  • topright – dragging control will lead to resizing video output window like dragging the top right part of standart window;
  • bottomleft – dragging control will lead to resizing video output window like dragging the bottom left part of standart window;
  • bottomright – dragging control will lead to resizing video output window like dragging the bottom right part of standart window;

ColorGradient – four colors which define the inital filling of body of control. Colors are specified as follows: "#bbggrr#bbggrr#bbggrr#bbggrr#bbggrr", where bb, gg, rr – are blue, green and red components of the color in hexadecimal format correspondingly. First color – top left, second – top right, third – bottom left, forth – bottom right corners of the control correspondingly. Example:

    gradient = "#001122#a0b0c0#ffffff#8090a0"

If all four colors are not identical, the rectangle of control will be filled with gradient – the color will change smoothly taking specified colors in corners.

NormalBitmap – the name of raster graphics file (bmp), by which the rectangle of control should be filled. If this parameter is not specified, control won't be filled with image. If ControlGradient is also unspecified, when control will be invisible. Sometimes it's very useful – we can place some control at the top of others and attach some action to it – this way the actions will run and the control won't 'swim' at the foreground.

If the '?' sign and color specified after filename ( "control.bmp?#102030" ), when the image will be displayed "with key" – all pixels having #102030 colors will be transparent.

If the size of image does not agree with the size of control, it will be diplayed multiple times on its place like texture.

MouseBitmap specifies the image of the control in the time the mouse is over it.

DownBitmap specifies the image of the control when user clicks left button on it.

LeftAction specifies the action associated with left button click on the control. The action can be to foward any FSM in any state or produce message to CrystalPlayer itself. The possible messages to CrystalPlayer:

  • Menu_File – calling 'File' menu;
  • Menu_Subtitles – calling 'Subtitles' menu;
  • Menu_Playback – calling 'Playback' menu;
  • Menu_Playlist – calling 'Playlist' menu;
  • Menu_View – calling 'View' menu;
  • Menu_Options – calling 'Options' menu;
  • Menu_Help – calling 'Help' menu;
  • Menu_Context – calling 'Window context' menu;
  • Maximize – go to full screen mode;
  • Minimize – go to minimized mode;
  • Close – close window;
  • Play – start/continue video playback;
  • Pause – pause video playback;
  • Stop – stop video playback;

If action is supposed to move some FSM in another state, the format is fsmName.stateName. Several actions can be specified using ';', example: leftaction="Stop; Main.Initial" – stop playback and move 'Main' FSM to 'Initial' state.

RightAction – the same like above for right button.

MouseAction – the same like above when mouse is over control.

Playlist

The properties of playlist can be specified with the following tag:

    <PLAYLIST topleft="TLCoord" bottomright="BRCoord" 
    back="BackGroundGradient"
    active="ActiveGradient" textcolor="TextColor"
    activecolor="ActiveColor" font="FontName"
    height="FontHeight" ground="GroundBitmap" 
    grayground="GrayGroundBitmap"/>

where

  • TLCoord and BRCoord specify the position of playlist relatively to video output window;
  • BackgroundGradient – gradient with which the background of playlist is filled;
  • ActiveGradient – gradient used for coloring the active playlist file;
  • TextColor – the color of the font with which the elements of playlist are displayed;
  • ActiveColor – the color of the font with which the active file of playlist is displayed;
  • FontName – the name of the font with which the elements of playlist are displayed. Can be any of registered fonts in the system – e.g. 'Arial', 'Times New Roman', etc.;
  • FontHeight – the width of one line of playlist in pixels. The font size is determined on this width;
  • GroundBitmap – the name of .bmp file with the image of the background of playlist. This picture will be layered in the center of playlist on the background if specified;
  • GrayGroundBitmap – the name of .bmp file with the darkened image of the background of playlist. This picture will be layered in the center of playlist on the background in case the playlist is not empty. This picture should be little darker than GroundBitmap. If not specified, GrayGroundBitmap will be automatically generated from GroundBitmap.

Events

Next tag explicitly specifies the messages on which FSM should go into state in which this tag is located.

    <EVENT message="Msg" source="StateName"/>

When message 'Msg' occurs, if FSM was in StateName state (or any state if source param is missing), FSM goes into state, in which this tag is present. Possible Msg values:

  • Play – playback started;
  • Stop – playback finished;
  • Pause – playback paused.

The following tag is used for specifying keyboard control:

    <KEYBOARD playcontrol="PlayControl"/>
  • On – means that keyboard will be used for controlling player;
  • Off – means that keyboard will be used for controlling playlist.

This tag allows to switch correctly from player control to playlist control and vice versa. The only thing is needed to specify <KEYBOARD playcontrol="On"/>, in one state and <KEYBOARD playcontrol="Off"/> in some other. On the next picture, the skin implementing this ability is displayed:

Window and Shapes

Next tag is used to specify the location of physical Windows window relatively of the video output window. Its logical that all controls and the video output window itself should lay in the limits of this window.

    <WINDOW topleft="TLCoord" bottomright="BRCoord" 
    borderwidth="Width" bordercolor="Color"/>

where

  • TLCoord and BRCoord – the coordiates of the physical window;
  • Width – optional, the width of the border of the physical window in pixels;
  • Color – optional, the color of the border.

To specify the properties of video output window the following tag is used:

    <VIDEO color="Color" ground="Ground"
    minwidth="MinWidth" minheight="MinHeight"
    minwidth="MaxWidth" minheight="MaxHeight"/>

where

  • Color – the color of the filling of the empty area around the output image;
  • Ground – the name of the raster image (.bmp), which will be displayed in case video playback is stopped;
  • MinWidth, MinHeight, MaxWidth, MaxHeight – the limits of possible resizing of the video output window.

To specify shadow and glass effects in Windows Vista for window the following tag is used:

    <VIDEO ... shadowPower="Power" shadowDx="Dx" shadowDy="Dy" transparent="Transparent"/>

where

  • Power – the shadow power, size will be 2Power, "-1" to disable shadows;
  • Dx, Dy – the shadow shift from the window center, default - (0, 0), must be positive only;
  • Transparent – the power of transparent for REGIONGLASS tags.

The shape of the physical window may be not only rectangle, but can change between states of the FSM.

The shape of the window is intersection of defined geomethrycal shapes. The geomethrycal shape is specified using REGION tag:

    <REGION type="Rect" topleft="TLCoord" bottomright="BRCoord"/>

will specify rectangle with TLCoord – BRCoord diagonal;

    <REGION type="RoundRect" topleft="TLCoord" bottomright="BRCoord" 
    width="Width" height="Height"/>

will specify the rectanle with rounded corners. Additional parameters width and height specify horizontal and vertical diameters of rounding ellipse.

    <REGION type="Ellipse" topleft="TLCoord" bottomright="BRCoord"/>

specify ellipse. TLCoord and BRCoord specify rectangle in which the ellipse should be layered.

    <REGION type="Poly" countour="Countour"/>

specify polygon with vertexes separated by comma in Countour. Example: "TL(0,0), TL(100, 50), TL(50, 100)".

REGIONGLASS tag can be used in skin for Windows Vista to make glass effect zones, it will be ignored in other versions of Windows. This tag has same using as REGION tag.

Context menus

For describing the view of context menus, the same FSM model is used. Context menu is actually a separated skin, enclosed in the main. To specify context menu, the following tag should be used inside the main skin body:

    <SKIN object="Menu"> the body of the child skin </SKIN>

here, object = "Menu" is used to indicate that this encosed skin will be used to define context menu. All coordinates in this case are defined relatively dynamic rectangle area, in which menu items are put using defined properties of video player.

Instead of <PLAYLIST/> tag, the tag <MENU> is used in menu definition to describe the view of menu:

    <MENU topleft="TLCoord" bottomright="BRCoord"
    back="BackGradient"
    active="ActiveGradient"
    textcolor="TextColor" activecolor="ActiveColor" 
    graycolor="GrayColor" keycolor="KeyColor"
    keyactivecolor="KeyActiveColor"
    font="FontName"
    height="Height" separatorheight="SeparatorHeigth"
    popupwidth="PopupWidth" iconwidth="IconWidth" 
    popup="Popup" check="Check"
    separator="SeparatorGradiend">

As in PLAYLIST tag, TLCoord, BRCoord, BackGradient, ActiveGradient, TextColor, ActiveColor, FontName, Height are for the position of the menu items, gradient of the background, gradient of the foreground, text color, active item color, used font, the height of menu item in pixels correspondingly. Additional parameters are:

  • GrayColor – the color of disabled menu item;
  • KeyClor – the color of hot keys;
  • KeyActiveColor – the color of hot keys of active menu item;
  • SeparatorHeight – the height of the separator in pixels;
  • PopupWidth – the width of the left stripe for the icons of nested menu;
  • IconWidth – the width of the left stripe of checkbox icons of the menu;
  • Popup – the name of the image file, containing icon for pupup menu;
  • Check – the name of the image file, containing icon for the check for checkbox menu item;
  • SeparatorGradient – four colors specifying two horizontal lines – separator.

On the next picture the examples of menus developed using this format are displayed:

So, using this simple format, quite complex menu can be developed.

The example of the skin

Let's look at the example, illustrating the simplicity of description and wide possiblities of the developed model:

<SKIN RequiredVersion="33"> <!--Required version - 0.33 -->
    <TITLE author="A.Saitov, K.Bondarenko">
                TV Skin
    </TITLE> <!--Information about skin authors -->
    <SWITCH name="Main"> 
        <!-- This FSM is not actyally FSM since it has
        only one state and described only static elements. -->
        <STATE name="Normal">
            <REGION type="Rect" topleft="TL(-13, -15)"
                bottomright="BR(13, 18)"/>
            <!-- Three static rectangles defining
            static part of the window -->
            <REGION type="Rect" topleft="BL(10, 17)"
                bottomright="BR(-10, 48)"/>
            <REGION type="Rect" topleft="BL(-12, 47)"
                bottomright="BR(13, 63)"/>
            <VIDEO color="#858585" minwidth="374" minheight="257"/>
            <!-- Limits on resizing of the video window -->
            <!--It's the border of the video window. It can be used 
            to resize window -->
            <CONTROL topleft="TL(-13, -15)" bottomright="TL(0, 0)" 
                chit="topleft" normal="tl.bmp"/>
            <CONTROL topleft="TR(0, -15)"  bottomright="TR(14, 0)"
                chit="topright" normal="tr.bmp"/>
            <CONTROL topleft="BL(-13, 0)" bottomright="BL(0, 17)" 
                chit="bottomleft" normal="bl.bmp"/>
            <CONTROL topleft="BR(0, -1)"  bottomright="BR(13, 18)" 
                chit="bottomright" normal="br.bmp"/>
            <CONTROL topleft="TL(-13, 0)"  bottomright="BL(0, -51)" 
                chit="left" normal="l.bmp"/>
            <CONTROL topleft="TR(0, 0)"  bottomright="BR(13, -51)" 
                chit="right" normal="r.bmp"/>
            <CONTROL topleft="TL(0, -15)"  bottomright="TR(0, -13)" 
                chit="top"/>

            <!--the actual window data -->
            <CONTROL topleft="TL(0, 0)"  bottomright="BR(0, 0)" 
                chit="client" 
                gradient="#858585#858585#858585#858585"/>
            <CONTROL topleft="BL(0, 0)"  bottomright="BR(0, 17)" 
                chit="bottom" 
                normal="b.bmp"/>
                        
            <!-- static controls and textures -->
            <CONTROL topleft="BL(-13, -51)" 
                bottomright="BL(0, 0)" 
                normal="larr.bmp" 
                mouse="larr_mouse.bmp" leftdown="larr_down.bmp" 
                leftaction="Menu_Subtitles"/>
            <CONTROL topleft="BR(0, -51)" 
                bottomright="BR(13, 0)" 
                normal="rarr.bmp" 
                mouse="rarr_mouse.bmp" leftdown="rarr_down.bmp" 
                leftaction="Menu_Subtitles"/>                        
            <CONTROL topleft="BL(10, 17)" 
                bottomright="BR(-10, 48)" 
                chit="title" 
                normal="panel.bmp"/>
            <CONTROL topleft="BL(10, 17)" 
                bottomright="BL(45, 48)" 
                normal="switch.bmp" mouse="switch_mouse.bmp" 
                leftdown="switch_down.bmp" 
                leftaction="Close"/>
            <CONTROL topleft="BL(46, 17)" 
                bottomright="BL(76, 48)" 
                normal="min.bmp" 
                mouse="min_mouse.bmp" leftdown="min_down.bmp" 
                leftaction="Minimize"/>
            <CONTROL topleft="BL(80, 17)" 
                bottomright="BL(175, 48)" 
                normal="file.bmp" 
                mouse="file_mouse.bmp" leftdown="file_down.bmp" 
                leftaction="Menu_File"/>
            <CONTROL topleft="BL(176, 17)" 
                bottomright="BL(227, 48)" 
                normal="play.bmp" 
                mouse="play_mouse.bmp" leftdown="play_down.bmp" 
                leftaction="Menu_Playback"/>
            <CONTROL topleft="BR(-146, 17)"  
                bottomright="BR(-96, 48)" 
                normal="view.bmp" mouse="view_mouse.bmp" 
                leftdown="view_down.bmp" 
                leftaction="Menu_View"/>
            <CONTROL topleft="BR(-96, 17)"  
                bottomright="BR(-56, 48)" 
                normal="options.bmp" mouse="options_mouse.bmp" 
                leftdown="options_down.bmp" 
                leftaction="Menu_Options"/>
            <CONTROL topleft="BL(-13, 48)"
                bottomright="BR(13, 63)" 
                chit="title" normal="stand.bmp"/> 
            <CONTROL topleft="TR(-100, 3)" 
                bottomright="TR(-3, 75)"  
                normal="about_dark.bmp" 
                mouse="about_light.bmp" 
                leftdown="about_light.bmp" 
                leftaction="Menu_Help"/>
        </STATE>
    </SWITCH>
    <!-- FSM for playlist window. Window can be hidden, 
    inactive 'pulled out' and active 'pulled out' -->
    <SWITCH name="PlayList">
                
        <!-- hidden state -->
        <STATE name="Hide">
            <!-- physical window shrinked -->
            <WINDOW topleft="TL(-20, -20)" 
                bottomright="BR(13, 64)" 
                borderwidth="1" bordercolor="#000000"/>
            <CONTROL topleft="TL(-1, -15)"
                bottomright="TR(1, 0)"
                chit="title" normal="t_light.bmp"/>

            <!-- control which directs the transition
            into 'pulled out' state -->
            <CONTROL topleft="BR(-56, 17)"  
                bottomright="BR(-20, 48)" 
                normal="list.bmp" mouse="list_mouse.bmp" 
                leftdown="list_down_mouse.bmp" 
                leftaction="PlayList.ActiveShow"/>

            <!-- keyboard is used for controlling playack-->
            <KEYBOARD playcontrol="on"/>
        </STATE>

        <!-- 'pulled out and inactive' state -->
        <STATE name="InactiveShow">

            <!-- keyboard is used for controlling playack-->
            <KEYBOARD playcontrol="on"/>

            <!-- visual controls of pulled out window -->
            <WINDOW topleft="TL(-20, -20)" 
                bottomright="BR(400, 64)" 
                borderwidth="1" bordercolor="#000000"/>
            <REGION type="Rect" topleft="TR(20, -15)" 
                bottomright="BR(400, 63)"/>
            <REGION type="Rect" topleft="BR(-10, 28)"
                bottomright="BR(20, 35)"/>
            <CONTROL topleft="BR(-10, 28)" 
                bottomright="BR(20, 35)" 
                chit="title" normal="bridge.bmp"/>
            <PLAYLIST topleft="TR(30, 15)" 
                bottomright="BR(390, 53)" 
                back="#858585#858585#858585#858585"
                active="#505050#505050#505050#505050" 
                textcolor="#000000" 
                activecolor="#AAAAAA"
                playcolor="#000000" font="Arial Bold" 
                height="18" />
            <CONTROL topleft="TR(20, -15)"  
                bottomright="TR(400, 15)" 
                chit="title" 
                normal="Playlist_dark.bmp"/>
            <CONTROL topleft="BR(20, 53)"  
                bottomright="BR(400, 63)" 
                chit="title" 
                normal="pb.bmp"/>
            <CONTROL topleft="BR(-56, 17)"  
                bottomright="BR(-20, 48)" 
                normal="list_down.bmp" 
                mouse="list_down_mouse.bmp" 
                leftdown="list_mouse.bmp" 
                leftaction="PlayList.Hide"/>
            <CONTROL topleft="TR(20, 15)" 
                bottomright="BR(30, 53)" 
                chit="title" 
                normal="pl.bmp"/>
            <CONTROL topleft="TR(390, 15)"
                bottomright="BR(400, 53)" 
                chit="title" normal="pr.bmp"/>
            <CONTROL topleft="TR(319, -15)"
                bottomright="TR(354, 15)" 
                mouse="Arrow_light.bmp" 
                leftdown="Arrow_down.bmp" 
                leftaction="Menu_Playlist"/>
            <CONTROL topleft="TL(-1, -15)"
                bottomright="TR(1, 0)" 
                chit="title" normal="t_light.bmp"/>

            <!-- window activation -->
            <CONTROL topleft="TR(30, 15)" 
                bottomright="BR(390, 53)" 
                leftaction="PlayList.ActiveShow"/>

            <!-- if user starts playback
            from pulled out state,
            playlist should be deactivated -->
            <EVENT message="Play" source="ActiveShow"/>
        </STATE>

        <!-- 'pulled out and active' state -->
        <STATE name="ActiveShow">
                        
            <!-- keyboard is used for controlling playack-->
            <KEYBOARD playcontrol="off"/>

            <!-- visual controls of pulled out window -->
            <WINDOW topleft="TL(-20, -20)" 
                bottomright="BR(400, 64)" 
                borderwidth="1" bordercolor="#000000"/>
            <REGION type="Rect" topleft="TR(20, -15)" 
                bottomright="BR(400, 63)"/>
            <REGION type="Rect" topleft="BR(-10, 28)" 
                bottomright="BR(20, 35)"/>
            <CONTROL topleft="BR(-10, 28)" 
                bottomright="BR(20, 35)" 
                chit="title" normal="bridge.bmp"/>
            <PLAYLIST topleft="TR(30, 15)" 
                bottomright="BR(390, 53)" 
                back="#858585#858585#858585#858585"
                active="#000000#000000#000000#000000" 
                textcolor="#000000" 
                activecolor="#ffffff"
                playcolor="#000000" font="Arial Bold" 
                height="18" />
            <CONTROL topleft="TR(20, -15)"
                bottomright="TR(400, 15)" 
                chit="title" normal="Playlist_light.bmp"/>
            <CONTROL topleft="BR(20, 53)"
                bottomright="BR(400, 63)" 
                chit="title" normal="pb.bmp"/>
            <CONTROL topleft="TR(20, 15)"  
                bottomright="BR(30, 53)" 
                chit="title" normal="pl.bmp"/>
            <CONTROL topleft="TR(390, 15)"
                bottomright="BR(400, 53)" 
                chit="title" normal="pr.bmp"/>
            <CONTROL topleft="BR(-56, 17)"
                bottomright="BR(-20, 48)" 
                normal="test2.bmp" mouse="test2.bmp"
                leftdown="list.bmp" 
                leftaction="PlayList.Hide"/>
            <CONTROL topleft="BR(-56, 17)"
                bottomright="BR(-20, 48)" 
                normal="list_down.bmp"
                mouse="list_down_mouse.bmp" 
                leftdown="list_mouse.bmp"
                leftaction="PlayList.Hide"/>
            <CONTROL topleft="TR(319, -15)"
                bottomright="TR(354, 15)" 
                mouse="Arrow_light.bmp" 
                leftdown="Arrow_down.bmp" 
                leftaction="Menu_Playlist"/>
            <CONTROL topleft="TL(-1, -15)"
                bottomright="TR(1, 0)" 
                chit="title" normal="t_dark.bmp"/>
                
            <!-- window deactivation --> 
            <CONTROL topleft="TL(0, 0)"
                bottomright="BR(0, 0)" 
                leftaction="PlayList.InactiveShow"/>
        </STATE>
    </SWITCH>

    <!-- inner skin describing menu -->
    <SKIN object="Menu">
        <SWITCH name="Main">
            <STATE name="Main">
                <REGION type="Rect" topleft="TL(0, 0)" 
                    bottomright="BR(0, 0)"/>
                <WINDOW topleft="TL(0, 0)" bottomright="BR(0, 0)" 
                    borderwidth="1" bordercolor="#000000"/>
                <MENU topleft="TL(0, 0)" bottomright="BR(0, 0)" 
                    back="#858585#858585#858585#858585"
                    active="#505050#505050#505050#505050"
                    textcolor="#000000" activecolor="#AAAAAA" 
                    graycolor="#404040"
                    keycolor="#505050" keyactivecolor="#F0F0F0"
                    font="Arial" height="18" separatorheight="8" 
                    popupwidth="16" iconwidth="16"
                    popup="popup.bmp?#858585" 
                    check="check.bmp?#858585" 
                    separator="#000000#000000#000000#000000">
                </MENU>
            </STATE>
        </SWITCH>
    </SKIN>
</SKIN>
Skins
Skin Development
 
Total downloads
8 903 333
Visitors
64 948 928
since 1 Oct 2002
Copyright (C) 2003-2011 Crystal Reality LLC. All rights reserved.