Урок 2. Простой MP3-плеер - это не очень просто

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

Для начала в окне настроек проекта установите новые размеры окна - 400 на 75 точек. Снимите флажок "Стандарт" и поставьте "Поверх всех окон". В поле "Заголовок" введите название вашего плеера, например MyPlayer. Все объекты временно отодвиньте с рабочего поля куда-нибудь в сторонку.

Зайдите в свойства страницы и в качестве фона выберите светло-голубой цвет. Затем возьмите инструмент рисования прямоугольников, нарисуйте два прямоугольника ярко-синего цвета, два - темно-синего и один - черного. В свойствах первых четырех прямоугольников в окне "Граница" укажите "Нет", а у последнего - "Утоплена". С помощью этих пяти прямоугольников создайте дизайн интерфейса плеера, у вас должно получиться что-то похожее на это:

Теперь выделите все пять прямоугольников, зайдите в меню "Упорядочение - Объединить - Объекты с фоном..." и выберите пункт "Создать новый графический объект", не забыв поставить галочку на пункте "Удалить исходные объекты". Вместо пяти прежних объектов у вас получится один, с названием BmpComb. Переименуйте его в Фон и переместите в самый нижний уровень (горячей клавишей Shift + PageDown).

К такому интерфейсу наши стандартные кнопки, конечно, не подходят. Придется нарисовать свои. (Совет - никогда не используйте стандартные кнопки программы. Только нарисованные лично вами придадут вашей работе индивидуальность и неповторимость, а к тому же, всегда будут соответствовать общей дизайнерской идее). Вот пример трёх состояний кнопки Play:

Не удаляйте старые кнопки! Просто зайдите в их свойства и загрузите вновь нарисованные вами изображения в качестве трех состояний. И переименуйте кнопки на такие названия: Open, Play, Pause, Stop, Backward и Forward. Создайте еще две кнопки с названиями Back и Next - они будут служить для перехода к следующей и предыдущей песне в плейлисте. Также сделайте кнопку с надписью "Pl" - для включения плейлиста (об этом позже) и две кнопки для управления громкостью***.  Еще сделайте круглую кнопку без надписи, и поставьте их штуки три-четыре, потом они нам понадобятся. Вот что у вас примерно должно получиться:

Кнопкам Back и Next с помощью мастера скриптов задайте действие SongListPrev()  и SongListNext() соответственно. (Понятно, что это команды играть предыдущую или следующую песню плейлиста). Кнопкам управления громкостью (см.рисунок) - действия VolumeUp("") и VolumeDown("") без указания параметров (эти команды вы также найдете в списке Мастера сценариев). Между этими кнопками я поместил надпись "Vol" (слово "Громкость" слишком длинное :)).

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

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

Зайдите в свойства одной из этих кнопок, и выберите "Взаимодействие с другими объектами". Откроется дополнительное окно, в котором можно управлять видимостью (т.е. показом) объектов:

Как видно из развернутого списка, наряду с управлением видео (это нам пока не надо) здесь есть четыре команды, управляющие видимостью объекта (переводчик почему-то перевел только одну из них - Hide):

Show - показать объект;
   Hide - скрыть объект;
   Show/Hide - показать скрытый объект только на время нажатия на кнопку;
   Invert - показать объект, если он был скрытым, и скрыть, если он видимый.

 В данном случае нас интересует действие, которое будет происходить только при перемещении мыши по объекту (на рисунке обведено красным). Выберем команду Show/Hide и укажем объект Volume. Теперь этот объект будет виден только во время, когда мышь находится над кнопкой, а соответственно, будет отображаться значение громкости.

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

"А где же информация об исполнителе и композиции, и другие тэги?" - спросите вы. Вот этим мы сейчас и займемся.