Tvorba skin∙ pro ZME

Obsah:
  1. Co je to skin
  2. Ulo₧enφ a struktura skin∙ ZME5
  3. Popis souboru skin.ini
  4. Okna
  5. TlaΦφtka
  6. Ostatnφ komponenty



1. Co je to skin

Skin (anglicky "k∙₧e") je b∞₧n∞ pou₧φvan² termφn pro grafickΘ u₧ivatelskΘ prost°edφ programu, kterΘ m∙₧e b²t odliÜnΘ od tradiΦnφho prost°edφ Windows. V∞tÜina program∙, kterΘ pou₧φvajφ skiny, tedy vlastnφ grafickΘ u₧ivatelskΘ prost°edφ, disponuje mo₧nostφ toto prost°edφ zm∞nit. TakΘ Zoner Media Explorer 5 (dßle jen ZME5) pou₧φvß skiny.
dialog Mo₧nosti
Skiny m∙₧ete p°epφnat v dialogu Mo₧nosti (Ctrl+M) v sekci VÜeobecnΘ.
Formßt skin∙ ZME5 umo₧≥uje, aby si Üikovn² u₧ivatel vytvo°il a pou₧φval vlastnφ.

2. Ulo₧enφ a struktura skin∙ ZME5

Ulo₧enφ skin∙ ZME5
Skiny jsou ulo₧eny ve slo₧ce Skins tam, kde je nainstalovßno ZME5 (nejΦast∞ji C:\Program Files\Zoner\Media Explorer 5\Skins\). Ka₧dΘmu skinu odpovφdß jeden soubor s p°φponou ZSK. Ve skuteΦnosti se jednß o p°ejmenovan² archiv ve formßtu ZIP, kter² obsahuje 42 bitmap ve formßtu PNG (komponenty prost°edφ) a soubor skin.ini (popis a vlastnosti skinu). Pro ·Φely vytvß°enφ a testovßnφ skin∙ m∙₧ete tyto soubory umφstit do slo₧ky s p°φponou ZSK (nap°. C:\Program Files\Zoner\Media Explorer 5\Skins\Test.zsk\). Pro distribuci je ovÜem vhodnΘ samotnΘ soubory zkomprimovat do formßtu ZIP a p°ejmenovat na p°φponu ZSK.


3. Popis souboru skin.ini

Soubor skin.ini je textov² soubor popisujφcφ nastavenφ skinu. Sklßdß se ze t°φ sekcφ - Info (informace o skinu), Colors (nastavenφ barev) a Metrics (rozm∞ry). ╪ßdky, kterΘ zaΦφnajφ znakem "st°ednφk", budou ignorovßny a pova₧ovßny za komentß°.
P°φklad souboru skin.ini
[Info]
SkinName=Sv∞tle Üed²
SkinAuthor=ZONER

[Colors]
COLOR_3DFACE=196,205,216
COLOR_BTNHILIGHT=246,255,255
COLOR_BTNSHADOW=146,155,166
COLOR_BTNTEXT=0,0,0
COLOR_CAPTIONTEXT=0,41,118
COLOR_INACTIVECAPTIONTEXT=138,158,178
COLOR_INFOBK=255,243,199
COLOR_INFOTEXT=0,0,0
COLOR_WINDOW=240,244,247
COLOR_WINDOWTEXT=0,0,0
COLOR_MENU=196,205,216
COLOR_MENUTEXT=0,0,0
COLOR_HIGHLIGHT=0,0,128
COLOR_HIGHLIGHTTEXT=255,255,255

[Metrics]
TextButtonLeftSpace=10
TextButtonRightSpace=18
TextButtonPressedOffsetX=1
TextButtonPressedOffsetY=1


Nßsleduje popis vÜech dostupn²ch nastavenφ.

[Info]
SkinName - jmΘno skinu, kterΘ se zobrazφ v dialogu Mo₧nosti v seznamu skin∙
SkinAuthor - autor skinu

[Colors]
Barvy se zadßvajφ po slo₧kßch ve formßtu R, G, B (Red - Φervenß, Green - zelenß, Blue - modrß). JednotlivΘ slo₧ky mohou nab²vat hodnoty 0 a₧ 255. Nap°φklad: 0,0,0 - Φernß 255,255,255 - bφlß, 0,0,128 - tmav∞ modrß.

Pokud nenφ n∞kterß barva zadßna, pou₧ije se odpovφdajφcφ barva z aktußlnφho barevnΘho nastavenφ Windows.

COLOR_3DFACE - barva pozadφ ovlßdacφch prvk∙
COLOR_BTNHILIGHT - sv∞tlß barva pro vytvß°enφ 3D prvk∙
COLOR_BTNSHADOW - tmavß barva pro vytvß°enφ 3D prvk∙
COLOR_BTNTEXT - barva textu ovlßdacφch prvk∙
COLOR_CAPTIONTEXT - barva textu titulku aktivnφho okna
COLOR_INACTIVECAPTIONTEXT - barva textu titulku neaktivnφho okna
COLOR_INFOBK - barva pozadφ informaΦnφch text∙
COLOR_INFOTEXT - barva textu informaΦnφch text∙
COLOR_WINDOW - barva pozadφ okna
COLOR_WINDOWTEXT - barva textu okna
COLOR_MENU - barva pozadφ menu
COLOR_MENUTEXT - barva textu menu
COLOR_HIGHLIGHT - barva pozadφ vybran²ch polo₧ek
COLOR_HIGHLIGHTTEXT - barva textu vybran²ch polo₧ek

Barvy


[Metrics]
Tyto rozm∞ry slou₧φ pro dolad∞nφ vzhledu skinu a umφst∞nφ n∞kter²ch prvk∙. VÜechny rozm∞ry jsou uvedeny v obrazov²ch bodech (pixelech). VÜechny prom∞nnΘ jsou nepovinnΘ. Pokud nebudou uvedenΘ, pou₧ije se v²chozφ hodnota (uvedenß v zßvorkßch).

TextButtonLeftSpace - odsazenφ textu tlaΦφtek zleva (10)
TextButtonRightSpace - odsazenφ textu tlaΦφtek zprava (20)
TextButtonPressedOffsetX - posun (v ose x) textu tlaΦφtka p°i zmßΦknutφ (0)
TextButtonPressedOffsetY - posun (v ose y) textu tlaΦφtka p°i zmßΦknutφ (0)
GalleryMenuOffset - posun zaΦßtku menu v oknech Pr∙zkumnφk a Editor (10)
MainMenuStartX - zaΦßtek hlavnφho menu (Üφ°ka levΘ hornφ bitmapy hlavnφho okna)
MainCloseOffsetX - posun tlaΦφtka "Zav°φt" od konce hlavnφho okna (Üφ°ka pravΘho okraje hlavnφho okna minus 3 pixely)
GalleryCloseOffsetX - posun tlaΦφtka "Zav°φt" od konce v ostatnφch oknech (Üφ°ka pravΘho okraje okna minus 3 pixely)
CaptionTextOffsetX - posun textu titulku od zaΦßtku okna (Üφ°ka levΘho okraje okna mφnus 3 pixely)

Odsazenφ


4. Okna

Okna ZME5 se vykreslujφ nßsledujφcφm zp∙sobem: nejd°φve se do odpovφdajφcφch roh∙ vykreslφ rohovΘ bitmapy a potΘ se do zb²vajφcφch mφst roztßhnou bitmapy, kterΘ definujφ hrany oken. Z toho vypl²vß, ₧e nejvhodn∞jÜφ pro hranovΘ bitmapy jsou bitmapy se Üφ°kou (resp. v²Ükou) 1 pixel. Tφm lze jednoduÜe vykreslit libovolnou velikost okna, bohu₧el nelze pro hrany oken pou₧φt opakujφcφ se vzory. Velikost okraj∙ oken se p°evezme z v²Üky (resp. Üφ°ky) bitmap definujφcφch okraje oken. Nap°φklad pro v²Üku titulkovΘho pruhu hlavnφho okna se pou₧ije v²Üka bitmapy main_top.png.

Seznam bitov²ch map - komponent skinu
Hlavnφ okno
main_lefttop.png - lev² hornφ roh
main_top.png - hornφ okraj (titulek)
main_righttop.png - prav² hornφ roh
main_right.png - prav² okraj
main_rightbottom.png - prav² dolnφ roh
main_bottom.png - dolnφ okraj
main_leftbottom.png - lev² dolnφ roh
main_left.png - lev² okraj
background.png - pozadφ okna

Ostatnφ okna
gallery_wnd_lefttop.png - lev² hornφ roh
gallery_wnd_top.png - hornφ okraj (titulek)
gallery_wnd_righttop.png - prav² hornφ roh
gallery_wnd_right.png - prav² okraj
gallery_wnd_rightbottom.png - prav² dolnφ roh
gallery_wnd_bottom.png - dolnφ okraj
gallery_wnd_leftbottom.png -lev² dolnφ roh
gallery_wnd_left.png - lev² okraj


5. TlaΦφtka

TlaΦφtka jsou kreslena do titulku okna. Pokud tlaΦφtko obsahuje alfa kanßl (formßt PNG podporuje 8-bitov² alfa kanßl), jsou tlaΦφtka kreslena transparentn∞ na pozadφ. TlaΦφtko se sklßdß ze t°φ stav∙:
  1. Normßlnφ - normßlnφ stav
  2. "Hot" - zobrazuje se p°i najetφ kurzorem myÜi nad tlaΦφtko
  3. ZmßΦknut² - zobrazuje se p°i stisknutφ tlaΦφtka
TlaΦφtka
Tyto t°i stavy jsou ulo₧eny v jednΘ bitmap∞ nad sebou ve v²Üe uvedenΘm po°adφ. VÜechny stavy musφ mφt stejnou v²Üku a v²Üka celΘ bitmapy musφ b²t d∞litelnß t°emi. Viz obrßzek. ╚ervenΘ linky jsou pouze ilustraΦnφ pro odd∞l∞nφ jednotliv²ch stav∙.
TlaΦφtka se do titulku horizontßln∞ centrujφ. Mezi sousednφmi tlaΦφtky nenφ ₧ßdnß mezera, kreslφ se t∞sn∞ vedle sebe, p°i nßvrhu tlaΦφtek je pot°eba s tφmto poΦφtat.

TlaΦφtka v hlavnφ okn∞
main_menu.png - Menu
navigator.png - Navigßtor
preview.png - Nßhled
browser.png - Pr∙zkumnφk
editor.png - Editor
workspace.png - Okna
preferences.png - Mo₧nosti
help.png - Nßpov∞da
minimize.png - Minimalizovat
maximize.png - Maximalizovat
restore.png - Obnovit
close.png - Zav°φt
TlaΦφtko Menu se pou₧ije, kdy₧ je hlavnφ okno p°φliÜ ·zkΘ na to, aby se do n∞j veÜla vÜechna tlaΦφtka pro jednotlivΘ polo₧ky menu

TlaΦφtka v ostatnφch oknech
gallery_menu_left.png - levß Φßst textovΘho tlaΦφtka menu
gallery_menu_mid.png - st°ednφ Φßst textovΘho tlaΦφtka menu
gallery_menu_right.png - pravß Φßst textovΘho tlaΦφtka menu
gallery_dock.png - Ukotvit
gallery_undock.png - ZruÜit ukotvenφ
gallery_minimize.png - Minimalizovat
gallery_maximize.png - Maximalizovat
gallery_restore.png - Obnovit
gallery_close.png - Zav°φt
Prvnφ t°i bitmapy tvo°φ specißlnφ textovß tlaΦφtka. Tyto tlaΦφtka se skladajφ z levΘ a pravΘ Φßsti, prost°ednφ Φßst se roztßhne do zb²vajφcφ velikosti. TlaΦφtko mß prom∞nnou velikost podle dΘlky textu, kter² se do n∞j kreslφ. Text se do tlaΦφtka horizontßln∞ centruje.


6. Ostatnφ komponenty

Nßsledujφcφ symboly se kreslφ p°φmo do nßhledu obrßzku v pr∙zkumnφkovi, pokud dan² obrßzek spl≥uje urΦitΘ podmφnky (nap°. obsahuje zvukovou poznßmku). Pokud dan² symbol obsahuje alfa kanßl, jsou symboly kresleny transparentn∞ na pozadφ.
mark_audio.png - symbol zvuku
mark_exif_camera.png - symbol fotoaparßtu
mark_exif_description.png - symbol popisu
mark_shortcut.png - symbol zßstupce