|
Skin Specification of Bryht Flash Player
Overview
The skin of the Bryht Flash Player is changeable. We adopt the
standard SVG/JPEG/GIF as the file format of the skin. This makes skin files easier to create.
The SVG, Scalable Vector Graphics, is a XML Graphics standard
sponsored by W3C. please visit http://www.w3.org/Graphics/SVG/
to find out more about SVG.
JPEG and GIF are the most popular image format used on the WEB.
Every skin has one SVG file and a group of images.
The extension of the SVG file should be set to ".bskn".
The package file of a skin should be set to ".zskn".
File Format
The most important file is the SVG file. This file describes the
size and the position of every element on the screen. Each element is identified by
the system through its "id" attribute.
If an id is missed in the SVG file, the corresponding display or action
will be omited. for example, if you don't supply a "flashFileName" element, the
flash file name will not be displayed.
Please see the installed skin files on your Pocked PC to get more
information.
Note: If two elements are in the same position. the later will receive
the click event and the first one will not.
The id used in the SVG file:
| ID |
Type |
Optional |
Description |
| flashFileName |
Text |
yes |
Place to show the flash file name |
| flash |
Rect |
no |
Place to show the flash |
| play |
Rect/Circle |
yes |
Button hotspot |
| gray |
image |
yes |
Image displayed disabled buttonse |
| play_pushed |
image |
yes |
Button image |
| pause |
Rect/Circle |
yes |
Button hotspot |
| pause_pushed |
image |
yes |
Button image |
| playPause |
Rect/Circle |
yes |
Button hotspot |
| playPause_pushed |
image |
yes |
Button image |
| stop |
Rect/Circle |
yes |
Button hotspot |
| stop_pushed |
image |
yes |
Button image |
| prev |
Rect/Circle |
yes |
Button hotspot |
| prev_pushed |
image |
yes |
Button image |
| next |
Rect/Circle |
yes |
Button hotspot |
| next_pushed |
image |
yes |
Button image |
| fullscreen |
Rect/Circle |
yes |
Button hotspot |
| fullscreen_pushed |
image |
yes |
Button image |
| seekBar |
Rect |
yes |
Place where the seek thumb can be moved inside |
| seekThumb |
Image |
yes |
Dragable thumb, seek the play position |
| volumeBar |
Rect |
yes |
Place where the volume thumb can be moved inside |
| volumeThumb |
Image |
yes |
Dragable thumb, control the volume |
Special Requirement
(1)To limit the width of displayed file name, we add a non-standard "max-width"
attribute to the Text Element, for example:
<text id="flashFileName" x="14" y="18" font-family="Tahoma"
font-size="9" fill="#87E018" max-width="200" ></text>
if you don't set the max-width, the text may overflow.
Supported features of SVG
- Inline CSS
- Attributes: position and size, stroke, fill, style, font
- Rect Element
- Image Element, JPEG and GIF format.
- Text Element
- Circle Element
- Ellipse Element
- Line Element
Tools
- Any image editor tool which supports JPEG/GIF format. e.g. Adobe
Photoshop
- Optional free SVG viewer: Adobe Viewer. Download Site: http://www.adobe.com/svg/viewer/install/
- Optional free SVG Edit tool: Sodipodi. Download Site: http://www.sodipodi.com/
- A Plain Text Editor, e.g: Notepad, UltraEdit
- Zip tool. e.g. Winzip, Pkzip
Step by step: How to make skin by yourself
(1) Make all background and button images with the image edit tool
(2) Create a SVG file with the SVG Edit tool
(3) Place images into the SVG file, create necessary rects on the SVG file.
(4) Save the SVG file. Now open it with a text editor, set the proper id of
every element, and add a "max-width=xx" to the Text element which you
want to show the fileName
(5) Test the file by the SVG Editor or by IE which you have installed the SVG
Viewer.
(6) Change extension of the SVG file to ".bskn"
(7) Use a zip tool, e.g. Winzip, Pkzip... to package the files into a zip
file, rename the extension to ".zskn"
(8) Copy the the skin file which the extension is ".zskn" into the Pocket PC and test it.
|
