Создание Freeform скинов для WinAMP (главное окно) - Nullsoft WinAMP modern skins - Уроки програмирования - Каталог статей

Навигация

Главная страница
Форум
Файлы
Гостевая книга
Ваше портфолио

Мини-чат

Главная » Статьи » Уроки програмирования » Nullsoft WinAMP modern skins

Создание Freeform скинов для WinAMP (главное окно)

Урок по созданию Freeform (Modern) скинов для WinAMP (как делаются скины для WinAMP 3, 5...) — серия уроков. Урок второй — собираем полностью функциональное главное окно...

В прошлом уроке я вам рассказал как рисуется скин для WinAMP (точнее его главное окно). Сейчас я вам раскажу как собрать из готовых элементов полностью функциональное главное окно.

Благодаря этому уроку вы научитесь собирать скины на WinAMP, которые будут мало «весить», будут работать без ошибок, верно отображаться, быстро грузиться и т.д. — в общем, всё будет оптимизировано по полной программе :)

Всё не на столько сложно как кажется — главное, чтобы у вас было желание научиться, ну и терпение тоже не помешало бы...

Ну вы готовы (в хорошем смысле)? Тогда приступим к уроку!

1. Общая информация о Modern (Freeform) скинах для WinAMP

Чем отличаются скины в стиле Modern (Freeform), используемые в плеере WinAMP начиная с 3-й версии от скинов, используемых в более старых версиях плеера (WinAMP 2.x)?

В 3-й версии плеера WinAMP появился новый движок для скинов, название которого Wasabi.

1.1. В чём особенности движка Wasabi?

Особенности движка Wasabi:

Основан на языке XML, из-за чего сложность создания скинов сводится к минимуму (язык этот очень простой).
Элементы произвольной формы (раньше, как вы помните, все скины по форме были совершенно одинаковыми).
Скрипты. Движок поддерживает скрипты, написанные на специальном языке MAKI (Make A Killer Interface).
Эмуляция старой версии скинов (WinAMP 2.x).
Масштабирование с билинейной фильтрацией любого элемента «на лету».
Анимация, трансформация в реальном времени.
Альфа-прозрачность.
Цветовая коррекция любого элемента скина.

И другие мелочи...

В общем, сейчас можно создать скин, который ни чем не будет похож на все остальные скины, т.е. будет уникальным.

1.2. Я не могу открыть .wal файл со скином. Что мне делать?

Всё просто: .wal файлы — это тот же самый .zip архив, так что, чтобы его (скин) можно было отредактировать, нужно просто разархивировать скин. Для этого измените расширение файла с .wal на .zip (иногда можно этого и не делать) и откройте его любым архиватором, поддерживающим формат .zip (например, WinRAR или WinZIP).

Когда вы будите делать скин и захотите посмотреть на результат, то не обязательно запаковывать скин обратно в .wal файл, можно его использовать в распакованном виде.

1.3. В чём редактируют (создают) .xml файлы?

Файлы .xml — это обычные текстовые документы. Берите любой текстовый редактор, например Блокнот, открывайте .xml файл и делайте что угодно... Но я бы посоветовал редактор с подсветкой синтаксиса, например «NotePad++» (ссылка в конце урока).

XML (eXtensible Markup Language) — расширяемый язык разметки. Если вы знаете язык HTML, то с XML вы легко разберётесь — бояться вам нечего...

Ну а рисуется вся графика в любом графическом редакторе, из которых, конечно, выделяется PhotoShop...

Ну что? Теперь вы имеете небольшое представление о том, что такое Freeform скин для WinAMP, значит, можно приступить к уроку о создании таких скинов.

2. Создание Freeform скина для WinAMP

Начнём. В папке Program Files\Winamp\Skins создайте папку с названием нового скина. Я создал папку с именем DesignArts.ru AMP Lesson. В этой папке будут храниться все файлы будущего скина.

2.1. Файл skin.xml

Основным файлом, который связывает все элементы воедино, является файл skin.xml, который должен лежать в корневой директории скина (в данном случае это папка «DesignArts.ru AMP Lesson»). Остальные же элементы могут размещаться где угодно и называться как угодно, но, для удобства, их лучше разложить по папкам. Скоро вы всё поймёте...

Сейчас запускайте текстовый редактор и создайте новый файл. В нём наберите следующий текст, ниже я прокомментирую каждую строку:

<wasabixml version="1.2">

<skininfo>
<version>1.0</version>
<name>DesignArts.ru AMP</name>
<comment>Created by Guljay S.V. aka Serg for Winamp skinning tutorial.</comment>
<author>Guljay S.V. aka Serg</author>
<email>admin@designarts.ru</email>
<homepage>http://designarts.ru</homepage>
<screenshot></screenshot>
</skininfo>

<include file="xml/player.xml" />

<elements>
<truetypefont id="hooge" file="font/hooge.ttf" />
</elements>

</wasabixml>

Начну комментировать каждую строку:

Эта строка размещается в самом начале — она указывает на тип документа, язык, на котором написан документ (DocType). Если прочитать внимательно, то можно понять, что это язык XML версии 1.0, кодировка — UTF-8 (данная кодировка является универсальной, советую вам использовать именно её). Советую вам оставить данную строку без изменений, чтобы избежать различных проблем.

<wasabixml version="1.2">

Тег с объявлением версии языка WasabiXML (разновидность XML, предназначенная для использования совместно с WinAMP Wasabi).

<skininfo>

Тег, в котором находятся все теги, описывающие наш скин (информация о названии скина, его версия, автор и другие данные... — выводится эта информация в окошке с настройками плеера «WinAMP Preferences» ), в данном случае:

<version> — Данный тег указывает версию скина. Если это первая версия вашего скина, то пропишите тут 1.0, или 1.0 beta, в общем, что желаете.
<name> — Название скина, у меня — DesignArts.ru AMP.
<comment> — Комментарий к скину, например, краткое описание, замечание или предупреждение.
<author> — Имя и (или) ник автора.
<email> — Адрес электронной почты автора.
<homepage> — Домашняя страничка автора или скина.
<screenshot> — Скриншот. Зачем он нужен я не в курсе, т.к. что бы я не делал — он не отображается. Так что этот тег можно оставить пустым, что я и сделал.

<include file="xml/player.xml" />

Это строка (тег) включения или же вложения. Нужна она для того (я вам ранее говорил — сейчас напомню), чтобы привести все файлы в удобный для последующего редактирования вид.

То есть, можно не использовать включения и записать весь код скина в один единственный файл — skin.xml, но это не удобно и, для того, чтобы не было путаницы, лучше разделить скин на части.

В данном случае в скин включается файл player.xml (его мы создадим немного позже), который находится в папке xml (она же лежит, точнее будет лежать, в корневой директории будущего скина). Заметьте, что тег <include /> не имеет парного закрывающего тега, поэтому перед закрывающей скобкой стоит слеш (/), а перед ним пробел (это важно — это синтаксис языка XML).

<elements>

Данный тег служит для создания элементов, т.е. для присвоения неким файлам уникальных идентификаторов, по которым потом к ним можно будет обратиться.

<truetypefont />

Этот тег используется для создания элемента «шрифт». Имеет два атрибута:

id — Уникальный идентификатор — имя, по которому мы будем обращаться к данному элементу (к элементу «шрифт»).
file — Ссылка на файл со шрифтом, которому сопоставляется данный идентификатор. Пути к файлам должны быть относительны корневой директории скина.

Это может быть немного не понятно — если не поняли, то лучше не забивайте этим голову — во всём этом вы разберётесь тогда, когда мы дойдём до конкретного примера.

Вот мы и разобрали этот код. Сохраните написанный только что код в файле с именем skin.xml и положите его в корневую директорию скина (в данном случае это директория « DesignArts.ru AMP Lesson »).

2.2. Файл player.xml

В корневой директории скина создайте папку « xml », в которой создайте файл player.xml (именно такой, т.к. мы его уже прописали в файле skin.xml).

В данном файле будут описаны все элементы главного окна плеера (т.е. главное окно, но без плейлиста, эквалайзера, библиотеки и т.д.). В прошлом уроке мы нарисовали главное окно и все его элементы, теперь мы их соберём воедино и сделаем рабочий скин.

Надеюсь, что к этому моменту у вас уже нарисованы все элементы главного окна скина. Какие именно — смотрите рисунок ниже:

урок по созданию Freeform скинов для WinAMP

Вот список этих файлов:

main.png — фон главного окна

play.png — кнопка Play

play_hover.png — выделенная кнопка Play

play_down.png — нажатая кнопка Play

pause.png — кнопка Pause

pause_hover.png — выделенная кнопка Pause

pause_down.png — нажатая кнопка Pause

stop.png — кнопка Stop

stop_hover.png — выделенная кнопка Stop

stop_down.png — нажатая кнопка Stop

prev.png — копка Previous

prev_hover.png — выделенная кнопка Previous

prev_down.png — нажатая кнопка Previous

next.png — кнопка Next

next_hover.png — выделенная кнопка Next

next_down.png — нажатая кнопка Next

shuffle_on.png — кнопка при включенном перемешивании (Shuffle)

shuffle_off.png — кнопка при выключенном перемешивании (Shuffle)

repeat_on.png — кнопка при включенном повторе (Repeat)

repeat_off.png — кнопка при выключенном повторе (Repeat)

seeker.png — «бегунок» для прокрутки трека и регулирования громкости

seeker_hover.png — выделенный «бегунок» для прокрутки трека и регулирования громкости

seeker_down.png — нажатый «бегунок» для прокрутки трека и регулирования громкости

seekanim.png — фон полосы прокрутки

mute_on.png — кнопка при включенном звуке (Mute)

mute_off.png — кнопка при выключенном звуке (Mute)

mute_hover.png — выделенная кнопка включения (выключения) звука (Mute)

playlist_on.png — кнопка при включенном плейлисте (PlayList)

playlist_off.png — кнопка при выключенном плейлисте (PlayList)

playlist_down.png — нажатая кнопка включения (выключения) плейлиста (PlayList)

openfile.png — кнопка открытия файла (Open File)

openfile_hover.png — выделенная кнопка открытия файла (Open File)

openfile_down.png — нажатая кнопка открытия файла (Open File)

equalizer_on.png — кнопка при включенном эквалайзере (Equalizer)

equalizer_off.png — кнопка при выключенном эквалайзере (Equalizer)

equalizer_down.png — нажатая кнопка включения (выключения) эквалайзера (Equalizer)

medialibrary_on.png — кнопка при включенной библиотеке (Media Library)

medialibrary_off.png — кнопка при выключенной библиотеке (Media Library)

medialibrary_down.png — нажатая кнопка включения (выключения) библиотеки (Media Library)

Если каких-то файлов у вас нету — нарисуйте их сейчас, не отлаживайте на потом.

Если они уже есть, то создайте в корневой директории скина папку «player» и переместите в неё все эти файлы.

Открывайте файл player.xml и начнём писать код — собирать все элементы главного окна скина.

Запишите в этот файл следующий код:

Расскажу что мы сделали:

<container id="main" name="Main Window">

Это мы создали контейнер — объект (группа элементов) верхнего уровня, который чаще всего составляет окно. У нас пока в плеере будет один контейнер — одно окно (главное окно плеера). А вообще, элементы окон с эквалайзером, плейлистом и т.д. тоже должны быть помещены в контейнер, но их (эти окна) мы пока делать не будем.

В теге <container> прописаны некоторые параметры. Вот их список с комментариями:

id — Идентификатор элемента, или же его уникальное имя — обязательный параметр. Раз это имя уникальное, то желательно, чтобы оно не повторялось.
name — Просто имя объекта. В отличие от идентификатора не является обязательным для всех элементов и может повторяться. Используется много где, например в списке окон плеера (но не во всех случаях), а он (список) в главном меню (это когда кликаете на плеере правой клавишей).

Далее идёт следующая строка:

<layout id="normal" w="303" h="209" desktopalpha="1" droptarget="pldr">

Это ещё один вид групп, в контейнер таких групп может быть помещено несколько, одновременно может отображаться только одна группа типа layout. А объяснить это можно на следующем примере: в стандартном скине из WinAMP 5 есть несколько режимов отображения главного окна — это режим Normal и Window Shade — всё это одно и то же окно, но представленное по-разному. У нас пока будет только один режим отображения главного окна, значит и элемент layout будет один.

В теге <layout> встречаются новые параметры, это:

w — ширина окна в пикселях. Определите ширину окна и впишите её сюда. У меня ширина равна 303 пикселя. Если ширина будет меньше, чем настоящая ширина окна, то большие элементы будут просто обрезаться. В данном примере шириной окна является ширина фонового рисунка (файл main.png), т.к. ни один элемент не находится за пределами фонового рисунка (все они располагаются над ним). Если у вас будут какие-то элементы находится за пределами фона (например снизу или сбоку), то ширину придётся увеличить.
h — высота окна в пикселях. Тут всё так же, как и с шириной.
desktopalpha — указывает на то, включена ил поддержка прозрачности или нет. Если ваш скин не имеет прозрачных элементов (тень относится к прозрачным элементам!), по поставьте значение 0, если же вы хотите использовать прозрачность, то значение должно быть равно 1.
droptarget — этот параметр указывает на то, какое действие будет происходить при перетаскивании файла на данное окошко. В данном случае это воспроизведение перетащенного на окошко файла, чему соответствует значение pldr.

Все отображаемые элементы (да и не только) будут располагаться внутри этого тега (<layout>).

2.2.1. Начнём добавлять в главное окно все заготовленные заранее элементы.

Иерархия элементов такова, что элемент, расположенный ниже в коде скина будет находится выше в самом плеере. То есть, если мы хотим сделать какой-то фон, то мы его должны поместить в самом верху (естественно, внутри тега <layout>, а не за его пределами).

Так и поступим — добавим фоновый рисунок. Для этого внутри тега <layout> (имеется ввиду между <layout> и </layout>) поместите следующий код:

Сейчас поясню что к чему:

Тег <layer /> представляет собой элемент, которому не назначается действие, или проще — обычная картинка, т.е. он только отображается, но ничего не делает, никаких функций у него нет. Вы можете кликать на него пока не обкликаетесь, но ничего происходить не будет.

Данный тег имеет следующие новые (не оговоренные мной ранее) атрибуты (параметры):

image — Ссылка на файл с изображением (картинкой). Все ссылки указываются относительно главной директории скина, т.е. относительно той, в которой лежит файл skin.xml.
x — Координаты элемента в пикселях по горизонтали относительно группы, в которой он находится, т.е. относительно группы (элемента) layout или же относительно окна.
y — То же, что и x, но по вертикали.
tooltip — Всплывающая подсказка. Отображается при наведении курсора на элемент и удержании его в течении некоторого непродолжительного времени (около одной секунды). В данном случае при наведении на окно плеера будет отображаться всплывающая подсказка с его названием — « DesignArts.ru AMP »

Со вставкой статической графикой, надеюсь, всё ясно.

2.2.2. Сейчас разберёмся с кнопочками — их у нас предостаточно...

Тег кнопки выглядит так: <button />

Добавим кнопку Play (воспроизведение). Для этого после написанного только что кода (после <layer />, ниже) добавим следующий код:

Новые атрибуты:

action — Этот параметр предназначен для указания действия, которое будет происходить при нажатии на кнопку. Для кнопки Play он равен «play».
hoverimage — Картинка, отображающаяся при наведении курсора на кнопку.
downimage — А эта картинка отображается при нажатии на кнопку (т.е. кнопка в нажатом состоянии).

Думаю, что сложного ничего здесь нет — единственная проблема, которая может возникнуть, это вычисление координат x и y. Я это делаю «на глаз» следующим образом:

Пишу примерные координаты, сохраняю файл. Затем запускаю WinAMP, выбираю свой скин и смотрю — попал куда нужно или нет. Если нет, то изменяю координаты, сохраняюсь, перехожу в плеер и жму F5 (чтобы обновить скин, кстати, этого многие почему-то не знают). Смотрю попал или нет и так далее, пока не станет всё на своё место...

Тут всё ясно. Пойдём дальше — сделаем остальные кнопки. А именно кнопку Pause (пауза). В плеере WinAMP кнопки Play и Pause — это две разные кнопки и, чтобы их объединить воедино (т.е. чтобы при воспроизведении была кнопка Pause, а при нажатии на неё, или когда трек не воспроизводится, на её месте была кнопка Play), нужен специальный скрипт «Play to Pause» (скачать его можно ниже). Сейчас расскажу как сделать кнопку Pause и вставить этот плагин в скин.

Код кнопки Pause будет следующим (заметьте, что координаты кнопки такие же, как и у кнопки Play, т.к. эти кнопки будут объединятся в одну):

Нового в данном коде вы ничего не увидели — всё это уже было, только поменялись значения параметров. Добавить этот код нужно после прошлого кода, и так же поступать далее.

А сейчас расскажу подробнее о вышеупомянутом скрипте для объединения кнопок Play и Pause в одну...

В главной директории скина (у меня — папка «DesignArts.ru AMP Lesson») создайте папку, в которую мы будем далее ложить все нужные скрипты (а таких будет ещё несколько), папку лучше назвать более понятным именем, я, например, назвал её «scripts». Данный скрипт (файл play2pause.maki) поместите в эту папку для скриптов.

Вернёмся к нашему файлу player.xml и добавим после кода кнопки Pause следующий код (код для включения (интеграции) скрипта в скин):

Здесь новый параметр (атрибут):

file — Путь к файлу со скриптом относительно главной директории скина.

Продолжим добавлять кнопки. Ниже кнопки Play/Pause добавим кнопку Stop. Её код будет следующим:

Заметьте, что координаты по горизонтали (по оси x) остались прежними, т.к. кнопка в скине будет находится сразу под кнопкой Play/Pause, т.е. изменится только y. Чтобы высчитать координаты кнопки Stop по оси y, достаточно к координате верхней кнопки прибавить её высоту (т.е. к координате кнопки Play/Pause прибавить высоту кнопки Play/Pause): y2=y1+h1, y2=30+25=55.

Надеюсь, что тут всё ясно.

Аналогичным образом добавим остальные кнопки. Сразу добавим кнопку Next (переход к следующему треку). Её код будет следующим:

Тут всё по-старому.

А вот код кнопки Previous (переход к предыдущему треку):

Далее добавим кнопку для включения (отключения) перемешивания (Shuffle). Данная кнопка является переключателем, т.е. имеет два значения — включено и выключено.

Тут у нас следующие параметры:

image — Картинка в выключенном состоянии.
activeimage — Картинка во включенном (активном) состоянии.
cfgattrib — А этот атрибут указывает на то, что за действие будет происходить при нажатии на кнопку-переключатель. То есть указывает на то, каким параметром эта кнопка-переключатель будет управлять. В данном случае это перемешивание (Shuffle), чему соответствует значение «{45f3f7c1-a6f3-4ee6-a15e-125e92fc3f8d};shuffle»

Таким же образом добавим кнопку для повтора плейлиста (Repeat):

Ну всё, с кнопками для управления воспроизведением (те, что в правой части скина) мы разобрались.

Наш скин на данном этапе должен выглядеть вот так:

как делаются Freeform (Modern) скины для WinAMP

2.2.3. Сейчас перейдём к созданию кнопок для открытия (закрытия) окошек.

Правда, самих окошек мы пока делать не будем, сделаем их в следующих уроках, но вместо них будут появляться стандартные окошки.

Сразу добавим кнопку для открытия (закрытия) окна PlayList Editor (список воспроизведения). Данная кнопка является переключателем, по этому её тег будет таким: <togglebutton />. Она находится уже в другом месте, отличном от того, где были прошлые кнопки (они были справа, а она слева сверху), поэтому снова подбираем координаты «на глаз». А вот весь код кнопки для управления окном PlayList Editor:

У кнопок-переключателей для открытия (закрытия) окошек немного другие параметры, чем у кнопок-переключателей режимов воспроизведения. Вот они:

action — Действие при нажатии на кнопку, т.к. кнопка является переключателем отображения окна, то данный атрибут должен быть равен «toggle» (переключение).
param — Данный атрибут указывает что именно будет переключать данная кнопка-переключатель. В данном случае это открытие (закрытие) окна PlayList Editor, поэтому атрибут будет равен «guid:pl».
image — Картинка (изображение кнопки) в выключенном состоянии.
activeimage — Картинка во включенном (активном) состоянии.
downimage — Картинка при нажатии на кнопку.
rectrgn — Сейчас объясню для чего этот атрибут. Вот у меня кнопки для управления окошками следующие: текст, вокруг рамочка, а между ними пусто — прозрачность. Если не написать этот параметр, то, чтобы нажать на кнопку, мы должны попасть на непрозрачную область (на текст или рамку), а при клике на прозрачную область кнопки ничего не произойдёт, т.к. там что-то вроде «дырки». Вот чтобы эта прозрачность стала кликабельной, чтобы мы не целились на текст или рамку, а могли переключить окошко нажав на любую часть кнопки, и существует этот атрибут.

Так же имеются другие параметры, о которых я рассказал ранее, но я их не использовал из-за ненадобности (такие как, например, hoverimage).

Таким же образом добавим кнопку для открытия (закрытия) окна Media Library (мультимедийной библиотеки). Она будет расположена на той же высоте, что и прошлая кнопка, но правее её, поэтому y останется прежним, а изменится только x. Вот её код:

Далее добавим кнопку для открытия (закрытия) окна Equalizer (эквалайзер). Только, в отличие от прошлых окошек, при нажатии на неё мы эквалайзер не увидим, т.к. его нужно сразу создать, что мы сделаем в следующих уроках.

А вот код этой кнопки:

Нового тут пока ничего нет, так что перейдём к следующей кнопке.

Добавим кнопку для открытия файлов — кнопка Open или же Eject.

Заметьте, что нового и тут тоже нету ничего, кроме отсутствия атрибута param.

Ну всё. Жмём F5 и любуемся главным окном:

в чём собирают скины для WinAMP

2.2.4. Чего-то не хватает, не правда ли? :)

А не хватает тут ещё многого: информации о треке (имя исполнителя, название трека), времени проигрывания, информации о качестве трека (битрейт, частота), полосы прокрутки трека и регулятора громкости + кнопки для отключения звука и, наконец, визуализации. Этим всем мы сейчас и займёмся...

Давайте сейчас добавим визуализацию. Тег визуализации такой: <vis />. А весь её код следующий:

Что же мы тут нового встретили:

alpha — Прозрачность элемента. Данный параметр подходит не только для визуализации, но и для других элементов (т.к. кнопки, изображения и т.д.). Данный параметр имеет размер 8 бит, т.е. его максимальное значение — 255, что соответствует полной непрозрачности, соответственно 0 — полная прозрачность.
colorband1 ... colorband16 — Цвета для каждого столбика визуализации (от первого до шестнадцатого) при выбранном типе визуализации «Spectrum Analyzer» (визуализация виде столбиков). Цвета указываются в RGB палитре, т.е. максимальное значение такое: «255,255,255», что соответствует белому цвету.
colorbandpeak — Этот атрибут служит для указания цвета вершин (это такие чёрточки, которые медленно спадают вниз) для визуализации типа «Spectrum Analyzer».
colorosc1 ... colorosc5 — А это уже цвета для разной частоты при выбранной визуализации типа «Oscilloscope». Если не понятно — попробуйте их поизменять и сразу же увидите результат.

Вот и всё. С визуализацией мы тоже разобрались.

Нажмите F5 — у вас должно получиться что-то похожее на вот это:

урок по скинам для винампа

2.2.5. Давайте перейдём к тексту, точнее к надписям.

Я имею ввиду вывод различной информации о треке.

Прежде, чем начать добавлять текст, давайте определимся со шрифтом. В моём примере я буду использовать мелкий текст, а, поэтому, нужно взять шрифт как можно более простой, который чётко смотрится при самом маленьком размере. Такие шрифты называются пиксельными. Я использовал шрифт «hooge 05_55 Cyr2» (скачать его можно в конце урока). Чтобы было всё аккуратно, создайте в главной директории скина папку для шрифтов (я её назвал «fonts») и положите туда этот шрифт.

Со шрифтами всё ясно, теперь давайте разберёмся получше с выводом текстовой информации. Для вывода текстовой информации служит тег <text />.

Добавим строку с информацией о исполнителе и названии трека.

Здесь есть несколько новых атрибутов:

ticker — Данный атрибут служит для автоматической прокрутки текста, если его длинна превышает значение атрибута w.
display — Указывает на то, какую именно информацию нужно отобразить.
w — Длинна текстового блока. Если текст не помещается по длине в текстовый блок, то он обрезается, но если включена прокрутка, то он будет автоматически прокручиваться.
h — Высота текстового блока.
font — Используемый в надписи шрифт. Заметьте, что тут указывается не ссылка на сам файл со шрифтом, а название шрифта, точнее его id, а он же берётся из файла skin.xml (из тега <elements>). Помните, в начале урока я говорил, что если вы не поняли, для чего предназначен тег <elements> и все вложенные в него теги и сказал ждать конкретного примера? Вот это и есть тот самый пример использования элементов — когда к файлу обращаются не по его имени, а по идентификатору, присвоенному ранее.
fontsize — Размер шрифта. Тут всё ясно...
color — Цвет шрифта в палитре RGB.
align — Горизонтальное выравнивание надписи относительно её границ, которые мы задали параметрами w и h. Атрибут может принимать параметры: left (по левому краю), center (по центру), right (по правому краю).
rightclickaction — Событие, которое будет происходить при клике правой клавишей на надписи. В данном примере будет появляться меню «Track Menu».
dblclickaction — Событие, которое произойдёт при двойном клике на надписи. В данном примере появится окошко для редактирования ID3 тегов (информации о музыкальном файле).

Это всё. Теперь добавим ещё одну надпись. На этот раз это будет информация о качестве трека, т.е. битрейт, количество каналов, частота:

Тут ещё один новый атрибут:

default — Это текст, который будет отображаться в том случае, когда информация не может быть отображена.

Ну и последним текстом, который мы добавим, будет таймер (время трека):

Тут уже всё ясно, ничего нового здесь нет. Значит обновляем скин, смотри что получилось и идём дальше. А получится должно вот что:

урок о создании Modern (Freeform) скинов для WinAMP

2.2.6. Оставшиеся элементы.

Осталось добавить полосу прокрутки трека и регулятор громкости с кнопкой отключения звука (Mute) — это я само больше не люблю...

Ничего не поделаешь... Начнем-с...

Полоса прокрутки делится на две части: сам «бегунок» и фон под ним (полоса прогресса), которым выделяется уже проигранная часть трека (он постоянно растягивается при проигрывании, пока не займёт всю выделенную для него длину). Сейчас вы всё это увидите...

Для создания полосы прогресса служит тег <progressgrid />. Вот код самой полосы прогресса:

Тут есть новые атрибуты:

orientation — Ориентация полосы. При горизонтальной ориентации данный атрибут может иметь значения left (слева) и right (справа), а при вертикальной (я использовал именно вертикальную ориентацию) — top (сверху) и bottom (снизу). То есть, указав здесь top полоса будет вертикальной (столбик) и двигаться будет снизу вверх; если указать left, то полоса станет горизонтальной и будет двигаться слева направо...
middle — Это текстура, которой будет заполняться фон данной полосы, точнее та его часть, которая соответствует проигранной части трека.

Эмм... Тоже немного запутано, но ничего — разберётесь — просто попробуйте добавить этот код в остальной код скина и увидите что к чему...

С одной полосой прогресса прокрутить трек с помощью курсора мышки невозможно, для этого и нужен тот самый «бегунок» - он должен двигаться вместе с полосой прогресса.

Для создания «бегунков» существует тег <slider />. Вот код такого «бегунка»:

Вот что тут из особенного:

action — Событие, происходящее при перемещении «бегунка». В данном случае это прокрутка трека (seek).
thumb — Картинка, отображающаяся в нормальном состоянии «бегунка».
hoverthumb — Картинка, отображающаяся при наведении курсора на «бегунок».
downthumb — А это картинка в нажатом состоянии (при нажатии на «бегунок»).
orientation — Ориентация «бегунка». Тут немного не так, как у полосы прогресса. Этот параметр может иметь только два состояния: vertical (вертикальная ориентация) и horizontal (горизонтальная).

Таким же образом добавим «бегунок» для регулирования громкости:

Если вы до сюда дошли, вытерпели, то это просто супер! Так как это почти всё.

Осталось только добавить кнопку для отключения звука.

В качестве кнопки для включения (выключения) звука мы будем использовать, как вы могли догадаться, кнопку-переключатель, т.е. тег <togglebutton />.

Код кнопки выглядит следующим образом:

Нового я тут ничего не вижу, но... Кнопка в таком виде звук отключать или включать не будет — да хоть обкликайтесь :) Чтобы она заработала нужен один небольшой скриптик с название mute.maki (скачать его можно в конце урока), а строка для интеграции его в плеер будет следующей:

Могу вас поздравить, ведь вы уже сделали полностью рабочее главное окно вашего будущего скина! Запустите, или обновите скин (F5), если он уже запущен и полюбуйтесь на результат:

как сделать Freeform (Modern) скин для WinAMP

Если вы что-то не поняли, то спрашивайте у меня. Мою контактную информация можно всегда узнать на странице « О нас »

В следующих уроках я расскажу про создание остальных окошек и обо всём остальном... Вобщем, скоро вы сможете создать полноценный Freeform (Modern) скин для плеера WinAMP своими руками.