Przygotowaliśmy dla Was skrótowy poradnik, który tłumaczy, jak zaprojektować i wykonać skórę graficzną do programu Komunikator Tlen.pl.
START...
Tworząc nową skórkę najpierw musimy narysować tło okienka. Przeskoczę od razu do momentu, w którym tło takie mamy gotowe:
Następnie musimy wyodrębnić z takiego rysunku obszary - w naszym przypadku będą to: 4 narożniki (nr 1-4), 4 rozciągane elementy brzegowe (nr 5-8) oraz obszar listy kontaktów (nr 9):
W celu zmniejszenia rozmiaru zajmowanego na dysku (i w pamięci) przez skórkę należy zmniejszyć tak tło, aby elementy brzegowe miały jak najmniejszą szerokość (nr 5 i 7) bądź wysokość (nr 6 i 8), po tym zabiegu tło wygląda następująco:
Fioletowe narożniki w naszej skórce oznaczają obszary, które będą niewidoczne. Tym sposobem uzyskamy efekt zaokrąglonych narożników w okienku Komunikatora.
Obraz przedstawiający tło zapisujemy w pliku BMP, dajmy mu np. nazwę skin.bmp
<bitmaps>
<i i="1" f="skin.bmp"/>
</bitmaps>
Teraz musimy odszukać sobie współrzędne lewych górnych narożników każdego z 8 elementów w pliku skin.bmp oraz ich szerokości i wysokości (na tejże własnie bitmapie).
Następnie ustalamy współrzędne obszaru elementu w okienku Komunikatora, określone są one w pliku skin.xml 4 zmiennymi - lewy brzeg (l), prawy brzeg (r), górny brzeg (t), dolny brzeg (b). Gdy wartość zmiennej jest dodatnia oznacza to, że pozycjonujemy element względem odpowiednio lewego (zmienne l i r), bądź górnego (zmienne t i b) brzegu. Gdy wartość jest ujemna, pozycjonowanie odbywa się względem prawego (zmienne l i r) bądź dolnego brzegu (zmienne t i b). Jeśli wartość jest równa 0, to pozycjonowanie odbywa się względem tego samego brzegu co zmienna: l - lewego, r - prawego, t - górnego, b - dolnego.
I tak przykładowo dla elementu nr 1 (lewy górny narożnik):
- współrzędne w skin.bmp: l="0" t="0", szerokość i wysokość: w="22" h="71"
- współrzędne obszaru w oknie Komunikatora: l="0" r="22" t="0" b="71"
Dla elementu nr 3 (prawy dolny narożnik):
- współrzędne w skin.bmp: l="23" t="72", szerokość i wysokość: w="67" h="67"
- współrzędne obszaru w oknie Komunikatora: l="-67" r="0" t="-67" b="0"
Dla elementu nr 7 (dolny brzeg):
- współrzędne w skin.bmp: l="0" t="71", szerokość i wysokość: w="15" h="1"
- współrzędne obszaru w oknie Komunikatora: l="0" r="15" t="71" b="-67"
(jak widać, element ten jest rozciągany pomiędzy 71 pikselem od góry okienka a 67 pikselem od dołu okienka, tworząc lewy brzeg o szerokości 15 pikseli)
Po obliczeniu wszystkich współrzędnych oraz obszarów ich definicja w sekcji elementów statycznych wygląda następująco (po kolei, elementy od 1 do 8):
(* Na szaro komentarz, nie występuje w pliku skin.xml)
e="1" - oznacza że dany element korzysta z bitmapy o ID="1"
w="22" - szerokość elementu na bitmapie
h="71" - wysokość elementu na bitmapie
l, r, t, b - współrzędne elementu w okienku komunikatora (opisane wyżej)
p="FF00FF" - kolor narożnika - w okienku programu będzie to niewidoczne (zaokrąglony narożnik)
<a k="0" l="0" t="0"/>
współrzędne lewego górnego rogu elementu na bitmapie dla okna Komunikatora aktywnego
<a k="1" l="0" t="0"/>
współrzędne lewego górnego rogu elementu na bitmapie dla okna Komunikatora nieaktywnego
</i>
<i e="1" w="1" h="71" l="22" r="-67" t="0" b="71" s="1">
parametr s="1" oznacza, że ten element jest rozciągany w oknie Komunikatora (jego
szerokość na bitmapie to 1 piksel, a jest rozciągnięty tak, że tworzy górny brzeg)
<a k="0" l="22" t="0"/>
<a k="1" l="22" t="0"/>
</i>
» W pliku skin_guide.txt znajduje się opis niewymienionych tutaj parametrów znajdujących się w pliku skin.xml, który definiują wygląd skóry graficznej.
Teraz możemy przystąpić do zdefiniowania przycisków (które wcześniej narysowaliśmy - dajmy bitmapie nazwę buttons.bmp):
W sekcji bitmap dodajemy kolejny plik - buttons.bmp:
Jak widać większość przycisków posiada 2 stany - dla przycisków zakładek biały oznacza wciśnięty, natomiast małe przyciski na żółtym tle o większym nasyceniu będą pojawiać się po najechaniu na dany przycisk myszką.
Podobnie jak w przypadku elementów statycznych musimy wiedzieć, jaka jest współrzędna przycisku w pliku buttons.bmp oraz jego rozmiary, a także jaki obszar w okienku komunikatora będzie zajmował przycisk.
Przykładowo dla przycisku "E-mail" będzie wyglądać to tak:
współrzędne w buttons.bmp: przycisk nieaktywny: l="35" t="0", przycisk wciśnięty: l="35" t="31",
szerokość i wysokość: w="35" h="31"
współrzędne obszaru w oknie Komunikatora: l="52" r="87" t="40" b="71"
Definicja w skin.xml takiego przycisku wygląda tak:
» W pliku skin_guide.txt znajduje się dokładny opis parametrów znajdujących się w pliku skin.xml, który definiują wygląd skóry graficznej.
Wszystkie przyciski zdefiniowane w skin.xml:
<buttons>
<i i="PEOPLE" d="1" w="35" h="31" l="13" r="48" t="40" b="71" n="Ludzie">
i="PEOPLE" - identyfikator przycisku (na stronie ..... znajduje się opis identyfikatorów)
d="1" - oznacza że przycisk należy do zakładek przełączających zawartość głównego okienka (ludzie, poczta, portal)
w, h - szerokość i wysokość na bitmapie
l, r, t, b - obszar zajmowany przez przycisk w okienku Komunikatora
n - teksty wyświetlany w okienku pomocy (hint)
<s i="0" e="2" d="1">
zestaw dla przycisku wyłączonego
e="2" - korzysta z bitmapy o ID="2'
d="1' - jest to domyślny zestaw
<a k="0" l="0" t="0" d="1"/>
współrzędne lewego górnego rogu elementu na bitmapie dla okna Komunikatora aktywnego
</s>
<s i="1" e="2">
zestaw dla przycisku włączonego
<a k="0" l="0" t="31" d="1"/>
</s>
</i>
Teraz musimy dodać pasek do przewijania listy kontaktów. W tej skórce korzystamy z paska ze standardowej skórki, dlatego definicja bitmapy z grafiką paska wygląda tak:
<i i="22" f="../standardowy/paski.bmp"/>
Pasek przewijania może składać się z 9 różnych elementów - definiowane są one w tagach <s> i oznaczone parametrem "i":
0 - gorna strzalka (obowiazkowy)
1 - dolna strzalka (obowiazkowy)
2 - gorny element tla
3 - srodkowy element tla (obowiazkowy)
4 - dolny element tla
5 - gorny element suwaka
6 - srodkowy element suwaka (obowiazkowy)
7 - dolny element suwaka
8 - element nakladany na srodek suwaka
Każdy element może mieć kilka stanów (takie same jak w przyciskach) - opisane jest to parametrem "k":
0 - okno aktywne, myszka poza przyciskiem
1 - okno aktywne, myszka nad przyciskiem
2 - okno aktywne, myszka nacisnieta na przycisku
3 - okno aktywne, myszka poza przyciskiem, ale przycisk myszki nadal wcisniety (na
przycisku)
4 - okno nieaktywne, myszka poza przyciskiem
5 - okno nieaktywne, myszka nad przyciskiem
<scrollbars>
<i i="SBAR" e="22" l="-31" r="-15" t="71" b="-67" w="16">
prawy brzeg paska jest zgodny z prawym brzegiem listy kontaktów (contactbox)
w="16" - o taką wartość "kurczy" się lista gdy pokazywany jest pasek.
pasek listy kontaktów musi posiadać identyfikator "SBAR"
<s i="0">
górna strzałka
<a k="0" l="0" t="0" r="16" b="16" d="1"/>
gdy myszka poza strzałką
<a k="2" l="0" t="43" r="16" b="59"/>
gdy myszka naciśnięta
</s>
<s i="1">
dolna strzałka
<a k="0" l="0" t="16" r="16" b="32" d="1"/>
<a k="2" l="0" t="59" r="16" b="75"/>
</s>
<s i="3" s="2">
środkowy element tła (s="2" - powtarzanie elementu na zadanym obszarze)
<a k="0" l="0" t="74" r="16" b="94" d="1"/>
</s>
<s i="5">
górny element suwaka
<a k="0" l="0" t="34" r="16" b="42" d="1"/>
</s>
<s i="6" s="2">
środkowy element suwaka
<a k="0" l="0" t="94" r="16" b="114" d="1"/>
</s>
<s i="7">
dolny element suwaka
<a k="0" l="0" t="35" r="16" b="43" d="1"/>
</s>
</i>
</scrollbars>
Teraz przechodzimy do najważniejszego elementu - listy kontaktów:
<contactbox i="CONTACTBOX" l="15" r="-15" t="71" b="-67">
identyfikator "CONTACTBOX" oraz definicja obszaru - lista będzie rozciągać się pomiędzy 15 pikselem od lewego brzegu a 15 pikselem od prawego brzegu w poziomie i pomiędzy 71 pikselem od góry i 67 pikselem od dołu w pionie.
<c s="66B6E0" b="FFFFFF" n="FFFFFF" o="1"/>
definicja kolorów - "s" - kolora zaznaczenia kontaktu, "b" - kolor tła gdy okno Komunikatora jest aktywne, "n" - kolor tła gdy okno jest nieaktywne, "o" - dla o=1 pozwalamy zmieniać użytkownikowi tło listy kontaktów.
<i t="FF00FF">
definiujemy tu ikonki stanów - "t" - przezroczysty kolor w ikonkach
Poniżej przypisanie poszczególnym ikonkom odpowiednich bitmap
Możliwe parametry "i":
0 - tlen dostępny
1 - tlen porozmawiajmy
2 - tlen zaraz wracam
3 - tlen wrócę póĽniej
4 - tlen jestem zajęty
5 - tlen niewidoczny
6 - tlen niedostępny
7 - GG niedostępny
8 - GG dostępny
9 - GG zaraz wracam
10 - GG niewidoczny
11 - telefon
12 - zamknieta grupa
13 - otwarta grupa
Definicje użytych czcionek
Parametry:
"k" - 0 - pozycja niezaznaczona okno aktywne, 1 - pozycja zaznaczona, okno aktywne, 2 -
okno nieaktywne
"i":
0 - pasek stanu ("aktualnie w sieci", etc.)
1 - nazwa grupy
2 - liczby elementow w grupie jesli ktos w niej jest online
3 - liczby elementow w grupie jesli wszyscy w niej sa offline
4 - kontakt online
5 - kontakt offline
6 - kontakt oczekuje na autoryzacje
7 - kontakt nieautoryzowany
8 - kontakt zablokowany
"n" - nazwa czcionki
"c" - kolor czcionki
"b" - styl (1 - pogrubiony, 2 - kursywa, 4 - podkreslony, 8 - przekreslony, mozliwe dowolne
kombinacje (wartosci 0 - 15)
Musimy opisać również napis przedstawiający nasz identyfikator tlenowy:
<labels>
<i i="LABEL" l="14" r="-15" t="11" b="26" n="Komunikator Tlen.pl">
identyfikatorem elementu musi być "LABEL", n - tekst domyślny zanim wybrany jest profil
<f k="0" n="Tahoma" s="8" b="1" c="999999"/>
808080definicja czcionki dla okna Komunikatora aktywnego
<f k="1" n="Tahoma" s="8" b="1" c="999999"/>
i to samo dla okna nieaktywnego, w tej skórce akurat nie ma różnicy
</i>
</labels>
Pozostaje nam jeszcze zdefiniować obszary, po których kliknięciu będzie zmieniany rozmiar okna Komunikatora oraz gdzie będzie przeciągane całe okno:
<mouse>
<c c="0"/>
parametr "c" - ID domyślnego kursora w okienku
<m l="0" t="0" r="0" b="0"/>
obszar po którego kliknięciu można przesuwać okno oraz kursor nad tym obszarem (parametr "c"), w tym przypadku jest to całe okno (tam gdzie nie ma przycisków, czy obszarów do zmiany rozmiaru okna)
<r>
Na koniec kilka ogólnych ustawień skórki w tagu <form>:
<form>
<m h="200" w="180"/>
minimalna wysokość oraz szerokość (jeśli będą za małe przy rysowaniu skórki mogą pojawić się artefakty)
<b c="66B6E0"/>
kolor panelu do wyboru profili
<c l="15" r="-15" t="71" b="-67"/>
obszar w którym wyświetli panel do wyboru profili
<i n="standardowy" a="1"/>
parametr "n" - nazwa zestawu ikonek dla skórki (katalogu w "icon_sets"),
parametr "a": 1 - pozwala na stosowanie własnych zestawów ikonek
</form>
I to już KONIEC - w skórce tej nie wykorzystaliśmy wszystkich dostępnych możliwości mechanizmu skórek, ale jak na początek powinno nam wystarczyć :-)
Po kompletny opis pliku skin.xml zapraszam tutaj: skin_guide.txt
Teraz umieszczamy plik skin.xml wraz z przygotowanymi bitmapami w katalogu o wybranej przez nas nazwie w folderze skins komunikatora. Jeśli wszystko poszło dobrze, to po zmianie skórki w ustawieniach okienko Komunikatora przyjmie taki wygląd:
Materiał opracowany na podstawie instrukcji tworzenia skinów ze strony tlen.pl.
