Regions

Before we replace our Seek, we should understand how regions work. Regions determine how much of a Layer or other Object to show. For our Seek, we only want to show as much of the progess bar as appropriate. If the song is halfway through, we want to show half of our progress bar, and so on. We'll do this by using yet another gradient Map as discussed in the previous section. This time, in addition to helping us determine where the mouse is, the Map will help us define our Region. This is the Map we'll use:

As you can see, this again is a transition from pure black to pure white. This is how the script will decide how much of the image to display. In the example described above, when the song is half over, the script would show the image everywhere the Map value was at or below half of 255, or 127. Using this method, only one image is needed to implement our animation. While this reduces some of the flexibility of our animated Slider, it reduces filesize while providing smooth animation.

Adding the Animated Seek

To add the animated Seek, we need to add only one Layer to our Display Group. For aesthetic reasons, however,we will actually add three Layers as shown:

<layer id="SEEKBackground" image="player.normal.seekbg" x="5" y="30"/>
<layer id="SeekAnim" image="player.normal.seekanim" x="1" y="30" rectrgn="0" alpha="96" move="0"/>
<layer id="SEEKLabel" image="player.normal.seeklabel" x="52" y="35" ghost="1"/>

While defining these three Layers in your Elements, add the gradient Map with an id of "player.map.seek" so that the script can access it. Be sure to remove the old Seeker and SeekerGhost and their background as we won't be needing them anymore. As with the Volume, copy the script into the scripts folder, then include it at the bottom of the Display Group using:

<script id="animseek" file="scripts/seek.maki"/>

Refresh the skin(F5) and try out our new Seek. Our skin should now look something like this:

Once you've got it working, head on over to the next section and learn how to create a shade Layout for our skin.