• Авторизация


Создание плеера с кнопками на картинке-фоне в программе Sothink SWF Quicker 28-06-2015 07:49 к комментариям - к полной версии - понравилось!



Скажу сразу, что картинка может быть в любом формате – .jpg (.jpeg), .png или .gif (анимация). Я возьму вот такую анимированную картинку из интернета – корзинку с цветами.

картинка

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



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



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

3

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

4

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

5

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

6

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

7

Откроется окошко со списком папок на вашем компьютере. Находим нужный файл (его видно внизу в окне просмотра) и нажимаем кнопочку "Открыть".



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

9

Если вы случайно импортировали не тот файл, его можно удалить из "Библиотеки". Щёлкните по его названию мышкой и нажмите на клавиатуре клавишу Delete. Файл будет удалён.

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

10

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

12

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

13

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



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

16

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



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

18

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

19

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

20

Щелчком мыши в "Библиотеке" выделяем импортированный файл со статичной картинкой или символ "картинка". Если у вас там много символов и символа "картинка" не видно, покрутите в "Библиотеке" полосу прокрутки справа и найдите его.

21

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



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

23

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

24

5. В качестве кнопок Play и Stop можно использовать что угодно: картинки-кнопочки, надписи (их можно сделать в фотошопе и сохранить в формате .png, или написать прямо здесь), либо встроенные в программу кнопочки.
Чтобы показать, как работать и с тем и с другим, в качестве кнопки Play я буду использовать картинку, а кнопку Stop вставлю готовую из программы.

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

25

Импортируем файл с кнопкой в "Библиотеку", как в пункте 3. В меню нажимаем на пункт "Файл" и выбираем вкладку "Импортировать в библиотеку". Находим нужную картинку с кнопкой и нажимаем кнопочку "Открыть". Файл с кнопкой появится в "Библиотеке".
Если вы хотите в качестве обеих кнопок Play и Stop использовать готовые картинки, их можно импортировать одновременно.

26

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



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

28

Для того чтобы эта статичная картинка-кнопка могла стать элементом создаваемого плеера, её необходимо сделать символом – видеороликом. Нажмите на инструмент "Выбор", чтобы выделить кнопочку – вокруг кнопочки появится синяя обводка.



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

31

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

32

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

33

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

34

Если в качестве кнопки Stop вы хотите использовать тоже картинку-кнопочку, делайте всё так же, как описано в пункте 6 для слоя "Play".
Я же покажу, как вставить готовую кнопку из программы. Рядом с вкладкой "Библиотека" открываем вкладку "Галерея".

35

В ней открываем папку "Buttons" – щёлкаем по плюсу рядом с папкой.
36

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

37

Я выбираю кнопку "stop" из папки "arrowmove". Кнопочку "play" я обычно беру из той же папки.

38

Перетаскиваем её мышкой на слой "Stop".



Эта кнопочка тоже слишком большая, поэтому в палитре "Трансформация" зададим масштаб. Меняя значения координат X и Y, поместим её там, где хотим. Можно расположить её поверх кнопки Play. А можно на другом месте, всё равно на флешке будет видна только одна из них. Не забудьте нажать клавишу Enter после введения всех значений в палитре "Трансформация".



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

41

Можно закрыть слой замочком.

И последнее для этой кнопки. Все встроенные в программу кнопки звуковые. Когда вы будете нажимать их на плеере, они будут издавать звуки. Чтобы услышать какие, поводите мышкой по кнопке в окне просмотра внизу справа.

42

Мне эти звуки не нравятся, я их удаляю. Сделать это просто. Откройте вкладку "Библиотека". Пользуясь полосой прокрутки справа, найдите папку "stop.glb". Эта папка содержит все символы нашей кнопки. Там есть два символа со значком нотки, это и есть звуки.

43

Выделите каждый из этих символов мышкой и нажмите клавишу Delete.

44

Всё, теперь при наведении мышки на кнопку звуки издаваться не будут.

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

45

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

46

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


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


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

47

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

49

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

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



Нажимаем на неё, появляется кнопка Stop.

52

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

10. Сохраняем наш проект – нажимаем на пункт "Файл" и выбираем вкладку "Сохранить", или просто нажимаем Ctrl+S. Задайте проекту имя и сохраните его. Вы всегда сможете открыть его и отредактировать, если вас что-то не устроит.

53

Сохраняем флешку-плеер в формате .swf (формат флеш) на компьютер. Нажимаем кнопочку "Экспорт".

54

В названии флешки должны быть только латинские буквы.



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


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


[flash=ширина_плеера,высота_плеера,Ссылка_на_плеер.swf?
mp3=Ссылка_на_музыку.mp3]



У меня из картинки получился вот такой плеер:



 

 

 

 

 

Кнопочки Play и Stop можно взять из моего альбома на Яндекс фото. Описание альбома здесь.
 

При написании урока использовались материалы уроков:
Урок 1
Урок 2
 

вверх^ к полной версии понравилось! в evernote
Marina-Rozina 26-09-2015-13:21 удалить
Ответ на комментарий nadmirchik # Благодарю! И Вам всего самого замечательного!
Marina-Rozina 26-09-2015-13:22 удалить
Ответ на комментарий Надежда_Гостевская # Буду очень рада, если он Вам пригодится. Успехов!
Talya6 29-09-2015-06:57 удалить
Спасибо большое за урок.
Talya6 30-09-2015-08:27 удалить
Мариночка. У меня почему-то этот плеер сохраняется не в том формате, а в формате-sqf.
Talya6 30-09-2015-10:54 удалить
Мариночка. Все получилось. Спасибо еще раз за урок.
Marina-Rozina 30-09-2015-17:20 удалить
Ответ на комментарий Talya6 # Рада, дорогая, что всё получилось!
Marina-Rozina 31-10-2015-19:24 удалить
Ответ на комментарий Mir5 # И Вам спасибо за цитирование!
LARINA_KARA 31-10-2015-19:35 удалить
спасибо вам за урок ! пригодится
Lyusya-Spring 01-11-2015-09:21 удалить
а подскажите пожалуйста, где можно взять русскую версию, я буду очень благодарна, мне очень хочется научиться работать в этой программе
koreckolga 01-11-2015-19:58 удалить
Ответ на комментарий Marina-Rozina # Маришенька, приветик! Я уже начала разираться в этой программе, спасибо огромное за урок, процитировала, чтоб не искать!
Здравствуйте, Мариночка! Огромное спасибо за Ваш труд, за помощь, за очень подробный урок.
Mono-Liza 02-11-2015-02:16 удалить
От всей души благодарю за урок!
Мариночка, с благодарностью.
Marina-Rozina 15-11-2015-16:56 удалить
Ответ на комментарий LARINA_KARA # Буду очень рада, если пригодится! Благодарю за цитирование!
Marina-Rozina 15-11-2015-17:04 удалить
Ответ на комментарий Lyusya-Spring # Людочка, попробуйте скачать вот здесь: https://cloud.mail.ru/public/4TcA27ypQEER/SothinkSWFQuicker_5.3.511.rar
Marina-Rozina 15-11-2015-17:15 удалить
Ответ на комментарий MissKcu # Спасибо! Благодарю за цитирование!
Marina-Rozina 15-11-2015-17:17 удалить
Ответ на комментарий Иришка-Манюшка # Буду очень рада, если он пригодится. Если что-то будет не понятно, спрашивайте, постараюсь помочь. Благодарю за цитирование!
Marina-Rozina 15-11-2015-17:18 удалить
Ответ на комментарий koreckolga # Благодарю за цитирование, Олечка! Успехов!
Marina-Rozina 15-11-2015-17:20 удалить
Ответ на комментарий Mono-Liza # Рада, если пригодится! Благодарю за цитирование!
Marina-Rozina 15-11-2015-17:21 удалить
Ответ на комментарий Златковская_Валентина # Благодарю за цитирование, Валечка! Желаю творческих успехов!
Lyusya-Spring 15-11-2015-18:04 удалить
Ответ на комментарий Marina-Rozina # спасибо!
Marina-Rozina 15-11-2015-19:20 удалить
Ответ на комментарий Lyusya-Spring # Это Саше pasigut спасибо, он у нас палочка-выручалочка.
Mir5 28-12-2015-23:30 удалить
Спасибо большое!
Marina-Rozina 10-01-2016-09:05 удалить
Ответ на комментарий Mir5 # Буду рада, если урок пригодится.
Svet-A-Lana 24-02-2016-17:44 удалить
Спасибо большое за подробный урок!!
Smelena 26-03-2016-00:56 удалить
Marina-Rozina, спасибо тебе огромное, милая Мариночка, я сейчас установила эту прогу... и пытаюсь по твоим скринам все делать в точности, как ты... Но не все получается... Бум учиться... А пока, с твоего разрешения, и с благодарностью, я беру твой урок в цитатник, ты не возражаешь?
Marina-Rozina 26-03-2016-04:52 удалить
Ответ на комментарий Smelena # Конечно, Леночка, для этого и писала. Буду рада, если урок пригодится. Спасибо за цитирование! Будет что-то не понятно, обращайся, помогу, вместе разберёмся.
Marina-Rozina 26-03-2016-05:41 удалить
Ответ на комментарий Svet-A-Lana # Буду рада, если он Вам пригодится!


Вы сейчас не можете прокомментировать это сообщение.

Дневник Создание плеера с кнопками на картинке-фоне в программе Sothink SWF Quicker | Marina-Rozina - Дневник Marina_Rozina | Лента друзей Marina-Rozina / Полная версия Добавить в друзья Страницы: «позже раньше»