***This has been rewritten on 2/25/03 to correct an error in the previous version(I tried cutting corners{no pun intended} but it caused errors in some cases.) It will be rewritten an additional time to fit in with the rest of the Tutorial at a later date.***

Introduction

Skinning components is rather easy once you grasp the concepts behind it. You'll really only need one XML file, namely standardframe.xml. You can find a sample in this zip file for you to modify as you follow this guide.

After extracting the file into your skin's XML folder, open it up with your favorite editor. Briefly look it over to get a feel of what is in it. Don't worry if it doesn't make any sense yet.

Graphics

In order to skin the components, we're also going to need images. I've provided the images I used to make the frame used in this guide. You can use them to see how they work(put them in a folder called standardframe), but I implore you to make your own. To create your own, you'll need to understand how the standard frame deals with resizing.

Here is an example of a standard frame with none of the components stretched:

Here is an example of the standard frame after being resized:

As you can see, the corners do not stretch on resizing. The middle top and middle bottom pieces stretch horizontally to fill the new width. The left and right sides stretch vertically to fill the new height. When designing your graphics, you generally want to keep any curves within the four corners or else they will stretch and look distorted.

Got it? Okay, now why do some stretch and some don't? You tell Winamp what to stretch and which way to stretch using relatw and relath. If you use relatw="1", then your layer will stretch to adjust for the new width of it's parent group or layout. If you use relath="1", then your layer will stretch to adjust for the new height.

Positioning Your Layers

Like relatw and relath, relatx and relaty tell Winamp to use your x and y values relative to the parent group. Take a look at the "wasabi.frame.layout" group in standardframe.xml. To make component.top.left appear in the upperleft corner, it starts at (0,0). Now look at component.top.right. Since we don't know how wide the component is going to be, we cannot hardcode its position like you can top.left. This is where relatx comes in. relatx="1" tells Winamp to put this layer relative to the right edge of the parent group or layout. If your image was 20 pixels wide, you would set x="-20" and relatx="1". If your component was 100 pixels wide, this would tell Winamp to put the corner at 80, if it was 200 wide, it would start at 180, etc. Similarly, relaty positions layers relative to the bottom edge. Since it is along the bottom edge and the right edge, component.bottom.left uses both relatx and relaty to determine its position.

Now that we've gone over the individual parts of making and placing the frame, let's analyze why the values used in the standardframe.xml are what they are so that when you make your own frame, you can modify to fit your needs. The easiest layer is component.top.left, so let's start with that.

<layer id="component.top.left" x="0" y="0" image="component.top.left" resize="topleft">

Its position is determined only by x and y, nothing fancy, so let's look at component.top.middle, which is a little trickier.

<layer id="component.top.middle" x="50" y="0" w="-100" relatw="1" image="component.top.middle" resize="top">

It's position is pretty easy, just x and y again. We use x="50" because that is the width of component.top.left's image, and we want top.middle to start where top.left ends. You'll notice that w="-100", which is obviously not the width we want. relatw="1" tells Winamp to make this component 100 pixels less than the width of the parent group or layout. Why 100? top.left and top.right are each 50 pixels wide, and we don't want top.middle to overlap them. Now to complete the top row, let's check out component.top.right.

<layer id="component.top.right" x="-50" y="0" relatx="1" image="component.top.right" resize="topright">

Since its height and width are constant, no relatw or relath. relatx, however, is needed to set this layer's position. -50 was used for x because we want the layer to start 50 pixels(the width of the image) to the left of the right edge. These same principles are used to determine the size and position of the rest of the layers, only with different combinations of relatx, relaty, relath, and relatw.

Regions

Great, now you have your frame looking just how you want it... except the corners still have the background showing where it should be transparent. Enter regions. Regions cut off parts of other layers where the two overlap. This is done using the sysregion="-2" attribute. Open up region.png. Everywhere that is opaque(in this example, black) will be cut off. Much like the frame pieces themselves, you have to tell Winamp where to place the regions and how to size them. If you understood how the frame was done, then adding these should be a cinch.

Adding Content to Your Frame

The group "wasabi.frame.layout" determines the background and the top and sides of your layout. In this group put any objects you want to appear in the upper corners(often the control menu and/or a close button) You'll also notice the group "titlebar" is included at the end. This puts the name of the component in your layout. You can adjust the x, y, h, and w to position and size it in a way that best fits your layout. Modify the text object "window.titlebar.title" to change the font and color and size of the title to suit your needs. You can include the script "titlebar.maki" to center the name if you want(it can be found in "Winamp3\Wacs\xml\guiobjects\wasabi\Scripts")

The other groups in standardframe.xml determine the position and size of the actual contents(the playlist, the video, etc) and the looks of the bottom of the frame. wasabi.standardframe.statusbar defines the windows that have statusbars(like the PL and ML.) wasabi.standardframe.nostatusbar defines the windows that do not have statusbars(like the preferences window.) In wasabi.standardframe.statusbar, the line below determines where and how the statusbar is shown. Change the position and size to meet your needs.:

<LayoutStatus id="standardframe.layoutstatus" x="40" y="-38" relaty="1" w="-80" relatw="1" h="12" exclude="{system}">

Adding Content to Your Frame

The last thing we need to do is to setup our StandardFrame for content. This is done with the script standardframe.maki(it can be found in "Winamp3\Wacs\xml\guiobjects\wasabi\Scripts".) It is included at the bottom of the statusbar and nostatusbar groups(the other two groups inherit it from nostatus.) and determines the position of the content via parameters.

<script id="standardframe.script" file="scripts/standardframe.maki" param="30,48,-60,-90,0,0,1,1"/>

The values passed through "param" control the x, y, h, w, relatx, relaty, relatw, and relath, respectively. In this case, our content will start at (30,48) and, because relatw and relath are set to "1", be 60 pixels less wide than the whole window and 90 pixels less high. Chances are you will need to change around these values to meet the needs of your skin.

This concludes this component skinning guide. Hopefully you've come away with a better understanding of how to create and control your own standard frame for components. If you should need any more help, ask in the forums or PM me directly.

~FrisbeeMonkey