Tutorial for skinning...

MikeDB · Post by **MikeDB** » Fri Jul 08, 2005 5:45 pm

Hi all I am now done all the skins i have been working on and this thread is
going to be a tutorial for those of you who want to learn how to make Winamp
modern skins.
(Pay attention to bold and Red words.
Lesson 1 the basics
Ok im just going to jump right in to the lesson because I'm lazy.
Programs that you need for these lessons-----------
A painting program
A editing program Note Pad Edit Plus etc..
---------------------------------------------------------

But there are some things that I have to explain, all the images are made
out of .png formats and if you wish not to have a plain old square skin you
should have a paint program that let's you use a transparent background. For
today you will need to download the stuff for the tutorial skin I made just
for this reason. (this is the attached file) in this file you should have a
file called skin.xml this is the main file that
Winamp looks for when it uploads the skin, there should also be two folders
called images and xml
the images folder is self explanitory and so is the xml folder.

open the skin.xml file there you should see some
code that looks like this...

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<WinampAbstractionLayer version="0.9">

  <skininfo>
    <version>1.0</version> ----this you can edit----
    <name>Tutorial skin</name> ----this you can edit----
    <comment>Feal free to use this skin as your template for your 
skins</comment> ----this you can edit----
    <author gaybag="mikwiththestick"> Mike Bergstrom</author> ----this you 
can edit----
    <email>Mike-db@shaw.ca</email> ----this you can edit----
    <homepage>http://members.shaw.ca/mike-db</homepage>---- this you can 
edit----
    <screenshot>skinshot.png</screenshot> ----this you can not edit----
  </skininfo>
----everything else you can not edit----
  <include file="../default/xml/studio.xml"/>
  <include file="../default/xml/gamma-presets.xml"/>
  <include file="../default/xml/components.xml"/>
  <include file="xml/player.xml"/>

</WinampAbstractionLayer>
[code]

this is what you should see. Please edit the lines you are allowed to edit. BUT before you do that go to this directory C:Program FilesWinampSkins and make a new folder call it whatever you want. then copy and paste all of the folders in to that new folder you made. there your done! this is a simple lesson on how to make modern winamp skins now if you want to get more technical then please make your own images but keep the original names or they would not work, feal free to screw around with the xml files fi you screw it up to badly just e-mail me and i will send you a fixed file, also i recomend that you look around the Winamp forums ([url=http://forums.winamp.com]http://forums.winamp.com[/url]) and just ask questions you will find the answers.
-----------------[b]WAL format quick lesson[/b]------------------------------------------
If you want to upload your skin to winamp.com lets say all you would have to doo is put all your skin filesinto a new .zip file and rename the .zip file to "myskinname.wal" then you would be ready to submit it. 

 [url=/attachments_legacy/it/post-22-1120859108_tutorialzip.ibf"]Attachement (click to open)[/url]

[color=#888888][size=85]Archived topic from Iceteks,  old topic ID:3469, old post ID:28015[/size][/color]

MikeDB · Post by **MikeDB** » Fri Jul 08, 2005 7:36 pm

Maybe Red could stikey this? Because with every new thing i learn im putting it down here. (This lesson will be easy for those who know html)

Pay attention to bold and red words.
Lesson 2 Some basic codeing
You will need everything i listed on lesson 1 and
the ability to learn
----------------------------------------------------

Ok we are now going to learn some basic codeing and things to know when codeing so open up your player.xml you should see...

Code: Select all

  <elements> 
   <bitmap id="simple.base" file="images/base.png"/> 
   <bitmap id="simple.eject" file="images/eject.png"/> 
   <bitmap id="simple.volume" file="images/volume.png"/> 
   <bitmap id="simple.rewind" file="images/back.png"/> 
   <bitmap id="play" file="images/play.png"/> 
   <bitmap id="pause" file="images/pause.png"/> 
   <bitmap id="simple.forward" file="images/next.png"/>
   <bitmap id="simple.stop" file="images/stop.png"/>
   <bitmap id="simple.seek" file="images/seek.png"/> 
   <bitmap id="text" file="fonts/comicbd.ttf" gammagroup="1"/>
   <bitmapfont id="text" file="fonts/comicbd.ttf" charwidth="20" charheight="20" hspacing="20" vspacing="20"/>

</elements> 

<container id="main" name="Simple Main window"> 
   <groupdef id="player.buttons"> 
    <slider 
      action="VOLUME" 
      x="150" y="50" 
      w="95" h="10" 
      thumb="simple.volume" 
      tooltip="Volume" 
    /> 

    <slider
   action="SEEK"
   x="150" y="40"
   w="95" h="10"
   thumb="simple.seek"
   tooltip="seek"
	/>
     
   <text 
     id="songticker" 
     font="your.font" 
     x="150" y="15" 
  w="130" 
     display="songname" default="" 
     tooltip="Songname" 
  color="0,0,0"
    /> 

   <vis 
     id="vis" 
     tooltip="Vis" 
     x="20" y="25" 
     w="107" h="35" 
     colorband1="20,0,0" 
     colorband2="50,50,50" 
     colorband3="50,50,50" 
     colorband4="50,50,50" 
     colorband5="50,50,50" 
     colorband6="50,50,50" 
     colorband7="50,50,50" 
     colorband8="50,50,50" 
     colorband9="50,50,50" 
     colorband10="50,50,50" 
     colorband11="50,50,50" 
     colorband12="50,50,50" 
     colorband13="50,50,50" 
     colorband14="50,50,50" 
     colorband15="50,50,50" 
     colorband16="50,50,50" 
     colorbandpeak="0,0,0" 
     colorosc1="0,0,0" 
     colorosc2="0,0,0" 
     colorosc3="0,0,0" 
     colorosc4="0,0,0" 
     colorosc5="0,0,0" 
     colorosc6="0,0,0" 
    /> 
    <button 
      action="PREV" 
      x="15" y="90" 
      image="simple.rewind" 
      tooltip="Previous" 
    /> 

    <button 
      action="PLAY"
   id="play"
      x="36" y="90" 
      image="play" 
      tooltip="Play" 
    /> 

    <button 
      action="PAUSE" 
   id="pause"
      x="60" y="90" 
      image="pause" 
      tooltip="Pause" 
    /> 

    <button 
      action="NEXT" 
      x="90" y="90" 
      image="simple.forward" 
      tooltip="Next" 
    /> 

    <button 
      action="EJECT" 
      x="120" y="80" 
      image="simple.eject" 
      tooltip="Eject" 
    /> 

	<button
   action="STOP"
   x="70" y="90"
   image="simple.stop"
   tooltip="Stop"
	/>

</groupdef> 
   <layout id="normal" background="simple.base"> 
   <group id="player.buttons"/> 
   </layout> 
</container>
[code]

This is a very importaint file [b]DO NOT CHANGE THIS UNLESS I TELL YOU TO[/b]
so the first thing we are going to learn is bitmap ID, bitmap ID is very importaint for the skin to work. so lets look at some bitmap ID
[code]
 <bitmap id="simple.base" file="images/base.png"/>
[code]
this is at the top of the [b][color=#006060][b]player.xml[/b][/b][/color]  file we are going to code in a close button so go to the bottem of the bitmap ID's (i will show you)

[code]
<elements> 
   <bitmap id="simple.base" file="images/base.png"/> 
   <bitmap id="simple.eject" file="images/eject.png"/> 
   <bitmap id="simple.volume" file="images/volume.png"/> 
   <bitmap id="simple.rewind" file="images/back.png"/> 
   <bitmap id="play" file="images/play.png"/> 
   <bitmap id="pause" file="images/pause.png"/> 
   <bitmap id="simple.forward" file="images/next.png"/>
   <bitmap id="simple.stop" file="images/stop.png"/>
   <bitmap id="simple.seek" file="images/seek.png"/> 
   <bitmap id="text" file="fonts/comicbd.ttf" gammagroup="1"/>
   <bitmapfont id="text" file="fonts/comicbd.ttf" charwidth="20" charheight="20" hspacing="20" vspacing="20"/>
<here>
</elements> 
[code]

Were <here> is and type <bitmap id="close" file="images/seek.png"/> Please type it don't copy and paste, I want you to get the hang of typeing it. And after you are done typeing press the "Enter" button so it would look like this.

[code]
<elements> 
   <bitmap id="simple.base" file="images/base.png"/> 
   <bitmap id="simple.eject" file="images/eject.png"/> 
   <bitmap id="simple.volume" file="images/volume.png"/> 
   <bitmap id="simple.rewind" file="images/back.png"/> 
   <bitmap id="play" file="images/play.png"/> 
   <bitmap id="pause" file="images/pause.png"/> 
   <bitmap id="simple.forward" file="images/next.png"/>
   <bitmap id="simple.stop" file="images/stop.png"/>
   <bitmap id="simple.seek" file="images/seek.png"/> 
   <bitmap id="text" file="fonts/comicbd.ttf" gammagroup="1"/>
   <bitmapfont id="text" file="fonts/comicbd.ttf" charwidth="20" charheight="20" hspacing="20" vspacing="20"/>
<bitmap ="close" file="images/close.png"/>

</elements> 
[code]
(It does not matter if you have those spaces to the right or not) After that go down a bit you should see a bunch of code go all the way to the bottem till you see...

[code]
               <button
   action="STOP"
   x="70" y="90"
   image="simple.stop"
   tooltip="Stop"
	/>
[code]

Underneth it type 
[code]
          <button
            action="CLOSE"
            x="100" y="50"
            image="close"
            tooltip="Close"
          />
[code]
It should then look like
[code]
          <button
              action="STOP"
              x="70" y="90"
              image="simple.stop"
              tooltip="Stop"
           />

          <button
            action="CLOSE"
            x="100" y="50"
            image="close"
            tooltip="Close"
          />
[code]
Then save your file and open winamp and take a look at your skin if you see a little grey box with some black in it somewere on there that means you have just coded in a close button! Now for the coordinates those numbers in your code you must change those in order for that close button to move i do not have the coordinates now because im lazy so your going to have to do that your self.
Also if you want a minimize button just do the same with the bitmap ID and the code. the action for the minimize button is [b]MINIMIZE[/b] (it has to be caps).

Remember to keep checking back thats all for now you now know how to code and make a skin. 

[color=#888888][size=85]Archived topic from Iceteks,  old topic ID:3469, old post ID:28024[/size][/color]

MikeDB · Post by **MikeDB** » Sat Jul 09, 2005 12:39 am

where is roveringcowboy when you need em'?

Archived topic from Iceteks, old topic ID:3469, old post ID:28030

MikeDB · Post by **MikeDB** » Sat Jul 09, 2005 12:20 pm

lalalalala

Archived topic from Iceteks, old topic ID:3469, old post ID:28039

rovingcowboy · Post by **rovingcowboy** » Sun Jul 10, 2005 12:10 am

i am here trying to read this and figure it out.

looks like it is simple but still not easy to learn for me but i am trying.

i got the zip you loaded and i am going to copy this page for offline use.

so i should beable to learn it sooner or later.

i see you don't number the buttons?

like you would with a form button is that a mistake or can xml do that without the number on the button name.

Archived topic from Iceteks, old topic ID:3469, old post ID:28057

MikeDB · Post by **MikeDB** » Sun Jul 10, 2005 12:37 am

rovingcowboy wrote: i am here trying to read this and figure it out.

looks like it is simple but still not easy to learn for me but i am trying.

i got the zip you loaded and i am going to copy this page for offline use.

so i should beable to learn it sooner or later.

i see you don't number the buttons?

like you would with a form button is that a mistake or can xml do that without the number on the button name.

you can call the button whatever you want as long you know what it is.

Archived topic from Iceteks, old topic ID:3469, old post ID:28060

MikeDB · Post by **MikeDB** » Sun Jul 10, 2005 12:38 am

Oh guys the rest of the lessons im righting on my free website http://skin-tutorial.tripod.com have fun:D im writeing lesson 3 now.

Archived topic from Iceteks, old topic ID:3469, old post ID:28061

rovingcowboy · Post by **rovingcowboy** » Sun Jul 10, 2005 1:31 am

okay thanks this is good i got to know what it is that is needed but i never got the image for the close button of course i did not make an image for a close button?

how ever i did get enough to know to look in the folder for the winamp modern skin they have in there. and doing that i found out that this is going to take me another 40 hours or so of redoing the images for my skin and i then have to code all the xml files for them.

i am not doing it i will let it up to you that know how to with out having to learn but thanks for teaching me this much i will check your lessons out and if they get easy i might go and try one on my own but i don't like the thought of all that time sitting here any more not at my age.

maybe you can make an html editor program that will load in all the images to the xml code for us that are not as well at programing that want to make the new skins but i am thinking that will take about 1000 man hours just to do the frame for the editor. keep up the lessons i might make one yet

Archived topic from Iceteks, old topic ID:3469, old post ID:28062

MikeDB · Post by **MikeDB** » Sun Jul 10, 2005 1:28 pm

OKi doki.

Archived topic from Iceteks, old topic ID:3469, old post ID:28064

Red Squirrel · Post by **Red Squirrel** » Sun Jul 10, 2005 8:57 pm

Actually want me to make this an article? It will get much more exposure that way and help the site at the same time.

Archived topic from Iceteks, old topic ID:3469, old post ID:28070

MikeDB · Post by **MikeDB** » Mon Jul 11, 2005 1:13 am

sure... but in 2014 when ice teks shuts down that site will be there.

that would be easyer on my fingers to.

Archived topic from Iceteks, old topic ID:3469, old post ID:28083

Red Squirrel · Post by **Red Squirrel** » Mon Jul 11, 2005 8:02 am

Nah, I'll just renew the domain for another 10 years, before it expires.

Archived topic from Iceteks, old topic ID:3469, old post ID:28088

MikeDB · Post by **MikeDB** » Mon Jul 11, 2005 1:06 pm

Im writeing lesson 3 now... sort of.

Archived topic from Iceteks, old topic ID:3469, old post ID:28090

MikeDB · Post by **MikeDB** » Mon Jul 18, 2005 5:09 pm

Hey Red you can stiky this anytime now...

(Pay attention to bold and Red words.)
Lesson 3 More coding
What you need
-------------------

An Editing program (Edit PLus2, Notepad etc...)
The ability to think

-------------------

Today is this lesson we will learn more coding and coding actions...

A code action is what WinAmp reads for when you push a play button it is very simple really soo now just look at the chart i made up...

Code: Select all

----[b]ACTIONS[/b]-----------------------------------[b]CODE[/b]-----------------------
Play-----------------------------------------------------PLAY--------------------------------
Pause---------------------------------------------------PAUSE------------------------------
[code]

As you can see it is pretty straight forward so now I want you to do this...
Re read lessons 1 2 and 3 then make your own skin test it to make sure it's done and attach it here.

Thats the end of lesson 3. (lesson 3 will be countinued later because i am to lazy today)

Please post questions I will answer them :D 

[color=#888888][size=85]Archived topic from Iceteks,  old topic ID:3469, old post ID:28329[/size][/color]

Pyr-O-Rgasm · Post by **Pyr-O-Rgasm** » Mon Jul 18, 2005 5:33 pm

Just so you know, when you're using the CODE tags, NO type of code will work inside them.

Pretty cool tut. Maybe I'll make my own skin?

Archived topic from Iceteks, old topic ID:3469, old post ID:28333

Red Squirrel · Post by **Red Squirrel** » Mon Jul 18, 2005 7:25 pm

Actually instead of stickying it, I want to make this an actual article, or maybe even split it in two. Just PM me more details on how you'd like this done, and if you don't mind me publishing it. It will get much more hits that way, and help bring more traffic, especially if I release them both in the same week. It would make a nice jump to the stats.

Archived topic from Iceteks, old topic ID:3469, old post ID:28334