Main

From Winamp Developer Wiki
Jump to: navigation, search

Creating a Classic Skin: IntroductionThe Base SkinPaint the Main WindowPaint the Equalizer WindowPaint the Playlist WindowPaint the Minibrowser WindowPaint the AVS WindowPaint the Winamp 2.9/5.x WindowsCreate Custom CursorsEdit the Configuration FilesCompress to .WSZ formatSubmit to Winamp.com


Skinning The Main Window

The Winamp main window is probably the most complex window, graphics wise, of all its windows. There are many things going on in that one window at all times. Each part of the main window is divided up into various bitmap images. Here is a list of the images below that actually create the main window.


File:Winamp.gif


  • Main.bmp
  • Titlebar.bmp
  • CButtons.bmp
  • ShufRep.bmp
  • Volume.bmp
  • Balance.bmp
  • MonoSter.bmp
  • Posbar.bmp
  • Playpaus.bmp
  • Numbers.bmp
  • Text.bmp


Winamp Skins | Main.bmp

File:Main.gif


This file provides the background image for Winamp, sections of the other bitmaps are cropped and layered over this background image to create the various states of "on" and "off", buttons, sliders, etc. Many skin artists (skinners) create their own main.bmp image as well as the other components to make their skin as unique as possible. Although the regions in which the buttons can actually be clicked, the artists have a certain amount of pixels to play with for each element. This will enable the skinner to give the illusion of making smaller more precise controls, transparent controls, or even just big silly dumb ones if they wish. The possibilities are simply endless. The skin components are all bitmaps and therefore *cannot support animation or transparencies* The only way to achieve transparency is to use the overlapping area of main.bmp as the background in the various components.


Winamp Skins | Titlebar.bmp

File:Titlebar.gif


Titlebar.bmp provides the title bars for the all the various skinned windows of Winamp. The first of the bars are the graphics for Winamp's main window when that window has focus (the current window on your desktop is said to have the 'focus', and on that window the currently selected control also has the 'focus'). The second bar is the main window's title bar when it does not have the focus. The third and fourth bars provide the graphics for Winamp running in Window Shade mode. The fifth and sixth bars are special. They provide the graphics for the title bar when the Winamp Easter Egg is active. (Easter Eggs are usually useless aspects of a piece of software that the software developers include as a joke or to give credit to something. It's just the programmers trying to have a little fun. do not worry about these last two bars for now.)

To the left of the title bars are a selection of graphics for the windows buttons in their various states.


File:Winbut.gif


The top row consists of the images for system menu (a.k.a. Winamp's Main Menu), the minimize button, as well as the close button in it's normal state (the way the buttons would look if they weren't clicked). The second row consists of the same set of buttons, however in the pressed state (the way the buttons would look if they were clicked). The third row is the graphics for the WindowShade button where the left image is the image of the button not pressed, and the left is the image of the button pressed. The fourth row contains the images for the button that restores Winamp or its various windows from WindowShade mode to its expanded form, the images being in the same order, the left being not pressed, and the right being the pressed state.

The fifth and final row consists of the images that create the progress bar for Winamp when Winamp is in WindowShade mode. The first part of the row consists of the image for which the seek bar rests in, followed by the slider in various states.

To the right of the title bars are the graphics for the CuttleBar, which is a little strip of buttons to the left of the visualization area of the Winamp main window. At the top the strip is shown in it's un-pressed state. To the right of the first strip is a version of the strip with all the labels removed, this is for the people who turn off the CuttleBar in Winamp's Preferences window. The next row of strips are simply the different states of the CuttleBar with copy of the strip in each of it's five states, one state for each button being pressed.

When modifying the title bar it's important to remember that if you change the appearance of your buttons in the main title bar images, you should also change all the graphics that are relevant to the title bar to match so that they don't look out of place when you press them and remove the focus from the button you had just pressed. Also note that you can not add graphics for components that do not exist, for example adding a spot in WindowShade mode for track title scrolling would not make sense, due to the fact that Winamp wasn't coded with that in mind, leaving that spot you created blank.


Winamp Skins | ShufRep.bmp

File:Cbuttons.gif


The cbuttons.bmp image provides the images for Winamp's playback control buttons. The top row displays the buttons un-pressed or in their normal state, the second row of graphics are the same buttons except in the pressed state. Remember when skinning this set of components that transparency does not exist, if the button is incorporated into the background, you will have to place the background into the cbuttons.bmp.

Winamp Skins | ShufRep.bmp

File:Shufrep.gif


Shufrep.bmp provides the graphics for both states of the Shuffle-Play button, Play/Loop button (Repeat), Equalizer button as well as the Playlist button. The top row is the (repeat) loop and shuffle in the off state, the second row, are the loop and shuffle button in the off, clicked state(the button being pressed while the shuffle/loop buttons were in the off state). The third row is loop and shuffle button in the on state, and the fourth row are the buttons being clicked in the on state.

The bottom four images make up the graphics for the Equalizer and Playlist editor buttons in both two states. The first is the Equalizer button in the off state. The second button is the Playlist button in the off state. The third is the Equalizer off state and pressed at the same time. The fourth being the Playlist button in the same state. The next row is the exact same thing, however, instead of the buttons being in the off state, they are on.

The same conditions in regards to transparency that apply for the Cbuttons.bmp image apply for this image as well.



Winamp Skins | Volume.bmp

File:Volume.gif


The volume.bmp file (partial shown here enlarged at the left) contains a set of of bars and two slider graphics. Depending on how high or low the level of the volume is, Winamp selects one of the bars to demonstrate the level at which the volume is currently at. If the volume is all the way down, it displays the more green bars, if all the way up, it displays the more yellow bars. The first bar is the volume at its lowest level, the last bar is the volume at its maximum level. Fiddle with these graphics yourselves to find out which bar is which level. The bottom contains the sliders control images. The first image being the slider, which is in the clicked, the second being in the un-clicked state.


Winamp Skins | Balance.bmp

File:Bal.gif


Balance.bmp works virtually identitical to volume.bmp, however, the images in balance need to illustrate the volume coming from either the left, right, or both speakers. This is done by swaying from green to red when moving the slider from one of the sides towards center. Simply color all the bars the way you would do for the volume.bmp and the outcome should be the same.


Winamp Skins | MonoSter.bmp

File:Monoster.gif


Monoster.bmp provides the indication that the audio source is running in Stereo or Mono mode. The top row shows the "in stereo" indicator as well as the "in mono", indicator. The second row shows the "stereo off" and "mono off" indicators. When Winamp is playing in stereo sound, the "stereo on" with the "mono off" indicators are displayed. When the audio is in mono, the opposite is displayed.


Winamp Skins | Posbar.bmp

File:Posbar.gif


The posbar.bmp, shown here enlarged, provides the track for the song position slider. At the right side of the image, the song seek slider is shown in both states, pressed and not pressed.


Winamp Skins | Playpaus.bmp

File:Playpaus.gif


The playpaus.bmp file provides indicators that the file being played is playing, paused or stopped. The final item shows whether the file is synchronized or buffered or a break in transmission has been found.

Winamp Skins | Numbers.bmp

File:Numbers.gif


The numbers.bmp file provides the images for displaying the numbers used in the time display, located directly above the visualizations area.


Winamp Skins | Text.bmp

File:Text.gif


Text.bmp is performs the same job that numbers.bmp, however, this image isn't as limited in use as numbers.bmp. Text.bmp provides all the text that is used for the track area, Playlist editor, and anywhere else that Winamp uses text within the skinned interface. Insert non-formatted text here