Elements

In order to use our background image, we first need to add the image to our skin. There are a few things you should do to keep organized. The first thing you should do is create a new folder in your skin folder. Call this folder "player". Hopefully you have the ZIP file of images needed for the tutorial. If not, get it here, as you'll need these images throughout the remainder of the tutorial. Copy the MainBase.png file into the new player folder. Now we need to include this file so that we can use it in our Layout. In your XML folder, create a new file and save it as player-elements.xml. In player-elements.xml, you should have something like this:

<elements>
   <bitmap id="player.normal.background" file="player/mainbase.png"/>
</elements>

In this case, my file is called mainbase.png but you can call it whatever you wish so long as the filename matches what you define here. It is important to make the id something descriptive and unique. This is how you will reference the image in your Layout. To help avoid confusion, it is common to use the prefix "player.normal." for images in the Normal Layout of the Main Player, and "player.shade." for the Shade Layout, etc. This prevents you from accidentally having two Elements with the id of "background", for example.

Of course now that the Element is defined, we have to include the file somewhere or else it will never be seen by Winamp. Open up player.xml and include the newly created player-elements.xml file before the opening Container Tag. Now we're ready to display our background image.

Displaying a Background Image

There are two primary ways of handling a background for you skin, each with different benefits and drawbacks. The first method uses the background Parameter of Layouts, while the second method uses a standard Layer as your background. Let's look at each so you can decide which is best for your skin.

In the previous section, we created our basic Layout, but we skipped over some of the possible Parameters that are available for that Tag. Our first option for making a background image for our skin uses two such Parameters, background and alphabackground. This option has many advantages for a first time skinner. For starters, if you use the background Parameter, Winamp will automatically set the size of your Layout to the same size as your background image. Also, using the related alphabackground, you can specify a different image to be used for users who have Desktop Alpha enabled. (For an explanation of Desktop Alpha, see the Graphics page) If you want to have a semitransparent shadow under your skin, you could use a background with a shadow for your alphabackground and one without the shadow for your regular background. This ensures that users who choose not to use Desktop Alpha still have a decent background. If you choose this method, your player-normal.xml should now look as so:

<layout id="normal" background="player.normal.background" alphabackground="player.normal.background" droptarget="pldr">
</layout>

Notice that the value for background is the id specified in the Elements. Also, since I do not have a different image for Desktop Alpha users, I used the same image for alphabackground as well. You could also leave out the alphabackground Parameter altogether and get the same effect.

So this method seems pretty easy, why wouldn't you use it? There are a few disadvantages to using this option for making a background. As described above, Winamp uses the image size to determine the size of the Layout. This means if you want to have something like a drawer that opens past the edge of your skin, you will have to make your background have adequate transparent space. Also, you cannot have anything hide under the skin(like a drawer, for instance) since nothing can be positioned under the background image.

The second method for making a background image, while a little more complicated, is much more flexible for most skinning needs and is the method that will be used for the tutorial skin. Instead of using the background Parameter, we'll be using the w and h Parameters. w sets the width of the Layout and h sets the height of the Layout. Their values should be the width and height, in pixels, that you want your Layout to be. For this example my values will be 380 and 165, respectively. We still have to put the image in the Layout, so now we use our first low-level Object, the Layer. A Layer is just a simple image with no associated special functions. Below is our current Layout from player-normal.xml where you can see the w and h Parameters as well as our new Layer Tag and its Parameters:

<layout id="normal" w="380" h="165" droptarget="pldr">
   <layer id="MainBase" image="player.normal.background" x="0" y="3" sysregion="1"/>
</layout>

The id should be something descriptive and unique to this Object. The image value, as above, should be the id as set in the Elements file. x and y should be the position relative to the origin(the upper-left corner) of your Layout. In this case, our Layer will be 0 pixels from the left and 3 pixels down from the top. In most cases, both will have values of "0". The final Parameter, sysregion, is a special Parameter which tells Winamp to show the Layer even if nothing is under it. We'll want this to be "1" for the background Layer.

Checking Your Progress

As we go through this tutorial, it is a good idea to stop and check your progress to make sure everything is working as expected. Now that we have our background, we can check to see if anything shows up. If it isn't already, open up Winamp3. Now right-click on the Main Window, select Skins, then select the name of your skin. You should see the background layer, something like:

If you are not seeing an image, retrace your steps, make sure all your Tags are closed and that you have end quotes for all your Parameter values. Winamp will often prompt you if there is a typo, saying that there is a not well-formed line at line X in file Y. If this happens, open the file it specified, go to the line suggested, and look for your mistake.

***Also, it is very important to note that if you change your Layout's size, Winamp will not update to the new size unless you modify or delete Studio.xnf. This is a problem often encountered by new skinners. Make sure you either remove your skin from Studio.xnf or delete the file altogether whenever you change your background, w, or h Parameters to avoid clipping errors.***

If you do see the image, congratulations, we're almost ready to move on. Check out these parting notes on backgrounds, then we'll continue.

Also, it is very important to note that if you change your Layout's size, Winamp will not update to the new size unless you modify or delete Studio.xnf. This is a problem often encountered by new skinners. Make sure you either remove your skin from Studio.xnf or delete the file altogether whenever you change your background, w, or h Parameters to avoid clipping errors.

Concerning Backgrounds

Before we move on to the next section, there are a few more things that should be covered to finish up the Background section. The most important thing you should keep in mind is that not all of your potential users have Desktop Alpha. Make sure your image(s) will look presentable in both 95/98/ME and 2000/XP. I use the second method of creating a Background because it uses the same image for both settings and because it allows for layers to be placed under it. Also, just because you don't have an alphabackground doesn't mean your skin will not benefit from Desktop Alpha's smoothing of your edges. You can allow Winamp to smooth your edges by adding the Parameter desktopalpha to your Layout. If you set the value as "1", Winamp will automatically blend semitransparent edges for your skin when Desktop Alpha in enabled. Also worth noting, Layers and other objects that stick out past the edges of your background image will not show up unless they also have sysregion="1" included in their Tag. Nothing will show up outside the overall edges of your Layout, regardless of the settings. If your Layout is 200 pixels wide, a Layer that is 250 pixels wide will only show up where it falls within the Layout's 200 pixels. Keep this in mind when deciding your Layout's height and width.

Now that we have a working background image, we can start to add other Objects to our skin to make it usable. Before we do that, however, let's go over Positioning so that our Objects are properly placed.