Buttons

In order to add our Control Buttons, we should first look at the new type of Object required to implement them. Buttons, like Layers, require an id, an image, and x aned y coordinates. Additionally, Buttons can use some new Parameters, namely action, downimage, hoverimage, rectrgn, and tooltip. Let's look at a sample Button then discuss what each of the Parameters can do.

<button
   id="Play" action="PLAY"
   x="57" y="1"
   image="player.normal.button.pp.up"
   downImage="player.normal.button.pp.down"
   tooltip="Play"
   sysregion="1"
/>

As should be apparent, this is a Play Button. There are a number of available actions for a button, but in this section we'll just review those used by our Control Buttons. As for a Layer, image tells Winamp which image to display for the Button. downImage is what is used when the user clicks the Button to show that it is pressed. Below is our image(left) and downImage(right):

For this skin, I choose not to use hoverimage, but you should know how it works in case you want to use it in other projects. The hoverimage is shown when the mouse is overtop or hovering over the Button. Similarly, tooltip shows a little text box so the user can tell what a Button does without pressing it. Tooltips are important, try to remember to use them for all of your interfaces. As for the last Parameter, the Control Buttons will all have the sysregion="1" Parameter because they will not be over top of the background.

You might be wondering why the Play Button didn't have any kind of label. If not, you should have wondered that. It is important to make the functions of your Buttons obvious to the user. In order to get the most benefit from Color Themes, as will be discussed later in the tutorial, I like to use Layers above my Buttons to work as labels. Each of the Control Buttons will have their own label to identify them. For the Play Button, the Layer will be coded as follows:

<layer id="PlayButtonOverlay" image="player.normal.button.play.overlay" x="72" y="15" ghost="1" alpha="170"/>

This Layer uses two new Parameters, ghost and alpha. For labels or overlays like this, you should always use ghost="1". This tells Winamp to allow mouse clicks to pass through the Layer. This means that if the user clicks on the label, it will pass through and actually click the Play Button. You may have noticed this Parameter being used in the glass Layer for our Display in the previous section. We want the user to be able to click on Objects underneath the glass so we set this Parameter to have Winamp ignore it. The other Parameter shown here, alpha, is used more for aesthetics. This Parameter tells Winamp how transparent to make the Layer, where 0 is fully transparent and 255 is fully opaque.

Adding the Control Buttons

Now that we've seen how Buttons work, let's add the Control Buttons to the skin. The first step will be to create a "cbuttons" Group at (88,123). Place the Group before the background Group as we want the Buttons to be under the background Layer. Then, in player-normal-group.xml, we should add our groupdef. From this you should be able to figure out what ids you need to give your new Elements:

<groupdef id="player.normal.group.cbuttons" w="203" h="39">
<!-- 88,123 -->
   <button
      id="Previous" action="PREV"
      x="0" y="4"
      image="player.normal.button.prev.up"
      downImage="player.normal.button.prev.down"
      tooltip="Previous Track"
      sysregion="1"
   />
   <layer id="PrevButtonOverlay" image="player.normal.button.previous.overlay" x="43" y="13" ghost="1" alpha="170"/>

   <button
      id="Pause" action="PAUSE"
      x="57" y="1"
      image="player.normal.button.pp.up"
      downImage="player.normal.button.pp.down"
      tooltip="Pause"
      sysregion="1"
   />
   <layer id="PauseButtonOverlay" image="player.normal.button.pause.overlay" x="72" y="15" ghost="1" alpha="170"/>

   <button
      id="Play" action="PLAY"
      x="57" y="1"
      image="player.normal.button.pp.up"
      downImage="player.normal.button.pp.down"
      tooltip="Play"
      sysregion="1"
   />
   <layer id="PlayButtonOverlay" image="player.normal.button.play.overlay" x="72" y="15" ghost="1" alpha="170"/>

   <button
      id="Eject" action="EJECT"
      x="87" y="1"
      image="player.normal.button.eject.up"
      downImage="player.normal.button.eject.down"
      tooltip="Open File"
      sysregion="1"
   />
   <layer id="EjectButtonOverlay" image="player.normal.button.eject.overlay" x="93" y="13" ghost="1" alpha="170"/>

   <button
      id="Stop" action="STOP"
      x="111" y="1"
      image="player.normal.button.stop.up"
      downImage="player.normal.button.stop.down"
      tooltip="Stop"
      sysregion="1"
   />
   <layer id="StopButtonOverlay" image="player.normal.button.stop.overlay" x="122" y="16" ghost="1" alpha="170"/>

   <button
      id="Next" action="NEXT"
      x="133" y="4"
      image="player.normal.button.next.up"
      downImage="player.normal.button.next.down"
      tooltip="Next Track"
      sysregion="1"
   />
   <layer id="NextButtonOverlay" image="player.normal.button.next.overlay" x="152" y="13" ghost="1" alpha="170"/>

   <layer id="cButtonShadow" image="player.normal.shadow.cbuttons" x="9" y="3" ghost="1"/>
</groupdef>

Here you can see the different Control Buttons and the actions that determine their functions. The last item, the shadow, is just a Layer to make it look more believable that the Buttons are in fact under the background Layer. Before you refresh your skin to see how it looks, we should discuss the Play and Pause Buttons. You may have caught that these Buttons and their overlay Layers have the same exact positions. Because it is coded second, the Play Button will entirely cover the Pause Button. This is no accident. Towards the end of the Beginner section, we're going to implement a pre-made MAKI script that will switch the Play and Pause Buttons as appropriate.

How It Should Look

If you've followed the preceding steps, the tutorial skin should now look like this:

Play around with the Buttons, make sure they all work, then continue on to the next section to add a SongTicker.