Shade

If you remember back in the Beginner area, we added a Button to switch between Layouts. We couldn't use it because there was nothing to switch to. In this section we'll find out how to make a "shade" and see how the "SWITCH" action works.

You can make as many Layouts as you want for a Container, and they can be all different shapes and sizes. While additional Layouts are not mandatory, most people usually create a smaller, less obtrusive Layout for their skin, usually called the "shade". Making additional Layouts is exactly like creating our "normal" Layout. Therefore, rather than repeat the whole Beginner area, I'll only address the few new things we'll encounter. To get us all on the same page, you can get the new file created, player-shade.xml, here (right click and save to your xml folder). Be sure to copy the appropriate images from the Parts.zip into a folder named "shade" and to make the necessary additions to the elements.

Adding the Shade Layout

Including the new Layout is very easy, we need only to add one line to our player.xml. Just under where player-normal.xml is included, add this line:

<include file="player-shade.xml"/>

What's New

In our new file, you might see a few things that are different than our "normal" Layout. First off, the id is now "shade". This is important for reasons that will be explained in a bit. Next, you may notice that there isn't any sort of Volume Slider, animated or normal. I elected to use Buttons to control the Volume instead. This is done with the AutoRepeatVolumeButton script which makes use of the AutoRepeatButtons script made by WillFisher. In this Layout, the Control and Windowing Buttons demonstrate the hoverImage option, which so far we had only mentioned but not seen.

Winshade Buttons

In both our Layouts, we have winshade Buttons, but we haven't discussed what they do. The action "SWITCH" tells Winamp to change Layouts when the Button is pressed. The value of "param" determines which Layout will be switched to. Using a param of "shade" will switch to a Layout with that id. In our shade Layout, we used a value of "normal" so we can go to our "normal" Layout. If you had a third Layout, you could switch to it using a param of "llama" or whatever its id is.

Now that we've gone over the intricacies of the "shade" Layout, let's try it out. Refresh the skin(F5) and press the Winshade(-) Button. Our skin should switch Layouts and now look something like this:

Once you've got it working, let's use our new Layout to demonstrate another common aspect among skins, the Visualizer.