Winamp Developer Wiki - User contributions [en]

Submitting Your Skin to Winamp.com

2008-08-27T19:53:48Z

Wahdahtahdammie:

WSZ Files

2008-08-27T19:53:38Z

Wahdahtahdammie:

Editing the Configuration Files

2008-08-27T19:53:28Z

Wahdahtahdammie:

Creating Custom Cursors

2008-08-27T19:53:18Z

Wahdahtahdammie:

For Winamp 2.9/5.x

2008-08-27T19:53:09Z

Wahdahtahdammie:

AVS

2008-08-27T19:53:00Z

Wahdahtahdammie:

Mini-browser

2008-08-27T19:52:52Z

Wahdahtahdammie:

Playlist

2008-08-27T19:52:42Z

Wahdahtahdammie:

Equalizer

2008-08-27T19:52:26Z

Wahdahtahdammie:

Main

2008-08-27T19:52:19Z

Wahdahtahdammie:

Creating a Classic Skin: [[The Base Skin]] --> [[Main|Paint the Main Window]] --> [[Equalizer|Paint the Equalizer Window]] --> [[Playlist|Paint the Playlist Window]] --> [[Mini-browser|Paint the Minibrowser Window]] --> [[AVS|Paint the AVS Window]] --> [[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]] --> [[Creating Custom Cursors|Create Custom Cursors]] --> [[Editing the Configuration Files|Edit the Configuration Files]] --> [[WSZ Files|Compress to .WSZ format]] --> [[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]

==Skinning The Main Window==
The Winamp main window is probably the most complex window, graphics wise, of all its windows. There are many things going on in that one window at all times. Each part of the main window is divided up into various bitmap images. Here is a list of the images below that actually create the main window.

[[Image:Winamp.gif]]

*Main.bmp
*Titlebar.bmp
*CButtons.bmp
*ShufRep.bmp
*Volume.bmp
*Balance.bmp
*MonoSter.bmp
*Posbar.bmp
*Playpaus.bmp
*Numbers.bmp
*Text.bmp

===Winamp Skins | Main.bmp===

[[Image:main.gif]]

This file provides the background image for Winamp, sections of the other bitmaps are cropped and layered over this background image to create the various states of "on" and "off", buttons, sliders, etc. Many skin artists (skinners) create their own main.bmp image as well as the other components to make their skin as unique as possible. Although the regions in which the buttons can actually be clicked, the artists have a certain amount of pixels to play with for each element. This will enable the skinner to give the illusion of making smaller more precise controls, transparent controls, or even just big silly dumb ones if they wish. The possibilities are simply endless. The skin components are all bitmaps and therefore *cannot support animation or transparencies* The only way to achieve transparency is to use the overlapping area of main.bmp as the background in the various components.

===Winamp Skins | Titlebar.bmp===

[[Image:titlebar.gif]]

Titlebar.bmp provides the title bars for the all the various skinned windows of Winamp. The first of the bars are the graphics for Winamp's main window when that window has focus (the current window on your desktop is said to have the 'focus', and on that window the currently selected control also has the 'focus'). The second bar is the main window's title bar when it does not have the focus. The third and fourth bars provide the graphics for Winamp running in Window Shade mode. The fifth and sixth bars are special. They provide the graphics for the title bar when the Winamp Easter Egg is active. (Easter Eggs are usually useless aspects of a piece of software that the software developers include as a joke or to give credit to something. It's just the programmers trying to have a little fun. do not worry about these last two bars for now.)

To the left of the title bars are a selection of graphics for the windows buttons in their various states.

[[Image:winbut.gif]]

The top row consists of the images for system menu (a.k.a. Winamp's Main Menu), the minimize button, as well as the close button in it's normal state (the way the buttons would look if they weren't clicked). The second row consists of the same set of buttons, however in the pressed state (the way the buttons would look if they were clicked). The third row is the graphics for the WindowShade button where the left image is the image of the button not pressed, and the left is the image of the button pressed. The fourth row contains the images for the button that restores Winamp or its various windows from WindowShade mode to its expanded form, the images being in the same order, the left being not pressed, and the right being the pressed state.

The fifth and final row consists of the images that create the progress bar for Winamp when Winamp is in WindowShade mode. The first part of the row consists of the image for which the seek bar rests in, followed by the slider in various states.

To the right of the title bars are the graphics for the CuttleBar, which is a little strip of buttons to the left of the visualization area of the Winamp main window. At the top the strip is shown in it's un-pressed state. To the right of the first strip is a version of the strip with all the labels removed, this is for the people who turn off the CuttleBar in Winamp's Preferences window. The next row of strips are simply the different states of the CuttleBar with copy of the strip in each of it's five states, one state for each button being pressed.

When modifying the title bar it's important to remember that if you change the appearance of your buttons in the main title bar images, you should also change all the graphics that are relevant to the title bar to match so that they don't look out of place when you press them and remove the focus from the button you had just pressed. Also note that you can not add graphics for components that do not exist, for example adding a spot in WindowShade mode for track title scrolling would not make sense, due to the fact that Winamp wasn't coded with that in mind, leaving that spot you created blank.

===Winamp Skins | ShufRep.bmp===

[[Image:Cbuttons.gif]]

The cbuttons.bmp image provides the images for Winamp's playback control buttons. The top row displays the buttons un-pressed or in their normal state, the second row of graphics are the same buttons except in the pressed state. Remember when skinning this set of components that transparency does not exist, if the button is incorporated into the background, you will have to place the background into the cbuttons.bmp.

===Winamp Skins | ShufRep.bmp===

[[Image:Shufrep.gif]]

Shufrep.bmp provides the graphics for both states of the Shuffle-Play button, Play/Loop button (Repeat), Equalizer button as well as the Playlist button. The top row is the (repeat) loop and shuffle in the off state, the second row, are the loop and shuffle button in the off, clicked state(the button being pressed while the shuffle/loop buttons were in the off state). The third row is loop and shuffle button in the on state, and the fourth row are the buttons being clicked in the on state.

The bottom four images make up the graphics for the Equalizer and Playlist editor buttons in both two states. The first is the Equalizer button in the off state. The second button is the Playlist button in the off state. The third is the Equalizer off state and pressed at the same time. The fourth being the Playlist button in the same state. The next row is the exact same thing, however, instead of the buttons being in the off state, they are on.

The same conditions in regards to transparency that apply for the Cbuttons.bmp image apply for this image as well.

===Winamp Skins | Volume.bmp===

[[Image:Volume.gif]]

The volume.bmp file (partial shown here enlarged at the left) contains a set of of bars and two slider graphics. Depending on how high or low the level of the volume is, Winamp selects one of the bars to demonstrate the level at which the volume is currently at. If the volume is all the way down, it displays the more green bars, if all the way up, it displays the more yellow bars. The first bar is the volume at its lowest level, the last bar is the volume at its maximum level. Fiddle with these graphics yourselves to find out which bar is which level. The bottom contains the sliders control images. The first image being the slider, which is in the clicked, the second being in the un-clicked state.

===Winamp Skins | Balance.bmp===

[[Image:Bal.gif]]

Balance.bmp works virtually identitical to volume.bmp, however, the images in balance need to illustrate the volume coming from either the left, right, or both speakers. This is done by swaying from green to red when moving the slider from one of the sides towards center. Simply color all the bars the way you would do for the volume.bmp and the outcome should be the same.

===Winamp Skins | MonoSter.bmp===

[[Image:Monoster.gif]]

Monoster.bmp provides the indication that the audio source is running in Stereo or Mono mode. The top row shows the "in stereo" indicator as well as the "in mono", indicator. The second row shows the "stereo off" and "mono off" indicators. When Winamp is playing in stereo sound, the "stereo on" with the "mono off" indicators are displayed. When the audio is in mono, the opposite is displayed.

===Winamp Skins | Posbar.bmp===

[[Image:Posbar.gif]]

The posbar.bmp, shown here enlarged, provides the track for the song position slider. At the right side of the image, the song seek slider is shown in both states, pressed and not pressed.

===Winamp Skins | Playpaus.bmp===

[[Image:playpaus.gif]]

The playpaus.bmp file provides indicators that the file being played is playing, paused or stopped. The final item shows whether the file is synchronized or buffered or a break in transmission has been found.

===Winamp Skins | Numbers.bmp===

[[Image:Numbers.gif]]

The numbers.bmp file provides the images for displaying the numbers used in the time display, located directly above the visualizations area.

===Winamp Skins | Text.bmp===

[[Image:Text.gif]]

Text.bmp is performs the same job that numbers.bmp, however, this image isn't as limited in use as numbers.bmp. Text.bmp provides all the text that is used for the track area, Playlist editor, and anywhere else that Winamp uses text within the skinned interface.

The Base Skin

2008-08-27T19:52:01Z

Wahdahtahdammie:

Modern Skin: Maki Overview

2008-08-27T19:38:16Z

Wahdahtahdammie:

Creating a Modern Skin --> [[Modern Skin: Intro|Intro]] --> [[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]] --> [[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]] --> [[Modern Skin: XML Intro|XML Intro]] --> [[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]] --> [[Modern Skin: Container| Container]] --> [[Modern Skin: Group|Group]] --> [[Modern Skin: Relative Positioning| Relative Positioning]] --> [[Modern Skin: Complex Skin|Complex Skin]] --> [[Modern Skin: Non-Rect Player| Non-Rect Player]] --> [[Modern Skin: Layer Composition| Layer Composition]] --> [[Modern Skin: Alpha Channels| Alpha Channels]] --> [[Modern Skin: Animatedlayer|Animatedlayer]] --> [[Modern Skin: Snap Points|Snap Points]] --> [[Modern Skin: Drawers|Drawers]] --> [[Modern Skin: Skin Scripting| Skin Scripting]] --> [[Modern Skin: Drawer Scripting| Drawer Scripting]] --> [[Modern Skin: Animating a Skin|Animating a Skin]] --> [[Modern Skin: Maki Overview| Maki Overview]] --> [[Main_Page#Glossary_of_Terms|Glossary]]

==What is Maki==

Maki is a user interface and event management scripting system and more. The primary purpose of Maki is to handle all of the user interface behavior. Maki is used to insert functionality in Winamp3. The inserted functionality can range from a new user interface behavior to an alarm clock to a seperate EQ control system. You must not forget that Maki is part of Wasabi, which is used to build Winamp3. It's therefor safe to assume that Wasabi based applications (other than Winamp3) support Maki also. Well, when there are others that is.

==What does Maki mean?==

'''M'''ake '''A''' '''K'''iller '''I'''nterface

==What can Maki do?==

Maki as a language can do pretty much everything most scripting languages do. It supports user functions, user classes. It also has a full fledged pre-processor that allows you to include other Maki source files. Maki scripts are actually compiled using the Maki Compiler (MC.EXE, look for it in your Winamp3 directory. Don't worry about the compiler, we'll explain how it works later on).

So here's a list of what Maki can do, just remember, it might change, but always in a good way, at least, we hope so.

*Trap and hook events (onClick() do something...)
*Move user interface elements (take button A and move it to position x,y)
*Move and change images (button A has image A, set button A's image to image B)
*Show and Hide Windows.
*Control Winamp3 playback (play, stop, next, etc.)
*Control Winamp3 volume (set the volume to 100%)
*Control Winamp3 equalizer levels (set 60hz to +20db, for you bass addicts.)
*Make an Alarm
*Make a Clock
*etc.

Now, you might not realise it, but the fact it can trap events and hook events and create new GUI objects on the fly means it can pretty much do anything. Something very important to remember is that some GUI objects need to be "binded" before being able to be used to trap events. The best way to go about this is to remember that objects need to be binded before being used. Here's a short example:

Global Timer myTimer;
System.onScriptLoaded() {
myTimer = new Timer;
}
myTimer.onTimer() {
//Do cool stuff here.
}

==When should I use Maki?==

It's always hard to decide if you want to implement something via scripting or component. Always remember that many things can be done with Maki and that implementing something via scripting is also much faster than using a component. This is super true when it comes to user interface behavior in skins. Literaly ANYTHING that has to do with how the user interface (skin) behaves and changes because of user input is pretty darn quick to write in scripting, but you can still do it in a component if you wish.

Mainly, you have to look at the potential level of complexity of what you're trying to do. You don't want to implement something very complex in script because it will definitely be slower than straight C++ code.

==Maki Syntax==

Here's where the fun ends for me and I have to start being all serious and actually explain important stuff. Ugh. So, first I'm going to explain general syntax, like what constitutes an instruction, how you terminate lines, etc. Then we'll jump into variables, functions, classes and class members. Here we gooooooooo!

First off, Maki is NOT case sensitive, so a function named llama can also be called by using Llama. I'd also like to point out the difference between pre-processor statements and actual code statement. Pre-processor statements are read and processed FIRST, before even ONE shred of code is actually compiled. They start with # and end with a carriage return. Actual code starts pretty much with anything but # and ends with a ;. This excludes flow control statements (like if(..) {... ). Now I know it's a bit odd to just read things and not see it, so, how about a little example? *nod*

First, pre-processor statements:

#include "../../lib/std.mi"

#define ACTIVEALPHA (230)
#define INACTIVEALPHA (150)

The pre-processor statements are pretty self explainatory. I'll explain what they actually mean really soon, just observe the syntax for now.

Now, a code snippet:

if (isactive != prev_active) {
prev_active = isactive;
fader.start();
}

Since if is a control statement and marks the beginning of a code block ( a code block is something in between { .. } ), it doesn't require a ;, the line below it however, isn't a control statement and requires the line to end with a ;. Again, I will explain what everything means later, for now, just observe the syntax.

==Maki Datatypes==

In this section, we'll go thru all the different datatypes available in Maki and how to use them (And also, a quick overview of what exactly is a variable in Maki). Currently in Maki there are 6 basic types you can use:

*Boolean
*Int
*Float
*Double
*String
*Object<nowiki>*</nowiki>

<nowiki>*</nowiki> Object is a compound type, we'll see what it means later.

Now for a description of each of the types. Please note that the variable types aren't case sensitive.

===Boolean===

Boolean is a boolean value that can have two states. For us, these states are true (1) and false (0). Here's how you create a Boolean variable and assign a value to it:

//Create a bool type variable and assign 0 (false) to it.
Boolean state = 0;

//Assign 1 (true) to our bool variable named state.
state = 1;

//Assign false (0) to our bool variable named state.
state = false;

//Assign true (1) to our bool variable named state.
state = true;

===Int===

Int is a signed* round integer value from -2 147 483 647 to +2 147 483 648 (this means no decimal values, ever). Here's how you create an Int variable and assign a value to it:

//Create an int type variable and assign 255 to it.
Int alpha = 255;

//Assign the value 1000 to our int variable named alpha.
alpha = 1000;

//Assign the value -1000 to our int variable named alpha.
alpha = -1000;

===Float===

Float is a signed floating point number. Here's how you create a Float variable and assign a value to it:

//Create a float type variable and assign 0.25 to it.
Float fraction = 0.25;

//Assign the value 0.5 to our float variable named fraction.
fraction = 0.5;

//Assign the value -3.5566 to our float variable named fraction.
fraction = -3.5566;

===Double===

Double is a signed floating point number with double precision.

//Create a float type variable and assign 0.000000125 to it.
Double fraction = 0.000000125;

//Assign the value 0.5 to our double variable named fraction.
fraction = 0.5;

//Assign the value -3.5566 to our double variable named fraction.
fraction = -3.5566;

===String===

String is a string, it can be of any length. Here's how you create a String variable and assign a value to it:

//Create a string type variable and assign a sentence to it.
String name = "My real name is not Aus.";

//Assign the value "Guru" to our string variable named name.
name = "Guru";

//Assign the value "Francis" to our string variable named name.
name = "Francis";

===Object===

Object is a compound type. This means it can have more than just one value associated with it. Infact, you can even attach values to it, and even other objects.

===Null===

Null is a special case. You can't create a variable of this type, it is ONLY used in comparaisons and can compare to any type variable and object. You can use it to see if a variable contains something or exists.

==Maki Operators==

===Mathematical===

All basic math operators are available, here's a list of them and what they do.

[[Image:Table1.png]]

===Logical===

[[Image:Table2.png]]

===Bit===

[[Image:Table1.png]]

===Assignment===

[[Image:Table1.png]]

==Maki Control Structures==

Control structures are what influence the flow of the code, certain parts are executed only in certain cases, some a fixed amount of times, some a variable amount of times, etc. Most of the basic control structures found in modern languages are available in Maki. Here's a list of them:

===if===

if(state == true) {
state = false;
}

===if else===

if(state == true) {
state = false;
} else {
state = true;
}

===while loop===

while(state == true) {
...
}

===do while loop===

do {
...
} while(state == true);

===for loop===

for(int i = 0; i < 10; i++) {
...
}

==Maki Functions==

===How do I create my own Maki functions===

Functions in Maki need to be declared before they can be used (you can declare and define it if you want also). When declaring a function you need to use the proper prototype line for the function you wish to create. This includes the return value type and the parameters it takes.

There are two ways you can go about creating functions.

1) You can group all your function declarations (called prototypes) at the top of your script and then define (write the actual code associated with the functions) them anywhere in the file. Like so:

#include

Function Boolean CheckLevel(int Threshold);
Function Int CheckPlaystring(String _Playstring);

...

Boolean CheckLevel(int Threshold) {
...
}

Int CheckPlaystring(String _Playstring) {
...
}

2) You can declare the function just before defining it. Like so:

#include
...
Function Boolean CheckLevel(int Threshold);
Boolean CheckLevel(int Threshold) {
...
}

The preferred method is the first because it's just much easier to organize things, but, you can do it the other way if you want to.

===How to read function prototypes===

Function RETURN_VALUE_TYPE FUNCTION_NAME(PARAM_TYPE PARAM_NAME, ...);

*RETURN_VALUE_TYPE is the type of the return value, it can be any type supported by Maki, including user classes.
*FUNCTION_NAME is the name of the function you are declaring. It can be any combination of letters and numbers but it MUST start with a letter.
*PARAM_TYPE is the type of the parameter you will be passing to the function, it can be any type supported by Maki, including user classes.
*PARAM_NAME is the name the parameter will have inside the function, it can be any combination of letters and numbers but it MUST start with a letter.

The function's name and parameter names CAN NOT use any of the existing Maki keywords.

==Maki Classes==

The already existing Maki classes usually consist of two things: member data and methods. It's very important to remember that user classes do not support methods yet. (needs improvement)

==Maki User Classes==

(needs improvement)

==Gerneral Scripting Rules==

These are just general things you want to keep in mind when writing Maki scripts and when writing code in general too! :)

*As a rule of thumb, all uppercase is reserved for constants. So please avoid naming anything that's not a constant all in uppercase.

==STD.MI Reference==

If you'd like to know more about STD.MI simply open it in your favorite text editor and check out the spiffy comments. If you need more help, [http://forums.winamp.com/ check out the forums!]

Modern Skin: Animating a Skin

2008-08-27T19:37:52Z

Wahdahtahdammie:

Modern Skin: Drawer Scripting

2008-08-27T19:37:42Z

Wahdahtahdammie:

Modern Skin: Skin Scripting

2008-08-27T19:37:31Z

Wahdahtahdammie:

Modern Skin: Drawers

2008-08-27T19:37:19Z

Wahdahtahdammie:

Modern Skin: Snap Points

2008-08-27T19:37:09Z

Wahdahtahdammie:

Modern Skin: Animatedlayer

2008-08-27T19:36:56Z

Wahdahtahdammie:

Modern Skin: Alpha Channels

2008-08-27T19:36:46Z

Wahdahtahdammie:

Modern Skin: Layer Composition

2008-08-27T19:36:29Z

Wahdahtahdammie:

Modern Skin: Non-Rect Player

2008-08-27T19:36:19Z

Wahdahtahdammie:

Modern Skin: Complex Skin

2008-08-27T19:36:10Z

Wahdahtahdammie:

Modern Skin: Relative Positioning

2008-08-27T19:35:58Z

Wahdahtahdammie:

Modern Skin: Group

2008-08-27T19:35:44Z

Wahdahtahdammie:

Modern Skin: Simple Skin Tutorial (Continued)

2008-08-27T19:35:23Z

Wahdahtahdammie:

Creating a Modern Skin --> [[Modern Skin: Intro|Intro]] --> [[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]] --> [[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]] --> [[Modern Skin: XML Intro|XML Intro]] --> [[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]] --> [[Modern Skin: Container| Container]] --> [[Modern Skin: Group|Group]] --> [[Modern Skin: Relative Positioning| Relative Positioning]] --> [[Modern Skin: Complex Skin|Complex Skin]] --> [[Modern Skin: Non-Rect Player| Non-Rect Player]] --> [[Modern Skin: Layer Composition| Layer Composition]] --> [[Modern Skin: Alpha Channels| Alpha Channels]] --> [[Modern Skin: Animatedlayer|Animatedlayer]] --> [[Modern Skin: Snap Points|Snap Points]] --> [[Modern Skin: Drawers|Drawers]] --> [[Modern Skin: Skin Scripting| Skin Scripting]] --> [[Modern Skin: Drawer Scripting| Drawer Scripting]] --> [[Modern Skin: Animating a Skin|Animating a Skin]] --> [[Modern Skin: Maki Overview| Maki Overview]] --> [[Main_Page#Glossary_of_Terms|Glossary]]

'''Simple Skin Example'''

[[Image:Simpleskin_diag.png]]

We will begin with a simple skin example. I'll give you the essential parts of the skin. In the next section, I'll demonstrate important Winamp3 concepts using this skin. The topics that I'll go over are:

==Winamp3 Skin Directory Hierarchy==

[[Image:Dirhierarchy.png]]

'''a) Skin Hierarchy'''

Before you start playing with a skin, you have to know where everything is. Above is a picture of the Winamp directory. If you open that directory ("C:\Program Files\Winamp") with Windows Explorer, it should look pretty similar. The section in blue is the "Skin" directory and the directory that we care about. Within the "Skin" directory, there are sub-directories and files. Each sub-directory and WAL files are a skin. WAL is Winamp3 skin format. Next section talks about how to manipulate it.

'''b) .WAL files'''

Instead of a directory for a skin, you may see only one file with a .WAL extension. Don't worry. WAL (Winamp Abstraction Layer) is Winamp3 skin format. It is basically a zipped file of the skin directory. We do this to save space and to make it easier to distribute the skins. To make changes to that skin, do the following:

#Rename the .WAL file to .ZIP
#Open that file with Winzip. If you don't have it, you can get it here. [www.winzip.com]
#Unzip the content into a directory.

'''c) Required file'''

Lets take a look at what's in a skin directory. We'll use the "Simple Tutorial" as an example. Keep in mind that other skins may contain other files and directories that are not shown. What we're showing here is the bare minimum example.

Within the "Simple Tutorial" skin directory, there are three items: 1) Skin.xml file, 2) "Player" directory, 3) "XML" directory. The only required file for a skin is the Skin.xml file. It is the file that the Winamp3 skin engine looks for. You can say that it is the entry point for the skin. From that file, all the fun starts. =) I will dissect that file later on.

The "Player" directory contains all the graphics files for the skin. The files are in .PNG (Portable Network Graphics) format. The "XML" directory is usually where all the XML files are located. Because our skin is relatively simple, there is only one file in that directory.

'''d) #include in XML files'''
One more thing I want to go over is the '''<include file="xml/player.xml"/ >''' tag. When the Winamp skinning engine parses this XML file and encounters that tag, it grabs the file specified within that tag and pastes whatever code is inside that file into the current file. So in this example, we're looking at the skin.xml file. The skinning engine will grab player.xml file in the xml subdirectory and paste whatever code that is inside player.xml into skin.xml. This process is recursive. This means that if there's any include file tag inside player.xml, it will get those code also.

==Simple Tutorial Skin - Graphics Files==

These are the graphics that I've used in creating Simple Tutorial skin. One thing to notice is that we like to use PNG file format. Please also use that format too. The graphics files are the parts that we're going to use for our skin. We will define them as elements and link them into our XML code later in order to use them.

==Simple Tutorial Skin - skin.xml==

[[Image:Skinxmlcode.png]]

The required file for any skin is the Skin.xml file. You can locate this file in your "C:\Program Files\Winamp\Skins\Simple Tutorial" directory. The content of that file is posted above. I'll go over all the parts. I have listed line numbers on the left and code on the right. You can open your version and follow along.

'''a) <?XML>''' (line 1)

[[Image:Xml_version.png]]

The first line of the Skin.xml file should be the line shown above. The line identifies Skin.xml as an XML file. It is important to remember that you need that line only once in Skin.xml. If you divide your xml into several files, do not include that line in other xml files. Subsequent xml files will be pasted into Skin.xml file by the skin engine.

'''b) <WinampAbstractionLayer>''' (line 3)

[[Image:Winampabstraction.png]]

The WinampAbstractionLayer tag is used to specify which skin version you're following. The version that "Simple Tutorial" skin is made for is 0.8. This tag is used to track compatability. We will keep compatability as long as possible. But sometimes when we introduce a new funcitonality and change an existing one, compatability is broken and we will increment the version number. You will need to update the skin to conform to the new standard. If the skin engine finds your version number is different than the current version, you will see the warning below. However, this does not mean that your skin will no longer work. If functionality that has been changed is not implemented in your skin, you skin will continue to function.

[[Image:Skinswitch_warning.png]]

'''c) <skininfo>''' section (line 4-12)

[[Image:Skininfo.png]]

The tags are all pretty self-explanatory. But lets go over them anyway for fun.

[[Image:Skininfoexpl.png]]

'''d) <include> section''' (line 13-20)

I have discussed <include> functionality above. Note that we're borrowing skins from the Default skin. The only component's appearance we're overriding is the main player. The specification for that is in player.xml (line 14). We'll go over that file next.

==Simple Tutorial Skin - player.xml==

'''a) Name and comments''' (line 1-3)

[[Image:Playerxmlcode1.png]]

The first section of your XML should be a comment section that briefly explains the functionalities of the file. This way it will be easy for others to read and understand your code.

'''b) Elements definition''' (line 4-18)

[[Image:Playerxmlcode3.png]]

This section defines all the elements in your skin. This is the part that links the graphics to a "bitmap id" that other XML code can refer to. For example, line 11 links a bitmap id, "'''blue-player.button.previous'''", to a graphics component in "'''player/blue/blue-previous.png'''" file. That bitmap id is also linked to a gamma group called "'''Buttons'''". After linking that object to a gamma group, user can adjust the color variance of that object in the preference menu. Therefore, even if that object is blue right now, you can change it so that it'll appear to be a different color.

As your skin becomes more complex, you will have many elements defined in your skin. It will be useful to break the <Elements> definitions into different files. Typically, one would define all the elements in each component in separate files. For example, elements in the main player will be in "'''player-elements.xml'''" and elements in the playlist will be in "'''pledit-elements.xml'''".

'''c) Playback Buttons Group Definition''' (line 19-64)

[[Image:Playerxmlcode4.png]]

Sometime a group of objects naturally belong together or are located next to each other. If you move one of them, chances are that you'll be moving the rest of them. The playback buttons is an excellent example. If you want to change the location of those button, rather than moving each element independently, you can define a group and move the group together. A group is a set of objects that can be referred to and manipulated as a whole. It is a like a bag to throw your stuff into. It first must be defined by a <groupdef> tag, then can be located with a <group> tag. In section 2.5, we're going to dissect it even more.

[[Image:Playbackgroup.png]]

'''d) Song File Information and Visualization Group Definition''' (line 65-107)

[[Image:Playerxmlcode5.png]]

SongInfo group is another group definition just like the Playback Buttons group. As you can see that the elements defined inside this group is different from the previous one. In this example, we're using elements other than buttons. We're using the layer to set the background color of two areas. A layer is basically an image. Layers can overlay on top of each other. It is similar to a layer in Adobe Photoshop. "Songinfo" and "infoline" are text objects displaying information stored within Winamp3 runtime variables.

[[Image:Songinfogroup.png]]

'''e) Main Window: Container and Layout''' (line 1-3)

[[Image:Playerxmlcode6.png]]

Previous sections are all about defining objects. Now we get to start using them. If you read the code, you'll see that there is a container object, a layout object and two group objects. Container is at the top of hierarchy because everything else "lives" in it. Within the container, we have defined a layout and, within the layout, we're using the groups we defined earlier.

Container, layout and group are important concepts and we will go more in depth in subsequent sections. [[Modern_Skin:_Container|Read on...]]

Modern Skin: XML Intro

2008-08-27T19:35:11Z

Wahdahtahdammie:

Modern Skin: Simple Skin Tutorial

2008-08-27T19:35:01Z

Wahdahtahdammie:

Modern Skin: Winamp 2 to W3+

2008-08-27T19:34:45Z

Wahdahtahdammie:

Modern Skin: Intro

2008-08-27T19:34:05Z

Wahdahtahdammie:

File:Table4.png

2008-08-27T19:17:48Z

Wahdahtahdammie:

File:Table3.png

2008-08-27T19:17:41Z

Wahdahtahdammie:

File:Table2.png

2008-08-27T19:17:34Z

Wahdahtahdammie:

File:Table1.png

2008-08-27T19:17:23Z

Wahdahtahdammie:

File:Scripting animxml.png

2008-08-27T18:47:23Z

Wahdahtahdammie:

File:Scripting drawerxml.png

2008-08-27T18:31:58Z

Wahdahtahdammie:

File:Scripting dos.png

2008-08-27T18:31:10Z

Wahdahtahdammie:

File:Scripting dir.png

2008-08-27T18:24:48Z

Wahdahtahdammie:

File:MAKI Script Organization.png

2008-08-27T18:17:22Z

Wahdahtahdammie:

File:Scripting animmaki6.png

2008-08-27T18:12:13Z

Wahdahtahdammie:

File:Scripting animmaki5.png

2008-08-27T18:12:05Z

Wahdahtahdammie:

File:Scripting animmaki4.png

2008-08-27T18:11:58Z

Wahdahtahdammie:

File:Scripting animmaki3.png

2008-08-27T18:11:37Z

Wahdahtahdammie:

File:Scripting animmaki2.png

2008-08-27T18:09:13Z

Wahdahtahdammie:

File:Scripting animmaki1.png

2008-08-27T18:09:07Z

Wahdahtahdammie:

File:Scripting trianglemaki6.png

2008-08-27T18:07:54Z

Wahdahtahdammie:

File:Scripting trianglemaki5.png

2008-08-27T18:07:46Z

Wahdahtahdammie:

File:Scripting trianglemaki4.png

2008-08-27T18:07:39Z

Wahdahtahdammie:

File:Scripting trianglemaki3.png

2008-08-27T18:07:32Z

Wahdahtahdammie:

File:Scripting trianglemaki2.png

2008-08-27T18:07:24Z

Wahdahtahdammie:

File:Scripting trianglemaki1.png

2008-08-27T18:07:10Z

Wahdahtahdammie:

File:Drawer xml1.png

2008-08-27T18:04:47Z

Wahdahtahdammie: