На втором уроке мы с вами подробно разобрали, как сделать свой собственный мр3-плеер, с выводом ID3-тэгов и другой информации, с открывающимся плейлистом и контролем его состояния. Вы, наверное, скачали файл проекта (см. Урок 2) и, разобравшись с ним основательно, сделали свой собственный, оригинальный плеер. Но не хватало в нём плавного регулятора громкости, и поэтому на третьем уроке мы научились делать такой регулятор, причем нескольких типов.

Я уверен, что вы уже переделали свой мр3-плеер, и теперь в нем есть плавная регулировка громкости. Но... чего-то все же не хватает. "Эквалайзера" - скажете вы. К сожалению, пока Multimedia Builder еще не умеет создавать эквалайзер, хотя я уверен, что в ближайших версиях программы эта проблема будет решена разработчиками программы. Можно в конце концов обойтись и без эквалайзера (я, например, не включаю эквалайзер в Winamp, а пользуюсь регуляторами на акустических системах). А вот чего действительно не хватает нашему (вашему) плееру для завершенного вида - так это ставшего таким привычным слайдера прокрутки трека.

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

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

Итак, создайте новый проект. Да, я настоятельно рекомендую не пытаться сразу "приделывать" прокрутку трека к вашему готовому плееру, а именно создать новый проект, чтобы сначала основательно разобраться в этом вопросе.

Задайте размеры окна, к примеру, 450 на 75 точек. Поставьте набор стандартных кнопок для управления мр3 (инструмент с волшебной палочкой на верхней панели инструментов позволяет "Вставить кнопки управления мр3"). Вместе с кнопками в проекте появятся объекты CBK_Time и CBK_Total. Но нам понадобятся еще два объекта типа CBK - CBK_TimeSec и CBK_TotalSec. Создайте их где-нибудь в стороне от окна проекта (см.рисунок).

Перейдем к созданию прокрутки трека. Как видно из рисунка, для этого нам опять понадобятся две горячие области с именами HotSpotMouse и HotSpotMouseUp, сам слайдер (движок) и графическое изображение дорожки трека. Для нее я использовал пока объект Rectangle с утопленной границей, но впоследствии вы, скорее всего, нарисуете дорожку непосредственно в графическом файле, который будет у вас служить интерфейсом плеера.

Для написания скрипта управления прокруткой трека нам опять понадобятся четыре постоянные числовые величины: posmin, posmax, ypos и handleoff. Первые три из них зависят от места расположения прокрутки трека в окне проекта и измеряются непосредственно в проекте с помощью вспомогательных линий. Напомню, что отсчет производится от верхнего левого угла окна проекта. Величина handleoff определяет ширину захвата мышью движка и выбирается вами самостоятельно (см.рис.)

Горячая область HotSpotMouseUp имеет такое же назначение, как и в случае с регулятором громкости (см.соответствующую статью), и такой же скрипт на вкладке Mouse up:

а в окне взаимодействия с другими объектами - действие RunScript при перемещении мыши по объекту. В качестве объекта укажите HotSpotMouseUp:

Прежде чем мы приступим к назначению действий для горячей области HotSpotMouse, управляющей слайдером прокрутки трека, давайте сначала создадим этот самый слайдер.

В отличие от регулятора громкости, слайдер должен представлять собой обязательно растровый объект, то есть придется нарисовать нужный вам движок в каком-нибудь растровом редакторе, например, в Photoshop. Для чего это нужно, вы поймете чуть позже. "Конструкция" слайдера прокрутки трека будет несколько сложнее, чем регулятора громкости. Посмотрите на рисунок выше, в котором отображен фрагмент окна "Objects", показывающий объект слайдера. Сам объект слайдера называется TrackSlider и представляет собой группу из двух объектов - tracksldr и tracksldr_alpha.

"Зачем создавать два объекта для отображения одного слайдера?" - спросите вы. Если у вас есть Winamp пятой версии со скином Modern, то запустите в нем воспроизведение и потяните движок трека. Вы увидите, что тянете не сам движок (который остается на месте), а как бы его прозрачный образ. И только когда вы отпустите мышь, движок переместится на новое место. Вот для этого нам и нужен второй объект с названием tracksldr_alpha - он будет изображать "призрак" слайдера во время его перетаскивания мышью. А чтобы можно было сделать его прозрачным, этот объект должен быть обязательно растровым. Вот вам и объяснение.

Нет, конечно можно обойтись и без прозрачного образа движка... Правильно, и регулятор громкости тоже можно было оставить кнопочным, со ступенчатым регулированием по пять процентов. И вообще не делать никаких своих плееров, а просто пользоваться готовыми. Но раз уж мы взялись его делать, то давайте делать всё "по фирме".

Ну что, нарисовали движок? Теперь создайте растровый объект с именем tracksldr и загрузите туда вашу картинку. Действий этому объекту назначать не нужно.

Скопируйте и вставьте этот объект. Новый объект с именем tracksldr1 переименуйте в tracksldr_alpha - это и будет наш "призрак". Зайдите в его свойства и в поле "Прозрачная маска" установите флажок "Включить прозрачную маску", а степень установите в пределах 0,4 - 0,6 (см. рис.).

Теперь поместите второй объект на уровень ниже первого, сгруппируйте оба объекта и дайте группе имя TrackSlider. Сделайте скрытыми оба объекта в группе (см.рисунок в начале страницы) - их показ будет, когда нужно, осуществляться скриптами, которые мы напишем ниже.

А скриптов этих будет два.

Почему два? Да потому, что один из них должен будет запускать автоматическое передвижение слайдера, когда включается воспроизведение, а второй будет определять, что должно происходить, когда вы захотите вмешаться в этот процесс и ручками передвинуть слайдер на другое место. Итак, создайте два объекта сценария в вашем учебном проекте. Первый назовите AutoMoveTrackSldr, а второй - MoveTrackSlider.

Но вернемся пока к объекту HotSpotMouse и назначим ему необходимые действия в окне сценариев. На вкладке Mouse Down напишите следующее:

Здесь определяются значения, о которых мы говорили выше и которые будут использоваться в скриптах для вычислений (цифры, естественно, у вас будут свои). А также, пока мышь нажата, но еще не отпущена, будет запущен скрипт MoveTrackSlider. Он, в свою очередь, включит показ "призрака" слайдера и переместит его на позицию мыши (об этом ниже).

На вкладке Mouse Up напишите такой сценарий:

А здесь определяется сценарий уже после отпускания мыши. Что же произойдет? "Призрак" слайдера будет скрыт, а на позицию мыши будет перемещен сам слайдер. Но просто переместить движок - этого мало. Нужно еще "переместить" на соответствующее место воспроизведение песни. Для этого служит команда AudioRewind, в качестве параметра которой указывается время в секундах, на которое должно "перескочить" воспроизведение.

Однако это время нужно еще вычислить. Как? Да очень просто. Время текущей позиции относится к общему времени песни так же, как координата текущей позиции трека относится к общей длине прокрутки трека. Точнее, не координата текущей позиции, а разница между ней и минимальной позицией. Попробую объяснить понятнее. Если длина дорожки перемещения слайдера у вас нарисована в 100 точек, а слайдер переместился на середину, то воспроизведение нужно переместить в точку, равную 0,5 от общего времени воспроизведения. Если слайдер находится в десяти точках от правого края, то общее время нужно умножить на 0,9, а если в десяти от левого - то на 0,1. А общее время извлекается из объекта CBK_TotalSec, вот для чего он нужен в проекте.

Поэтому формула для вычисления выглядит так: разница между текущей и минимальной позицией слайдера делится на сто и умножается на общее время звучания. Ну а если длина дорожки не сто точек, то вводится поправочный коэффициент - в скрипте, показанном выше, это число 0.5181. Чтобы его рассчитать, нужно число сто разделить на разницу между posmax и posmin.

Теперь откройте окно сценария скрипта AutoMoveTrackSldr и скопируйте туда следующий скрипт (не забудьте изменить числовые значения на свои!):

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

Всё просто и гениально (заслуга не моя - авт.)

Вы уже знаете о том, что скрипт должен быть активирован. Когда движок должен прийти в движение? Правильно, при открытии файла, так как после открытия сразу начинается его воспроизведение. Поэтому откроем свойства кнопки загрузки музыкальных файлов и в окне сценария напишем:

В свойствах страницы также откроем окно сценария и напишем строку, задающую значение OpenFileScriptTimer:

А в свойствах кнопки Play тоже напишем строчку:

Теперь проверим, как работает то, что мы сделали. Нажмите F5, загрузите файл и вы увидите, как появится слайдер и начнет медленно двигаться по канавке трека.

Пора написать текст второго скрипта - MoveTrackSlider - который будет управлять перемещением движка вручную. Вот он:

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

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

А наш урок на этом закончен. Как всегда, вы можете скачать готовый проект сегодняшнего урока (размер 12 Кб) для детального изучения.

В заключение должен сделать несколько предупреждений.

Первое. Если в вашем плеере есть и прокрутка трека, и движковый регулятор громкости, то возникнет накладка, связанная с тем, что для работы и того и другого используются значения, названные у нас одинаковыми именами: posmin, posmax, handleoff и ypos. Поэтому для одного из слайдеров надо переименовать эти значения, добавив к ним, например, цифру 2: posmin2, posmax2, handleoff2 и т.д. Также придется переименовать и горячие области второго слайдера в HotSpotMouse2 и HotSpotMouseUp2. Не забудьте внести эти изменения и в скрипты и вообще везде, где упоминаются эти значения и объекты.

Второе. При добавлении слайдера в реальный мр3-плеер (например, в тот, что мы сделали на втором уроке) вас ожидает целый ряд трудностей с запуском скрипта AutoMoveTrackSldr, который не будет желать запускаться после перехода от одной песни к другой, после выбора песни двойным щелчком в плейлисте и т.п. Поэтому придется продумать запуск этого скрипта во всех необходимых случаях. Все эти сложности я предоставляю вам преодолеть самостоятельно, ибо подобный опыт вами уже приобретен во время второго урока. Можно пытаться задействовать для этого скрипт CBK_MP3EOF или скрипт вывода заголовка, внося в них соответствующие записи. Можно вносить изменения и в сам скрипт AutoMoveTrackSldr, привязывая его к состоянию других объектов. Вобщем, больше думайте, анализируйте причины неработоспособности каких-то отдельных моментов - и пробуйте, пробуйте, пробуйте. А успех непременно к вам придёт.