[Lesson 4.1,5,6 updated]Make your own skins for Winamp 5

rohan · 19-04-2005, 04:39 PM

Lesson no. 4.1, 5,6 also updated now. Have a look at the fourth post in this thread.

Epilogue:Hi! aLL

First of all hi! to you all. Today is the first lesson of our skinning tutorial. So, the faculty as of now is of me. Let's begin. From 21st of this month, this tutorial will be avilable through RSS feeds also. Please give me your comments through e-mail on what do you think about this. The previous post was locked because it did not actually start teaching or know what. But this is completely true.

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:

Quote:

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

For live XML feeds: http://www.geocities.com/tritium_studios/tutXML.xml

Copyright Rohan Prabhu

rohan · 19-04-2005, 09:59 PM

Download the files used in today's lessons here

Lesson 2: skin.xml

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.

That's all for today. Next lesson we'll add additional images, and also start making buttons. Stay Tuned.

All beta tests are over. The live XML feed without any problems is now avialble at http://www.geocities.com/tritium_studios/tutXML.xml

rohan · 20-04-2005, 06:38 PM

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}

That's All For Today

So that's all for today. Tommorrow, I will be starting with toggleButtons for advanced controls like 'shuffle', 'repeat' and buttons for switching components like 'Playlist Editor', 'Media Library' etc. on or off. You will also learn to make sliders for volume, song position, balance etc. Stay tuned.

Copyright Rohan Prabhu. Please give your valuable comments.

sms_solver · 21-04-2005, 12:30 AM

No images visible

rohan · 21-04-2005, 06:11 AM

Quote:

Originally Posted by sms_solver

No images visible

I can see em' all. Try again or with a different browser.

NikhilVerma · 21-04-2005, 07:41 PM

I can see the images too...

BTW guys if you want to then you should join our team which is going to make a Winamp skin... We are just 2 members here!!!

rohan · 22-04-2005, 09:08 AM

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.

rohan · 22-04-2005, 09:59 AM

The live XML feeds are working 100% with RssReader and other aggregators. Get the feeds at http://www.geocities.com/tritium_studios/tutXML.xml

Mikwiththestick · 29-04-2005, 12:31 AM

Hey rohan hows it going? well just to let you know that lesson four makes no sence i mean i put in everything i could think of and when i test it no pop ups saying somethings wroung nothing just my main background can ya help me out?

Here is my Player.xml

Code:

<container id="main" name="main window">
<layout id="normal" background="main.bckg">
</layout>
</container>

<elements>
 <bitmap id="play" file="Images/play.png"/>
 <bitmap id="play.hover" file="Images/play-hover.png"/>
 <bitmap id="play.down" file="Images/play-down.png"/>
 <bitmap id="layer.strip" file="Images/strip.png"/>
</elements>

<button
id="play"
x="200" y="36"
action="PLAY"
image="play"
hoverimage="play.hover"
downimage="play.down"
rectrgn="1"
tooltip="Play Music"
/>

rohan · 01-05-2005, 05:54 PM

Please pay a bit more attention to my lessons. Here I've clearly specified that all the GUI Objects, including buttons and the rest HAVE TO BE placed within the layout tags ONLY to be visible....