[Site Home] [Forum Home] [Articles] [File DB] [News Archives]

General PC Talk -> Tutorial for skinning...


(View original topic)


Red Squirrel - Jul-18-2005 server time
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.

Pyr-O-Rgasm - Jul-18-2005 server time
Just so you know, when you're using the CODE tags, NO type of code will work inside them. wink.gif

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

MikeDB - Jul-18-2005 server time
Hey Red you can stiky this anytime now... tongue.gif
(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

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


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 em320.gif

MikeDB - Jul-11-2005 server time
laugh.gif

Im writeing lesson 3 now... sort of.

Red Squirrel - Jul-11-2005 server time
Nah, I'll just renew the domain for another 10 years, before it expires. laugh.gif

MikeDB - Jul-11-2005 server time
sure... but in 2014 when ice teks shuts down that site will be there. laugh.gif that would be easyer on my fingers to. smile.gif

Red Squirrel - Jul-10-2005 server time
Actually want me to make this an article? It will get much more exposure that way and help the site at the same time. smile.gif

MikeDB - Jul-10-2005 server time
OKi doki.

rovingcowboy - Jul-10-2005 server time
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? tongue.gif

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 xyxthumbs.gif

MikeDB - Jul-09-2005 server time
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.

MikeDB - Jul-09-2005 server time
QUOTE (rovingcowboy @ 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. cool.gif

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.

cool.gif

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

rovingcowboy - Jul-09-2005 server time
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. cool.gif

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.

cool.gif

MikeDB - Jul-09-2005 server time
lalalalala

MikeDB - Jul-08-2005 server time
where is roveringcowboy when you need em'?

MikeDB - Jul-08-2005 server time
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

 <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>


This is a very importaint file DO NOT CHANGE THIS UNLESS I TELL YOU TO
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"/>

this is at the top of the player.xml 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>


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>

(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"
/>


Underneth it type
CODE

         <button
           action="CLOSE"
           x="100" y="50"
           image="close"
           tooltip="Close"
         />

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"
         />

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 MINIMIZE (it has to be caps).

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

MikeDB - Jul-08-2005 server time
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

<?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>


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 Files\Winamp\Skins 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 (http://forums.winamp.com) and just ask questions you will find the answers.
-----------------WAL format quick lesson------------------------------------------
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.

(Showing 50 last posts, newest on top)