Creating the skin.ini file
So far you've created, laid out and saved all the graphics that will compose the interface. Now it's time to create the skin.ini file, which will tell RealOne how to assemble all the pieces and what each piece does.
Only a masochist would make a Real skin from scratch. Real has a free skinning tool called the RealOne Skins Toolkit, available at htt p://proforma.real.com/real/rjcentral/skins_upload/toolkit.html.
Once you've downloaded the "Skins2Tooklit.exe file, double-click it to install the Skins2Toolkit on your Windows 95, 98, ME, 2000, NT or XP box. The installer creates a folder called Skins2Toolkit, containing help files and a Sample Files folder.
The Sample Files folder has a premade skin.ini file that we'll use as our roadmap as we make our own custom version. Copy the skin.ini file from the Sample Files folder to a new folder on your desktop and open it in your text editor of choice.
The file looks like this:
Application=RealOneVersion=2.0RecordShow=0PlayShow=0StopShow=0PauseShow=0PreviousShow=0NextShow=0ContinueShow=0ShuffleShow=0EjectShow=0MenuShow=0ExitShow=0MinimizeShow=0FullModeShow=0RPLaunchShow=0MuteShow=0VolShow=0PosShow=0PlayStatusShow=0RecordStatusShow=0RealLogoShow=0...
There are two kinds of lines in the file:
- Comments. These lines begin with a semicolon (";"). RealOne ignores these lines -- they're used by people like you and I to make notes to ourselves (";This is the play button")
- Declarations. These are lines where you declare that some property (i.e., Application) has some value (RealOne). A declaration takes the general form of property=value.
You edit the file by changing, adding and deleting declarations.
Default button visibility
RealOne has a number of default buttons with predefined names and behaviours:
- Record
- Play
- Stop
- Pause
- Previous
- Next
- Continue
- Shuffle
- Eject
- Menu
- Exit
- Minimize
- FullMode
- RPLaunch
- Mute
- Vol
- Pos
- PlayStatus
- RecordStatus
- RealLogo
Each of these buttons has a corresponding .bmp or .jpg file in the skin's ZIP archive. Above, you learned how to make your own images and replace Real's graphics; in this section, you'll learn how to tell Real which buttons to show, and when.
Right below the skin.ini file's version number there are a list of "Show" declarations that determine which buttons get shown and under what conditions. There's one line for each default button, taking the form Show=[0|1|conditional].
Buttons whose show property is set to 0 are not shown; buttons whose show property is set to 1 are always shown.
Conditional values -- like "Playing" and NotPlaying" -- are treated by the skin like 1's (true) when the condition they specify is met and like 0's when the condition they specify is not met. So a control whose Show property is set to Playing would be displayed during play and would be invisible while playing was stopped. A full glossary of conditionals is availble further down in this document.
To make the Play control visible at all times:
PlayShow=1
To make the Play control hidden at all times:
PlayShow=0
To make the Play control visible only during play:
PlayShow=Playing
To make the Pause control visible when play has stopped:
PauseShow=NotPlaying
The last two examples show how a Play button can be replaced with a Pause button when playback is stopped, and vice versa.
Here's a similar example for the Stop button:
PlayShow=NotPlaying
StopShow=Playing
TopLeft
Beneath the Show property definitions are the "xxxTopLeft" parameters. These specify the location, in pixels, of the top left corner of each button-image in relation to the background images own top left corner. This parameter is defined with a pair of positive integers separated by a comma. The first value is the x (horizontal) offset, and the second is the y (vertical) offset.
For example: PlayTopLeft=52,20StopTopLeft=86,20PreviousTopLeft=120,20NextTopLeft=154,20MenuTopLeft=222,20ExitTopLeft=290,22FullModeTopLeft=231,60
Notice that buttons can overlap -- in the above example, the Play and Stop buttons are placed in the same location, and are selectively hidden and shown based on conditional values in their Show properties.
Custom controls
Custom controls execute commands from a small vocabulary of available actions (see Real Custom Commands Glossary, below). These commands -- like EditTrackInfo -- have simple, self-explanatory names, and invoke screens, panels and windows that are available through Real's menus.
Additionally, custom controls can open URLs in your default browser. A custom control can be used to spawn a new browser window that contains the home-page of the skin's author, or a message-board for discussing skins, or a music search-engine, or any other Web page on the Internet.
Status Fields
Status fields are little text boxes that display information about the current or upcoming track. You define status fields in much the same way as you define a custom control, with a series of lines that describe the field, its format and its contents. Your skin can have as many as 30 customized status fields.
The status section of the skin.ini file begins with a line that says: [STATUS], followed by lines defining the default sont size, style and color: DefaultFontName=Lucida ConsoleDefaultFontBold=1DefaultFontHeight=11
After the defaults are defined, you create a block of text to describe each of your status fields. Here's the syntax for defining a status field:
Status[1,2,3,..n]Type=
For a complete listing of Status Types, see the status types glossary.
Status[1,2,3,...n]Rect=,,,
The four comma-separated integers after the equals-sign define both the size and position of the status-field
Additionally, there are a number of optional flags for setting text color, background color, scrolling options and more. We've included a reference section that describes all of these flags.
Here is the code in our skin.ini file that enables our Status Fields to be displayed:
[STATUS]DefaultFontName=Lucida ConsoleDefaultFontBold=1DefaultFontHeight=11Status1Type=PlayTitleStatus1Rect=20,44,147,62;Status1TextColor=72,72,104;Status1BackgroundColor=26,169,193Status2Type=PlayTimeElapsedStatus2Rect=155,44,230,62;Status2Show=playingStatus3Type=PlayArtistStatus3Rect=20,64,159,77
If we uncomment the last two lines in our PlayTitle, it will enable the formatting information to be applied:
Status1TextColor=72,72,104Status1BackgroundColor=26,169,193
Here is an example of our "PlayArtist" status field. Note the "FontHeight" and "Bold" values are explicitly-defined and will therefore override the default settings.
If we uncomment the "Status2Show=playing" declaration, the Time Elapsed status window will only display when a selection is "playing."
Use your favorite ZIP utility to ZIP the archive. Now you've got a single file called "El_Skin_Supremo.zip" (of course, if you named your skin folder something else, like "El_Skin_Horrible," the file will be called "El_Skin_Horrible.zip").
Sample skin.ini file
; StreamingMedia Magazine Skin; Created by Lisa Rein and Cory Doctorow[MAIN]Application=RealJukeboxVersion=1.0RecordShow=0PlayShow=1StopShow=1PauseShow=0PreviousShow=1NextShow=1ContinueShow=0ShuffleShow=0EjectShow=0MenuShow=1ExitShow=1MinimizeShow=0FullModeShow=1RPLaunchShow=0MuteShow=0VolShow=0PosShow=0PlayStatusShow=0PlayArtistShow=1RecordStatusShow=0PlayTitleShow=1PlayTimeElapsedShow=0RealLogoShow=0PlayTopLeft=52,20StopTopLeft=86,20PreviousTopLeft=120,20NextTopLeft=154,20MenuTopLeft=222,20ExitTopLeft=290,22FullModeTopLeft=231,60;NOTE: The custom control info below has been disabled. If you choose;to use it or edit it for use with your skin, remove the semi-colons (;);from the beginning of each line. ;Control1Image=bubble.bmp;Control1TopLeft=187,35;Control1Show=Playing;Control1ToolTip=RealNetworks;Control2Image=rjblogo.bmp;Control2TopLeft=17,67;Control2IsButton=0;Control2URL=http://realjukebox.real.com;Control2ToolTip=Visit RealJukebox Central;NOTE: The custom status info below has been disabled. If you choose;to use it or edit it for use with your skin, remove the semi-colons (;);from the beginning of each line. [STATUS]DefaultFontName=Lucida ConsoleDefaultFontBold=1DefaultFontHeight=11Status1Type=PlayTitleStatus1Rect=20,44,147,62;Status1TextColor=72,72,104;Status1BackgroundColor=26,169,193Status2Type=PlayTimeElapsedStatus2Rect=155,44,230,62;Status2TextColor=72,72,104;Status2BackgroundColor=26,169,193;Status2Justification=centerStatus2Show=playingStatus3Type=PlayArtistStatus3Rect=20,64,159,77;Status3TextColor=72,72,104;Status3BackgroundColor=26,169,193;Status3Justification=center;Status3FontName=Lucida Console;Status3FontHeight=10;Status3FontBold=1