Configuring the Animated Layer

In the previous section, we added an Animated Layer to our skin, but it didn't do much. This is fine for some circumstances, often animations are used to just to add to the visual appeal of a skin. However, you can also do other things with Animated Layers, such as customize Sliders. Let's turn the our new animation into a Volume Slider.

To work as a Slider, we're going to have to set some Parameters on our Animated Layer. Since we'll be using MAKI to control the frames, we should disable autoplay and autoreplay by setting them to "0". For the same reason, we can remove the speed Parameter since we don't care what its value is. Next we'll add a new Parameter, move. move, when enabled, allows Winamp to be moved when the Object is clicked and dragged. Since this is how we want to adjust our Volume, we don't want Winamp moving with the mouse when we click and drag, therefore we set this new Parameter to "0". Finally, let's remove the tooltip so that it doesn't obscure the animation.

Animated Volume

Now that our Animated Layer is configured, we're ready to add another pre-made script. Copy volume.m and volume.maki into the scripts folder. If we open up volume.m, it instructs us on how to use it. We already have an Animated Layer of the correct name, so we can skip that. Next it says we need a Volume Slider. Let's uncomment our Slider and change it as instructed. The new id should be "HiddenVolume". For the thumb and downThumb values, we can use "player.normal.slider" Next, we need to have a gradient Map A gradient Map is an image that goes from pure black(0,0,0) to pure white(255,255,255). Since our Volume will go from left to right, our gradient looks like:

This image goes in the player folder with the rest of the images, but we must use the name specified in the directions so that the script can find the Map. As the last step instructs, we now add our script to our Display Group as so:

<script id="animvolume" file="scripts/volume.maki"/>

Now refresh the skin and try it out. Pretty neat, eh? Try changing the Volume using the mousewheel or the arrow keys. The image and SongTicker even update on those events. We're not quite done yet though. It works fine, but since we removed the tooltip, the function of our animation isn't obvious and we should label it. To do so, let's add this Layer before it in the Group for looks:

<layer id="VOLBackground" image="player.normal.volbg" x="104" y="1"/>

and this Layer after it in the Group to make it more apparent what it does:

<layer id="VOLLabel" image="player.normal.vollabel" x="108" y="4" ghost="1"/>

I've lowered the alpha to "96" so that it contrasts better with the label. Now that this is all working and looks good, let's continue on to make an Animated Seek, only this time we'll use Regions..