 |
|
|
|
|
|
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.
» Main.bmp
» Title.bmp
» CButtons.bmp
» ShufRep.bmp
» Volume.bmp
» Balance.bmp
» MonoSter.bmp
» Posbar.bmp
» Playpaus.bmp
» Numbers.bmp
» Text.bmp
|
Winamp's Main Window |
|
|
|
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 |
|
|
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.
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 | Cbuttons.bmp |
|
|
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 |
|
|
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 |
|
|
|
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 |
|
|
|
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 |
|
|
|
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 |
|
|
|
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 |
|
|
|
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 |
|
|
|
The numbers.bmp file provides the images for displaying the numbers
used in the time display, located directly above the visualizations
area.
|
|
|
|
|
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.
|
|
|
|
| |
NSDN Home
User Docs
Walkthrough
