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