4. Tizio’s SkinMaker v.1.07 – new Manual 2012.

[SergeNL]

5. Create-Edit a Skin in Skinmaker.

The easiest way to study Skin-making, is to load an existing Skin, and edit a few things.
The easiest way to create a new Skin is to load an existing Skin, and edit éverything.
So I’ll describe it all at once. It’s good for beginners too: just skip some details.
Follow the steps below, to see how Skinmaker works.

* Save Changes and Test.
* Main Image.
* Buttons. (files, options, texts.)
* Objects showing Text or Numbers. (Options, Fonts.)
* Time Line.
* Volume Slider.
* Colours of the BSP right-click Menu.
* Transparency of the whole skin.
* Add your comment or info to the Skin.
* Creating a Skin in BSZ-format.
.

(Skinmaker Screenshots. Click to enlarge.)

[SergeNL]

5a.* Enlarge the Skin Image.
Load the All-You-Need Skin (see previous point). That is a good one to start with.
Move the mouse over the skin image in Skinmaker. Click when it becomes a magnify glass.
You’ll see a large version of the skin now. Drag that window a bit to see the whole player.

You can move almost any object in the skin by dragging it. Just try it. Make a mess of it. :-)
Everything you can’t move is part of the main background image.
(Note: during dragging, you normally just see a rectangle move. But if you want to see the
whole object move during dragging, press Ctrl on your keyboard while dragging.)

After this: Close the Skin (Menu Bar > File > Close). Do NOT save changes. Reload the Skin.

* Save Changes and Test.
Move one Button a bit. Save the change like this: Menu Bar > File > Save (or press F5).
To see the change: Menu Bar > File > Test Skin. (or Ctrl+F11) BS.Player should appear now.

Note: This Test-function didn’t work on my Windows7 64 bit. But the alternative is faster:
Start BS.Player > Right-click it > Options > Skins. Click the All-You-Need-Skin in the Skin-List.
Every time you click on it, it will reload the Skin. So you see changes you saved in Skinmaker.
So I keep that Skin window open for tests, and move it far to the side.
When Skinmaker is on top, I still see a bit of the the Skin-List window on the side.
So I can easily click on the Skin again to see BS.Player with the renewed Skin immediately.

When you close a Skin, it will ask to save changes.
(It will also ask this, if you loaded the Skin and did nothing more than selecting a button.)

You can view Skin.ini itself: In Skinmaker > Menu Bar > View > “View Skin File”.
.

[SergeNL]

5b.* Main Image. (top-left window “Images”, section “Main Window”.)
The background image is an Image-file in the Skin’s folder, usually called “Main.bmp”.
It may have any name, but if Skin.ini doesn’t specify a name, it assumes it is “Main.bmp”.
Top-left you see the folder location of Main.bmp. That subfolder contains all Skin files.

Changing the image is easy. Find your own BMP-file. Copy it to the (sub)folder.
In Skinmaker, use the Browse-button to choose your new image. Save changes (F5).
If the image is too small, some buttons will not show. Resize and edit it in a photo-editor.
Better is to rename your new image to Main.bmp, replacing the old one.

Main image in JPG-format?
Skinmaker supports JPG, but BS.Player does not. (GIF files don’t work too.)
I tried it.. The Browse Button for the Main image in Skinmaker does not show JPG-files..
But you can add the name of the JPG-file manually in Skin.ini, on the 6th line.
Now Skinmaker will load it, and will even save changes.
But BS.Player does not load it, and will use the main Image of the Base-skin instead.
Change the extension in Skin.ini, or in Skinmaker’s Buttons-section didn’t work.
(Same story for buttons. You can load them in Skinmaker, but BS.Player can’t handle them.)

The “Any Shape” checkbox is not checked. The Skin will show the whole rectangular image.
But Skins can have any kind of shape:
The main image will still be a rectangle, but part of it is completely transparent and invisible.
In “Any Shape” mode, everything with the same colour as the top-left pixel will be invisible.

Changing the colour of the top-left pixel by editing or replacing Main.bmp, can be a problem:
Skinmaker will do fine after reloading the skin, but BS.Player may still use the original colour:
The result looks terrible: the new invisible-colour suddenly is visible, and there may be gaps.
In Explorer, go to the folder of the Skin and delete rgn.dat and rgnfs.dat. Reload the Skin.
These Dat-files ‘remember’ the invisible colour, to speed up the process of loading a skin.
You can delete them, because BS.Player will generate new ones, when it uses the Skin.
(So use folder-skins at least once before making a BSZ-skin out of it. BS.Player can’t edit BSZ.)

To change the colour of the transparent area in Skinmaker, as displayed in the image:
Double-click the area and pick another colour. Or right-click it, to restore the default colour.
This only changes the view in Skinmaker for comfort during design, so not the Skin itself..
The colour BS.Player uses for transparency will always be the top-left pixel of the BMP-file.
.

[SergeNL]

5c.* Button Files.

Button Images. (Mouse-over and click effects)
Buttons are BMP-files in the Skin folder too. One Button can have 3 or 4 image files like:
PlayN.bmp = Normal appearance of the button.
PlayU.bmp = Mouse-over appearance of the button.
PlayD.bmp = appearance while clicking on the button (down).
PlayA.bmp = (never used for the Play-button) It’s for the on-position of on/off buttons.

BS.Player recognises these N, U, D, and A variants automatically, and will use them.
Skinmaker does not mention these variants, because there are no extra options for them.
There may be just one button. Then it’s image file name Múst end with an N!
Skinmaker lists all button names without the extra N. (or U or D).
You can replace or edit all images in a photo-editor. Then reload the Skin in Skinmaker.

Buttons in JPG-format?
Skinmaker supports Buttons with JPG-extension, but BS.Player does not. (currently v.2.61)
In the Buttons-List you can change the extension to JPG. Then you can click the Add-button.
A warning will say, ALL Buttons in the list (BMP-files) will be removed from the List!
Then you can add a JPG, if there are no spaces in the name, and an N is added to the name.
This all works fine. But BS.Player doesn’t recognise them: It shows a small grey spot instead.

Copy Buttons for tests.
After loading a BSZ-file in Skinmaker, you find all Button-images in the subfolder.
You can copy them to another Skin folder, to use them in another Skin, or to study them.
Be sure to copy all variants of a Button. And think of copyrights. See chapter 6.
.

Button Options: See next post. (Click to enlarge image)

[SergeNL]

5d.* Button Options.
(top-left window “Images”; sections “Buttons List”, “Customise Buttons”, and “Coordinates”.)

Topics: Buttons-List / Buttons-Type / Button-Actions / Coordinates /
Button Priority at Overlap / Add-Remove Buttons.

Click on the Play-button in the Skin Window.
The Play-button will be automatically selected in áll 3 window-sections on the left.
You can move the Button by dragging, but also by typing coordinates in the field left-under.

The name “Play” in section “Buttons List” is the actual name of the BMP-file in the folder.
Note, the added N, U, D, or A in the file names, are nót displayed in that List.
Buttons can have any name, but are mostly named after their function to find them easily.
But BS.Player does not recognise their function by their name. They are just file names.

Button Type:
- Normal = rectangular button. (the next two buttons are rectangular too, but..)
- Any Shape = partly invisible. Mouse-over and click will only work on the visible parts.
- Transparent = partly invisible. Mouse-over and click work on the visible ánd invisible parts.

Invisible will be everything that has the same colour as the top-left pixel of the button.
Try the Play button in Skinmaker. Change it from “Normal Button” to “Transparent”.
In the image you’ll see, how a few areas at the top of the button are invisible now.
It isn’t much. For a better example, select one of the black buttons left-under, and try again.
Transparency or Any Shape are often used to round up buttons. (transparent corners)
Note: the Full-Screen skin doesn’t support transparent buttons, but does support Any-Shape.

Button Action:
This assigns the real function to the button. The Play-button will get the function Play.
But in fact you could give any button any function, choosing it in in the Action-List.
Note: If a description in the List is not clear, just assign the function to a button, and try it.

The actions-list in Skinmaker is almost complete. As far as I can see, the only thing you
currently can’t do, is make buttons, that directly open a subcategory of Media Library.
And if a new version of BS.Player allows new actions, you can’t assign them in Skinmaker.
(For action numbers in Skin.ini, see my manual for manually editing Skin.ini.)

Coordinates of the button.
To see if buttons are horizontally or vertically aligned, you can look at their “coordinates”.
From the top-left corner pixel of Main.bmp, go 230 pixels to the right and 86 pixels down.
There is the top-left pixel of the Play-button. 230 = “X-coordinate”, and 86 = “Y-coordinate”.
You can click all buttons in the Buttons-List, and look at their coordinates left-under.
To align vertically, all X-coordinates must be the same. And horizontally, all Y-coordinates.
You can type in the fields. Just type a different number, and see the Play-button move.
Of course you can also drag Buttons in the Player-image, but typing can be more precise.

Button priority at overlap. (Buttons Up/Dn.)
Buttons can overlap each other, overlap bars, and overlap objects with text.
Buttons are always shown over Texts and Bars. And Bars are always shown over Texts.
But when buttons overlap each other a bit, you can choose the priority:
Select a button in the “Buttons List”. Use the buttons Up/Dn to move the Button in the List.
You can also right-click a button to move it. The lowest in the list gets priority over the other.
Another reason to move buttons in the list is to group them, to find them more easily.
To see the priority in the image in Skinmaker: Menu Bar > View > “Apply ZOrder to Buttons”.

Add-Remove Buttons.
Removing is simple: Select the button in the Buttons List, and click the Button “Remove”.
But remember: all Button files (N, U, D, or A-variants) will still be in your Skins-subfolder.

Add Buttons. First find new BMP-Button files. (See point 6.) Convert JPG’s to BMP.
Copy the new Button files to the Skin’s subfolder: That usually is here:
C:\ Program Files (x86) \ Webteh \BSplayer (Pro) \ Skins \ ‘Skin Name’ (like All-You-Need).
If the Buttons come from other Skins, be sure to copy all variants (N, U, D, and A if there.)
If the Button is only one image file, be sure to add an N at the end of the file name.

In Skinmaker, in the section “Buttons List”, click the Button “Add”.
Browse to the Skins subfolder. Find and add the button. (just pick the N, U, D, ór A variant)

In the Skin Image, the new Button appears at the top-left corner of Main.bmp.
Find the new Button under in the Buttons-List. Select it, choose a Type and assign an Action.
Right-click on the name of the section “Customize Buttons”, and click “Auto assign..”. Done.

Issue1: Sometimes you don’t see the new added button in the top-left corner of Main.bmp.
It might be invisible area in Main.bmp. Uncheck “Skin Any Shape” in section “Main window”.
Move the button to the visible part of Main.bmp, and check “Skin Any Shape” again. Done.
Alternatively: Select the Button in the List and type some coordinates in the field down-left.
This is not a bug. It prevents you from leaving buttons in area’s that will be invisible later.

Issue2: Skinmaker crashes on buttons with unusually high Action-numbers in Skin.ini.
This is just a small problem with some buttons in a few Skins, after you load them to study.
Skin.ini uses Action-numbers to assign functions to buttons; normally from 0 to 133 or so.
But for some reason there are some very high values for Buttons, like 6500-6505 and 9999.
These Buttons start the Media Library in a special subcategory: Radio, TV, DVD, or Audio.

If you click one in Skinmaker, a popup says: “Run-time error ‘380’: Invalid property value”.
After closing the popup Skinmaker immediately closes. (Restart it and load the file again.)
But as long you stay away from these buttons, you can edit the skin, and save changes.

Two Workarounds, if you want to move such buttons, or make them transparent:
1. Close Skinmaker. Open Skin.ini in Notepad. Search for button numbers like 26,54,0,9999.
Temporarily rename the value 9999 to 0. Save Skin.ini. Start Skinmaker and reload Skin.ini.
Done. You can change the value back later, once the whole design is finished.
2. Close Skinmaker. Open Skin.ini in Notepad. Change the X- or Y-coordinate of the button.
Save Skin.ini. Open Skin.ini in Skinmaker again. (but this is not very practical)

[SergeNL]

5e.* Button Texts.

Button Texts during mouse-over:
If you move the mouse over a button in BSP, a Tooltip and text in the Title Bar appear.
Under “Custom Text” you can type any text in any language you want for a button.
(It can be fun to design a Skin in your own local dialect. :-)

But BS.Player is multilingual, and every good Skin should support that.
Users can choose a language in BS.Player. There are 45 language files in the folder “Lang”.
Code-numbers are used to display the same standard texts in different languages.
In Skinmaker, select the Play-button and “Multilanguage Text”. It says: “$lang.Actions.21”.
Click on that text-button. You’ll see a List, and the word “Play” in your current BSP language.

The easiest way to assign Multilanguage text to all buttons:
First design the Skin, or part of it. Add buttons, and assign actions to them.
Then right-click on the section náme “Customise Buttons”. (It doesn’t look active, but it is.)
It will say “Auto assign Multilanguage Descriptions to Buttons”. Click on it, and you’re done.
Skinmaker will see all assigned button-actions, and will assign the right code to all buttons.
Warning: this will override any custom text you may have assigned to any button.
And if you add buttons later, you’ll have to repeat this.

Choices in Multilangual texts for buttons:
When you clicked on the button with the Multilanguage text, you saw a long List.
It’s the complete language file, with sections for all occasions where BS.Player displays text.
The description for “Play” was in the [Actions]-section, exactly halfway in the List.
But you could choose text from other sections in the List like the [Menu] or [Strings] section.
Sometimes these descriptions can be more appealing. I saw it done in several Skins..

Note: The real Action-number in Skin.ini for BSPlayer is NOT the same as in the Lang-file.
When the real Action-number is 20, the text says “$lang.Actions.21”. (It mostly differs 1.)
This is confusing if you look in Skin.ini. Luckily Skinmaker doesn’t show Action numbers.
.

[SergeNL]

5f.* Objects showing Text or Numbers. (window “Display and GUI”, first 3 sections.)

A Skin can show seven objects containing Text or Numbers:
- Version = Displays the text “BS.Player” and the number of the installed version.
- Movie Title = The Name of the audio or video file loaded in BS.Player.
- Movie Info = Bit-rate and format of loaded audio, or size and frame-rate of video.
- Movie Length = hours/minutes/seconds of the current position and the total length.
- Repeat = Repeat mode setting: off, repeat one, repeat all, repeat random.
- Subtitles = The name of the loaded Subtitle file (language).
- Status = Text saying what the player is doing now.

In the “Display-section”, click in the empty field next to “Name” to see all seven items.
Click one. If the checkbox on the left is checked, the item is shown in the Skin.
Try all. In the All-You-Need Skin you’ll see five items are used. (Version and Status are not.)
If an Item is selected ánd checked, you can choose options for them:

* Coordinates (of the top-left pixel of the object). You can type, of drag objects in the image.

* Subtitle Format. ( I don’t know why this item is here.)
Leave it at the default 2. Format 1 is for BS.Player before build 814. (BSP v.1 or v.2?)

* Max Width: The length of text boxes can be limited. The Value is in pixels. 0 = no limit.
Without a limit, long texts can go as far as the right-edge of Main.bmp.
A limit may give a better layout, and will prevent overlap of objects next to it on the right.
Note: Buttons and Bars have priority over Text anyway, so long texts will go underneath.

Some considerations for a maximum width of Text objects:

a. Horizontal Scroll of: Movie Title, Movie Info, and Subtitle file name:
If the text is too long for a box with a maximum, it will slowly move left-right to show it all.
This is a nice feature, but moving text can be annoying, and you’ll have to wait for all info.
This does not apply to: Version, Status, Movie length, and Repeat. They never scroll.

b. Movie Titles can be very long. These are the real File Names of the Audio or Video files.
If you always want to see all of it, or avoid horizontal scroll, leave a lot of room on the right.

c. Subtitle File Names of SRT-files a.o. can be long too. They are the same as the movie titles.
SRT-files often mention their language at the end of the file name, like: MovieTitle.ENG.srt.
So if you can see the entire file name in BS.Player, you immediately see the language.
This can be very useful, if you cycle between several SRT-files: you see the language at once.
If not – and there are many subtitle files – you have to wait several times. That is annoying.
So if you want to show Subtitle File Names, better have enough room on the right too.

d. Movie Info can be long too. It can be like this. “Movie Size 1640x1100 @ 23.926”.
And in Spanish it will even be: “Tamano de la pelicula 1640x1100 @ 23.926” :-)
Again – especially if you want to avoid horizontal scroll – leave enough room on the right.
(You can also place a button right to it. Long texts will disappear under it, and won’t scroll.)

e. Repeat. BS.Player is Multilangual. Many may use a different language.
Example: “Repeat off” in Spanish is “Repetir Desactivado”. :-)
So leave enough room, or add a maximum width. Luckily Repeat does not scroll.
Spanish may have the longest descriptions. If you make it there, you make it anywhere. :-)
.