# Skórki - Praktyka

Tworzenie skórki rozpoczyna się od Pomysłu. Najlepiej jest najpierw narysować szkic skórki w edytorze graficznym, a później wykonać pliki niezbędne dla skórki.

W tym przypadku, ponieważ skóra jest ćwiczebna, będzie miała następujące właściwości:

Co może zawierać pomysł na prostą skórkę? Cokolwiek: od pięknych kolorów do realizacji wszelkich koncepcji przeniesienia interfejsu innych programów. Nawet nie muszą się różnić od innego odtwarzacza wideo. Na przykład, można sobie wyobrazić oryginalny interfejs systemu operacyjnego:

Szkic skórki - odpowiedz na poniższe pytania:

1. Jakie kolory będą wykorzystywane?
2. Co i jak to będzie wyglądać?
3. ... i gdzie będzie się znajdować.

Łatwo jest zauważyć, że szkic ma pewne niespójności. I tak jest. Jednak odpowiada on na podstawowe pytania i nic więcej nie należy od niego wymagać. Ze szkicu wynika, że okrągły suwak głośności wygląda lepiej niż ośmiokątny, a oznaczenia na osi czasu - nieharmonijne. Ogólnie jednak, obrazek okazał się całkiem miły, więc ma jest sens, aby zrealizować z niego skórkę.

## Oprogramowanie

Potrzebne są następujące programy:

- Edytor graficzny - rysowanie wszystkich elementów i ich rozmieszczenia;
- Notatnik (najlepiej z podświetlaniem składni xml) - do utworzenia pliku interface.xml
- Archiwizator - do spakowania skórki.

Programy dobieramy pod względem znajomości i wygody w użytkowania. W wyniku tego, wybór został dokonany następująco:

- Edytor graficzny do rysowania - Adobe Photoshop (darmowe zamienniki: PixBuilder Studio, Artweaver free, The Gimp);
- Ponowny zapis obrazów (opcjonalnie) - FastStone Image Viewer (darmowy do użytku domowego);
- Pomoc w rozmieszczeniu (opcjonalnie) - PhotoFiltre (darmowy do użytku domowego);
- Notatnik z podświetlaniem składni xml - Notepad2 mod (darmowy; inne opcjonalne: Notepad++, AkelPad, Dpad).
- Archiwizator - Haozip (darmowy; inne opcjonalne: 7zip, PeaZip, Hamster Free ZIP Archiver, IZArc).

## Informacje o skórce (SkinInfo.txt)

Informacje o skórce nie mają żadnych wymagań, oprócz maksymalnej długości - 45 znaków. Musisz tylko wpisać nazwę skórki, autora i (w razie potrzeby) całą resztę. W tym przypadku wygląda to tak:

SkinTitle=Ei8ht SkinAuthor=Gilorn SkinVer=4.8.0 SkinWWW=http://www.light-alloy.ru/forum/ru_skins/ei8ht SkinCmt=Training skin SkinAudio=0

Jak wcześniej określić link do forum?
Istnieją dwa sposoby:

- piszemy na "http://www.light-alloy.ru/forum/ru_skins/" i dodajemy łacińską nazwę skórki, małymi literami i zastępujemy spacje podkreśleniami "_". Szanse na popełnienie błędu są bardzo niskie.
- tworzymy wątek na forum (można również opublikować zrzut skórki), teraz już mamy prawidłowy link do nowo utworzonego tematu, który wpisujemy do skórki. Następne skórki będziemy rozpowszechniać w temacie.

Ponadto, autor skórki nie jest ograniczony linkami tylko do strony Light Alloy, może dostarczyć link do całkowicie innej strony.

## Wizytówka (preview.png)

Dwa najważniejsze szczegóły, które składają się na wizytówkę:

1. stylizacja pod skórkę;
2. obecność nazwy (tak, na wizytówce również).

Najbardziej wpadającą w oko częścią skórki w tym przypadku są trzy przyciski centralne. I do nich trzeba dobrać odpowiednie tło:

## Rysunki dla skórki

Począwszy od tego momentu będziesz musiał polegać w dużym stopniu na szkicu i wyobraźni. Przecież tworzenie rysunków dla skórki nie może być określane przez: odtwarzacz nie rozumie tylko rysunków.

Pierwsze pytanie, na które należy odpowiedzieć, to: ile należy utworzyć oddzielnych rysunków? Im więcej rysunków - tym bardziej modułowa konstrukcja i łatwiej będzie pracować nad skórą w przyszłości lub używać jej do tworzenia innych skórek. Jednocześnie, im więcej oddzielnych rysunków, tym więcej będzie na nich pustego miejsca i "cięższa" będzie skórka.

Po starannym rozważeniu rozmieszczenia zdecydowaliśmy się na utworzenie pojedynczych rysunków dla następujących elementów:

- logotyp - aby łatwo było zmienić; ponadto nie łatwo jest sobie je wyobrazić w indeksowanych kolorach;
- menu kontekstowe - zawartość jest zawsze taka sama i ten blok można później wykorzystać w innych skórkach;
- wyskakujące podpowiedzi - z tych samych powodów;
- zestawy kolorów - oprócz stałej zawartości jest również wiele warstw, dlatego dla wygody lepiej jest używać oddzielnego pliku.
- obrazek górnego i dolnego panelu oraz panel listy odtwarzania.

### Logotyp

Z nim jest najprościej: w pliku będzie tylko jeden obrazek. Wszystko czego potrzebujemy - to przeniesienie logotypu ze szkicu. Można przy okazji jeszcze coś do niego dodać.

### Menu kontekstowe

Jest ono złożone ponieważ zawiera kilka elementów. Ponieważ wielkość elementów jest standardowa, to można przemyśleć, jak wygodnie jej rozmieścić.

Albo wziąć z podstawowego obrazka ze skórki o podobnej konstrukcji:

Ponadto 10 znaków menu kontekstowego wyświetlanych jest jako jeden obiekt, więc nie należy zmieniać ich kolejności lub liczby rzędów.

Proszę zwrócić uwagę na tło: jest czerwono-różowe. Jego zadaniem jest - dawanie jednoznacznej i jasnej odpowiedzi na pytanie "to tło?", a także łatwe pokazywanie granicy oddzielnych rysunków w pliku. Zamiast czerwono-różowego koloru można wybrać inny - jest to kwestia osobistych preferencji.

Nawiasem mówiąc, takie modułowe podejście pozwala kopiować część pliku rozmieszczenia (interface.xml) ze starej skórki do в nowej.

### Zestawy kolorów

Tutaj jest wszystko proste (skala 500 %)...

...jak 67 cegiełek. Niestety wiele niestandardowych kolorów nie sprzyja prostemu zrozumieniu przypisania każdego piksela. A jeśli w przyszłości będzie wymagana korekta, to stracimy dużo czasu na określenie, jaki piksel należy zmienić. Dlatego taki wariant ma sens tylko w jednym przypadku: podczas używania specjalnego edytora skórek.

Najrozsądniejszym rozwiązaniem jest stosowanie dla każdego koloru koloru nie pojedynczego piksela, a piksela z ilustracją. Oczywiście, utworzenie takiego systemu zajmie nie jedną godzinę, ale w efekcie otrzymamy o wiele bardziej wygodny i intuicyjny mechanizm wyboru kolorów. Na przykład, jak ten poniżej (skala 200 %):

Tutaj każdy kolor reprezentowany jest warstwą-wypełnieniem "kolor" z graficzną maską (narzędzia Photoshop). Wszystkie kolory są wygodnie pogrupowane w foldery. W wyniku tego, na etapie wstępnego wyboru kolorów widać, jak on będzie wyglądał. Oprócz tego, każda warstwa ma swoją nazwę, więc można pożądaną warstwę szybko odszukać. Aby tutaj zmienić kolor wystarczy dwukrotnie kliknąć na odpowiedniej warstwie.

### Rysunki dla wyskakujących podpowiedzi

Te rysunki są robione po to, aby określić kolory podpowiedzi. Na początku kolor tła rysunków można wziąć z zestawu kolorów, tak więc pozostaje narysować tylko same rysunki. Dla wyraźnego rozróżnienia rysunków zalecane jest ich rozdzielenie linią:

### Górny panel

Górny panel zawiera:

- obramowanie okna;
- tło panelu;
- wszystkie przyciski panelu.

Tutaj nie powinno być szczególnych problemów - większość elementów jest jednorodna:

Zwróć uwagę: tło paneli obramowanie okna są wizualnie dopasowane. Zostało to zrobione po prostu dlatego, że jest wizualnie wygodne. Również ze względów estetycznych wysokość obramowania dokładnie odpowiada wysokości rzędów przycisków. Można to osiągnąć poprzez regulację wysokości obramowania po narysowaniu przycisków.

Istnieją pewne niuanse dotyczące obramowania:

1. przestrzeń wewnątrz obramowania jest również wykorzystywana, można to zauważyć podczas zmiany rozmiaru okna odtwarzacza, dlatego konieczne jest wypełnienie jej zgodnym kolorem (w danym przypadku jest to kolor separatora listy odtwarzania);
2. obramowanie, w przeciwieństwie do innych kontrolek, rozciąga się nie w jednym punkcie, w prostokącie (jego interpolacja odbywa się wg otaczających pikseli);

### Panel listy odtwarzania

Panel listy odtwarzania zawiera:

- tło panelu;
- wszystkie przyciski panelu.

Obrazek panelu listy odtwarzania jest podobny do górnego panelu:

### Dolny panel

Ten panel jest najtrudniejszy ponieważ zawiera najróżniejsze elementy:

- tło panelu;
- wszystkie przyciski panelu;
- elementy osi czasu;
- elementy głośności;
- graficzne czcionki;

W związku z tym, że w dolnym panelu nie jest prosto rozmieścić elementy - zrobić to w taki sposób, aby później było jasne, co gdzie się znajduje i do czego się odnosi - należy grupować związane ze sobą elementy.

Na powyższym rysunku można zobaczyć pogrupowane następujące grupy elementów:

- oś czasu;
- głośność.

Elementy są zgrupowane obok siebie tak, jak będą rozmieszczone w skórce, a zatem bardzo łatwo zrozumieć, co jest czym. Mają one również obwódkę, która pozwala na ich wizualną identyfikację.

Łatwo zauważyć, że niektóre z elementów nie wyglądają tak, jak na szkicu: ruchoma część osi czasu, czcionka czasu trwania, suwak. Z suwakiem jest najprościej: on po prostu jest narysowany w kolorze przezroczystości (#00FF00). Pozostałe elementy w procesie rysowania zostały uznane za nieharmonijne i dlatego zostały przerysowane.

Ostatnią rzeczą, na którą należy zwrócić uwagę, jest animacja przycisków z blokadą. Reakcja odtwarzacza nie zachodzi po kliknięciu na przycisk, a na jego późniejsze puszczanie. Dlatego nie należy używać zmiennego obrazka przycisku z niższego lewego rysunku, a z prawego górnego.

## Plik układu graficznego (interface.xml)

Jest to najważniejsza część pracy podczas tworzenia skórek, którą dobrze by było sprawdzić na żywo (tj. wypróbowanie niedokończonej skórki w odtwarzaczu). Na początku, należy utworzyć pusty plik i umieścić fragmenty kodu w dogodny sposób (nie zapomnij o kodowaniu UTF-8 with signature):

<?xml version="1.0" encoding="UTF-8"?> <SKIN type="standart" minsize="100,100"> <!-- ================================================================== --> <!-- ============= PREDEFINED DECORATIVE IMAGES. ID FIXED ============= --> <!-- ================================================================== --> <!-- Logo --> <IMAGE id="Logo" file="logo.png"> <AREA id="Splash" pos="0,0" size="200,170"/> <!-- Logo picture --> </IMAGE> <!-- Color sets --> <IMAGE id="Color" file="Color.png"> <AREA id="LACaption" pos="1,1" size="1,2"/> <!-- title --> <AREA id="OSD" pos="141,18" size="1,5"/> <!-- OSD --> <AREA id="Timeline" pos="71,83" size="1,2"/> <!-- Autorewind --> <AREA id="Hint" pos="141,83" size="1,3"/> <!-- Hints --> <AREA id="PL" pos="1,18" size="1,12"/> <!-- Playlist --> <AREA id="Menu" pos="71,18" size="1,7"/> <!-- Context menu --> <AREA id="FOD_TV" pos="1,83" size="1,18"/> <!-- Fullscreen file opendialog --> <AREA id="SOD_TV" pos="1,83" size="1,18"/> <!-- Fullscreen subs opendialog --> </IMAGE> <!-- Context menu --> <IMAGE id="Menu" file="Menu.png"> <AREA id="bg" pos="17,0" size="20,28"/> <!-- Left column background --> <AREA id="pics" pos="0,29" size="33,84"/> <!-- Icons --> <AREA id="Checked" pos="0,12" size="16,16"/> <!-- Marker --> <AREA id="Bookmark" pos="0,0" size="11,11"/> <!-- Playlist bookmark --> </IMAGE> <!-- Hint's images --> <IMAGE id="Hint" file="Hint.png"> <AREA id="Lclick" pos="0,0" size="22,22"/> <!-- L-click mouse --> <AREA id="Rclick" pos="23,0" size="22,22"/> <!-- R-click mouse --> </IMAGE> <!-- ================================================================== --> <!-- ======================= GRAPHIC CONSTANTS ======================== --> <!-- ================================================================== --> <!-- Parameters: id=%unique name%; pos=%left,top pixel of constanta% // size=%size of constanta (can be ignored for buttons)%. --> <!-- Header --> <IMAGE id="Hd" file="Header.png"> <AREA id="" pos="," size=","/> </IMAGE> <!-- Footer --> <IMAGE id="Ft" file="Footer.png"> <AREA id="" pos="," size=","/> <!-- timeline --> <AREA id="SeekBGfill" pos="," size=","/> <!-- Timeline filled --> <AREA id="SeekThumb" pos="," size=","/> <!-- track, align=bottom --> <AREA id="SeekBG" pos="," size=","/> <!-- Timeline empty --> <AREA id="SeekHiTick" pos="," size=","/> <!-- main scale lines --> <AREA id="SeekLoTick" pos="," size=","/> <!-- secondary scale lines --> <AREA id="SeekChapter" pos="," size=","/> <!-- Chapter --> <!-- volume --> <AREA id="VolBGF" pos="," size=","/> <!-- Volume filled --> <AREA id="VolThumb" pos="," size=","/> <!-- track --> <AREA id="VolBG" pos="," size=","/> <!-- Volume empty --> </IMAGE> <!-- Playlist --> <IMAGE id="Pl" file="Playlist.png"> <AREA id="" pos="," size=","/> </IMAGE> <!-- ================================================================== --> <!-- ========================= GRAPHIC FONTS ========================== --> <!-- ================================================================== --> <FONT id="Digits" img="FT.Digits" chars="0123456789: -"/> <!-- for Position --> <FONT id="Digits_dur" img="FT.Digits_dur" chars="0123456789: "/> <!-- for Duration --> <!-- ================================================================== --> <!-- ============================ CONTROLS ============================ --> <!-- ================================================================== --> <!-- Window border controls --> <CTLDEF id="WndBorder" type="Panel" bg="Hd.brd" size="30,120" border_size="6,1,6,6" bgsplit_lt="6,26" bgsplit_rb="6,6"/> <!-- Header controls --> <CTLDEF id="Caption" type="Panel" size="400," bgsplit="10,10" bg="Hd.bg"> <!-- Header background --> <CONTROL type="Text" pos="," size="," font="Verdana" fontsz="11" top_delta="-1" bold="0" bg="Hd.TitleBG" bgsplit="5,5" text="{TITLE}"/> <!-- Title --> <CONTROL type="GfxBtn" pos="," size="," img="Hd." link=""/> </CTLDEF> <!-- Footer controls --> <CTLDEF id="CtlPanel" type="Panel" size="400," bgsplit="10,10" bg="Ft.bg"> <!-- Footer background --> <CONTROL type="Seeker" pos="," size="," bgsplit="," OpeningPos="0" OpeningHeight="14" bg="Ft.SeekBG" bgfill="Ft.SeekBGfill" thumb="Ft.SeekThumb" lotick="Ft.SeekLoTick" hitick="Ft.SeekHiTick" digits_ypos="0" ticks_ypos="7" chapter="Ft.SeekChapter" chapter_pos="-1,12" /> <!-- Timeline --> <CONTROL type="Slider" pos="," size="," bgsplit="5,10" bg="Ft.VolBG" bgfill="Ft.VolBGF" thumb="Ft.VolThumb"/> <!-- Volume --> <CONTROL type="GfxBtn" pos="," size="," img="Ft." link=""/> <CONTROL type="Panel" pos="," size="," align="center" bgsplit="10,10" bg="Ft.CenterBg"> <!-- Central panel --> <CONTROL type="GfxBtn" pos="," size="," img="Ft." link=""/> <!-- [Stop] --> </CONTROL> <CONTROL type="Text" pos="," size="," font="Digits" text=" {POS}" link="Position.Switch"/> <!-- Position --> <CONTROL type="Text" pos="," size="," font="Digits_dur" text="{DUR}"/> <!-- Duration --> </CTLDEF> <!-- Playlist controls --> <CTLDEF id="PListPanel" type="Panel" bg="Pl.bg" size="200,42" bgsplit="10,10"> <!-- Playlist background --> <CONTROL type="GfxBtn" pos="," size="," img="Pl." link=""/> </CTLDEF> </SKIN>

W szablonie znajdują się 4 rozdziały, przy czym dwa pierwsze różnią się tylko tym, że w pierwszym zmieniają się tylko koordynaty (i to nie zawsze), a w drugim zmieniają się wszystkie.

Zielony tekst - to komentarze. Pomagają one orientować się w tekście, ale są ignorowane przez program.

### Powiadomienie o stałych graficznych

Każda stała posiada unikalną nazwę, położenie i rozmiar. Nazwę można wziąć z katalogu, ale położenie i rozmiar należy określić samodzielnie. Odbywa się to za pomocą edytora graficznego.

Większość edytorów graficznych wyświetla współrzędne kursora i posiada narzędzie "zaznaczanie obszaru prostokątnego" ze wskazaniem wielkości wybranego obszaru.

Do tego celu idealnie nadaje się PhotoFiltre (bezpłatny do użytku niekomercyjnego, strona oficjalna, wersja portable). Pozwala on, bezpośrednio po zaznaczeniu obszaru, poznać jego położenie i rozmiar. Przy czym rozmiar wydzielonego obszaru można na bieżąco skorygować myszką:

Zatem określenie wszystkich wartości występuje w czterech fazach:

1. W pliku znaczników dodajemy nową linię w postaci "<AREA id="" pos="" size=""/>".
2. Z katalogu podstawiamy id.
3. W edytorze graficznym określamy wartości pozycji i rozmiaru.
4. wartości te podstawiamy w pos="" size="".

W efekcie 15 minut wysiłku pierwsza część pliku znaczników przyjmuje następującą postać:

<!-- ================================================================== --> <!-- ============= PREDEFINED DECORATIVE IMAGES. ID FIXED ============= --> <!-- ================================================================== --> <!-- Logo --> <IMAGE id="Logo" file="logo.png"> <AREA id="Splash" pos="0,0" size="200,170"/> <!-- Logo picture --> </IMAGE> <!-- Color sets --> <IMAGE id="Color" file="Color.png"> <AREA id="LACaption" pos="1,1" size="1,2"/> <!-- title --> <AREA id="OSD" pos="141,18" size="1,5"/> <!-- OSD --> <AREA id="Timeline" pos="71,83" size="1,2"/> <!-- Autorewind --> <AREA id="Hint" pos="141,83" size="1,3"/> <!-- Hints --> <AREA id="PL" pos="1,18" size="1,12"/> <!-- Playlist --> <AREA id="Menu" pos="71,18" size="1,7"/> <!-- Context menu --> <AREA id="FOD_TV" pos="1,83" size="1,18"/> <!-- Fullscreen file opendialog --> <AREA id="SOD_TV" pos="1,83" size="1,18"/> <!-- Fullscreen subs opendialog --> </IMAGE> <!-- Context menu --> <IMAGE id="Menu" file="Menu.png"> <AREA id="bg" pos="17,0" size="20,28"/> <!-- Left column background --> <AREA id="pics" pos="0,29" size="33,84"/> <!-- Icons --> <AREA id="Checked" pos="0,12" size="16,16"/> <!-- Marker --> <AREA id="Bookmark" pos="0,0" size="11,11"/> <!-- Playlist bookmark --> </IMAGE> <!-- Hint's images --> <IMAGE id="Hint" file="Hint.png"> <AREA id="Lclick" pos="0,0" size="22,22"/> <!-- L-click mouse --> <AREA id="Rclick" pos="23,0" size="22,22"/> <!-- R-click mouse --> </IMAGE> <!-- ================================================================== --> <!-- ======================= GRAPHIC CONSTANTS ======================== --> <!-- ================================================================== --> <!-- Parameters: id=%unique name%; pos=%left,top pixel of constanta% // size=%size of constanta (can be ignored for buttons)%. --> <!-- Header --> <IMAGE id="Hd" file="Header.png"> <AREA id="brd" pos="0,0" size="30,62"/> <!-- Window border --> <AREA id="bg" pos="6,1" size="18,25"/> <!-- Header background --> <AREA id="TitleBG" pos="6,1" size="18,20"/> <!-- Title background--> <AREA id="btAbout" pos="31,0" size="26,62"/> <!-- [About Light Alloy] --> <AREA id="btTop" pos="58,0" size="53,62"/> <!-- [Always on top]--> <AREA id="btMin" pos="112,0" size="26,62"/> <!-- [Minimize] --> <AREA id="btMax" pos="139,0" size="53,62"/> <!-- [Window / FullScreen] --> <AREA id="btExit" pos="193,0" size="45,62"/> <!-- [Exit] --> </IMAGE> <!-- Footer --> <IMAGE id="Ft" file="Footer.png"> <AREA id="bg" pos="0,0" size="30,70"/> <!-- Footer background --> <AREA id="CenterBg" pos="0,14" size="30,56"/> <!-- Central panel background --> <AREA id="btStop" pos="0,71" size="42,74"/> <!-- [Stop] --> <AREA id="btPlPrev" pos="43,71" size="43,74"/> <!-- [Previous in playlist] --> <AREA id="btPlNext" pos="87,71" size="43,74"/> <!-- [Next in playlist] --> <AREA id="btOpen" pos="131,71" size="42,74"/> <!-- [Open file] --> <AREA id="BtPlay" pos="174,0" size="101,152"/> <!-- [Play / pause] --> <AREA id="BtMute" pos="276,0" size="43,182"/> <!-- [Mute] --> <AREA id="BtPlist" pos="320,0" size="43,182"/> <!-- [Playlist] --> <AREA id="Digits" pos="33,18" size="138,16"/> <!-- digits for Position --> <AREA id="Digits_dur" pos="33,37" size="68,8"/> <!-- digits for Duration --> <!-- timeline --> <AREA id="SeekBGfill" pos="33,1" size="24,14"/> <!-- Timeline filled --> <AREA id="SeekThumb" pos="64,1" size="14,14"/> <!-- track, align=bottom --> <AREA id="SeekBG" pos="79,1" size="24,14"/> <!-- Timeline empty --> <AREA id="SeekHiTick" pos="58,1" size="1,3"/> <!-- main scale lines --> <AREA id="SeekLoTick" pos="59,1" size="1,3"/> <!-- secondary scale lines --> <AREA id="SeekChapter" pos="58,13" size="3,2"/> <!-- Chapter --> <!-- volume --> <AREA id="VolBGF" pos="107,1" size="9,14"/> <!-- Volume filled --> <AREA id="VolThumb" pos="117,1" size="14,14"/> <!-- track --> <AREA id="VolBG" pos="132,1" size="9,14"/> <!-- Volume empty --> </IMAGE> <!-- Playlist --> <IMAGE id="Pl" file="Playlist.png"> <AREA id="bg" pos="0,0" size="20,42"/> <!-- Playlist background --> <AREA id="btPlay" pos="21,0" size="31,83"/> <!-- [Play selected] --> <AREA id="btAdd" pos="53,0" size="31,83"/> <!-- [Add file(s) to playlist] --> <AREA id="btRem" pos="85,0" size="31,83"/> <!-- [Remove from playlist] --> <AREA id="btMarks" pos="117,0" size="63,83"/> <!-- [Bookmarks in playlist] --> </IMAGE>

### Tworzenie czcionki graficznej

Ogólnie rzecz biorąc, istnieje tutaj tylko jedna pułapka: nie wszyscy wiedzą, co to takiego "&lt;" i "&gt;" i czym one się różnią. Dlatego lepiej jest podać w komentarzu jego przeznaczenie w bardziej zrozumiałym języku:

<FONT id="Digits" img="FT.Digits" chars="0123456789: -"/> <!-- for Position --> <FONT id="Digits_dur" img="FT.Digits_dur" chars="0123456789: "/> <!-- for Duration -->

### Stosowanie stałych i czcionek w kontrolkach

Jest to finalny etap tworzenia skórki i pożądana jest jego wizualna kontrola.

Odbywa się to poprzez zastosowanie skórki w odtwarzaczu.
Przeładowanie skórki będzie wymagane bardzo często. Istnieje kilka sposobów, aby to zrobić: 1. Shift+Ctrl+Alt+L - przeładowuje skórkę i plik językowy. 2. Wybór skórki w menu kontekstowym przycisku "O programie" - wybranie już używanej skórki prowadzi do jej przeładowania.

Istnieje kilka informacji dodatkowych, które należy wykonać:

1. pozycja "-90,6" oznacza odległość między prawą krawędzią paneli i lewym górnym pikselem kontrolki, a nie szerokość pustego miejsca między krawędzią i kontrolką.
2. Zapis widoku pos="140,18" size="-50,24" informuje, że szerokość kontrolki jest od kropki 140 do kropki, przesuniętej w lewo odnośnie prawej krawędzi panelu na 50 pikseli. Tzn. zdeterminowany jest pozycją prawej krawędzi kontrolki.
3. Jak zrobić wyrównanie do środka kilku kontrolek? - należy wykonać pływający panel, który znajduje się na środku, a w nim rozmieścić kontrolki;
4. Jeśli używamy dodatkowego panelu pływającego, to współrzędne jego zagnieżdżonych kontrolek nie są zliczane jak pozostałe (od lewego górnego narożnika panelu podstawowego), a od lewego górnego narożnika tego pływającego panelu.

Informacje dodatkowe mogą wyglądać na złożone, jeśli jednak zobaczymy to na żywej skórce, stanie się to zrozumiałe.

Od czego zależy pozycja i rozmiar kontrolek? Rozmiar - tylko od tego, jaki obrazek został narysowany (z wyjątkiem paneli i suwaków głośności i osi czasu - one są rozciągane). Pozycja nie zależy od niczego innego, oprócz zamysłu autora skórki.

<!-- ================================================================== --> <!-- ============================ CONTROLS ============================ --> <!-- ================================================================== --> <!-- Window border controls --> <CTLDEF id="WndBorder" type="Panel" bg="Hd.brd" size="30,120" border_size="6,1,6,6" bgsplit_lt="6,26" bgsplit_rb="6,6"/> <!-- Header controls --> <CTLDEF id="Caption" type="Panel" size="400,25" bgsplit="14,10" bg="Hd.bg"> <!-- Header background --> <CONTROL type="Text" pos="40,3" size="-80,20" font="Verdana" fontsz="11" top_delta="-1" bold="0" bg="Hd.TitleBG" bgsplit="8,5" text="{TITLE}"/> <!-- Title --> <CONTROL type="GfxBtn" pos="0,0" size="26,20" img="Hd.btAbout" link="App.About"/> <!-- [About Light Alloy] --> <CONTROL type="GfxBtn" pos="27,0" size="26,20" img="Hd.btTop" link="App.StayOnTop"/> <!-- [Always on top] --> <CONTROL type="GfxBtn" pos="-99,0" size="26,20" img="Hd.btMin" link="App.Minimize"/> <!-- [Minimize] --> <CONTROL type="GfxBtn" pos="-72,0" size="26,20" img="Hd.btMax" link="Window.FullScreen"/> <!-- [Window / FullScreen] --> <CONTROL type="GfxBtn" pos="-45,0" size="45,20" img="Hd.btExit" link="App.Exit"/> <!-- [Exit] --> </CTLDEF> <!-- Footer controls --> <CTLDEF id="CtlPanel" type="Panel" size="400,70" bgsplit="10,10" bg="Ft.bg"> <!-- Footer background --> <CONTROL type="Seeker" pos="0,0" size="-1,14" bgsplit="12,6" OpeningPos="0" OpeningHeight="14" bg="Ft.SeekBG" bgfill="Ft.SeekBGfill" thumb="Ft.SeekThumb" lotick="Ft.SeekLoTick" hitick="Ft.SeekHiTick" digits_ypos="4" ticks_ypos="0" chapter="Ft.SeekChapter" chapter_pos="-1,12" /> <!-- Timeline --> <CONTROL type="GfxBtn" pos="0,14" size="21,56" img="Ft.btMute" link="Audio.Mute"/> <!-- [Mute] --> <CONTROL type="GfxBtn" pos="-21,14" size="21,56" img="Ft.btPlist" link="Window.PlayList"/> <!-- [Playlist] --> <CONTROL type="Slider" pos="28,35" size="90,14" bgsplit="5,10" bg="Ft.VolBG" bgfill="Ft.VolBGF" thumb="Ft.VolThumb"/> <!-- Volume --> <CONTROL type="Panel" pos="0,17" align="center" size="218,50" bgsplit="10,10" bg="Ft.CenterBg"> <!-- Central panel --> <CONTROL type="GfxBtn" pos="0,13" size="42,24" img="Ft.btStop" link="Playback.RealStop"/> <!-- [Stop] --> <CONTROL type="GfxBtn" pos="42,13" size="43,24" img="Ft.btPlPrev" link="PlayList.Prev"/> <!-- [Previous in playlist] --> <CONTROL type="GfxBtn" pos="133,13" size="43,24" img="Ft.btPlNext" link="PlayList.Next"/> <!-- [Next in playlist] --> <CONTROL type="GfxBtn" pos="84,0" size="50,50" img="Ft.btPlay" link="App.SuperPlay"/> <!-- [Play / pause] --> <CONTROL type="GfxBtn" pos="176,13" size="42,24" img="Ft.btOpen" link="PlayList.OpenFiles"/><!-- [Open file] --> </CONTROL> <CONTROL type="Text" pos="-100,33" size="75,15" font="Digits" text=" {POS}" link="Position.Switch"/> <!-- Position --> <CONTROL type="Text" pos="-65,52" size="38,7" font="Digits_dur" text="{DUR}"/> <!-- Duration --> </CTLDEF> <!-- Playlist controls --> <CTLDEF id="PListPanel" type="Panel" bg="Pl.bg" size="200,42" bgsplit="10,10"> <!-- Playlist background --> <CONTROL type="GfxBtn" pos="10,7" size="31,27" img="Pl.btPlay" link="PList.Play"/> <!-- [Play selected] --> <CONTROL type="GfxBtn" pos="45,7" size="31,27" img="Pl.btAdd" link="PList.AddFiles"/> <!-- [Add file(s) to playlist] --> <CONTROL type="GfxBtn" pos="80,7" size="31,27" img="Pl.btRem" link="PList.Remove"/> <!-- [Remove from playlist] --> <CONTROL type="GfxBtn" pos="115,7" size="31,27" img="Pl.btMarks" link="PList.ShowMarks"/><!-- [Bookmarks in playlist] --> </CTLDEF>

Gdy wszystkie elementy mają już swoje położenie i rozmiar, należy przeglądnąć skórkę w poszukiwaniu różnych niedoróbek, które mogły się zdarzyć podczas pracy. Jeśli coś zostanie znalezione - popraw pozycję kontrolek.

Po tym etapie praca nad plikiem rozmieszczenia jest zakończona.

## Montowanie skórki

W tej chwili możliwe jest już używanie skórki, ale nadal niewygodne jej udostępnianie. Teraz należy ją zoptymalizować i spakować.

### Optymalizacja skórki (format PNG)

PNG używa kompresji, więc wymagana optymalizacja jest bardzo mała: jeśli oryginalny plik PNG został stworzony w Photoshopie, to powinien zostać zapisany ponownie przy maksymalnej kompresji za pomocą FastStone Image Viewer (darmowy do użytku domowego) - możliwe jest 2-4 krotne zmniejszenie rozmiaru pliku.

Inne optymalizacje nie są zwykle wymagane.

Proszę zwrócić uwagę: skórka, używająca obrazów PNG, obsługiwana jest przez odtwarzacz tylko w wersji 4.8.0.

### Optymalizacja skórki (format BMP)

Optymalizacja zamyka się w zmianie plików graficznych.

Jak wiadomo, format "bmp" zajmuje bardzo dużo miejsca ponieważ nie ma wbudowanych funkcji kompresji. Ale nie jest tak źle. Zamiast tego można pobawić się z głębią kolorów. Obrazek w formacie "bmp" obsługuje takie warianty głębi kolorów:

- 24-bity - 16,8 mln. kolorów - standardowy kolor obrazu;
- 8-bitów - 256 kolorów - wystarczające do wyświetlania dowolnego gradientu koloru, czarno-białego obrazka;
- 4 bity - 16 kolorów - nadaje się dla ultra minimalistycznych pod względem kolorów obrazów, np. zestawu kolorów;
- 1 bit - obrazek monochromatyczny; tylko dwa kolory: czarny i biały. Idealny dla faksów, ale do tworzenia skórek - bardzo mały zakres do manewru.

Aktualna ilość kolorów w obrazkach naszej skórki:

- Color.bmp - 28
- Footer.bmp - 873
- Header.bmp - 23
- hint.bmp - 27
- Logo.bmp - 3979
- Menu.bmp - 524
- Playlist.bmp - 62

Jak widać, 2 obrazki można skompresować do 8-bitowej głębi kolorów, a jeden - nawet do 4-bitowej. Aby w nowym obrazku zachować niezbędne kolory, należy je przeindeksować. Jak to zostanie zrobione, zależy od edytora graficznego. Na przykład, w Photoshopie należy przejść do menu głównego \ Obraz \ Tryb \ Indeksowanie kolorów.... Po zmianie okazało się, że dla Rclick.bmp kompresja do 256-ciu kolorów jest wizualnie niezauważalna. Dlatego przeprowadzimy zmianę głębi kolorów dla wszystkich obrazków:

Plik | Stary rozmiar, KB | Nowa głębia kolorów | Nowy rozmiar, KB
--- | --- | --- | ---
Color.bmp | 64,5 | 8 bitów | 21,6
Footer.bmp | 182 | 8 bitów | 61,4
Header.bmp | 43,4 | 8 bitów | 14,6
hint.bmp | 3,0 | 8 bitów | 1,2
| Logo.bmp | 99.6 | 24 bitów | 99.6 | Menu.bmp | 12,4 | 8 bitów | 5,6 | Playlist.bmp | 43,8 | 8 bitów | 14,8
RAZEM | 448,7 | - | 218,8

Jak się okazało, całkowita objętość danych została pomniejszona więcej niż trzy razy. Imponujące! Analogicznie należy postąpić z plikiem "preview.png". Jedyna różnica jest taka, że format "png" nie ma 4-bitowej głębi kolorów, a tylko pełną (16,8 mln. kolorów) lub 8-bitową (256 kolorów).

### Pakowanie skórki

To całkiem proste: bierzemy wszystkie niezbędne pliki i archiwizujemy do formatu "zip". Poziom kompresji - dowolny, ale zalecany jest maksymalny. Najlepiej zostawić domyślne ustawienia kompresji, ponieważ Light Alloy nie rozumie nowoczesnych metod kompresji, tj. LZMA.

Wreszcie ostateczny szlif: w skórce należy zmienić rozszerzenie - z ".zip" na ".las".

## Rezultat

W końcu, po jednym lub dwóch dniach pracy, skórka jest gotowa!

Zapisana skórka...

Zapisane oryginalne pliki do skórki...