Это продолжение урока. Первая часть урока здесь

Главное отличие плеера, которой будем делать в этом уроке, от плеера в предыдущем уроке то, что в качестве кнопок Play и Stop будет выступать сама картинка с анимацией, а кнопочка будет служить только фоном. Дело в том, что разным людям нравятся плееры разных размеров. Одним – только большие, другим – только маленькие, третьим – и те и другие. Когда люди уменьшают размеры плеера, уменьшаются и кнопочки для его включения и выключения. По ним становится трудно попасть, чтобы включить плеер. Поэтому я стала делать плееры так, чтобы их можно было включать и выключать нажатием на любом месте картинки. Пробовала делать плееры без кнопочек, но тогда не понятно, что это плееры, выглядят они просто как картинка. Поэтому я стала в качестве фона добавлять анимированные кнопочки Play, а от кнопочек Stop отказалась вовсе за ненадобностью.

Плеер будем делать из той же самой картинки с анимацией – корзины с розами.



В качестве кнопочки я возьму такую анимированную картинку


Вы можете взять любую другую кнопочку. Например, выбрать из моего альбома на Яндекс фото. Описание альбома здесь. Кстати, я добавила анимированные кнопочки в альбом.
У меня из картинки получился вот такой плеер






1. Открываем русскую портативную версию программы Sothink SWF Quicker 5.3.511.

Внизу должна быть открыта закладка – "Свойства".
Изменяем размеры сцены, выставляем размеры нашей картинки. Размер готового плеера будет именно такой. После ввода нужных размеров не забываем нажать клавишу Enter, только тогда размер сцены изменится.
Двигая ползунки, можно расположить рабочее поле по центру. При необходимости можно изменить его масштаб.







2. На "Временной шкале" создадим 4 слоя. Для этого 3 раза нажмём на значок "Вставить слой".



Переименуем слои, чтобы не путаться. Для переименования дважды щёлкнем мышкой по имени слоя, и в открывшемся окне напишем новое имя.



Назовём слои "Play", "Кнопочка", "Stop" и "Скрипт".






3. Импортируем нашу анимацию.

Выбираем в меню пункт "Вставка" и нажимаем вкладку "Новый символ".



В открывшемся окне в поле "Имя символа" пишем слово "картинка". Выбираем тип символа – Видеоролик.



Нажимаем кнопку "OK". После этого мы попадаем с основной сцены в окно редактирования вновь созданного символа – "картинка". Сюда и будем импортировать нашу анимацию. Нажимаем на кнопку "Импорт".



В открывшемся окне Импорта находим папку с нужным файлом, выбираем файл и нажимаем кнопочку "Открыть".



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



Нажимаем кнопку "Да". Файл импортируется в "Библиотеку". Все кадры анимации появятся на "Временной шкале" и в "Библиотеке" программы. Кроме того, в "Библиотеке" будет присутствовать "Символ 2" – покадровый видеоролик анимации.



В палитре "Трансформация" для картинки настраиваем параметры – в координаты X и Y заносим 0, иначе потом картинка при включении плеера будет сдвигаться. Не забываем нажать клавишу Enter после введения нулей.



Теперь переходим на основную Сцену, нажав на вкладку "Сцена 1" над "Временной шкалой".






4. На основном рабочем поле "Сцена 1" выделяем первый слой "Play", а в палитре инструментов делаем активным инструмент "Выбор".



В "Библиотеке" я ищу первый кадр импортированного анимированного файла, у меня он называется "Корзина-роз-1-2 1". Вы можете, если хотите, взять любой кадр, это на ваше усмотрение. Именно такая картинка будет у вас при выключенном плеере.
Стоя на этом кадре, зажимаем левую кнопку мыши и перетаскиваем его на рабочее поле слоя "Play".



Идём в палитру "Трансформация". Для выравнивания по центру координата X должна быть равна половине размера ширины картинки, а координата Y должна быть равна половине высоты картинки. Если размер задан нечётным числом, то значение координаты получится не целым. Не забываем нажать клавишу Enter после выставления значений координат.



Нам нужно задать имя для этой картинки. Для статичной картинки это сделать нельзя, её необходимо сделать символом – видеороликом.
На панели "Свойства" щелкаем по надписи "Преобразовать в символ".



В открывшемся диалоговом окне преобразования в символ выставляем следующие параметры. Тип символа – Видеоролик, точка регистрации – посередине, "Имя символа" – "play_bt".



Нажимаем "OK". Теперь в графу "Имя" вводим "play_bt".



Всё, с первым слоем закончили. Чтобы случайно не сдвинуть картинку, закроем слой замочком, щёлкнув на слое "Play" в клеточку рядом с глазком видимости слоя. В клеточке появится замочек.






5. Делаем активным слой "Кнопочка".



Импортируем нашу анимированную кнопочку. Если в качестве кнопочки вы берёте статичную картинку, то импортируйте её в "Библиотеку", как описано в пункте 5 первой части урока.
Выбираем в меню пункт "Вставка" и нажимаем вкладку "Новый символ".



В открывшемся окне в поле "Имя символа" пишем слово "кнопка". Выбираем тип символа – Видеоролик.



Нажимаем кнопку "OK". После этого мы попадаем с основной сцены в окно редактирования вновь созданного символа – "кнопка". Сюда и будем импортировать нашу кнопочку. Нажимаем на кнопку "Импорт".



В открывшемся окне Импорта находим папку с нужным файлом, выбираем файл и нажимаем кнопочку "Открыть".



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



Нажимаем кнопку "Да". Файл импортируется в "Библиотеку". Все кадры анимации появятся на "Временной шкале" и в "Библиотеке" программы. Кроме того, в "Библиотеке" будет присутствовать "Символ 5" – покадровый видеоролик анимации.



Теперь переходим на основную Сцену, нажав на вкладку "Сцена 1" над "Временной шкалой".



Опять делаем активным слой "Кнопочка".



Перетаскиваем мышкой файл-видеоролик "кнопка" из "Библиотеки" на слой "Кнопочка". Не забывайте, что активным должен быть инструмент "Выбор".



Выбирайте местоположение и размер кнопочки, двигая её мышкой или изменяя значения в палитре "Трансформация". Не забудьте нажать клавишу Enter после после введения всех значений в палитре "Трансформация". Я поместила кнопочку внизу справа и сделала её поменьше, задав масштаб 80%. Кстати, если изменяете масштаб, меняйте значение только в одном окошке, второе изменится автоматически.



Зададим имя для этой кнопочки. Для анимации (видеоролика) это можно сделать сразу. В графу "Имя" вводим "fon1".



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




6. Делаем активным слой "Stop".



В качестве кнопки выключения плеера будет выступать наша анимированная картинка.
Находим в "Библиотеке" файл-видеоролик "картинка" и выделяем его.
Мышкой перетягиваем его на рабочее поле.



Идём в палитру "Трансформация". Для выравнивания по центру координата X должна быть равна половине размера ширины картинки, а координата Y должна быть равна половине высоты картинки. Ставим те же значения, что и в пункте 4. Не забываем нажать клавишу Enter после выставления значений координат.



Зададим имя для этой картинки. Для анимации (видеоролика) это можно сделать сразу. В графу "Имя" вводим "stop_bt".



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




7. Делаем активным последний слой "Скрипт".



В палитре "Свойства" переходим на вкладку "Действие". Открываем эту вкладку.



Копируем и вставляем в поле следующий скрипт:

fon1._visible = true;
stop_bt._visible = false;
play_bt.onRelease = function ()
{
myMP3 = new Sound();
myMP3.loadSound(mp3, true);
fon1._visible = false;
play_bt._visible = false;
stop_bt._visible = true;
};
stop_bt.onRelease = function ()
{
fon1._visible = true;
play_bt._visible = true;
stop_bt._visible = false;
myMP3.stop();
};

Производим проверку скрипта на наличие ошибок, нажав на зелёную галочку над ним.



Если скрипт написан правильно, появляется такое сообщение:



Закрываем это окно.




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



Если кнопочка анимированная, делайте для неё всё то же самое, что и для кнопочки в пункте 5.
Если она статичная – делайте всё, как в пункте 5 первой части урока.
В конце для этой кнопочки в графу "Имя" введите "fon2".



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




9. Тестируем плеер, нажав на кнопку "Предварительный просмотр" (зелёный треугольник).



В открывшемся окне просмотра вначале картинка должна быть статичной и видна анимированная кнопочка.



Щёлкаем мышкой в любом месте окна просмотра, картинка становится анимированной.



Щёлкаем мышкой в любом месте окна просмотра, плеер выключается, картинка опять становится статичной и появляется анимированная кнопочка. Если происходит именно так, значит, у вас всё верно. Закрываем окно просмотра.




10. При необходимости подбор значения "Частота кадров" делайте точно так же, как описано в пункте 10 первой части урока.




11. Сохраняем наш проект.

Нажимаем на пункт "Файл" и выбираем вкладку "Сохранить", или просто нажимаем Ctrl+S.



Задайте проекту имя и сохраните его. Проекты сохраняются с расширением .sqf






12. Сохраняем плеер в формате флеш на компьютер.

Нажимаем кнопочку "Экспорт".



В названии должны быть только латинские буквы. Плеер, как и все флеш, сохраняется в формате .swf






13. Заливаем флешку-плеер на сайт.

Я люблю заливать плееры на ЯП
Здесь вы получите уже готовый код для Лиру.
Можно залить плеер на Лиру – поместить плеер в черновик своего дневника и потом посмотреть код. Но тогда вам придётся самостоятельно подставить размеры плеера в код.
К готовому плееру можно подгружать любую музыку в формате .mp3


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