Official BS.Player forums  

Go Back   Official BS.Player forums > Main forum > BS.Player Skins and Skinning

BS.Player Skins and Skinning Comments on skins, new ideas, skinmaker, skinmaker documentation, or anything else concerning BS.Player skins

Reply
 
LinkBack Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 4. Tizio’s SkinMaker v.1.07 – new Manual 2012.

Tizio’s BSP SkinMaker v.1.07 – new Manual 2012. (By SergeNL, march 2012 v.1.0.)

Creating a Skin for BS.Player is a nice ‘creation-game’, ending in a fine useful product.
Editing a background image and buttons, and puzzling a bit, you produce a real mediaplayer.
Discovering the fun of Skin making, made me write a few supporting manuals.

Apart from the graphical design in a photo-editor, there is the technical design of the player:
a text file “Skin.ini”, with codes for button location and functions, volume slider, colours, etc.
You can create Skin.ini manually in Notepad, ór use Skinmaker to do that for you.
Both ways are good. But for beginners the easiest way to learn and to produce may be this:

Start reading the first parts of my manual “Making a very simple skin” about manual design.
(not posted yet. wait a day or so)
Once you’ve understood some basics, switch to this Skinmaker manual again to make a Skin.
Switch back to manual design later, for things Skinmaker can’t do, or to solve any problems.
You can design in Skinmaker and afterwards improve the Skin with Extended Panels or more.

-> Consider Printing this manual or use two monitors, to avoid switching all the time..
(This manual is currently on the Skin-forum, but will be as .Doc or .Pdf on the website soon.)

Skinmaker is a fine and easy tool, showing the design, and a clear layout of options.
Starting in Skinmaker looks a bit like preparing a table for a top dinner..
You bring your own tablecloth and plates and glasses, and start grouping them on the table.
Then you replace, improve, regroup, and refine everything.. The sky is the quality limit here..
You’ll go on, until it looks all fine to handle any audio- of video-dish that may be served..

1. Skinmaker can..
2. Skinmaker cannot..
3. Download and Install.
4. Load a Skin in Skinmaker.
5. Create-Edit a Skin in Skinmaker.
6. Find New Button Images.
7. The Full Screen Skin.
8. A New Skin.
9. More Info.

(All these Links are to posts in this Topic-thread. The Manual has 2 pages.)

Last edited by SergeNL; 29th March 2012 at 06:24 PM.
Reply With Quote
  #2 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 1. Skinmaker can..

1. Skinmaker can..

* Create a Skin for BS.Player out of your main image and all button image files.
* Load and Edit Skins, to study skin-making, or to improve existing skins.
* Extract Buttons from BSZ-skin-files, to study their design, or to edit them for a new skin.

Skinmaker creates and edits the text-file Skin.ini, that builds a player from your image files.
(BS.Player reads Skin.ini to see where buttons are placed, and what their function is, etc.)
And at the end Skinmaker compiles a complete BSZ-skin-file from your images and Skin.ini.

Skinmaker can edit Skins for BS.Player v 2.xx (Skin.ini, or SkinFS.ini for the Full-Screen-panel).
It also can edit Skins for BS.Player v 1.xx (Skinv1.ini, or SkinFSv1.ini for the Full-Screen-panel).
.

Last edited by SergeNL; 29th March 2012 at 06:26 PM.
Reply With Quote
  #3 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 2. Skinmaker (1.07) cannot..

2. Skinmaker (1.07) cannot..

* Skinmaker cannot create or edit any image files for the main image or buttons.
Skinmaker just uses the images you load. (See chapter 6., how to find images.)

* Skinmaker cannot handle Extended Panels in BS.Player, like in Base-Skin on the right.
The last version 1.07 from 2007 doesn’t support this, and may refuse to load the Skin.
If you load such skins, and save changes, áll codes for extended area’s in Skin.ini will be lost!!

It is a challenge to create such extended panels, by manual edit of Skin.ini in Notepad.
But once you start with that, NEVER use Skinmaker again to edit that Skin!
(Remember to make Backups of Skin.ini or the whole skin, by copying it to a different folder.)

* Skinmaker cannot edit the Media Library, the Playlist, and the Equaliser.
Tizio planned support for it, but did/could not realise it (yet). You can edit them manually.
Once you’ve understood skin making, you will easily find out how. (I might write a manual)

* Skinmaker cannot handle 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.
If you click one in Skinmaker, a popup says: “Run-time error ‘380’: Invalid property value”.
The Workaround: See chapter 5. Create-Edit a Skin in Skinmaker > Buttons > last note: Issue2.

The good news: Skinmaker is a very good tool. And what it can’t, you can do manually later.
.

Last edited by SergeNL; 29th March 2012 at 06:39 PM.
Reply With Quote
  #4 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 3. Download and Install.

3. Download and Install.

System requirements” for Skinmaker: None, I guess.. (but install BS.Player Free or - Pro)
It is very light, and will probably work on every Windows system.
It was made for Win95/98/ME/XP, but even works on my Windows7 - 64 bits system.
(The Test-function doesn’t work in my Win7 (BSZ-error), but I test using BS.Player itself.)
So Skinmaker will probably work on Vista, and even on server-versions of Windows.
Skinmaker is Freeware. Tiziano: Thanks! :-)

Download “BSP SkinMaker 1.07.zip” at the bottom of this page (with Tizio’s version info.).

Install: Unzip the file to a folder. That’s all.
There is no installation program. Copy the folder to a place, where you can find it.
A good place could be the BS.Player installation folder, because the Skins-folder is nearby.
Start Skinmaker by double-clicking BSP_SkinMaker.exe.
You also can create a shortcut Icon yourself :
Right-drag Skinmaker.exe from Explorer to the Start-Menu Button, or to the Desktop.

Language? Menu Bar > Select Language > English, French, Italian, Portugese, Polish, Swedish.

Tizio warns, an error may occur: Msvbvm60.dll could be missing. (a small file, about 1,5 MB.)
This Windows-file should be in C\Windows\System32. It can be downloaded at Microsoft.
.

Last edited by SergeNL; 29th March 2012 at 05:16 PM.
Reply With Quote
  #5 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 4. Load a Skin in Skinmaker.

4. Load a Skin in Skinmaker.

* Download This Skin (All You Need - Version Of Kiss Skin, by Nir Segal).
You can download any skin you like Here. But I chose this one as an example because:
It is clear and has many buttons and functions to experiment with, and enough space too.
It’s Skin.ini is simple, and does not contain any confusing codes like for extended area’s.
It is a clone of “Kiss 2” by Frapan, a variant of “Kiss 1.0”, and very good for experiments.

Note 1: “Sample_Skin” (download Here), is too advanced for Skinmaker and quite complex.
It is very informative for advanced users, because of the many notes in Skin.ini.
Loading it in Skinmaker can be useful too, but Skinmaker will refuse it, until you do this:
Open Skin.ini in Notepad. Cut out “:pause” at Btn1 (Play). Exit and save changes in Notepad.
But if you save anything in Skinmaker, the many codes for Extended Area’s will all be lost.
Note 2: all standard skins included in BS.Player gave some kind of problem in Skinmaker.

* Install Skin. In Explorer, find the download “All_You_Need_Version_Of_Kiss_Skin_.bsz”.
Right-click it > Install Skin. But if that option isn’t there, copy the bsz-file to your Skins Folder:
That usually is here: C\ Program Files (x86) \ Webteh \ BSPlayer (Pro) \ Skins.

* Try the new skin in BS.Player itself first. Start BS.Player. Right-click it > Options > Skins.
In that Preferences-window, click the All-You-Need Skin.
Load some audio and video files, and play a bit to get familiar with the Skin and its buttons.

* Load the BSZ Skin file in Skinmaker.
Start Skinmaker. (Double-click Skinmaker.exe in Windows Explorer, or the Icon you made.)
Menu Bar > File > Open > find and select the Skins Folder. Double-click “All-You-Need..BSZ”.
You can also drop the BSZ-file from Explorer on Skinmaker.
A popup will appear. Click “Extract”. Now you see the loaded Skin in Skinmaker.

* Where are the Skin files?
The extraction created a subfolder in the Skins-folder, with the same name as the BSZ-file.
The subfolder itself is also a Skin, containing all images and Skin.ini. (see Windows Explorer)
Skinmaker uses that folder and the Skin.ini in it. You can edit and add images in that folder.
Changes will be saved to Skin.ini in that folder. Skinmaker does not edit the original BSZ-file.

* Load the Skin again? Load Skin.ini from the folder, NOT the original BSZ-file:
So if you edit, save changes, and close Skinmaker, next day open your work like this:
File > Open > Browse to the subfolder with the same name as the BSZ-file > Open Skin.ini.
(So do NOT open the BSZ-file again. You would extract again, overwriting all your files.)

BS.Player will show the Skin twice in the Skin-List now, because it is twice In the Skins-Folder:
As a BSZ-file, ánd in Folder-format. A Small Bug: You can click both, but BS.Player will
always show the most recent version of the Skin. (the version with the latest time stamp):
That is the BSZ-file if you created that last, or the Folder-version, if you have been editing.
This may give the impression Skinmaker saves changes to the BSZ-file too. But it does not.
To see both in BS.Player, rename the BSZ ór the Folder a bit, and renew the Skin-window.
You could also delete the BSZ-file. The folder version doesn’t need it.
.

Last edited by SergeNL; 29th March 2012 at 06:57 PM.
Reply With Quote
  #6 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5. Create-Edit a Skin in Skinmaker.

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.)

Last edited by SergeNL; 29th March 2012 at 05:57 PM.
Reply With Quote
  #7 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5a.* Save Changes and Test.

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”.
.

Last edited by SergeNL; 29th March 2012 at 04:56 PM.
Reply With Quote
  #8 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5b.* Main Image.

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.
.
Attached Images
File Type: jpg 4b. Image - Main Window.jpg (45.7 KB, 5 views)

Last edited by SergeNL; 29th March 2012 at 04:57 PM.
Reply With Quote
  #9 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5c.* Button Files.

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)
Attached Images
File Type: jpg 4c. Image - Buttons.jpg (79.2 KB, 3 views)

Last edited by SergeNL; 29th March 2012 at 07:05 PM.
Reply With Quote
  #10 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5d.* Button Options.

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)

Last edited by SergeNL; 29th March 2012 at 07:15 PM.
Reply With Quote
  #11 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5e.* Button Texts.

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.
.
Attached Images
File Type: jpg 4d. Image - Button Texts.jpg (40.9 KB, 3 views)

Last edited by SergeNL; 29th March 2012 at 08:16 PM.
Reply With Quote
  #12 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5f.* Objects showing Text or Numbers.

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. :-)
.
Attached Images
File Type: jpg 4e. Image - Text Objects.jpg (56.8 KB, 3 views)

Last edited by SergeNL; 29th March 2012 at 08:26 PM.
Reply With Quote
  #13 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5g.* Objects showing Text or Numbers – Fonts.

5g.* Objects showing Text or Numbers – Fonts.

For every Object you can choose: font Type / Font Style / Font Size / and Colour.
(Note: “Color” is American. “Colour” is English.)
You can choose from any of the installed windows fonts. And there are plenty.
But the resolution of the player is very low, so often you can hardly see the difference.

More Fonts? In Explorer you can copy non-standard Windows font files to your skinfolder.
Then add these fonts in Skinmaker, under “Main Window”, on the top-left.
Then (I guess) these fonts will appear in the Font-List, when you choose a font for an object.

Warning! A different display of the Size of Fonts and Numbers in Skinmaker and BS.Player!
Designing usually means: running into all kinds of problems to solve all of the time. :-)
So I was happily designing a Skin (grinn.. meaning stuck in some problem :-), when I saw this:
On my PC, fonts and numbers are displayed a lot larger in Skinmaker, than in BS.Player!

The cause was the Display Resolution in Windows. That affects Skinmaker, but not BS.Player.
Windows can display all windows and fonts larger or smaller on your monitor, as you like.
But especially on laptops I’ve seen very small displays. That can be changed.
In Windows7 I didn’t see small displays anymore. They may have changed the default value.

But on my Win7 PC Skinmaker displays fonts/numbers larger in the image than BS.Player.
This makes designing a bit more difficult. You could solve it by changing the Resolution..
But this will change the display of everything in Windows. Better leave it, and live with it. :-)

But you can try it. Changing certainly is useful for those that suffer from a very small display:
In Windows7: Right-click the Desktop > Personalise > Display Adapter (or something :-).
The standard setting is 125%. Better leave it that way. But at 100% the problem is gone.
In XP: Right-click the Desktop > Properties > Tab Settings > Advanced > Display (I think).
The standard setting is 96 dpi. 120 dpi is better anyway..
I didn’t have the problem in XP, but can’t remember if my setting was 96 or 120..
.
Attached Images
File Type: jpg 4f. Image - Text Objects-Fonts.jpg (44.5 KB, 3 views)

Last edited by SergeNL; 29th March 2012 at 09:21 PM.
Reply With Quote
  #14 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5h.* Time Line and Volume Slider.

5h.* Time Line. (Window “TrackBar”)
You know what? I won’t write anything about it. :-) It’s a nice game to try and to find out.
There are quite a few options. Just try and see the changes in All-You-Need.

Note: you can not see changes in Border Colour in the image in Skinmaker.
But you will see it in BS.Player. Load or reload the Skin.
Perhaps the Test-function (Ctrl+F11) will show it. (That doesn’t work on my Win7 64 bits.)

5h.* Volume Slider. (window “VolumeBar”)
I won’t write anything about this either. Just try and find out.
In All-You-Need it is just a button you can move. The triangle bar-shape is part of Main.bmp.
But all options for editing are exactly the same as in the Time Line. Just try and find out..
Note: All-You-Need does not use a border. But if you do, see the note under Time-Line.
.
Attached Images
File Type: jpg 4g. Image - Time Line and Volume Slider.jpg (60.0 KB, 5 views)

Last edited by SergeNL; 29th March 2012 at 05:08 PM.
Reply With Quote
  #15 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5i.* Colours of the BSP right-click Menu.

5i.* Colours of the BSP right-click Menu. (window Display & GUI, section GUI)

In the field under GUI, next to “Name”, you can choose 7 Menu items to colour.
Again: Choose one. Check the checkbox. Use the colour-button to choose a colour. Save.

In BS.Player > Preferences > Skins. Next to the Skin List, check: Menu with Skin.ini colours.
(I uncheck the second and fourth option there.) Close and restart BS.Player.
Right-click BS.Player to test the new appearence of the Menu.

You can edit all menu colours this way. (Not all worked. I haven’t found out why yet. :-)
The All-You-Need Skin doesn’t have any especially coloured menu items. (I think)

Playlist colours can be edited too, it says. But it doesn’t work here, and will probably not:
Skinmaker was designed for BS.Player 1.xxx. But there will be a way in manual design.
.
Attached Images
File Type: jpg 4h. Image - Colours of the Right-click Menu.jpg (19.3 KB, 3 views)

Last edited by SergeNL; 29th March 2012 at 08:45 PM.
Reply With Quote
  #16 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5j.* Transparency of the whole skin.

5j.* Transparency of the whole skin.

The whole skin can be a bit transparent. This is not part of Skin-design, but a feature in BSP.
In BS.Player > Preferences > Skins: next to the Skin List, there is a Slider for Transparency.
.

Last edited by SergeNL; 29th March 2012 at 08:47 PM.
Reply With Quote
  #17 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5k.* Add your comment or info to the Skin.

5k.* Add your comment or info to the Skin. (window “Display and GUI”, section “Text”.)
The text will be shown in the BS.Player Skin-window, and on the website if you upload it.
.
Attached Images
File Type: jpg 4i. Image - Text-comment.jpg (38.6 KB, 3 views)

Last edited by SergeNL; 29th March 2012 at 05:11 PM.
Reply With Quote
  #18 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 5l.* Creating a Skin File in BSZ-format.

5l.* Creating a Skin File in BSZ-format.

A BSZ-Skin file is just a ZIP-file with all image files and a few files like Skin.ini.
BSZ = “Bsplayer Skin Zipped”. The extension .Zip is renamed to .BSZ.

Make a BSZ-file. It can be done in two ways:

1. Zip all files to a Zip-file named xxx.Zip. Then rename it to xxx.BSZ.
Note: be sure to zip the files themselves directly, so NOT the folder with the files in it!
(BS.Player can read a BSZ-file, and can read a subfolder with image files + Skin.ini, but
BP.Player can NOT read a BSZ-file with a zipped folder in it, nor a BSZ-file in a subfolder.)

2. In Skinmaker save the Skin first. Then in the Menu Bar: File > Create BSZ from this Skin.
In the upcoming window; check all files, or uncheck the files you don’t want.
Check the box “Recurse Subfolders” to include subfolders and their files in the Skin.
Click on the Browse-Button. Type a name for the Skin. Browse to a Folder. Click Save.
Now click the Button “Create” to create the BSZ-file. Use Explorer to find the file.

Unzip a BSZ-file. (to find Button files) It can be done in two ways.
1. Rename xxx.BSZ to xxx.ZIP, and unzip it.
2. Load the BSZ-file in Skinmaker, and create a subfolder when asked.

Change a BSZ-file: 1. Unzip it (two ways). 2. Change the Skin. 3. Zip it again (two ways).

Backup notes..
Like any work you spend hours on: make backups regularly.
Backup: Just copy the BSZ-file, or Subfolder (= Skin in folder-format) to any other folder.
Restore a backup: Copy it back to the Skins-Folder.
To see a restored Skin in BS.Player: Re-start the Skins-window (Alt+S) and click on the Skin.
You can also copy the entire Skins-Folder, and copy it back later to restore the backup.
.

Last edited by SergeNL; 29th March 2012 at 08:53 PM.
Reply With Quote
  #19 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 6. Find New Button Images.

6. Find New Button Images.

Skinmaker does not create a background image or any button images!
And to learn how to create them, is not the finest way to start with Skin-making.
But you will become more curious of that, after you decide you like Skin-making..
Then the easiest way to start is, to collect buttons you like, and try to edit them.

But for now: where to find buttons?
I tried to find free button collections, but didn’t find them fast.
So for a start I ‘borrowed’ some buttons from installed skins. And this is good for beginners:
Go to www.bsplayer.com , click Skins, and download a skin with buttons you like.

If the skin is a Zip-file, containing button images, you can unzip it to find the buttons.
If the skin is a BSZ-file, you can load it in Skinmaker. It will unzip all images to a folder.
You could also rename xxx.Bsz to xxx.Zip, and unzip it yourself.

Note: the creator has copyrights. I would not upload a new skin with these buttons.
Perhaps the creator doesn’t mind, because there is no money involved.. But still..
But you can edit existing buttons for a new skin in a photo-editor.
This still might be ‘disputable’, but ‘borrowing’ this way is quite usual in any form of art..

-> Images must be in BMP-format. JPG-images can be converted to BMP in a photo-editor.
. . Try right-clicking a JPG-file menu in Windows Explorer. There may be a Convert-option.
-> Rename the background image to Main.bmp. It’s easier for recognition.
-> Name buttons after their function, for easy recognition in the Buttons List and in Explorer.
-> You MUST add a N at the end of the name of normal buttons. (or buttons with 1 image)
. . BS.Player does not show buttons without it, and Skinmaker refuses to import them.
-> Buttons that change during mouse-over or clicks, have more images. Copy all of them.
. . Example: the Play-button has 3 images: PlayN.bmp, PlayU.bmp, and PlayD.bmp.
. . N = Normal view. U = Mouse-over view. D = Click view. A = on in on/off buttons.

Creating U-, D-, or A-variants. This is easy, if you only have one button image.
Edit your button, and rename it from xxx.bmp to FunctionN.bmp. (desired button function.)
Copy FunctionN.bmp to another folder. Rename it there to FunctionU, and copy it back.
Rename FunctionU.bmp in that other folder to FunctionD.bmp, and copy it back.
Rename FunctionD.bmp in the other folder to FunctionA.bmp (if wanted), and móve it back.
So all 4 variant are in your Skinfolder now! (or 3. Mostly you don’t need the A-switch variant)
Now edit the U- and the D-variant (and A) a bit in a photo-editor, for their U- or D-function.
Add the Button in Skinmaker, and save changes. Test how it looks.
.

Last edited by SergeNL; 29th March 2012 at 08:58 PM.
Reply With Quote
  #20 (permalink)  
Old 29th March 2012
Member
BS.player Regular User
 
Join Date: May 2010
Age: 53
Posts: 49
Rep Power: 0
SergeNL is on a distinguished road
Default 7. Full Screen Skin.

7. Full-Screen Skin.

Full-Screen Control Panels are the smaller BS.Player panels, you can see in full screen video,
when you move the mouse to the top or the bottom of the screen.

They are made like normal skins: a main image, button files, and an ini-file with codes.
All files are in the same subfolder as the files of the Skin for the main control panel.
The name of the ini-file here is always Skinfs.ini. Name the background image fsmain.bmp.
The normal buttons are used. But if you have special ones for this, call them like fsPlay.bmp.

Differences, compared to the main Skin:
* Transparent Buttons are not supported in full-screen Skins, but Any-Shape Buttons are.
* You can add just one Text-Object: ‘Status’: meaning hours/minutes/seconds.
* A Position-section to choose where the Panel will appear if you move the mouse up/down.
(* Modify Extension, about the file-format of Buttons. Forget about it, and just use BMP’s.
If BS.Player ever supports JPG, use JPG’s for both skins. Type JPG in the Skinmaker screens.
But note: the extension is only stored in Skin.ini, not in Skinfs.ini.)

Open the FS-Skin of All-You-Need in Skinmaker:
Menu bar > File > Open > Browse to the All-You-Need folder > double-click Skinfs.ini.
If you open a new BSZ-file, choose “Full Screen Skin” in the Extraction-window that popups..
Then click Extract. This will extract all files for both skins to a subfolder, whatever you chose,
but now Skinmaker will open the full-screen window, and the Full-screen Skin:

Just edit everything and try the results, like you did in the Skin of the main panel.
.

Forum Note: The Forum-form of this Manual has 2 pages.
If you use the standard-setting, this is the last post on page 1.

Screenshots: in reality there is only one window.
I made 2 screenshots to improve the quality: There is a 97KB limit for JPG's in the Forum.

Last edited by SergeNL; 29th March 2012 at 09:08 PM.
Reply With Quote
Reply

Tags
manual, skinmaker, tizio’s, tizio�s, v107,

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules

LinkBacks (?)
LinkBack to this Thread: http://forum.bsplayer.com/bs-player-skins-skinning/16619-4-tizioa-s-skinmaker-v-1-07-new-manual-2012-a.html
Posted By For Type Date
Official BS.Player forums - Powered by vBulletin This thread Refback 21st May 2012 09:04 PM
Odtwarzacz multimedialny, odtwarzacz filmw, odtwarzacz YouTube, odtwarzacz wideo, odtwarzacz AVCHD, odtwarzacz divx, darmowy odtwarzacz - BSPlayer.com This thread Refback 2nd May 2012 08:35 PM


All times are GMT +1. The time now is 12:20 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0 PL2
Ad Management plugin by RedTyger

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20