В этом уроке я расскажу, как сделать плеер с кнопками и ещё о некоторых тонкостях работы с программой, до которых дошла опытным путём. Все большие картинки кликабельны.
Плеер будем делать из вот такой картинки с анимацией – корзины с розами



Это моя анимация, сделанная в фотошопе с помощью фильтра Alien Skin Xenofex 2.
Исходник картинки вот



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

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






1. Открываем русскую портативную версию программы Sothink SWF Quicker 5.3.511. Внизу должна быть открыта закладка – "Свойства".



Если вы не видите каких-то панелей, выберите наверху в меню пункт "Окно", а в открывшемся списке кликните по пункту "Восстановить панели".



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



Если рабочее поле слишком большое, можно изменить масштаб, чтобы его было видно целиком.






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



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





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






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

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



Откроется окно



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



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



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



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



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



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



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






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



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



Сейчас имена в "Библиотеке" отсортированы по убыванию. Почему-то в моей версии программы самый последний символ не отображается. Возможно, у вас то же самое. Тогда нажмите на значок рядом со словом "Символ".



Все символы в "Библиотеке" будут отсортированы по возрастанию, и нужный кадр появится в самом верху. Щелчком мыши выделяем его.



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



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



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



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



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



Нажимаем "OK". Теперь в графу "Имя" вводим "fon1". На самом деле "Имя символа" в предыдущем окне и значение в графе "Имя" могут быть разными, но я делаю их одинаковыми, чтобы не запутаться.



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






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



Импортируем файл с картинкой-кнопочкой в "Библиотеку". Так как я взяла в качестве кнопочки статичную картинку, то импортируем её сразу. Для этого наверху в меню нажимаем на пункт "Файл" и выбираем вкладку "Импортировать в библиотеку".



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



Файлы с картинками-кнопочками импортировались в "Библиотеку".



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



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



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



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



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



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



Нажимаем "OK". Внизу на панели "Свойства" для вновь созданного символа "play_bt" в графу "Имя" вводим "play_bt".



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




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



Находим в "Библиотеке" нашу анимацию – видеоролик "картинка" – и выделяем её.



Мышкой перетягиваем её на рабочее поле.



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



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



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



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




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



Делаем всё то же самое, что и для кнопки Play.
Если вы ещё не импортировали картинку-кнопочку стоп, импортируйте её в "Библиотеку", как в пункте 5.
У меня кнопочка уже в "Библиотеке", поэтому я просто нахожу её там.
Перетаскиваем мышкой файл с кнопочкой из "Библиотеки", на слой "Stop".



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



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



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




Нажимаем "OK". Внизу на панели "Свойства" в графу "Имя" вводим "stop_bt".



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




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



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



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

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



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



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




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

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



Нажимаем на кнопку Play, картинка становится анимированной и появляется кнопка Stop.



Если кнопки меняются при нажатии, значит у вас всё верно. Закрываем окно просмотра.




10. Хочу рассказать ещё об одной тонкости.

Часто получается, что анимация в плеере движется гораздо быстрее, чем на исходной картинке, и красота анимации теряется. Откройте исходную картинку программой просмотра, расположите её рядом с картинкой предварительного просмотра плеера и сравните.



Хотелось бы, чтобы скорость анимации была такой же, как на исходной картинке или хотя бы близкой к ней. Что здесь можно сделать?
Закройте окно просмотра, опять откройте внизу закладку "Свойства" и щёлкните мышкой по рабочему полю. В "Свойствах" вы увидите окошко "Частота кадров".



Если вы будете уменьшать значение в этом окне, анимация будет двигаться медленнее, увеличивать – быстрее. Только после ввода нового значения не забывайте нажать клавишу Enter. Таким образом, изменяя частоту кадров, вы в каждом конкретном случае сможете подобрать нужную скорость для анимации.
Вот мне показалось, что наиболее подходящей для данной анимации является "Частота кадров" равная 9.






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

Я очень советую вам сохранять проекты ваших плееров. Если вы захотите потом что-то изменить в плеере, гораздо легче это будет сделать в проекте, чем переделывать всю работу заново.
Итак, сохраняем наш проект – нажимаем на пункт "Файл" и выбираем вкладку "Сохранить", или просто нажимаем Ctrl+S.



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






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

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



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






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

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


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