Anything Forums

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]

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]

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]