|
|
|
|
Skin Building Tutorials This article will help with the contruction of Quack Player skins. The Quack Player skin is made up of Portable Network Graphics (PNG) image files. If you look into the Quack Player directory and go to 'bin/skin/' then you'll find all bitmaps that make up the player's skin. Additionally to the PNG files, there is one INI file (data.ini) that is used to configure the colours of certain fonts: pltext - the colour of the text on the Playlist item image. adjtext - the colour of the text on the 'Colour Adjustment' Panel. minfotitle - the colour of the large title text on the Media Info Panel. minfotext - the colour of the smaller text on the Media Info Panel. ttext - the colour of the text on the Track Bar popup. The colour format used in the data.ini file is the HTML Hex. When setting the colour, make sure that you EXCLUDE the '#' symbol of the HTML hex code or else an error will occure. So the colour black would be '000000' instead of '#000000'. Buttons have thier individual images associated with them. By changing the images in the folder you can therefore change the corresponding component(button, trackbar, etc.) in the player's interface. There are three button states (default, hover and down) and they correspond to the mouse's activity in relation to the button. Each button state has its own bitmap to reflect the state and each of these bitmaps are stored vertically adjacent in one PNG file in the following order: default, hover, down. The bitmaps of each state MUST be equal in size and must have no spaces between them. Within the images you can create a tranparent effect by using the colour RGB(16,16,16). The area that this colour occupies will be the transparent area in the interface. This transparent effect works with button images and not background images. The trackbars' images are stored like the buttons' images except that there are four bitmaps stored vertically adjacent in one PNG file. The order and meaning of their storage is as follows: Trackbar's left edge, Trackbar's right edge, Trackbar's empty/unoccupied fill, Trackbar's full/occupied fill. Different components (buttons, trackbars, etc.) are named differently and here's a list: Buttons = 'bset' + # + '.png' Trackbars = 'tset' + # + '.png' Slidebars = 'sset' + # + '.png' BackGrounds Main BG = 'mbg.png' Equalizer BG = 'bg1.png' Media Info BG = 'bg2.png' Absolute Bottom BG = 'bbg.png' Trackbar Popup BGs = 'tbg' + # + '.png' All four edges and all four corners of the application have their own images associates with them and they are named as follows: left border = 'lb.png' right border = 'rb.png' top border = 'tb.png' bottom border = 'bb.png' top left edge = 'tl.png' top right edge = 'tl.png' bottom left edge = 'bl.png' bottom right edge = 'br.png' When modifying the skin's images, it's advised that you don't change the size of the image too much because this may cause some complications within Quack Player. Background images can be any size because they will be stretched whether they're larger or smaller than the canvas. |
