Difference between revisions of "Walkthrough on how to skin MediaMonkey v3"

From MediaMonkey Wiki
Jump to: navigation, search
 
(Adding status panels to your player)
 
(3 intermediate revisions by the same user not shown)
Line 42: Line 42:
  
 
----
 
----
 +
 +
===Add Button Images to your player===
 +
The buttons in MediaMonkey skins are all defined by images or parts of images in .png or .bmp format.  Creating buttons is beyond the scope of this guide, but the images used for buttons can be created in any image editing software such as [http://www.adobe.com/products/photoshop/index.html Adobe Photoshop], [http://www.gimp.org/ GIMP] (free), [http://www.getpaint.net/ Paint.net] (free), [http://en.wikipedia.org/wiki/Paint_(software) Paint] (free, pre-installed on Windows), etc..  Images used for buttons should be in .png format if you want to enable transparency in certain parts of the button.  In addition, you should have at least 3 images for buttons - one for how the button looks normally, one for how the button looks when the mouse is hovering over it, and one for how the button looks when it is pressed.  You can also define how the button looks when disabled (for certain buttons such as the Stop button), and you can define the clickable area of buttons (or the focus area) with a black and white image in the shape of the button (black where the button should be clickable, white where it will not be).
 +
 +
Buttons can be added into the ThemeEditor by adding a "Button Object (5 states)" under "Objects".  You should name your button what it will correspond to in your player.  Sections can have these names:
 +
 +
''PlayButton, PlayPauseButton_UP, PlayPauseButton_DOWN, PauseButton, PrevButton, StopButton, NextButton, ShuffleButton, ShuffleButton_UP, ShuffleButton_DOWN, ContinousButton, ContinousButton_UP, ContinousButton_DOWN, AutoDJButton, AutoDJButton_UP, AutoDJButton_DOWN, EQButton, EQButton_UP, EQButton_DOWN, PlaylistButton, PlaylistButton_UP, PlaylistButton_DOWN, MinimizeButton, MaximizeButton, CloseButton, SwitchButton''
 +
 +
You'll notice that many buttons can have _UP and _DOWN as part of their name.  This will later be useful in making "StateButtons" that can have their look defined based on certain states.  For example, the PlayPauseButton_UP will show when no song is being played, and therefore would play music when pressed.  Conversely, PlayPauseButton_DOWN will show when a song is being played, so it will pause music when pressed.  Other StateButtons work similarly except they will have a different look based on other criteria (ie when a playlist is shown or not shown, or when AutoDJ is enabled vs disabled.)
 +
 +
After you have imported your images into the ThemeEditor (via Images/Add Images or Images/Replace Image) you can select and define the area of that image to be used in your button by clicking the "..." next to Bitmap. 
 +
 +
:'''Bitmap''' = The default look of your button
 +
:'''BitmapDisabled''' = The look of your button when it is not clickable (only applies to certain buttons).
 +
:'''BitmapFocused''' = The clickable area of your button.  Clickable areas should be defined in black, non clickable areas in white.  If you want the whole area to be clickable, leave this undefined.
 +
:'''BitmapHot''' = The hover image of your button.  What the button will look like with the mouse over it.
 +
:'''BitmapPressed''' = What the button will look like when pressed.
 +
 +
Be sure as you add your images that the resolution is the same for each and that it is defined correctly under "Height" and "Width".
 +
 +
===Adding TrackBars to your player===
 +
All players support trackbars such as a seek bar, volume bar, and balance bar.  These elements are a bit more complicated to set up than buttons are, depending on how you want the track bars to look.
 +
 +
More information will be added.
 +
 +
===Adding status panels to your player===
 +
All players also support panels.  Panels can have these names:
 +
 +
''Rating, StatusPlay, StatusPause, StatusStop, MonoStereoLabel, Visualization''
 +
 +
Rating will show the current rating of the track that is playing.  It will need to be defined as a single image that will be repeated 5 times in the player.  It is defined the same as a normal button (see above).
 +
 +
MonoStereoLabel will show a different image based on if the current track playing back is Mono or Stereo.  This panel has limited use as most digital media today is Stereo.  It can be configured similar to Rating as above, excempt that BitmapDisabled will be used for the "Stereo" image.
 +
 +
StatusPlay, etc. will show what the player is currently doing (ie display a different image depending on whether playback is played, paused, or stopped.  These items can be defined as Bitmap Objects with a single state (x1) but all three images should be grouped together under a common "StatusImages" container (see below)
 +
 +
[[Image:StatusImages.png]]
 +
 +
Visualization is not a true panel, but it does not fit other categories.  Visualization is a simple Bitmap Object (one state) that serves as a background for the visualization as defined in the .ini file.
  
 
===Edit your first entry in the ini-file===
 
===Edit your first entry in the ini-file===
Line 77: Line 116:
  
 
==FAQ==
 
==FAQ==
If you have any questions, please ask me ([[User:Morten|Morten]]) or one of the other skinners. We will put the question and answer here.
+
If you have any questions, please ask me ([[User:Morten|Morten]]) or one of the [[MMWiki:Community_Portal|other skinners]]. We will put the question and answer here.

Latest revision as of 21:48, 13 March 2008

Go back to the main skinning page


This page is to help you through skinning MediaMonkey and it's objects.

First of all, you need to download ThemeEditor 7. It's required to edit the .mskn-files which MediaMonkey uses to draw windows, objects, text etc. There'll be three categories; one for the .player-skins, one for the big ol' "Theme.mskn" and one for the other objects which also is customizable. We'll start with the player-skins.


Player-skins

Player-skins is defined by two files; the .mskn- and the ini-file. They have same names, but different extensions. There are three types of players; Player, FloatPlayer, MicroPlayer.

Player is for the player skin when the monkey is maximized with all functions activated. It can not be transperent.

FloatPlayer is for the mini-player skin which can be transperent.

MicroPlayer is for the tray-area in Windows. This is mainly a control-skin, but there are indications that it'll be extended to show album-information when you activate a button in the tray-player.

Guided skinning of Player- and FloatPlayer-skin

When you've downloaded ThemeEditor, you're ready to go. However, you must have a resource file (.PNG, .BMP, .ICO, .EMF or a .WMF-file) to retrieve images for elements in your skin from. You have the possibility to;

a) Work from an existing skin-file. b) Start from scratch.

This guide will let you do both things. It will also guide you through skinning both the Player-skin and the FloatPlayer-skin. However, the one big difference is that the Player-skin can't be transperent. Elements in it can be transparent just as with the MiniPlayer-skin, but it's main purpose is to be docked inside the MediaMonkey-window, so it needs to be a box with four sides.

Let's begin. Always begin with the .mskn-file. It defines the resources you want to use in your skin. The ini-file is mainly for positioning and sizing of the elements.


Defining the background for your player

Make yourself a folder with your skin's name. Put it inside your 'X:\Program Files\MediaMonkey\Skins\'-folder. Open up ThemeEditor 7, or open up an existing .mskn-file. In either case, go up to the menu and press 'Save as'. Go the new folder you've created and name the file either Player.mskn or FloatPlayer.mskn. The new file you've just saved will have an element called 'Form'. This you can use in your skin but rename it first to 'PlayerBackground'. This element is shown with the number 1 in the help-image. Next up, define the element's Width and Height. The 'Width'-entry is placed furthest down on any element in the .mksn-file, and the 'Height'-entry is easily found above the entry named 'Kind'. Now, check that the 'Kind'-entry has this property: "skNone". If you've made a new file, it will be "skForm". The last thing we want to do with this element is making it a client for your skin. It is important to define this as client, because it's a container (wrapper) of all your skin's background. Change the first entry 'Align' to "saClient".

Next up is learning to use image-elements. Press on the newly made element 'PlayerBackground' and thereafter press on Bitmap Object (1 state). This is shown with the number 2 in the help-image. When you've pressed that, the container will get a "+"-sign to signalise it has elements inside itself. The image-element you've just made will have a height of 20px and a width of 30px. Define it as big as you like. If you don't know how big the element is, and that's not unlikely at all, define the image source first. This entry called 'Bitmap' (shown with the number 3 in the help-image) is the only source for this entry. It's not a 5-state button, so it's easy to define.

Before we proceed, there is important to know that this background image should be resizable, at least if you're making a Player.mksn-file. To have a nice stretching of your background-image, you must have something that you want to be dragable and something you don't. If you want all elements in your background to stretch, skip the next paragraph;


Make advanced backgrounds for your player

First, we need to define what should be stretchable and place the un-stretchable element on top of that. This is very easy. Do you remember the 'Align'-entry? This entry is one of the most important entries in your .mskn-file. If you don't want the element to be resizable, you need to position the element relative to either the center "saCenter", the left side "saLeft" or the right side "saRight". It's important that you do this, so that the element knows where it should be when the player is resizing.

In our example, we want our skin to have a Left- and a Right-side which isn't stretchable, and a mid-part which is. We've just added a one-state Bitmap Object. We need two more. For each time you want to make a sub-element, you've got to select which element that should have this. In our case it's always the PlayerBackground which has to have sub-elements. When we want other player-elements such as Play/Pause-buttons, Continous etc. we have to press the objects-node and thereafter make a new image-element. The left element can be our first element. It should have the same height as the container, but it should be less wider. Define what part of the Bitmap which should be used as the source for this part and writ down how wide this element is. You'll need it for your Stretch-part. Next up is the Right-part of the skin. Instead of defining the entry 'Align' as "saLeft", define it as "saRight". most likely it will have the same height as the container, and the same width as your left part.

Now what's left is the stretch part. The most important thing to notice is that this part's entry 'Align' should have the property "saClient", just as the container has. Do you remember the number you wrote down for some minutes ago? Use this number in the element's 'Left'-entry. When you've defined this elements width, you'll have to summen up the width of this element and the Left-side of the player to use on positioning the Right-element. Use the same entry 'Left' to position the element. If you press on the PlayerBackground node, you'll now see a nice player-background to work with.


Add Button Images to your player

The buttons in MediaMonkey skins are all defined by images or parts of images in .png or .bmp format. Creating buttons is beyond the scope of this guide, but the images used for buttons can be created in any image editing software such as Adobe Photoshop, GIMP (free), Paint.net (free), Paint (free, pre-installed on Windows), etc.. Images used for buttons should be in .png format if you want to enable transparency in certain parts of the button. In addition, you should have at least 3 images for buttons - one for how the button looks normally, one for how the button looks when the mouse is hovering over it, and one for how the button looks when it is pressed. You can also define how the button looks when disabled (for certain buttons such as the Stop button), and you can define the clickable area of buttons (or the focus area) with a black and white image in the shape of the button (black where the button should be clickable, white where it will not be).

Buttons can be added into the ThemeEditor by adding a "Button Object (5 states)" under "Objects". You should name your button what it will correspond to in your player. Sections can have these names:

PlayButton, PlayPauseButton_UP, PlayPauseButton_DOWN, PauseButton, PrevButton, StopButton, NextButton, ShuffleButton, ShuffleButton_UP, ShuffleButton_DOWN, ContinousButton, ContinousButton_UP, ContinousButton_DOWN, AutoDJButton, AutoDJButton_UP, AutoDJButton_DOWN, EQButton, EQButton_UP, EQButton_DOWN, PlaylistButton, PlaylistButton_UP, PlaylistButton_DOWN, MinimizeButton, MaximizeButton, CloseButton, SwitchButton

You'll notice that many buttons can have _UP and _DOWN as part of their name. This will later be useful in making "StateButtons" that can have their look defined based on certain states. For example, the PlayPauseButton_UP will show when no song is being played, and therefore would play music when pressed. Conversely, PlayPauseButton_DOWN will show when a song is being played, so it will pause music when pressed. Other StateButtons work similarly except they will have a different look based on other criteria (ie when a playlist is shown or not shown, or when AutoDJ is enabled vs disabled.)

After you have imported your images into the ThemeEditor (via Images/Add Images or Images/Replace Image) you can select and define the area of that image to be used in your button by clicking the "..." next to Bitmap.

Bitmap = The default look of your button
BitmapDisabled = The look of your button when it is not clickable (only applies to certain buttons).
BitmapFocused = The clickable area of your button. Clickable areas should be defined in black, non clickable areas in white. If you want the whole area to be clickable, leave this undefined.
BitmapHot = The hover image of your button. What the button will look like with the mouse over it.
BitmapPressed = What the button will look like when pressed.

Be sure as you add your images that the resolution is the same for each and that it is defined correctly under "Height" and "Width".

Adding TrackBars to your player

All players support trackbars such as a seek bar, volume bar, and balance bar. These elements are a bit more complicated to set up than buttons are, depending on how you want the track bars to look.

More information will be added.

Adding status panels to your player

All players also support panels. Panels can have these names:

Rating, StatusPlay, StatusPause, StatusStop, MonoStereoLabel, Visualization

Rating will show the current rating of the track that is playing. It will need to be defined as a single image that will be repeated 5 times in the player. It is defined the same as a normal button (see above).

MonoStereoLabel will show a different image based on if the current track playing back is Mono or Stereo. This panel has limited use as most digital media today is Stereo. It can be configured similar to Rating as above, excempt that BitmapDisabled will be used for the "Stereo" image.

StatusPlay, etc. will show what the player is currently doing (ie display a different image depending on whether playback is played, paused, or stopped. These items can be defined as Bitmap Objects with a single state (x1) but all three images should be grouped together under a common "StatusImages" container (see below)

StatusImages.png

Visualization is not a true panel, but it does not fit other categories. Visualization is a simple Bitmap Object (one state) that serves as a background for the visualization as defined in the .ini file.

Edit your first entry in the ini-file

Note: Everybody should read the next part.

You'll have to make an ini-file. It must have the same name as your mskn-file, but it must have the .ini-extension instead of the .mskn-extension. To edit this ini-file, simply select Notepad to open this in Windows.

[PlayerSkin]
EngineVersion=100
Resizable=1,1,1,0
Pos=0,0
Size=675,60
Transperent=0
TimeFormat=mmm:ss

This code should be similar to your first entry in the ini-file. It says how small the player can be and how it resizes. Ignore the EngineVersion. You don't modify that. The "[]" says for what skin-element the following code is for. We'll go through that later. Just know that the first entry should be [PlayerSkin] and the information you should be editing is this.

1) Resizable - This tells the engine in what directions you can resize to, but also where the elements in your skin should be oriented by. This is a usual code for a player skin which can, in fact, only be resized horisontally. The number 1 enables (in order) resizing "Left,Top,Right,Bottom", and the number 0 deactivates that type of resizing.

2) Pos - Positioning of elements is usual, so leave this thing alone. We will go through what it's for very soon.

3) Size - This defines the smallest size of your player skin. It's important that you make this area as small as possible. The values are for the size "Width, Height" in pixels (px).

4) Transperent - Is a very important point. For player-skins used in the main body, this isn't supported. But for FloatPlayer this is very useful to make weird formed player skins. As with the other elements, the number 1 activates this function.

Main Theme (Theme.mskn)

More information to be added.


Other objects

On the to-do list of the MediaMonkey-team is wrapping of icons within the .msz-file.

FAQ

If you have any questions, please ask me (Morten) or one of the other skinners. We will put the question and answer here.