Winamp 2.X skinning tutorial
Chapter 4 - Text Files
Text Files
There are usually five (or less) text files in a winamp skin: pledit.txt, readme.txt, region.txt, viscolor.txt and winampmb.txt. Well, the last one is often absent. You can find a detailed description of every file below.
Important note: try not to use characters which are not present in the Latin alphabet to avoid problems: they might be displayed incorrectly on some computers. Why? Winamp is only able to display Windows character sets, which differ for every country. If you use some letters of your local alphabet, they will be replaced by the corresponding characters from the user's alphabet. The best solution is to try to use transliteration. So, if you write your text in Spanish, German or (oh, no!) Russian and so on, try to avoid using these characters where it’s possible. Note that symbols like “©”, “%”, “$” and so on will be displayed correctly.
The last thing to know about text files is to avoid using non-Windows codetables, like KOI, MAC and so on... Unfortunately Winamp doesn’t even “understand” Unicode, which could solve all these problems.
So the easiest way to avoid all the problems above is to write all the texts in English and type them in Windows Notepad. :)
Pledit.txt
This file should look somewhat like that:
[Text]
Normal=#A6A6A6
Current=#404040
NormalBG=#F2F2F2
SelectedBG=#F8F8F8
MbFG=#404040
MbBG=#CFCFCF
Font=Arial
The structure of this file is very simple: after the [Text] line there are fields and their values. What do they mean? Normal is the foreground (font) color, which is used to display the song’s name in winamp playlist. Current is the foreground color for the currently played song. NormalBG is simply the background of the playlist and SelectedBG the background of the selected song (the one you have just clicked on). MbFG and MbBG are the minibrowser’s foreground and background colors. If you don’t want to skin the minibrowser, just skip these fields. Font is the name of the font you use in your skin. Try not to use rare or non-standard fonts or, if you do so, place the TTF file into the skin’s directory. Note: all the values are given in HEX. So “pure” green color (0R,255G,0B) will look like #00FF00. Use any calculator to convert decimal values into hexadecimal. There’s no need to do this, if you use Colorpad (take a look into the skinning applications (graphics) section), as it could give you both HEX and decimal values.
Graphical editors such as Photoshop provide the hexadecimal value of any color in the “color picker” box, so you can copy it and paste it in your text editor.
Readme.txt
Possibly, the most interesting text file in the skin package. It’s the text that is displayed in your winamp skin browser’s description window. You may write there whatever you want. Usually skinners include the following information: skin name, skin version, release date, short description, copyright note and the author’s contact information. If you’re planning to submit a skin somewhere, then it’s not the worst idea to include some information about the creator. The final version could look somewhat like this (a fragment from my Ballzzz 2 Futura skin’s readme.txt):
Ballzzz 2 Futura by SacRat
ver: 2.0.0 final
(skin name and version)
________________________________________________
Ballzzz Futura by Taras Brizitsky (AKA SacRat): sacrat@newmail.ru
Suggestions and bugreports are welcome.
http://sacrat.deviantart.com
(short contact info)
________________________________________________
Information:
Hope, this is what you were waiting for: Ballzzz 2 Futura. Modern design, minimalistic style...
[skipped]
Small description of the work and a list of new features.
________________________________________________
Terms of use:
-Ballzzz Honey for winamp is © 2002 by Taras Brizitsky AKA SacRat.
-This skin is copyrighted freeware for any noncommercial use or distribution.
[skipped]
A copyright note/terms of use. Just some useful information for those, who might use your skin. In few words it could be described like: I’m the original author; you’ve got it for free, so you cannot take money from it; you cannot rip it and if you want to place it somewhere, let me know.
Note: some skin sites (like
________________________________________________
Greets to following Deviantart members:
-Aggie
-Imagine AKA Gileva
-Iliks
-Jark
-Olya
-Poetess
-Snowman
Greets to all those, who sent me comments on my previous works, all those, who helped me to make my works better and better, and personally to Fiorela Agusti, my endless source of inspiration
[skipped]
Nothing special, just greets :).
Thanks for downloading...
________________________________________________
Find more on http://sacrat.deviantart.com or http://www.skinz.org/profile.phtml?userid=3666
This information might be useful for those who wish to get some other skins made by you. You could even place a list of other works made by you. For sure, not everyone reads this readme, but some people do. Besides, you’ve made a skin. Don’t you want to let others know who did it? Descriptions on the sites are easy to forget and this file is always in a skin.
Note: if a readme.txt file is absent, then winamp will display the content of any other text file which is not one with configuration data (like viscolor.txt, region.txt and so on). For example, if your skin’s archive contains files (among the standard ones) readme.txt and I_am_a_cool_skinner.txt, then only readme will be displayed. And if it is absent, then you’ll see the content of the second file. Some sites, such ashttp://www.1001winampskins.com use this trick to place their description into the skins you upload. So they simply repack the skin and put their own description file into the archive near readme.txt. Now you should know “how it works”.
Region.txt
A “transparency” mask of your skin. If you ever decide to create a skin with transparent regions, you may need this file. But as most of the modern skins are 100% visible, there’s no need to include it into the skin’s archive. Creating this file manually is quite tricky and boring. There’s a good tutorial by Adam Kennedy, which is often included (quoted) into region.txt files. Here it goes:
; I stole this from the Complex skin, cause hey I thought it was cool :)
; (and cause I'm too lazy to document it myself. :)
; The original author is Adam Kennedy
You could also read our small format description below, in the transparency section.
Modern skinners prefer to use various applications to create this file. One of them is already mentioned winamp region.txt generator by Maxim. As for me, it’s the best program of that kind, as it allows you to create transparency regions fast and easy, unlike using the rest of the programs or creating them manually.
I created a region.txt file manually (for my FuturA skin) and I say it was not much fun ;) What I did - I opened the image in good old MS-Paint, zoomed it in, and typed cursor coordinates which are displayed in the status bar, even if the window is inactive. But I wouldn’t recommend doing the same!
Viscolor.txt
Visualization colors. When you don’t use any visualization plugin, simple oscilloscope/spectrum analyzer is usually turned on and it’s located on the left part of your main winamp window (below the numbers, which display song’s time). The way it looks is described in this file.
It might look somewhat like that:
223,223,223, // color 0 = light gray
234,234,234, // color 1 = lighter gray for dots
210,210,210, // color 2 = top of spec
205,205,205, // 3
200,200,200, // 4
195,195,195, // 5
190,190,190, // 6
185,185,185, // 7
180,180,180, // 8
175,175,175, // 9
170,170,170, // 10
165,165,165, // 11
160,160,160, // 12
155,155,155, // 13
150,150,150, // 14
145,145,145, // 15
140,140,140, // 16
135,135,135, // 17 = bottom of spec
210,210,210, // 18 = osc 1
174,174,174, // 19 = osc 2 (slightly dimmer)
138,138,138, // 20 = osc 3
102,102,102, // 21 = osc 4
66,66,66, // 22 = osc 5
200,200,200, // 23 = analyzer peak dots
Some comments: the file has 24 lines with color values in RGB (decimal). All the text from double-slash “//” to the end of the line is a comment.
- The first line of the file has the background color of the visualizer. It’s often taken the same as the average background’s color of main.bmp on that place.
- Line two has the second background color. It’s made to give your visualizer a grid-looking style. If you don’t need any grid, just set it the same value as the previous line.
- Lines 3-18 are the spectrum analyzer’s color values (from top to the bottom). Trick: you could make every second, for example, line black (or give it any other indexed value) to make the analyzer look like it was build from small blocks.
- Lines 19-23 are the oscilloscope colors (from inside to outside).
- Line 24 is storing analyzer peaks’ color value.
Creating this file manually is not too hard, but you may use any utilities for this (look at skinning applications (configs) paragraph).
Hint: you can create a 16x1 px. file in your graphix program and fill it with any gradient, or draw anything you like in this limited space :) If you use Paint Shop Pro, choose the ‘color picker’ tool, which shows the RGB value of the pixel under the cursor in a ‘color’ box (on right) even when inactive, so you can type it in your text editor. In Photoshop this will be a bit less convenient, still nothing too hard. You could also use a color picker like Colorpad for this aim (look at skinning applications (graphics)).
Winampmb.txt
The file I hate so much... The file with the content that is displayed in winamp minibrowser by default. Theoretically. In fact some crappy skins use it to display a minibrowser window if it’s inactive. May look somewhat like that. Hope, you’ll understand the idea (taken from the template amp skin):
<html>
<head>
<title>mbboxster</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>
<body bgcolor="#FFFFFF" text="#A0A0A0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
<div id="Layer1" style="position:absolute; left:0; top:0; width:255; height:88; z-index:1"><img src="mbinner.bmp" width="256" height="58"></div>
<div id="Layer2" style="position:absolute; left:1px; top:79px; width:244px; height:74px; z-index:2">
<p align="right"><font face="Arial, Helvetica, sans-serif"><b><font size="-2">Version
1.0<br>
(c) 2001 Mischa Klement</font></b></font><br><br>
<font face="Arial, Helvetica, sans-serif" size="-2">created with Macromedia Fireworks 4.0<br>
MikroAmp skinned<br>
DFX skinned<br>
<br>
enjoy<br>
cyana</font></p>
<p align="right"><font face="Arial, Helvetica, sans-serif" size="-2">cyana@aon.at<br>
<a href="http://www.omnislab.com"><font color="#A0A0A0">www.omnislab.com</font></a></font></p>
<p align="right"><font face="Arial, Helvetica, sans-serif" size="-2"> <br>
<br>
</font></p>
</div>
</body>
</html>
If you think that you’re a good in HTML, you could write your own, but I never do that.
Mb.ini
One more file that is useless for almost any normal skinner. It defines the default page which would be opened in the winamp MB window.
The format is very simple:
[Winamp]
MBOpen=URL;
where “URL” is the address of your page to be opened.
Transparency
Well, it's not a secret, that the winamp 2 skin format supports transparency, yet its abilities are very limited (well, guys, the long-awaited winamp 3 will be able to make really transparent skins with all the opacity effects). How does it work? It's useful to know to know some limitations of this "trick" and its disadvantages.
So-called "transparency" in winamp is just a way to make some regions of your skin "transparent" (interesting phrase), that means you could see through them and they wouldn't have any control elements. Note that not all the windows of your skin can be "transparent", only the main window and equalizer. This creates some difficulties... For example, you'll have to make your "transparent" skin look OK with all the windows on and it's not a trivial task. A good idea is to leave the greatest part of your skin visible, so it would be easier for anyone to use it, so don't create too large transparent regions. Next, think a bit about a simple questions: what the hell do you need this transparency for? It's often used to underline the shape of a skin, but not an end in itself. I've seen lots of interesting skins whose authors were trying to make their work look original by just making almost all the skin transparent and leaving few space for control elements... They were looking nice, but had terrible usability.
Creating a transparent skin manually is rather tricky: you create a new file called region.txt in your skin’s directory and then edit it to look like that:
[Normal]
NumPoints=4,4,4
PointList=0,0 275,0 275,113 0,113 0,113 48,113 48,116 0,116 226,113 275,113 275,116 226,116
[Equalizer]
NumPoints=4,4,4
PointList=0,0 48,0 48,116 0,116 226,0 275,0 275,116 226,116 48,4 275,4 275,113 48,113
[WindowShade]
NumPoints=8
PointList=3,0 0,3 0,11 3,14 272,14 275,11 275,3 272,0
[EqualizerWS]
NumPoints=8
PointList=3,0 0,3 0,11 3,14 272,14 275,11 275,3 272,0
(This fragment has been taken from my Bend v3 skin, windowshade’s transparency is made specially for this tutorial :)). Looks difficult? It’s not that hard, as it seems for the first time... A [Normal] section has transparency description for the main window and [Equalizer] - for the equalizer. [WindowShade] and [EqualizerWS] are just transparency regions for the window’s winshade modes (main and EQ). NumPoints=4,4,4 indicates that there are 3 transparent regions in our skin’s EQ and main window. Each of these regions consists of 4 points. For example, for the main window the two first transparent areas look like: 0,0 275,0, 275,113 0,113 0,113. Fill this field last, when you know the complete number of your points and transparent regions in the skin. PointList= is an arrow of point coordinates in X,Y format. Note that they are the outside pixels of your skin, so don’t point skin elements here. Please note that all the three regions are not divided by anything, so it’s quite easy to make a mistake filling them manually. The same is right for the EQ...
It’s not the best idea ever to make this file manually, as it takes a lot of time when making really original shapes. So you could use one of the programs for generating this file. I’ve seen several programs , which were designed to help you in this, but my favorite is Maxim’s Winamp regions.txt generator, which could be found at http://winamp.mwos.cjb.net/ (try looking through any search engine, if this link won’t work). If you need a better explanation about creating editing this file, take a look at regions.txt section.
Well, there’s one more «trick» to create half-transparent skins. Sometimes people just delete some skin’s pixels as on a chessboard, pretending «transparency» this way. I personally dislike this pervertion, which only make skins look worse and wouldn’t recommend anyone to use it. Just know, that it exists :)
Cursors
If you need it, you can also replace the default winamp cursors. Cursors usually have 32x32-pixel size and could be one of two types: animated or non-animated. If you need to use animated cursors, just rename an ANI file into CUR and use it. Winamp will “understand” it as well.
Here’s the description of every file:
CLOSE.CUR Main window's close
EQCLOSE.CUR EQ close
EQNORMAL.CUR EQ normal (default) cursor
EQSLID.CUR EQ vertical sliders
EQTITLE.CUR EQ titlebar
MAINMENU.CUR Main window's top-left button (menu)
MIN.CUR Main window's MIN button
NORMAL.CUR Main window's default (normal) cursor
PCLOSE.CUR PL close
PNORMAL.CUR PL normal cursor
POSBAR.CUR Main window's posbar
PSIZE.CUR PL resizable corner
PTBAR.CUR PL top bar
PVSCROLL.CUR PL vertical slider
PWINBUT.CUR PL WS mode
PWSNORM.CUR PL WS normal cursor
PWSSIZE.CUR PL WS MAX button
SONGNAME.CUR Main window's songname scroller
TITLEBAR.CUR Main window's titlebar
VOLBAL.CUR Main window's volume balance
VOLBAR.CUR Main window's volume switch
WINBUT.CUR Main window's WS button
WSCLOSE.CUR WS close
WSMIN.CUR Main window's WS MIN
WSNORMAL.CUR WS normal cursor
WSPOSBAR.CUR WS posbar
WSWINBUT.CUR WS MAX
In order to change these cursors you could create your own files with any program, like Axialis AX Cursors (http://www.axialis.com) or use cursors made by someone else (read rips and copyringhts paragraph first), which could be found anywhere on the Internet.
BUGZ (don’t forget about testing...)
A few words about some bugs and misses which can often be found even in skins made by professionals. Before submitting, check these things:
- Buttons displacements and animation bugs: press any button and without releasing your mouse’s left button (if you’re not a left-hander) move the cursor over all the buttons in your skin. It’s easy to find a “lost” animation this way. Besides, if some buttons are displaced even one px aside, you will find the bug.
- Headers: sometimes you could make a mistake, while creating your headers in titlebar.bmp or so. For example, the header (or any header’s element, like title) could be displaced.
- Sliders: sliders are probably the hardest things to troubleshoot since they have lots of animations. Just move your slider slowly from minimum to maximum position and look at the slider carefully. If you’ve missed only a pixel in your volume.bmp (or any other slider), it could spoil all your work. Sliders trend to “climb down” very easily, so pay a lot of attention to them.
- Stop!: if you think that a winamp, where your skin is applied is always playing music, you’re not right: sometimes it’s useful to press pause or stop and take a look at changes: posbar displacements, missing background in animation window, hell-knows-what on the place of your digits... this all is more than real.
- Resize: resize your playlist, MB, AVS window and find out that there are clear joints in tiling elements... or not... Anyway, it’s better to find it out now.
- WS: for some reasons people usually forget that someone could use it. One of the most “popular” bugs is a displacement of min/max/close buttons.
- Is that all? Not... Check all the modes of visualizer (spectrum/oscilloscope) and be sure that you have tested all the windows, including AVS and MB (if you skinned them), in all the modes. Check readme file and start all over again (joke). Now that’s all...