Make your own skins for Winamp 5

[charleychacko]

Lesson 1: Introduction to Skinning


Skins are basically of two types: Bitmap Replacement skins and Dynamic Layout skins. Bitmap Replacement skins are nothing but skins that have simple image files that simply replace other images of an application meanin' that the play button has same size, same position, same dynamics, but just a different look. Ex. Winamp Classic Skins

Dynamic Replacement skins, on the other hand are very dynamic and give alot of power into the skinners hand. You can do anything {almost} with such skinning abilities. You can place any item anywhere, you can animate the play button, you can animate it when the mouse rolls over and all this power is given to you by MAKI, the scripting language for Winamp. This will be one of the last lessons becuase you just cannot script until most of the skin is in place. You'll soon know why...

The tools you will be needing:

1.Image Editing: Adobe Photoshop OR Jasc PaintShop Pro, GIMP or any software you prefer but make sure it can export your images in .PNG format.

2.Text Editing: EditPlus2 is recommended although, Notepad is anexcellent tool in such a case.

The formats you need to know:

1. .PNG: Portable Network Graphics, it is an excellent skinning formatr because of it's low size and it's support for multi-depth transperencies.

2. .XML: All of our coding will be with XML only. Not to fear, please it's simple and you'll enjoy it.

3. .m: A .m file is an uncompiled MAKI file. It can be read by any text editor because it is a text file. You'll learn more later.

4. .MAKI: .MAKI is a compiled MAKI file that can be used by Winamp for implementing your MAKI scripts. {I'm not involving you into MAKI know as it is a bit pro-type. We'll get to it as it needs a lot of attention}

Lesson 2: Undertanding the heirarchy of XML

Let's see a basic XML code:

<library>

<shelf id="1">
<book id="Harry Potter" subtitle="Prisoner of Azkaban" author="J.K Rowling" RentLimit="3" cost="Rs. 230" cvar="230"/>
<book id="Seven Seas" subtitle="" author="S.U Person" RentLimit="none" cost="Rs. 100" cvar="100"/>
</shelf>

<shelf id="2">
------------------------
------------------------
</shelf>

</library>

Let's have a simple look at that code. The xml code gives us a suggestion that it is an XML script used or generated at a library. So, library here is the parent. It is the parent because it contains other tags also. Then comes shelves. We have two sheleves and they are the children nodes. They both in our case are siblings, because they belong to the same parent. Now, comes the books. In context to the library the are grand-children, but in the yare also the children of 'shelves'. In case of the two books mentioned they are the children of 'shelf 1' and so on.

Remember a child cannot have more than one parent but a parent can have more than one child.


Now, let's study the 'book' tag more carefully. It says: <book id="name" subtitle="sub-title" author="author" RentLimit="3" cost="Rs. 230" cvar="230"/>

Now, here we can see that the tag 'book' has an id that states it's name, a sub-title, author and so on which are attributes of the tag 'book'. These attributes make the two book tags different. Notice that you close the tag here only by a '/>' ending rather than a '>' ending like in other tags. The <library> tag as such completes when all the items inside library are covered.

The whole contents of shelves, books come under library and the books come under shelves, but the books are not parents and henve do not have anything under them.

That's all for XML now. Don't be mislead that its difficult. If you find, parent, child a bit confusing, leave it. We don't need it. It was just for making you understand the basic structure of XML.

Lesson 2: skin.xml

Today we will be learning about the most important file of any WA5 skin i.e skin.xml. It is the most important file because skin.xml is the file, Winamp looks for in any skin. Now, to begin skinning go to your Winamp directory>Skins. There make a new folder called 'Your skin' i.e make a folder by the name of your skin. In that folder place the skin.xml file you have downloaded fro mthe link on the top of this page. Make sure you do not place it under any other directory rather than the root of your newly created folder.

Now, let's bissect the skin.xml file a bit. The skin.xml file can be opened with any text editor like Notepad or EditPlus 2. The xml file is as belows



001: It gives the XML version as 1.0 Note:It is not the Winamp's XML skin version but the language version, it also tells the encoding of the file. This is very important. A wrong encoding specification will give an error.

003: This tag gives you the WinampAbstractionLayer version i.e the skin's XML version. 0.8 refers to skins made for WA3, whereas 1.0 refers to skins made for WA5.

005: This tag constructs a parent 'skininfo'. Winamp recognizes all the child nodes as informtion on this skin.

006: This child tag gives the skin's version. Here I have mentioned 1.08, name yourself accordingly.

007: This gives the skin's name. Edit accordingly.

008: This gives the skin's comments. Edit accordingly.

009: This gives the author's name. Edit accordingly.

010: This gives the author's e-mail. Edit accordingly.

011: This gives the author's web-site. As u know: Edit Accordingly.

012: This closes the parent tag 'skininfo'.

Hope you enjoyed it. Now we come to an very important part that is the 'include' tag.

line nos. 14-15 give a reference to an .xml file which should be loaded and the xml code should be readed from there. What Winamp does is simply paste the code from the <include> file into the skin.xml file and continue reading the file. From here, you are completely free. You can name your files by any name you want. The <include> tag calls the file and makes it a part of the skin.xml file.

17: Be extremely sure that you close <WinampAbstractionLayer> here!!!

Lesson 3:Making your first window! and adding graphical elements

First of all what you need to learn is naming elements. For convinience make a folder called 'Images' in your skin's directory. Also make a folder called 'XML' in your directory. So your directory should have two folder 'XML' and 'Images'. In the images folder, place an image which you want to be your background of the skin. I have placed 'background.png'. If you want to skin right now, you can get an image here. Just unzip it and use it. Not too good an image because I made in about 15 seconds for this tutorial. The image has not been included in the pack you might have downloaded. It is highly recommended that you use your own files and creations so as to learn Skinning better.

Make a new text file called 'player-elements.xml' in your xml folder. If you want you can put in your code in the skin.xml file also, but just for convinience, let us do the 'naming' of all our elements ina seperate file. Now, how to name a file? Simple. Have a look at the code:



Here at line 1, the parent tag <elements> starts the process of naming. Below it lies the <bitmap> tags. In here you simply give the id="name". The name can be anything you prefer, simply anything. The file="filesource" is the place you have to enter the path of the image you want the name to correspond to. The name can be anything, I repeat but the file's address must be relative. No matter in which xml file you put it, remeber that the code will be accessed from skin.xml, so we have put here "images/background.png". Now you have named an image. Remember you need to name all images before you can use them in your skin. No raw source of an image can be used in the skin.

Note: While using images, you can also use greyscale images. Greyscale images also reduce the file size of the image at the same time making colorization process easier. Colorization through code is a very effective code, but all different colored elements must be seperate images. We will go through colorization soon.

Your First Window

Hope you enjoyed the tut. till now. So, here's when we acutally begin making our skin. Let's start.

Making a window is simple. Window, in Winamp terminology is reffered to as a 'container'. To make a container, in any of your XML file, called through 'include' or simply in the skin.xml file you have to put the following code:

<container id="container.id">
----//\\Container Code//\\------
</container>

The <container> tags indicate Winamp to make a new window. I have added this code in a seperate "player.xml" file. Now, the code between the container tags contain all the code defining the container.

Note: For the container to recognized as the 'main window' in winamp, it's id needs to be given as "main". Otherwise Winamp will bring up another "main" window in it's place. However if you wish to change it's name as it appears in the Winamp's menu, you can always change the name="" attribute in the <container> code. You can make as many windows as you want and add any content in them. Complex component windows such as Playlist Editor, Media Library will be covered later.

Layouts

Container by itself is not a GUI entity. You cannot see a container. All visible parts of your skin has to belong to a 'layout'. Each container can have many layouts and you can switch between these layout. For example the WindowShade {i.e the stick mode that comes up is just another layout in the main Window}. So you can have a 'compact mode' and a 'expanded mode' and other such modes like this. To make a layout is simple. Any layout tag that comes must be under a container tag ONLY. Becuase that layout belongs to that 'container' and other such layouts.

Let's make our first layout. Open the player.xml file you might have downloaded or make a new file called player.xml. Make sure that the file is not player.xml.txt. This applies to all files.

Now just type as seen here, we'll go over the code soon. PLEASE DO NOT COPY IT DIRECTLY, YOU'LL NEVER LEARN SKINNING THEN. SIMPLY TYPE THE CODE. YOU'LL GET THE HANG OF IT EASILY.

<container id="main" name="main window"> //--Never End with a "/>"
<layout id="normal" background="main.bckg> //--Never End with a "/>"
</layout> //-If you don't remember to close the tag, you are sure to get an error
</container> //-If you don't remember to close the tag, you are sure to get an error

Here, look at the background="main.bckg" attribute in the <layout> tag. Remember the file we named during naming the files with the <elements> and the <bitmap> tags? The bitmap id="" must be used. This is why the id="" attribute of any bitmap tag is essential. All throughout skinning all components will be using the name files ONLY.

Now that you have done this, let's have a look at our skin.

Start Winamp.

Right Click on any area of your current skin which is not a button or such an area. In the Menu that Pops Up search for the skin with the name of the folder you have started making your skin in. Bingo, now you can see that your skin's background has come up.


Lesson 4: Adding Buttons and Images

Now, that you have learnt how to make your first window, specify a layout; let's learn to do the most important thing: make the buttons. Buttons are evry important as they are the way you actually allow a user to communicate to the application through your skin. Now let's learn how to make a button.

1.Make three images: A Play down{The image which would appear when the play button is clicked}, A Play normal button{The image which should come as the play button}, and a play hover button{The image which should come as the play button, when the mouse goes over the area}. You can use the images I have made but I don't recommend that; it's not good if you want to learn skinning completely. Here are the images I made. {These are .gif images and cannot be used in the skin, download the .PNG usable images here

2.Name them as play.png, play-hover.png, play-down.png. {You can give them any names you want}

3.Through any XML file, name this elements using <bitmap> tags {these tags have been taught in lesson 2}. Give them any names you want. I named them play, play.hover and play.down

4.Now the button code: This code should appear within a 'layout' tag ONLY. Take it from the layout and container you have created

<button
id="play"
x="20" y="100"
action="PLAY"
image="play" //--Remeber we named this using <bitmap> tags?
hoverimage="play.hover" //--Remeber we named this using <bitmap> tags?
downimage="play.down" //--Remeber we named this using <bitmap> tags?
rectrgn="1"
/>

Here the id="" is the identification for the button. This is not necessary now, but would be when we learn MAKI. the x="" and y="" are the co-ordinates i.e x="<number>" This number is the number of pixels you want to place the button from left and y="<number>" is the number of pixels from the top. The top-left corner of your image will be placed at a point which is x and y no. of pixles away from the left and the top. If you want you can also add two tags "w" and "h" if you want to resize the images. Resizing through code and by Winamp looks very ugly. It is highly not recommended.

P.S To see the X,Y co-ordinates in Adobe Photoshop got to View>Window and select Info if it is not already selected. In the 'Info' Pallettte have a look at the X Y dialog which will give you the co-ordinates. Click on the traingle and go to Pallette options. There select the Mouse Co-Ordinates Ruler Units = Pixels

Now wherever you move the mouse, co-ordinates of that point will be displayed here.

Now, comes the most important attribute "action". This action="PLAY" specifies what Winamp should do when the button is pressed. The action table you can see below and is corresponding function. Whenver you make a button, the action by the button is recieved by Winamp through the action="". Refer to the actionTable for more information.



Here, just have a look at 'pause'. If Winamp encounters this tag, it will assign the current button, the action of pausing the song whenevr it is pressed. All buttons are defined in the same way as our play button. Remeber to make different images, name them and use them. That's ALL. As you can see in the play button exapmle, the bitmap id was anything I preffered, but Winamp used it when I assigned that bitmap to be a play button in the code!!

Some button actions I need to explain:

1.'switch': This action switches layouts. The buttons defined by this action are used to toggle between layouts. As you know you can have more than two layouts. So the layout to which the skin should switch to is defined by an additional attribute called param="". Let the code be like this:

<button
id="so and so"
action="SWITCH" param="layout name"
x="23" y="23"
image="image"
hoverimage="image"
downimage="image"
/>

In the param="layout name", in place of the layout name, enter the id of the layout you wish to switch to.

So, now you can make buttons ranging from play buttons to minimize, close, switching buttons and a lot of things. Download the button pack here. The buttons are not included in the download of today's files. You may want to experiment with the buttons and to help you better it also includes the XML code for you to understand buttons in WA skinning better.

Adding Layers

Now we will learn to add layers to our skin. We want our buttons which we have placed to look better. I want a cool strip on top of it. Have a look at the way I want it to be modified:



So, I could have introduced it through the layout background also? But then, while adding colorThemes, you cannot have them to be of seperate colors. So, how to add these images simple. Make any add-on image or get this image from the 'button pack' you might have downloaded from just a little above here.

Name the image using <bitmap> tags. I named it "layer.strip" and gave the file source {Refer to Lesson 2 for naming of files}.

Now, within the 'layout' tags simply put the following code:

<layer
id="layer1"
image="layer.strip"
x="no." y="no."
/>

You can also add another attribute called 'alpha' within the 'layer' tags. The attribute is writen as alpha="no.[1-255]"


The alpha number number can be anything between 1-255, but it has to be a whole number i.e it cannot be 2.1 or 4.2 or 5.7 etc. The alpha number controls the transperency of the layer. 0 means the image is invisible and 255 means complete opacity.