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="player.play"
downImage="player.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, the distance is determined in pixels.
Y is the distance from the top of your graphic.
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="player.play"
downImage="player.play"
tooltip="Play"
/]
[/layout]
You should be able to fire up your skin now. If you have followed along and completed each step,
then you have created a Winamp 3 skin.
CONGRADULATIONS!!!
Heres mine. Ain't it purty...
A word in closing.
This is it in a nutshell, From here on it's all up to your dedication and learning
skills in the art of graphics and skinning. This platform offers you endless posibilities.
With these basic skills you should be able to complete a skin. I suggest that you examine
other peoples skins and see what they have done. It's one of the best ways to learn.
And remember.
Skin because you love it.
Skin because it's fun.
Skin because it's creative.
Skin for yourself first, and others second.
Now go create something amazing.
PIXELPUSHER
|
