категории | RSS

Для того чтобы лучше понять как устроенны скины данного плеера - разберем стандартный скин *Classic*.
!/Shared/PowerMP3/Skins/Classic
В данной папке находятся файлы от стандартного скина.
В нем мы видим:
bckg_240x320.png - фон на 240х320
bckg_320x240.png - фон на 320х240
elements.png - элементы скина (плей, пауза ...)
skin_240x320.xml - отвечает за расположение элементов на скине 240х320
skin_320x240.xml - отвечает за расположение элементов на скине 320х240
themes.xml - цветовые темы для данного скина (необязателен)
Самым важным файлом является skin_000x000.xml где 000x000 разрешение скина.
Итак, приступим.
1) Рисуем фон скина. И даем ему имя bckg_000x000.png где 000x000 разрешение экрана на которое расчитан скин (вообще название фоновой картинки можно сделать любым, но легче будет использовать стандартный формат имени). Естественно картинка должна быть сохранена в формате png.
2) рисуем все необходимые элементы скина (какие необходимы можно посмотреть в стандартом файле элементов elements.png). Все элементы нужно объединить и сохранить в одном пнг файле. Даем имя файлу elements.png (желательно. Можно использовать другое)
3) теперь нужно указать в файле skin_000x000.xml (где 000x000 ваше разрешение) где элементы из файла elements.png должны быть размещенны на скине. Для этого лучше отредактировать стандартный skin_000x000.xml чем создавать новый smile.
Редактирование файла вида skin_000x000.xml
В качестве примера я разберу skin_240x320.xml из папки !/Shared/PowerMP3/Skins/Classic.
Открываем skin_240x320.xml при помощи X-plore (наводим курсор на файл и жмем цифру 8).
Тут мы видим:
Шаг №1) фон скина

{images}
{image file="bckg_240x320.png" }
{coord id="bckg_main" left="0" top="0" width="240" height="320"/}
{/image}

Описание
{image file="bckg_240x320.png" }
- тут указанно имя фона скина
{coord id="bckg_main" left="0" top="0" width="240" height="320"/}
- здесь говорится где находится первый пиксель фона в файле bckg_240x320.png (left="0" top="0" - то бишь 0х0) и размер фона (width="240" height="320" - 240х320) начиная с точки 0х0.
З.Ы. теоретически я могу нарисовать фон размером 250х330, поместить фоновую картинку разрешением 240х320 в правый нижний угол. А в .xml файле указать это
{coord id="bckg_main" left="10" top="10" width="240" height="320"/}
и всё у меня будет нормально с фоном smile
Шаг №2) элементы в файле elements.png
Строка
{image file="elements.png" }

Означает, что нужно указать где какой элемент в файле elements.png расположен smile.
Под данной строкой идет следующая
{coord id="analyzer_filled" left="0" top="0" width="112" height="40"/}

analyzer_filled - это спектр-анализатор
left="0" top="0" - координаты первого пикселя анализатора в файле элементов.
width="112" height="40" - размер элемента спектра-анализатора.
Далее идут файлы *alb_image_bckg* - обложка дорожки, *rating_filled* - рейтинг песенки и т.п. Их разбирать не стану т.к. думаю что всё уже понятно smile
Шаг №3) размещение элементов на скине.
Где то в середине файла .xml видим
{layout width="240" height="320" image="bckg_main"}

Тут указанно разрешение области используемая для размещения элементов (думаю доступным языком написал) smile
Далее начинаются строчки отвечающие за размещение элементов на скине. Первый из них
{analyzer
left="120" top="38" width="112" height="40"}
{bars image="analyzer_filled"/}
{/analyzer}

left="120" top="38" width="112" height="40" - тут указанны начальные координаты элемента (120х38) и размер элемента (112х40)
Шаг №4) размещение текстовых надписей на скине.
Строчки отвечающие за текст идут вместе со строчками отвечающими за ремешение элементов smile и это немного усложняет нашу работу.
Вот эти строки отвечают за битрейт
{text
id="BITRATE"
left="10" top="34" width="80" height="30"
font="Arial"
point="12"
style="bold"
align="center"
color="#FFFFFF"/}

*left="10" top="34" width="80" height="30"* - кусочек скина отводимый для указания битрейта smile)))
*font="Arial"* - тип шрифта. Существуют "Arial", "extrasmall", "small".
*point="12"* - размер шрифта.
*style="bold"* - стиль шрифта. Бывают "bold", "normal".
*align="center"* - расположение текста в отведенном для него кусочке smile Существуют "center", "left", "right".
*color="#FFFFFF"* - цвет текста по принципу RGB в 16тиричной форме.
P.S. файл themes.xml раскрывать не вижу смысла) после всего прочитаного всё должно быть и так понятно! ))
P.S.S. все замеченные ошибки в статье, предложения о ее дополнении прошу сообшать мне в ЛС
вместо знаков > , < пришлось использовать  } , {

С уважением участник
SymbianTweak - Style Team | rap-st

DimonVideo
2009-05-11T16:51:33Z
Здесь находятся
всего 0. За сутки здесь было 0 человек

Комментарии 18

#18   SnigerS    

прочитал статью.... и понял, что лучше не заморачиваться с созданием своего скина)))


0 ответить

#18   Albl4    

А как создавать темы для S60 v5 ?


0 ответить

#18   alchin    

Разъяснения очень внятные, но самое главное, как расчитать координаты на смарте, этого нет.


0 ответить

#18   Abs.LIR    

Насчет шрифтов не пойму... Только три чтоли... И названия *Ариал, смол, экстрасмол*... Используются же стандартные шрифты...


0 ответить

#18   rap-st    

SamXXX, читай статью внимательнее!


0 ответить

#18   SamXXX    

и тут напрашивается один вывод - для TTpod скрины легче и понятливее делать
Хоть бы написал в своей статье, что в начале используются размещение в файле elements.png а позже расположение этих элементов на скине


* редактировал(а) SamXXX 22:02 24 май 2009

0 ответить

#18   Demist    

не получается с элементами, не понимаю


0 ответить

#18   Vangoga    

Спасибо огромное за статью!


0 ответить

#18   Slavasyrota    

Молоток, только удобней сначала описать размещение элементов в файле Element.png, a потом уже размещать их на скине.


0 ответить

#18   rap-st    

Я для этого использую программу для рисования иконок, называется ArtIcons Pro


0 ответить

Яндекс.Метрика