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.

So, the next lesson we will learn about making our first window and put some images in it. We will also learn how to name your skin, the author of it, his/her e-mail, website and the rest such that Winamp understands it. So, stay tuned!!!

Lesson 2: skin.xml

Download the files used in this lesson here
Hi, again. 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.

Here's how the skin will be looking when all the buttons would be loaded: {The black parts are the transperencies}

© Rohan Prabhu.

Lesson 4.1: ToggleButtons

Get the files for this lesson here

Well, now we come to a part which is quite an extension of the previous part: togglebuttons. All attrbitutes of button are also used here with some additives. The code for any toggleButton is as simple as anything. Just instead of

<button
---
---
/>

write

<togglebutton
---
---
/>

But in toggle buttons there is another attribute that comes up. That is activeimage="". It is just like your hoverimage, downimage etc. and is the image which would show up when the toggle is active.

You can put in togglebuttons and then through MAKI {the ultimate skinning poweress} you can toggle effects. But for shuffle, repeat and crossfade the togglebutton tag has NO action="". It instead has a cfgattrib="" These cfgattribs help Winamp recognize the current buttons in association with the plug-ins, because these functions are mostly controlled by various plug-ins. Here are the cgfattribs:

shuffle: cfgattrib="{45F3F7C1-A6F3-4EE6-A15E-125E92FC3F8D};Shuffle"
repeat: cfgattrib="{45F3F7C1-A6F3-4EE6-A15E-125E92FC3F8D};Repeat"
crossfade: cfgattrib="{FC3EAF78-C66E-4ED2-A0AA-1494DFCC13FF};Enable crossfading"

That's all. Simple... Aint it??

Lesson 5:Animated Images

You would love it if some of your images in the skin were animated. Won't you. Now here's a surprise. You can have animated layers in your skin. Great isn't it? First let's create the images for making an animated layer. All the frames are arragned side by side or from top to bottom in a single image. Confooosing? Well, let's get it straight. Have a look at the following GIF animated image:



Here are the frames of the animation:



Now let's arrange these frames side-by-side or from top to bottom without any space between them. All frames MUST be of same size only. So if you want 10 frames, each frame being 25 x 50 size, you need to have an image of 250 x 50, with frames arranged side by side or 25 x 500 with frames arranged from top to bottom. That's it your image is ready. You can get a pre-made animatedLayer here.

First of all name your images with the <bitmap id=""/> tags {refer lesson 2}.
I named them as anim.layer1
Then use the following code:{within a 'layout' tag ONLY}

<AnimatedLayer
x="no." y="no."
image="anim.layer1"
w="25" h="50"
autoplay="1"
autoreplay="1"
id="animated"
speed="12"
/>

So, here's the break-up

|First the x and y co-ordinates. Dat's simple.
|Then comes the image="" This will be the image with your frames. I called anim.layer1 You can call whatever you named it as.
|Then comes w="25" and h="50". This is very important. Here 'w' and 'h' do not refer to the image's height and width, but to each frame's height and width. It starts looking from the top-left corner and slices out a 25 X 50 slab and gives it frame1, then the next slab and it's frame 2, and so on..
|Here we are. This is simple to understand. autoplay="" tells winamp whether to play the animation when it loads or let the playing be triggered off by some other thing {MAKI script, mostly}. autoplay="1" means to play it on loading, whereas autoplay="0" means not to play on loading.
|Here, autoreplay="1" means the animation should be looped, whereas autoreplay="0" means the animation should be played only once.
|speed="" is the frames per second speed for your animation.

That's all, your first animated layer is ready!!!!

Lesson 6: Sliders

Sliders are a very essential part of Winamp Skinning. Throughout your Winamp experience you might have used a lot of sliders like volume, seek and balance. Here we are to learn how to make them. First make the images. For a slider, only the 'thumb' is required. It's slider at the background is inserted by using <layer>. First make the thumbs for your sliders: seek, seek on hover and sek on click and the 'slider background images' or download them here.

|Name the images using <bitmap id=""/>. I named them as slider.seek, slider.seek.1, slider.seek.2 {I'm sorry but in the download there is only one slider file. The other slider files will soon be updated}
|The code to be put in within a 'layout' tag for putting a slider:

<slider
id="seek"
thumb="slider.seek"
hoverthumb="slider.seek.1"
downthumb="slider.seek.2"
action="seek"
x="" y=""
w="no." h="no."
/>

Everything is self-explainable now that you have come so far in skinning. Here, the action="seek" tells Winamp what to do when the slider is moved to the corresponding positions.

The w="" and h="" are very important as they state how long is the slider when a user slides it.

Here is the actions table with the action="" attribute values for making other sliders of different functions.



Next lesson we learn how to make texts like song name ticker, the time ticker that shows how much time has elapsed and other such custom text areas. We we will also learn how to make standardFrame which is EXTREMELY important. Without it, no skin would be accepted on Winamp.com. Stay tuned 

All throughout as you have been seeing, I am giving you the skin files, little by little. That's becuase I'm making them in realtime and also if you learn and make, your skinning abilities will improve. Bitmap placement is a very important aspect so I have not given the 'x' and 'y' co-ordinates to you. Place them according to your wishes. Expirement by adding new layers and other stuff abd enjoy life!!!

Copyright Rohan Prabhu. Please give your valuable comments.