The player-normal.xml

                     STEP 5 Laying It All Out
					   
      We're on the home stretch. In a matter of minutes you will 
      have a working Winamp 3 skin. In this last step of the process 
      we will be creating the player-normal.xml file. This file 
      determines the layout of the actual skin and the tags in 
      this file refer back to the player-elements.xml file. 
      It's at this point that I normally have both of these
      files open next to each other so I can copy and paste the 
      appropiate "bitmap id" into the area that it is called for. 
      This is where it all really comes together. The end of
      the linking series.

      Open up that text editor again and lets finish this thing.
      The first thing you have to do in this file is identify 
      the layout and give it a background.

      So this is your first tag.

      [layout id="normal" background="main.bg"]

      The layout portion of this tag identifies the layout as normal. 
      And so, you are working within the Main container as defined 
      in the player.xml So this would be the normal layout of the 
      main container. This portion of the tag also is used in scripting. 
      It is all one big chain.

      You will notice the second half of this tag is our background. 
      And that it is the id part that is used to call your background 
      graphic into action. By now this should all be making sense. 
      But lets review what will be our final heirarchy scheme.

          
		  
      Right Now you should add the closing tag to this file. 

      [/layout]

      Now you have a player. But don't go firing up Winamp yet. 
      we need to put that play button in there. 
      So lets code that play button.

        [button
          id="Play"
          action="PLAY"
          x="10" y="10"
          image="play"
          downImage="play"
          tooltip="Play"
        /] 

      All of the system buttons have there own id and action. 
      This refers back to the system script. Do not change the id's 
      and actions of system buttons because they would'nt work. 
      The next part of this little snippet of code is the x y coordinates. 
       This is very basic math.

      X is the distance from the left side of your graphic, 
      Y is the distance from the top of your graphic.
      The distance is determined in pixels.
	  
      So X="10" Y="10" places the upper left hand corner of your play button
      10 pixels from the left and 10 pixels from the top.

      X="0" Y="0" would place your button dead in the upper left hand 
      corner of your background. It is even possibly to move the button 
      right off the skin. If your skin is 275 pixels wide like mine, 
      and I say x="300". You won't be able to see the button and you 
      won't be able to use it either.

      You will notice in the code above that 2 images are called into action. 
      But I have used the same bitmap id on both. Image and downImage are 
      to 2 states of the control buttons. Toggle buttons have an added state. 
      That is something to remember when you are creating your graphics.

      Tooltip="play"

      Self-explanatory

      O.K. we are done with the player-normal.xml Save it as player-normal.xml 
      in your xml folder.
      Your final code should look like this.

      [layout id="normal" background="main.bg"]
    
        [button
          id="Play"
          action="PLAY"
          x="10" y="10"
          image="play"
          downImage="play"
          tooltip="Play"
         /] 

       [/layout]

Well, Your just about done. Follow the checklist on the next page
and double check your code and your skin is done.

                 next page ->

Introduction Folders and xml basic Pointing 
The xml folder and player.xml The elements of disaster Laying it all out
Checklist The code

Alpha Channels Photoshop A Basic Animation Adding Components
 The Player Button Png Using TTF files.