Уроки
Написать нам

Урок 3. Как сделать регулятор громкости - Уроки мастерства

Надеюсь, что вы ждете этот материал, потому-что ваш мр3-плеер, сделанный на прошлом уроке, выглядит не совсем полноценным из-за отсутствия плавного движкового регулятора громкости. Вы могли бы и сами найти примеры по созданию такого регулятора, которые предусмотрительно создал для нас автор программы Roman Voska (это файл slider.mbd, находящийся в папке c:\Program Files\Multimedia Builder\Samples\). Если же разбираться в файле примера для вас оказалось делом непосильным, давайте попробуем разобраться с данным вопросом в этой статье.

Итак, для создания движкового регулятора (слайдера) нам потребуются четыре объекта: два объекта для управления поведением мыши (удобнее всего использовать в качестве этих объектов горячие области, но можно и прямоугольники), третий объект - это сам слайдер (движок регулятора), который должен перемещаться, когда его хватают и тащат мышью, и четвертый объект - скрипт, обеспечивающий, во-первых, перемещение слайдера в соответствии с положением курсора мыши, а во-вторых, изменение громкости в соответствии с положением слайдера. Условное расположение этих объектов показано на рисунке слева. Здесь присутствует еще пятый объект, отображающий уровень громкости в числовом виде, но о нем чуть позже.

Красным цветом на этом рисунке обозначены горячие области. Область HotSpotMouse посылает значение мыши mouseup=TRUE (т.е.истинное значение) в тот момент, когда мышь нажата, но еще не отпущена. А также запускает выполнение скрипта, управляющего громкостью. В этом-то скрипте как раз и используется для вычислений текущее положение курсора мыши. Когда мышь отпущена, посылается значение mouseup=FALSE (т.е. ложное), и скрипт перестает реагировать на положение курсора мыши, громкость и положение движка фиксируются на том уровне и месте, где была отпущена мышь. Другая горячая область, HotSpotMouseUp, которая должна находиться обязательно ниже первой, возвращает истинное значение мыши, когда мышь отпущена. Эта область должна быть чуть больших размеров, чем первая (см.рисунок). Как объясняет автор программы, назначение этой области в том, чтобы прервать выполнение скрипта, для которого установлено внутреннее зацикливание (действительно, скрипт же должен выполняться до тех пор, пока вы "елозите" движок туда-сюда и не отпускаете мышь). Практически же отсутствие объекта HotSpotMouseUp приводит как бы к "залипанию" мыши к движку.

В объекте HotSpotMouse также определяются числовые значения четырех величин, которые будут использованы для вычислений при работе скрипта. Чтобы легче было разобраться, что это за величины, я сделал для вас иллюстрацию:

Значения posmin и posmax определяют соответственно минимальное и максимальное горизонтальное положение движка. Напомню, что все координаты в Windows принято отсчитывать от верхнего левого угла. Поэтому значения нужных нам величин по горизонтали следует измерять от левого края окна проекта до левого края объекта, представляющего собой движок. С целью того, чтобы не усложнять скрипт дополнительными вычислениями, разницу между значениями posmin и posmax следует выбрать равной ста (см.рисунок). Действительно, ведь значение громкости изменяется в пределах от нуля до ста, и если от текущей координаты движка по горизонтали вычесть значение posmin, то как раз и получится числовое значение громкости, которое надо установить.

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

И последнее значение, handleoff, указывает, на каком расстоянии от левого края движка следует произвести "захват" его мышью.

Теперь создайте новый проект и разместите в нем объекты согласно первому рисунку. Объект движка назовите Volume.Он может представлять собой обычный прямоугольник или круг, или группу прямоугольников или других объектов, или растровую картинку любого из стандартных форматов. Этот объект носит чисто эстетический характер, и никаких действий ему не назначается. Также придется нарисовать условную полоску, обозначающую как бы канавку, по которой движется слайдер (движок). Впрочем, если в качестве фона в вашем проекте используется растровая картинка, то можно эту канавку предусмотреть непосредственно в картинке, придав ей, например объем (глубину), что сделает регулятор более реалистичным. В любом случае эта область перемещения движка тоже не несет никаких функциональных действий. Другое дело, что ее длина должна быть рассчитана так, чтобы обеспечить перемещение слайдера точно от края и до края. Но это уже подбирается опытным путем.

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

MMB Script
mouseup=TRUE

а на вкладке Mouse Down:

MMB Script
handleoff=5
posmin=10
posmax=110
ypos=4
mouseup=FALSE
ScriptTimer("TimerA=ChangeVolume","50")

Здесь вам придется ввести конкретные значения рассмотренных выше четырех величин. Они будут зависеть от того, в каком месте вашего проекта расположен регулятор. Определив его окончательное местоположение, нужно воспользоваться направляющими линиями для более удобного измерения этих величин. Напомню, что направляющие линии можно "вытащить", щелкнув мышью по направляющим линейкам и, не отпуская мыши, протянуть до нужного места в окне проекта. Величина handleoff, зависит только от того, как бы вы хотели, чтобы происходил "захват" слайдера. Строчка ScriptTimer("TimerA=ChangeVolume","50") запускает скрипт ChangeVolume, который мы создадим ниже. В принципе эта строка могла бы выглядеть и так: ScriptTimer("ChangeVolume","50"). Указание TimerA означает использование нами независимого таймера в обход стандартного таймера. Таких таймеров в программе предусмотрено три: TimerA, TimerВ и TimerС. (Насколько я понимаю, это дает, например, возможность, запускать один и тот же скрипт тремя различными таймерами в разное время. Если я не прав, прошу поправить. - Авт.).

Перейдем к скрипту HotSpotMouseUp. В окне написания скрипта на вкладке Mouse up напишите:

MMB Script
mouseup=TRUE

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

Здесь надо сделать любопытное замечание. Мы привыкли, что команда RunScript имеет отношение только к запуску скрипта. А в данном случае в качестве объекта скрипта указан вовсе и не скрипт, а горячая область (а мог бы быть указан и какой-либо другой объект). Дело в том, что программа считает скриптом любой объект, в свойствах которого назначено выполнение скрипта. Поэтому указание выполнить скрипт в данном случае будет означать выполнение скрипта, прописанного в данном объекте. (Это вам может пригодиться в будущем).

А сейчас создайте в проекте новый объект - скрипт, назовите его ChangeVolume, и давайте попробуем разобраться, как действует сценарий, который вы назначите этому объекту:

MMB Script
x=MouseX()-handleoff
If (x < posmin) Then
  x=posmin
End
If (x > posmax) Then
  x=posmax
End
MoveObject("Volume","x,ypos")
VolumeUp("x-posmin")
If (mouseup) Then
  Return()
End
Refresh("")
VolLev=CBK_Volume
VolLev$=CHAR(VolLev) + '%'
LoadText("vlevel","VolLev$")
ScriptTimer("TimerA=ChangeVolume","50")

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

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

Далее следует команда VolumeUp (изменить громкость) на величину, равную разнице между значением х и минимальной позицией. Посмотрите второй рисунок на этой странице, и вам станет понятно, что численно эта разница как раз и будет равна величине громкости в процентах. Именно поэтому я рекомендовал вам выбирать разницу между значениями posmin и posmax равной ста.

В конце сценария он зацикливается командой ScriptTimer, но перед этим есть еще три строчки, на которые я хочу обратить ваше внимание. Назначение этих строк в скрипте - вывод информации об уровне громкости. Да, но ведь можно было бы просто создать текстовый объект с меткой CBK_Volume, и он бы показывал числовое значение громкости. А эти три строки нужны только лишь для того, чтобы загружать информацию о громкости в другой текстовый объект с названием Vollev. Для чего? Это дает возможность добавить к числовой величине знак процентов. Мы с вами уже использовали такой синтаксис сценария для вывода информации о номере трека в плейлисте на предыдущем уроке, и поэтому разобраться в этом месте скрипта нам не представляет труда. Итак, значение числовой переменной Vollev приравнивается к величине CBK_Volume. Вводится строковая переменная Vollev$, значение которой состоит уже из значения числовой переменной Vollev и знака процентов. Затем дается команда загрузить текст из переменной Vollev$ в объект vlevel (так надо назвать текстовый объект - создайте его). И - чуть не забыл! - в проекте обязательно должен присутствовать объект CBK_Volume.

Вот что у меня получилось в итоге в моем учебном проекте (в конце статьи я дам вам возможность скачать все образцы). Проверьте, что получилось у вас. Если вы ничего не упустили и все сделали правильно, работоспособность регулятора гарантируется! :) Однако, это еще не всё...

Как всегда, сначала я вас огорчу. Запустите проверку вашего проекта (клавиша F5). Установите громкость на уровне, например, 75%. Выйдите из режима проверки (Esc). Запустите проверку снова. Ну, что? Установлена ли громкость на 75%, как вы ее оставили? Нет, регулятор находится слева, а значение уровня выдает ноль (хотя на самом деле в системе осталась громкость в 75% - в этом можно убедиться, если открыть стандартный системный регулятор). Значит, это дело нам надо поправлять.

Давайте разберемся. Перемещает движок регулятора на нужную позицию скрипт ChangeVolume. Он же и выставляет ее числовое значение. Однако скрипт будет запущен лишь тогда, когда вы щелкнете по области HotSpotMouse - она-то и запускает скрипт. При старте же проекта "никто не знает", куда надо переместить движок и какое значение вывести в объект vlevel. Так чему же удивляться?

"Знаем, знаем, что нужно делать! - скажете вы. - Надо в скрипте старта страницы написать RunScript("ChangeVolume"). И всё установится, как надо." Так, да не так. Дело в том, что нужный нам скрипт хоть и запустится, но будет работать неправильно. Почему? Да потому, что он "не будет знать", какими величинами оперировать в качестве posmin, posmax и ypos, и приравняет все их к нулю, в результате чего слайдер "прилепится" к верхнему левому углу окна проекта. А величины эти посылаются, как вы помните, скриптом объекта HotSpotMouse.

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

MMB Script
volume=CBK_Volume
volume=10 + (volume)
MoveObject("Volume","volume,4")
VolLev=CBK_Volume
VolLev$=CHAR(VolLev) + '%'
LoadText("vlevel","VolLev$")

Первая строка. Вводится числовая переменная, значение которой извлекается из объекта CBK_Volume (объект сей всегда точно знает величину громкости, установленную в системе). Вторая строка. К вышеуказанному значению прибавляется еще десять. Число 10 в моем проекте - не что иное, как величина posmin. Чтобы не вводить здесь переменную, это значение указано сразу в числовом виде (в вашем проекте будет другое, известное вам, число). Третья строка сценария. Перемещается объект слайдера на нужную позицию, где координата по горизонтали - только что рассчитанная выше, а по вертикали - просто число четыре (у меня. У вас своё!). В последних трех строчках выполняются указания по выведению числового значения громкости. Это мы уже знаем.

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

Мы сделали регулятор, в котором громкость управляется перемещением движка-слайдера. А нельзя ли сделать, чтобы вместо движка уровень громкости отображался как бы заливкой части области регулирования, как показано на рисунке:

Можно, и это совсем нетрудно. Давайте вспомним команду MoveObject. В качестве параметров этой команды указывается четыре значения: первые два задают координаты точки перемещения (и это у нас используется при перемещении слайдера), а вот вторые две задают новый размер объекта после перемещения. Теперь представьте себе, что перемещаемым объектом является прямоугольник ярко-зеленого цвета, что на рисунке. Да ведь нам его и перемещать-то никуда не нужно (в самом деле, его верхний левый угол всегда остается на месте)! Достаточно только изменять его размер.

Итак, в качестве объекта Volume нарисуйте прямоугольник нужного цвета, разместите его аккуратно на полосе регулировки так, чтобы он занял начальную позицию, и сразу установите нужную высоту этого объекта - ее значение нам понадобится в скрипте. Горизонтальный размер прямоугольника - его протяженность в длину - никакого значения не имеет, так как этот размер будет устанавливаться скриптом. А вот в скрипте ChangeVolume придется изменить строчку, касающуюся перемещения объекта Volume. Теперь она будет выглядеть так:

MMB Script
MoveObject("Volume","posmin,ypos,VolLev,7")

Как видите, объект Volumeникуда не перемещается (значения величин posmin и ypos - постоянны), изменяется лишь его размер. Длина по горизонтали устанавливается равной значению громкости, а высота по вертикали - та, что вы задали объекту сами (у меня - 7). Теперь при регулировании громкости мышью зеленая полоса приятно растягивается до нужной позиции.

Как видите, объект Volume никуда не перемещается (значения величин posmin и ypos - постоянны), изменяется лишь его размер. Длина по горизонтали устанавливается равной значению громкости, а высота по вертикали - та, что вы задали объекту сами (у меня - 7). Теперь при регулировании громкости мышью зеленая полоса приятно растягивается до нужной позиции.

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

Регулятор Еще одно необычное применение регулятора громкости я хочу здесь привести. Для регулятора, который вы видите на рисунке, я создал новый проект с размером окна 130 на 20 точек и использовал в качестве фона подготовленный в графическом редакторе рисунок. Регулятор громкости выполнил в виде растягивающейся полосы, как только что было описано. Объект vlevel и относящиеся к нему строки в скрипте удалил, а для вывода значения громкости использовал непосредственно объект CBK_Volume, который зато сделал перемещающимся вместе с полосой. Для этого в скрипт добавил строчку:

MMB Script
MoveObject("CBK_Volume","volume-a,b")

где численные значения величин a и b зависят от конкретных элементов, и вы их сможете определить самостоятельно.

А суть того, что я хочу сказать, в следующем. В окне настроек проекта снимите флажок "Стандарт", выберите подвижную форму и поставьте флажки на пунктах "Сохранить позицию в реестре" и "Компонент рабочего стола". Установка последнего пункта приведет к тому, что при запуске проекта его иконка не будет отображаться ни на панели задач, ни в трее. После этого скомпилируйте проект в исполняемый файл, назвав его, к примеру, volume.exe. Создайте для этого файла ярлык и поместите этот ярлык (просто перетащив его мышью) в папку Пуск > Программы > Автозагрузка.

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

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

И в заключение представляю вам вертикальный регулятор громкости:

Он выполнен по первому рассмотренному нами типу, однако внесены изменения в скрипты объектов, причастных к управлению громкостью. Значение громкости, помещенное на серый прямоугольник, появляется только в момент перемещения движка регулятора, и двигается вместе с ним. И кроме всего прочего, диапазон перемещения, который я рекомендовал вам выбирать равным 100, в этом регуляторе отличен от ста.

Предлагаю вам потренироваться и самостоятельно сконструировать этот регулятор. Дам лишь несколько подсказок:

  1. Координаты x и y в данном случае должны поменяться местами.
  2. Если в горизонтальном регуляторе громкость возрастала с возрастанием координаты x, то в вертикальном регуляторе громкость будет возрастать при убывании координаты y. Это надо учесть при написании команды VolumeUp для изменения громкости. Сообразите?
  3. Если разница между значениями posmin и posmax не равна ста, а равна некоторому числу n, то рассчитываемое значение громкости в скрипте надо разделить на 0,01n. Например, если диапазон перемещения регулятора равен 75 точек, то скрипт для горизонтального регулятора, рассмотренного в первом примере, должен выглядеть так:

    MMB Script
    VolumeUp("(x-posmin)/0.75)")

Для знака деления используется символ наклонной черты (/). Имейте также в виду, что вместо привычной нам запятой между целой и дробной частью числа надо использовать точку. Кстати, вместо деления можно использовать и умножение, но только на обратную величину указанного выше числа. В данном случае надо умножить на 1,333. А для написания знака умножения используется символ звездочки (*).

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

Ну а если вы смогли справиться самостоятельно с последним заданием - я вас поздравляю. А остальным предлагаю скачать все четыре описанных здесь примера одним архивом (размер 4,3 Кб). Скачивайте, разбирайтесь - и делайте на основе них свои проекты. А сегодняшний урок на этом закончен.

02 Апреля 2004
8136

Всего комментариев: 2


2. gokors

17:31, 22 Апреля 2012Спам


Отличный урок, низкий поклон автору.
Всё получилось для конкретной страницы, НО...
В создаваемом проекте "Портфолио" (перелистывание страниц с фотографиями работ и комментариями, просмотр двух небольших видеороликов), содержащему также фоновое музыкальное сопровождение, не получается поместить регулятор громкости на страницу TopLayer (чтобы оный Регулятор имел место быть на каждой странице Портфолио), а очень бы хотелось.
Буду рад любым советам.

Ответ: Постарайтесь вопросы задавать на форуме, это очень важно.

1. warloc121

20:42, 02 Марта 2012Спам


Балин... Ползунок на середине уже показывает 100% -_-

Ответ: Скачайте из урока.

Добавлять комментарии могут только зарегистрированные пользователи
[ Регистрация | Вход ]