Creation Skins for BSPlayer

Article writes by DivxAccro -- Translation by Kurtnoise


 

Necessaries Tools : Your favorite Draws' software and Winzip.

 

Creation of skins for BSPLAYER goes trough three steps :

 

 

 

 

 

 

 

Pictures' Creation:

 

 

To create some using pictures as skin for BSPLAYER, we need to have a draws' software able to generate bitmap files (*.BMP). The best software will be, the more effects will be interesting, funny, and striking… I use PhotoImpact (Ulead System) or Paint Shop Pro (Jasc Software) but anyone will do nicely, we can also take Paint (Microsoft).

 

Number of pictures can change according to whether we want to make simple up to more complicated, smallest to largest. Anyway, we must allow one picture for the font' skin (MAIN.BMP) and 3 pictures for each « skinable » buttons wich we want to make appear.

 

Buttons' Names will be following by this letters n/u/d according to their position :

*    n : « normal » … for appearance's button without action.

*    u : « up » for appearance's button when the mouse comes on top.

*    d : « down » for appeareance's button when we click on.

 

 

 

Here is an example : bplayn.BMP – bplayu.BMP – bplayd.BMP

 

Skinables buttons are following  :

 

*    PLAY             (bplay)

*    STOP            (bplay)

*    PAUSE         (bpause)

*    NEXT            (bnext)

*    PREV            (bprev)

*    OPEN            (bopen)

*    Playlist

*    Repeat

*    Subtitles

*    Time/Frames

*    Full Screen

*    Always on top

*    Skins

*    Exit

*    Volume

 

 

 

Another buttons are as well skinables but never seeing on any skins, I don't know what kind of button it's matter. The following line makes up a button in position to 24,40 with pictures Btn1n.bmp, Btn1d.bmp, Btn1u.bmp and action 23 (full screen) : Btn1=24,40:23

 

 

 

In following boards, I've put my first creations :

 

 

 

 

FIRE

Main

 

Bplay

Bstop

Bpause

Bprev

Bnext

Bopen

Bexit

/n

/u

/d

 

Btn1

Btn2

Btn3

Btn4

Btn5

Btn6

Btn7

/n

/u

/d

Volbtn /n /u /d

 

 

 

 

 

 

ICE

 

Bplay

Bstop

Bpause

Bprev

Bnext

Bopen

Bexit

/n

/u

/d

 

Btn1

Btn2

Btn3

Btn4

Btn5

Btn6

Btn7

/n

/u

/d

Volbtn /n /u /d

 

 

  

 

 

PSYCHEDELIC

 

Bplay

Bstop

Bpause

Bprev

Bnext

Bopen

Bexit

/n

/u

/d

Btn5 /n /u /d

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Settings :

 

Now, we get to try configure the SKIN.INI file. This file is obligatory and very important to build our BSPlayer's Skin. I've try to explain some parameters with this caption :

 

Captions  :

 

*          [Parameters]                                  Title of section's action

*          ; 0-normal                                         Commentary or non activated line

*          – whole picture appears -               Explanations

*          MainAnyShape=1                         activated line

 

SKIN.INI

[Parameters]

 

;0-normal – whole picture appears -

;1-Skin can be any shape, pixel at top left corner (position 0,0) is transparent color – if this color exist in picture, background of display will appear instead -

MainAnyShape=1

;0-Normal buttons – like the background, all of the picture appears -

;1-Shaped buttons – like the background (MAIN), pixel at top left button /n is transparent color, and in this case, only the related part reacts to the mouse -

;2-transparent – like previous option, pixel's color at the top left is transparent color, but once, all the bitmap's area reacts to the mouse -

ButtonAnyShape=0

;Transparent colors
;Currently not used, always pixel at 0,0 – I don't understand this options - 

MainTransClr=000000

ButtonTransClr=000000

 

[Colors]

 

;format RRGGBB (HEX) – this colors' format is expressed in hexadecimal (HEX). That points out one color in drawing software -

;

;position back color

PosBackClr=006DAA

;position fore color

PosForeClr=16A5E9

;font color

FontClr=000000

;volume color - to work only if the sound cursor is activated and sized -

VolumeClr=000000

;volume background or transparent if not defined

; VolumeBG=00FF00 – not defined in this case. To define this, only take ones to remove point-comma at the beginning of this line -

;Playlist background

PlayLBG=16A5E9

; Playlist text color

PlayLTX=000000

 

[Position]

 

;Buttons position - x,y – Be carefull : pixel x=0 and y=0 is at the TOP and LEFT, the increasing x goes left to right and the growing y goes at the top to the bottom. Buttons' position defining by following lines is the position of pixel at the top left for every pictures -

;Button size is the same as bitmap

BtnPrev=161,65 - Button for Previous Chapter-

;

BtnPlay=101,65 - Button to Play -

;

BtnPause=41,65 - Button to Pause -

;

BtnStop=71,65 - Button to Stop -

;

BtnOpen=191,65 - Button to Open -

;

BtnNext=131,65 - Button for Next Chapter -

;Movie name

Txt1=63,30

;Maximum allowed width, if this line is not present -> auto

Txt1MaxSize=230

;

Txt2=305,30

;Movie size & fps

Txt3=63,46

;status (play, stop ...)

Txt4=420,30

;Time

Txt5=285,46

;Repeat

Txt6=420,46

;x, y, w, h – coordination of pixel, length and height of the position bar - (w,h is ignored if TrackKind=HB)

TrackBar=41,97,510,7

;Track bar kind, H-Horizontal, V-Vertical, HB-Custom bitmap horizontal

TrackKind=H

 

;If TrackKind=HB, name of the bitmap that wiil be used

;TrackBitmap=seekb.bmp

BtnExit=544,2

;Volume position and size, rectangle Left,Top,Right,Bottom

Volume=51,120,100,140

;In case of
;VolumeKind=CH -> x,y,xmax
;VolumeKind=CV -> x,y,ymax
;x,y are postion of volume button, xmax(ymax) is x(y) postion to where button is allowed to move

;Volume=306,67,360

 

;If defined -> Volume style: CH-Skinnable button horizontal, CV- -||- vertical
;VolumeKind=CV

VolumeKind=CH

Name of bitmap files for volume button -> BtnName[n|d|u].bmp
;n-Normal picture
;d-Picture when button is pressed
;u-Picture when mouse moves over
;In this case full names will be VolBtnn.bmp,VolBtnd.bmp,VolBtnu.bmp -> This 3 pics should be present 

VolumeBtn=VolBtn

;About – “About” button doesn't exist for the moment, that 's why we must define this options for the click area to make appear the dialog box “About” -

About=522,5,539,15

;

;Additional buttons
;Number of additional buttons

ExtrNum=7

;Button definitions
;BtnX=Xpos,Ypos:A[;Description]
;X=Button number
;Xpos=X positon
;YPos=Y position
;A=Action:
;1=Preferences
;2=Playlist
;3=Load subtitles
;4=Skins
;5=Open audio file
;6=Hide
;7=Repeat
;8=Time/Frames
;20=Equalizer
;21=Add bookmark
;22=Edit bookamrk
;23=Full screen switch
;24=Desktop mode
;25=
;26=Pan scan
;27=Custom Pan scan
;28=Always on top switch
;29=Aspect ratio cycle
;30=Volume up
;31=Volume down
;32=DSP Plugin setup
;33=Chapter viewer
;34=Next chapter
;35=Prev chapter
;
;Image file must be named BtnX[n|d|u].bmp
;X=Button number, n=normal, d=button down, u=mouse over

;ex: Btn1u.bmp -> this is picture to show when mouse is over button
;Line below, create button at position 24,40 with images Btn1n.bmp, Btn1d.bmp, Btn1u.bmp
;and action 23 -> Full screen switch        

Btn1=242,65:2; Playlist

;

Btn2=273,65:7; Repeat

;

Btn3=374,65:3; Subtitles

;

Btn4=409,65:8; Time/Frames

;

Btn5=442,65:23; Full Screen switch

;

Btn6=477,65:28; Always on top switch

;

Btn7=510,65:4; Skins

;the yellow expressions aren't obligatory. In fact, that defines description that will be shown when mouse is over button
;

 

 

[Fonts]

 

;N-Normal, B-Bold

Txt1=Arial,8-N

Txt2=Arial,8-N

Txt3=Arial,8-N

Txt4=Arial,8-N

Txt5=Arial,8-N

Txt6=Arial,8-N

 

[GUI]

 

;All following colors are defined by hexadecimal option

MenuBackClr=8DDEFF - background color for the menus -

MenuBackClrIco=00C4FF - background color icons in the menus -

MenuSelBackClr=009DE0 - background color of selected texts in the menus -

MenuFontClr=000000 - texts color in the menus -

MenuSelFontClr=000080 - color of selected texts in the menus -

MenuDisFontClr=808080 - color of unactivated texts in the menus -

 

[FullScreen]

 

Enable=0

 

Bitmap=fsback.bmp
; B-Bottom, T-Top 1-Left, 2-Middle, 3-Right
; Only bottom is currenty supported
Position=B,2

VolumeKind=CH
Volume=428,8,458

VolumeBtn=fsVolBtn

TrackBar=12,11,354,9
TrackKind=H
;TrackBitmap=seekb.bmp

; 10 - Play
; 11 - Pause
; 12 - Stop
; 13 - Prev
; 14 - Next
; + definitions above
NumButton=3
Btn1=sambtn1;370,8:10
;Play
Btn2=sambtn2;388,8:11
;Pause
Btn3=sambtn3;406,8:12
;Stop
; the yellow expressions aren't obligatory. In fact, that defines description that will be shown when mouse is over button

 

[Text]

 

Author= - here, to put your name and/or your e-mail , etc… -

Description= - here, to put skin name and eventually a short commentary… -

 

 

 

To finish, this is an example of SKIN.INI file for the skin FIRE.BSZ :

 

 

[Settings]
MainAnySape=1
ButtonAnyShape=0
MainTransClr=000000
ButtonTransClr=000000
[Colors]
PosBackClr=FFD500
PosForeClr=FF6F00
FontClr=000000
VolumeClr=000000
PlayLBG=FF6F00
PlayLTX=FF0000
[Position]
BtnPrev=185,179
BtnPlay=70,179
BtnPause=148,179
BtnStop=110,179
BtnOpen=258,179
BtnNext=222,179
Txt1=102,91
Txt1MaxSize=230
Txt2=300,91
Txt3=102,108
Txt4=460,91
Txt5=300,108
Txt6=460,108
TrackBar=330,140,220,7
TrackKind=H
BtnExit=500,53
Volume=303,181,345
VolumeKind=CH
VolumeBtn=VolBtn
About=472,53,491,71
ExtrNum=7
Btn1=70,145:2
Btn2=105,145:7
Btn3=142,145:3
Btn4=178,145:8
Btn5=214,145:23
Btn6=250,145:28
Btn7=284,145:4
 [Fonts]
Txt1=Arial,8-B
Txt2=Arial,8-N
Txt3=Arial,8-N
Txt4=Arial,8-N
Txt5=Arial,8-N
Txt6=Arial,8-N
[GUI]
MenuBackClr=FFD500
MenuBackClrIco=F77E00
MenuSelBackClr=FF6F00
MenuFontClr=FF0000
MenuSelFontClr=000080
MenuDisFontClr=808080
[Text]
Author = DIVXACCRO on http://divx-fr.com                        e-mail : v99gamba@aol.com                                                 
Description = FIRE...opposite of ICE...

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TRANSFORMATION into Skin file (.BSZ)

 

Once all created files, we must compress with WINZIP, by example, giving a "speaking" name in ZP file ZIP : FIRE, ICE, EGYPTIAN…

 

Then, it only takes one to change extension ZIP into BSZ and to put on this file in "Skins" folder of BSPLAYER and so on !!!

 

Look this picture to see some example  :

 

 

 

 

So, it's finished and I hope that it's clear !!!

 

 

 

Download my Skins :

Fire

Ice

Psychedelic

 

mail to creator of this tutorial: V99gamba@aol.com