Difference between revisions of "Skin Developer"

From Winamp Developer Wiki
Jump to: navigation, search
(Tutorial)
(Community Links)
 
(69 intermediate revisions by 24 users not shown)
Line 1: Line 1:
'''Breadcrumb''' -- [[Main_Page|Wiki Main]] : [[Skin Developer]] : [[Visual Developer]] : [[Plug-in Developer]] : [[Articles|Articles Page]] : [[Developers FAQ|FAQ]] : [[Main_Page#Glossary_of_Terms|Glossary]]
+
{{Template:NavBar}}
 +
  
 +
== Classic Skins ==
 +
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.
  
[[Image:Skins-logo.png]]
+
* '''[[Creating Classic Skins]]'''
  
==Skins Overview==
+
== Modern Skins ==
 +
Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.
  
To put it as simply as possible, skins change the way your Winamp player looks. If you want to get fancy and say that it changes the "User Interface" then you can, but really all you need to know to get you started is if you download a new skin, Winamp will put on a little mask and pretend to look different.
+
* '''[[Creating Modern Skins]]'''
 +
<!-- SkinWizard XML Designer 1.0 -->
  
==Tools==
+
    <!-- Background elements -->
Before creating a complete skin, you will need the following tools. There are some suggestions below, but we don't necessarily endorse or require you to use any of them. We leave you to choose one that you're most comfortable with.
+
    <groupdef id="Backgrounds" name="BckElements">
 +
    <layer id="LayerID1" image="common/bck_seek.png" x="19" y="92"  />
 +
    <layer id="LayerID2" image="common/bck_visualizer.png" x="22" y="25" />
 +
    <layer id="LayerID3" image="common/slider_volume_BCK.png" x="212" y="64"  />
 +
    </groupdef>
  
====Bitmap Editor:====
+
    <!-- Player Buttons -->
How else will you "paint" your skins? Must be able to recognize the .BMP format.
+
    <groupdef id="PlayButtons" name="Player Buttons">
 +
    <button
 +
      id="btnPlay"
 +
      action="PLAY" param=""
 +
      x="11" y="106"
 +
      image="vista/vst_btn_play_N.png"
 +
      hoverimage="vista/vst_btn_play_H.png"
 +
      downImage="vista/vst_btn_play_D.png"
 +
      tooltip="Play"
 +
    />
  
''eg. MS Paint, JASC Paint Shop Pro, Adobe Photoshop''
+
    <button
 +
      id="btnPause"
 +
      action="PAUSE" param=""
 +
      x="61" y="117"
 +
      image="vista/vst_btn_pause_N.png"
 +
      hoverimage="vista/vst_btn_pause_H.png"
 +
      downImage="vista/vst_btn_pause_D.png"
 +
      tooltip="Pause"
 +
    />
  
====Text Editor:====
+
    <button
For use in configuring the fonts and colors of the Mini-browser and Playlist editor. Also used if you do any transparency.
+
      id="btnStop"
 +
      action="STOP" param=""
 +
      x="104" y="117"
 +
      image="vista/vst_btn_stop_N.png"
 +
      hoverimage="vista/vst_btn_stop_H.png"
 +
      downImage="vista/vst_btn_stop_D.png"
 +
      tooltip="Stop"
 +
    />
  
''eg. MS Notepad, TextPad''
+
    <button
 +
      id="btnEject"
 +
      action="EJECT" param=""
 +
      x="146" y="117"
 +
      image="vista/vst_btn_open_N.png"
 +
      hoverimage="vista/vst_btn_open_H.png"
 +
      downImage="vista/vst_btn_open_D.png"
 +
      tooltip="Eject / Open"
 +
    />
  
====Icon Editor:====
+
    <button
You will need an Icon editor if you are hardcore and want to edit the cursors and pointers associated with your skin.
+
      id="btnPrev"
 +
      action="PREV" param=""
 +
      x="240" y="116"
 +
      image="xp/xp_btn_prev_N.png"
 +
      hoverimage="xp/xp_btn_prev_H.png"
 +
      downImage="xp/xp_btn_prev_D.png"
 +
      tooltip="Previous"
 +
    />
  
''eg. NeoSoft Icon Editor, Icon Edit Pro, Impact Microangelo''
+
    <button
 +
      id="btnNext"
 +
      action="NEXT" param=""
 +
      x="288" y="116"
 +
      image="xp/xp_btn_next_N.png"
 +
      hoverimage="xp/xp_btn_next_H.png"
 +
      downImage="xp/xp_btn_next_D.png"
 +
      tooltip="Next"
 +
    />
  
====Zip Compression Tool:====
+
    </groupdef>
Absolutely necessary to publish your skin. Winamp.com will not accept an unzipped skin.
+
  
''eg. 7-Zip''
+
    <!-- Header and additional buttons -->
 +
    <groupdef id="grTechButtons" name="Other Buttons">
 +
    <togglebutton
 +
      id="btnPL"
 +
      action="TOGGLE" param="guid:pl"
 +
      x="19" y="0"
 +
      image="vista/vst_btn_PL_N.png"
 +
      activeImage="vista/vst_btn_PL_H.png"
 +
      downImage="vista/vst_btn_PL_D.png"
 +
      hoverimage="vista/vst_btn_PL_H.png"
 +
      tooltip="Playlist"
 +
    />
  
==Creating Classic Skins==
+
    <togglebutton
 +
      id="btnML"
 +
      action="TOGGLE" param="guid:ml"
 +
      x="47" y="0"
 +
      image="vista/vst_btn_ML_N.png"
 +
      activeImage="vista/vst_btn_ML_H.png"
 +
      downImage="vista/vst_btn_ML_D.png"
 +
      hoverimage="vista/vst_btn_ML_H.png"
 +
      tooltip="Media library"
 +
    />
  
===Description of a Classic Skin===
+
    <button
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.
+
      id="btnClose"
 +
      action="CLOSE" param=""
 +
      x="340" y="17"
 +
      image="xp/btn_capt_close_N.png"
 +
      hoverimage="xp/btn_capt_close_H.png"
 +
      downImage="xp/btn_capt_minimize_D.png"
 +
      tooltip="Close"
 +
    />
  
A lot of people get really excited when they find out that they can change the look of Winamp through skinning. The problem is they get turned off once they hit a roadblock, be it what to do next, hit a problem submitting to Winamp.com, or indeed, just figuring out how to get started. So here we have a set of simple steps that holds your hand from initial idea to finished masterpiece. Note: Cool kids still use (and create) classic skins. Good luck!
+
    <button
 +
      id="ButtonID2"
 +
      action="MINIMIZE" param=""
 +
      x="340" y="32"
 +
      image="xp/btn_capt_minimize_N.png"
 +
      hoverimage="xp/btn_capt_minimize_H.png"
 +
      downImage="xp/btn_capt_minimize_D.png"
 +
      tooltip="Minimize"
 +
    />
  
 +
    </groupdef>
  
===Individual Components===
+
    <!-- Components and elements -->
 
+
    <groupdef id="grComponents" name="Components">
#[[The Base Skin]]
+
    <vis id="Visualization"
#[[Main|Paint the Main Window]]
+
      x="30" y="30"
#[[Equalizer|Paint the Equalizer Window]]
+
      w="76" h="40"
#[[Playlist|Paint the Playlist Window]]
+
      relatx="0"
#[[Mini-browser|Paint the Minibrowser Window]]
+
      alpha="255"
#[[AVS|Paint the AVS Window]]
+
      gammagroup="gamma"
#[[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]]
+
      ColorBand1="255,255,255"
#[[Creating Custom Cursors|Create Custom Cursors]]
+
      ColorBand2="255,255,255"
#[[Editing the Configuration Files|Edit the Configuration Files]]
+
      ColorBand3="255,255,255"
#[[WSZ Files|Compress to .WSZ format]]
+
      ColorBand4="255,255,255"
#[[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]
+
      ColorBand5="255,255,255"
 
+
      ColorBand6="255,255,255"
 
+
      ColorBand7="255,255,255"
==Creating Modern Skins==
+
      ColorBand8="255,255,255"
 
+
      ColorBand9="255,255,255"
===Description/Overview of Modern Skinning===
+
      ColorBand10="255,255,255"
 
+
      ColorBand11="255,255,255"
Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.
+
      ColorBand12="255,255,255"
 
+
      ColorBand13="255,255,255"
 +
      ColorBand14="255,255,255"
 +
      ColorBand15="255,255,255"
 +
      ColorBand16="255,255,255"
 +
   
 +
      colorosc1="255,255,255"
 +
      colorosc2="255,255,255"
 +
      colorosc3="255,255,255"
 +
      colorosc4="255,255,255"
 +
      colorosc5="255,255,255"
 +
      colorbandpeak="255,255,255"
 +
    />
  
===Tools Needed to Build a Modern Skin===
+
    <Text
'''[http://download.nullsoft.com/winamp/plugin-dev/WaSDP_1.1.exe Winamp Skin Development Pack]'''
+
      id="SongInfo" ticker="1"
 +
      display="songname" showlen="1"
 +
      x="118" y="26"
 +
      w="210" h="17"
 +
      fontsize="16" font="" color="255,255,255"
 +
      shadowcolor="128,128,128" shadowx="1" shadowy="1"
 +
    />
  
 +
    <text
 +
      id="Timer"
 +
      display="time"
 +
      x="118" y="47"
 +
      w="80" h="25"
 +
      font=""
 +
      fontsize="18"
 +
      color="255,255,255"
 +
      align="left"
 +
      antialias="1" bold="1"
 +
      shadowcolor="128,128,128" shadowx="1" shadowy="1"
 +
      timeroffstyle="1"
 +
    />
  
===Individual Components===
+
    <slider
 +
      id="Slider"
 +
      action="SEEK"
 +
      x="18" y="85"
 +
      w="317" h="20"
 +
      orientation="horizontal"
 +
      thumb="vista/vista_thumb_N.png"
 +
      hoverThumb="vista/vista_thumb_H.png"
 +
      downThumb="vista/vista_thumb_D.png"
 +
    />
  
*[[Modern Skin: Intro|Intro]]
+
    <slider
*[[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]]
+
      id="Slider"
*[[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]]
+
      action="VOLUME"
*[[Modern Skin: XML Intro|XML Intro]]
+
      x="208" y="63"
*[[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]]
+
      w="115" h="12"
*[[Modern Skin: Container| Container]]
+
      orientation="horizontal"
*[[Modern Skin: Group|Group]]
+
      thumb="xp/xp_thumb_N.png"
*[[Modern Skin: Relative Positioning| Relative Positioning]]
+
      hoverThumb="xp/xp_thumb_H.png"
*[[Modern Skin: Complex Skin|Complex Skin]]
+
      downThumb="xp/xp_thumb_H.png"
*[[Modern Skin: Non-Rect Player| Non-Rect Player]]
+
    />
*[[Modern Skin: Layer Composition| Layer Composition]]
+
*[[Modern Skin: Alpha Channels| Alpha Channels]]
+
*[[Modern Skin: Animatedlayer|Animatedlayer]]
+
*[[Modern Skin: Snap Points|Snap Points]]
+
*[[Modern Skin: Drawers|Drawers]]
+
*[[Modern Skin: Skin Scripting| Skin Scripting]]
+
*[[Modern Skin: Drawer Scripting| Drawer Scripting]]
+
*[[Modern Skin: Animating a Skin|Animating a Skin]]
+
*[[Modern Skin: Maki Overview| Maki Overview]]
+
*[[Main_Page#Glossary_of_Terms|Glossary]]
+
  
 +
    </groupdef>
  
====Downloadable PDF====
+
<container id="main" name="Main Window" default_x="0" default_y="0" default_visible="1"  w="362" h="162">
You can [http://media.winamp.com/5541/main/downloads/development/skinsmodern/Winamp-Modern-Skins-Tutorial.pdf download the tutorial] in PDF format for quick reference anytime
+
  <layout id="normal" background="common/Background_player.png" w="400" h="300" desktopalpha="1" >
  
 +
    <group id="Backgrounds" w="362"/>
 +
    <group id="PlayButtons"  w="360" />
 +
    <group id="grTechButtons" w="360" />
 +
    <group id="grComponents" w="360" />
 +
  </layout>
  
==Creating a Classic Skin Pro==
+
</container>
  
===Description of a cPro Skin===
+
== ClassicPro Skins ==
TBD
+
ClassicPro skins is a blend of a Classic Winamp skin and a Modern Winamp skin. You don’t need to do any coding to create your skin because all the coding will be done by the ClassicPro plugin. The layout is similar to the Classic Winamp layout but also resizable using a Single-User-Interface ([[SUI]]) to display components.
  
===Tools Needed to Build a cPro Skin===
+
[http://cpro.skinconsortium.com/ ClassicPro Official Website]
TBD
+
  
===Tutorial===
+
* '''[[Creating a ClassicPro Skin]]'''
TBD
+
  
 
==Developer Resources==
 
==Developer Resources==
Line 115: Line 239:
 
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=12 Arts and Design]
 
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=12 Arts and Design]
 
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=119 Skin Removal Reporting]
 
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=119 Skin Removal Reporting]
 +
*Forums:[http://magento-themes.cmsmart.net/magento-themes Magento Themes] 
 +
*Forums: [http://magento-extensions.cmsmart.net/magento-extensions Magento Extensions]
 +
*Forums:[http://virtuemart-extensions.cmsmart.net/virtuemart-extensions Virtuemart  Extensions ] 
 +
*Forums:[http://virtuemart-templates.cmsmart.net/virtuemart-templates Virtuemart Templates] 
 +
*Forums:[http://one-page-checkout-virtuemart.cmsmart.net/virtuemart-extensions/virtuemart-one-page-checkout One Page Checkout Virtuemart]
 
*Upload: [http://www.winamp.com/user/submit Submit Your Skin]
 
*Upload: [http://www.winamp.com/user/submit Submit Your Skin]
 
**[http://www.winamp.com/user/submit-skin-classic Submit Classic Skin]
 
**[http://www.winamp.com/user/submit-skin-classic Submit Classic Skin]
 
**[http://www.winamp.com/user/submit-skin-modern Submit Modern Skin]
 
**[http://www.winamp.com/user/submit-skin-modern Submit Modern Skin]
 
*Browse: [http://www.winamp.com/skins Download Skins]
 
*Browse: [http://www.winamp.com/skins Download Skins]
 +
[[de:Hauptseite]]

Latest revision as of 06:30, 16 July 2013

Wiki Main | Skin Developer | Visual Developer | Plug-in Developer | Online Service Developer | SHOUTcast Tools & Services | Articles Page | FAQ | Glossary


Classic Skins

Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.

Modern Skins

Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

   <groupdef id="Backgrounds" name="BckElements">
   <layer id="LayerID1" image="common/bck_seek.png" x="19" y="92"  />
   <layer id="LayerID2" image="common/bck_visualizer.png" x="22" y="25" />
   <layer id="LayerID3" image="common/slider_volume_BCK.png" x="212" y="64"  />
   </groupdef>
   <groupdef id="PlayButtons" name="Player Buttons">
   <button
     id="btnPlay"
     action="PLAY" param=""
     x="11" y="106"
     image="vista/vst_btn_play_N.png"
     hoverimage="vista/vst_btn_play_H.png"
     downImage="vista/vst_btn_play_D.png"
     tooltip="Play"
   />
   <button
     id="btnPause"
     action="PAUSE" param=""
     x="61" y="117"
     image="vista/vst_btn_pause_N.png"
     hoverimage="vista/vst_btn_pause_H.png"
     downImage="vista/vst_btn_pause_D.png"
     tooltip="Pause"
   />
   <button
     id="btnStop"
     action="STOP" param=""
     x="104" y="117"
     image="vista/vst_btn_stop_N.png"
     hoverimage="vista/vst_btn_stop_H.png"
     downImage="vista/vst_btn_stop_D.png"
     tooltip="Stop"
   />
   <button
     id="btnEject"
     action="EJECT" param=""
     x="146" y="117"
     image="vista/vst_btn_open_N.png"
     hoverimage="vista/vst_btn_open_H.png"
     downImage="vista/vst_btn_open_D.png"
     tooltip="Eject / Open"
   />
   <button
     id="btnPrev"
     action="PREV" param=""
     x="240" y="116"
     image="xp/xp_btn_prev_N.png"
     hoverimage="xp/xp_btn_prev_H.png"
     downImage="xp/xp_btn_prev_D.png"
     tooltip="Previous"
   />
   <button
     id="btnNext"
     action="NEXT" param=""
     x="288" y="116"
     image="xp/xp_btn_next_N.png"
     hoverimage="xp/xp_btn_next_H.png"
     downImage="xp/xp_btn_next_D.png"
     tooltip="Next"
   />
   </groupdef>
   <groupdef id="grTechButtons" name="Other Buttons">
   <togglebutton
     id="btnPL"
     action="TOGGLE" param="guid:pl"
     x="19" y="0"
     image="vista/vst_btn_PL_N.png"
     activeImage="vista/vst_btn_PL_H.png"
     downImage="vista/vst_btn_PL_D.png"
     hoverimage="vista/vst_btn_PL_H.png"
     tooltip="Playlist"
   />
   <togglebutton
     id="btnML"
     action="TOGGLE" param="guid:ml"
     x="47" y="0"
     image="vista/vst_btn_ML_N.png"
     activeImage="vista/vst_btn_ML_H.png"
     downImage="vista/vst_btn_ML_D.png"
     hoverimage="vista/vst_btn_ML_H.png"
     tooltip="Media library"
   />
   <button
     id="btnClose"
     action="CLOSE" param=""
     x="340" y="17"
     image="xp/btn_capt_close_N.png"
     hoverimage="xp/btn_capt_close_H.png"
     downImage="xp/btn_capt_minimize_D.png"
     tooltip="Close"
   />
   <button
     id="ButtonID2"
     action="MINIMIZE" param=""
     x="340" y="32"
     image="xp/btn_capt_minimize_N.png"
     hoverimage="xp/btn_capt_minimize_H.png"
     downImage="xp/btn_capt_minimize_D.png"
     tooltip="Minimize"
   />
   </groupdef>
   <groupdef id="grComponents" name="Components">
   <vis id="Visualization"
     x="30" y="30"
     w="76" h="40"
     relatx="0"
     alpha="255"
     gammagroup="gamma"
     ColorBand1="255,255,255"
     ColorBand2="255,255,255"
     ColorBand3="255,255,255"
     ColorBand4="255,255,255"
     ColorBand5="255,255,255"
     ColorBand6="255,255,255"
     ColorBand7="255,255,255"
     ColorBand8="255,255,255"
     ColorBand9="255,255,255"
     ColorBand10="255,255,255"
     ColorBand11="255,255,255"
     ColorBand12="255,255,255"
     ColorBand13="255,255,255"
     ColorBand14="255,255,255"
     ColorBand15="255,255,255"
     ColorBand16="255,255,255"
   
     colorosc1="255,255,255"
     colorosc2="255,255,255"
     colorosc3="255,255,255"
     colorosc4="255,255,255"
     colorosc5="255,255,255"
     colorbandpeak="255,255,255"
   />
   <Text
     id="SongInfo" ticker="1"
     display="songname" showlen="1"
     x="118" y="26"
     w="210" h="17"
     fontsize="16" font="" color="255,255,255"
     shadowcolor="128,128,128" shadowx="1" shadowy="1"
   />
   <text
     id="Timer"
     display="time"
     x="118" y="47"
     w="80" h="25"
     font=""
     fontsize="18"
     color="255,255,255"
     align="left"
     antialias="1" bold="1"
     shadowcolor="128,128,128" shadowx="1" shadowy="1"
     timeroffstyle="1"
   />
   <slider
     id="Slider"
     action="SEEK"
     x="18" y="85"
     w="317" h="20"
     orientation="horizontal"
     thumb="vista/vista_thumb_N.png"
     hoverThumb="vista/vista_thumb_H.png"
     downThumb="vista/vista_thumb_D.png"
   />
   <slider
     id="Slider"
     action="VOLUME"
     x="208" y="63"
     w="115" h="12"
     orientation="horizontal"
     thumb="xp/xp_thumb_N.png"
     hoverThumb="xp/xp_thumb_H.png"
     downThumb="xp/xp_thumb_H.png"
   />
   </groupdef>

<container id="main" name="Main Window" default_x="0" default_y="0" default_visible="1" w="362" h="162">

 <layout id="normal" background="common/Background_player.png" w="400" h="300" desktopalpha="1" >
   <group id="Backgrounds" w="362"/>
   <group id="PlayButtons"  w="360" />
   <group id="grTechButtons" w="360" />
   <group id="grComponents" w="360" />
 </layout>

</container>

ClassicPro Skins

ClassicPro skins is a blend of a Classic Winamp skin and a Modern Winamp skin. You don’t need to do any coding to create your skin because all the coding will be done by the ClassicPro plugin. The layout is similar to the Classic Winamp layout but also resizable using a Single-User-Interface (SUI) to display components.

ClassicPro Official Website

Developer Resources

Community Links

de:Hauptseite