Animation

In previous sections, we added static images to our skin. Here we'll discuss how to use images to add animation to our skin. Animations can be used to add a number of effects to a skin, from blinking lights to animated Sliders, to nearly anything else you can think of. While there are other options, like animated GIFs, we're going to use PNGs. PNGs used for animation are a series of frames arranged horizontally or vertically that are cycled through to create whatever effect is sought. Here is a sample image:

The PNG here has thirteen frames, arranged horizontally. As you can see, each frame is a little different than the one before it. The more frames you have, the smoother your animation will be. Even though the images in the different frames are not all the same height, the frames must all be uniform. With thirteen frames, each eighteen pixels high, my image is 234 pixels tall. Let's see how this would look in our skin by adding it to the XML as an Animated Layer.

Animated Layers

Since the image above is ultimately going to replace our Volume Slider, let's comment out the "VolumeBar" Layer and the Volume Slider. Remember, comments start with "<!--" and end with "-->". Animated Layers are very similar to regular Layers, only with more Parameters. Let's add an Animated Layer to our Display Group, then dissect it:

<AnimatedLayer
   id="VolumeAnim" x="104" y="0" w="40" h="18"
   image="player.normal.volumeanim"
   autoplay="1" autoreplay="1" speed="80"
   alpha="128"
   tooltip="Animated Layer Test"
/>

The first thing worth noting is that, unlike normal Layers, we need to specify a height and width. These values should reflect one frame, though, not the entire image. Winamp can automatically figure out if the animation is horizontal or vertical and how many frames there are with this information. Next, you may notice three new Parameters. The first, autoplay, tells Winamp whether or not to automatically start the animation. Right now, we'll set this to "1" so we can see it work. The second new Parameter, autoreplay, controls whether or not the animation will keep playing in a loop, or just play once. Again, for now we will set this to "1". The last new Parameter we see is speed. This, as might be obvious, controls the rate of animation. The lower this number, the faster the animation will go. Ideally, whatever value you set for speed will be how long, in milliseconds, each frame is shown.

After adding the Animated Layer(don't forget to update your Elements), refresh the skin and see what our Animated Layer does. Try changing the new Parameters around, get a feel for what they do, then let's use what we discovered here to turn this into an Animated Volume.