Создание плеера "Биение сердца" из статичной картинки. Часть I

Понедельник, 21 Ноября 2016 г. 13:36 + в цитатник

Цитата сообщения Marina-Rozina

Прочитать целиком В свой цитатник или сообщество!

Будем делать плеер из статичной картинки сердце. При включении плеера у нас получится эффект биения сердца. Я взяла такую картинку

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

В результате у нас получится такой плеер

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

Все большие принтскрины в уроке кликабельны.

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

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

2. Импортируем файл с картинкой сердце в "Библиотеку".

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

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

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

3. Делаем нашу статичную картинку сердце кнопочкой включения плеера.

Переименуем первый слой на "Временной шкале". Для переименования дважды щёлкнем мышкой по имени слоя, и в открывшемся окне напишем новое имя. Назовём первый слой "сердце".

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

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

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

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

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

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

4. Создадим теперь слой с кнопочкой.

На "Временной шкале" создадим второй слой, нажав на значок "Вставить слой".

Переименуем второй слой так же, как и первый в предыдущем пункте. Назовём его "кнопка".

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

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

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

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

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

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

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

Делаем активным слой "Кнопка" и инструмент "Выбор".

Перетаскиваем мышкой файл-видеоролик "кнопка" из "Библиотеки" на слой "кнопка".

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

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

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

5. Приступаем к анимации картинки сердце.

На "Временной шкале" создадим третий слой, нажав на значок "Вставить слой".

Переименуем третий слой (как в пункте 3), назовём его "анимация".

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

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

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

В "Библиотеке" ищем наш импортированный файл сердце. Зажимаем левую кнопку мыши и перетаскиваем его на рабочее поле.

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

Начинаем делать анимацию.

На "Временной шкале" встаем на 20-ый кадр.

Нажимаем на клавиатуре клавишу F6. Либо, стоя на этом кадре, щёлкаем правой кнопкой мыши и в контекстном меню выбираем пункт "Вставить кадр". Видим, что на "Временной шкале" добавились кадры со 2-го по 20-ый, а на рабочем поле появилась наша картинка.

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

Переходим в палитру "Трансформация" и немного уменьшаем масштаб картинки. Ставим вместо 100 процентов 90. Меняйте значение только в одном окошке, второе изменится автоматически. Не забудьте нажать клавишу Enter.

Видим, что размеры сердца немного уменьшились.

Переходим опять на "Временную шкалу". Щёлкаем правой кнопкой мышки по любому кадру между 1-ым и 20-ым и в контекстном меню выбираем пункт "Создать твининг движения".

У вас должна протянуться вот такая прямая со стрелкой между кадрами.

Становимся на 2-ой кадр на "Временной шкале".

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

Становимся на 39-ой кадр на "Временной шкале".

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

Видим, что на "Временной шкале" добавились кадры по 39-ый, а на рабочем поле появилась картинка сердца.

Щёлкаем правой кнопкой мышки по любому кадру между 20-ым и 39-ым и в контекстном меню выбираем пункт "Создать твининг движения".

Появилась ещё одна прямая со стрелкой между 20-ым и 39-ым кадрами.

Всё, анимация готова.

6. Сделаем нашу анимацию кнопочкой выключения плеера.

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

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

Идём в палитру "Трансформация". Для выравнивания по центру координата X должна быть равна половине размера ширины картинки, а координата Y должна быть равна половине высоты картинки. Ставим те же значения, что и в пункте 3. Не забываем нажать клавишу 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. Тестируем плеер, нажав на кнопку "Предварительный просмотр" (зелёный треугольник).

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

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

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

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

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

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

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

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

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

Закрываем программу Sothink SWF Quicker 5.3.511.

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

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

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

Эффект "Биение сердца" можно применять не только к сердечкам, но и к любой картинке. Я, например, сделала таким образом плеер Незабудка.

Во второй части урока я хочу рассказать, как можно разнообразить применение этого эффекта.

Хочу выразить благодарность Legionary. Благодаря его уроку Делаем flash открытку с музыкой своими руками я и научилась эффекту "Биение сердца".

Серия сообщений "* уроки Sothink SWF Quicker":
Часть 1 - Делаем музыкальную флеш открытку в программе Sothink SWF Quicker
Часть 2 - Делаем элементарный плеер сами в программе Sothink SWF Quicker
...
Часть 20 - Создание плеера с кнопками из картинки с анимацией. Часть I – Создание плеера с двумя кнопками
Часть 21 - Создание плеера с кнопками из картинки с анимацией. Часть II – Создание плеера с одной кнопкой
Часть 22 - Создание плеера "Биение сердца" из статичной картинки. Часть I
Часть 23 - Создание плеера "Биение сердца". Часть II

<a href="https://www.liveinternet.ru/users/5106201/post402863222/">РЎРѕР·РґР°РЅРёРµ РїР»РµРµСЂР° &quot;Р‘РёРµРЅРёРµ СЃРµСЂРґС†Р°&quot; РёР· СЃС‚Р°С‚РёС‡РЅРѕР№ РєР°СЂС‚РёРЅРєРё. Р§Р°СЃС‚СЊ I</a><br/>

Р‘СѓРґРµРј РґРµР»Р°С‚СЊ РїР»РµРµСЂ РёР· СЃС‚Р°С‚РёС‡РЅРѕР№ РєР°СЂС‚РёРЅРєРё СЃРµСЂРґС†Рµ. РџСЂРё РІРєР»СЋС‡РµРЅРёРё РїР»РµРµСЂР° Сѓ РЅР°СЃ РїРѕР»СѓС‡РёС‚СЃСЏ СЌС„С„РµРєС‚ Р±РёРµРЅРёСЏ СЃРµСЂРґС†Р°. РЇ РІР·СЏР»Р° С‚Р°РєСѓСЋ РєР°СЂС‚РёРЅРєСѓ
	
	
	Р’ РєР°С‡РµСЃС‚РІРµ РєРЅРѕРїРѕС‡РєРё СЏ РІРѕР·СЊРјСѓ Р°РЅРёРјРёСЂРѕРІР°РЅРЅРѕРµ СЃРµСЂРґРµС‡РєРѕ
	
	
	Р’ СЂРµР·СѓР»СЊС‚Р°С‚Рµ Сѓ РЅР°СЃ РїРѕР»СѓС‡РёС‚СЃСЏ С‚Р°РєРѕР№ РїР»РµРµСЂ
	
	
	Р’С‹ РјРѕР¶РµС‚Рµ РІР·СЏС‚СЊ Р»СЋР±РѕРµ РґСЂСѓРіРѕРµ СЃРµСЂРґС†Рµ РІ РєР°С‡РµСЃС‚РІРµ РѕСЃРЅРѕРІРЅРѕР№ РєР°СЂС‚РёРЅРєРё. РќР°РїСЂРёРјРµСЂ, Р·РґРµСЃСЊ.
	РљРЅРѕРїРѕС‡РєСѓ СЃРµСЂРґРµС‡РєРѕ РІС‹ РјРѕР¶РµС‚Рµ РІС‹Р±СЂР°С‚СЊ РёР· РјРѕРµРіРѕ Р°Р»СЊР±РѕРјР° РљРЅРѕРїРєРё СЃРµСЂРґРµС‡РєРё РЅР° РЇРЅРґРµРєСЃ С„РѕС‚Рѕ, РєРѕС‚РѕСЂС‹Р№ СЏ РїРѕРґРіРѕС‚РѕРІРёР»Р° РґР»СЏ РІР°СЃ. РђР»СЊР±РѕРј РЅР°С…РѕРґРёС‚СЃСЏ Р·РґРµСЃСЊ.
	
	Р’СЃРµ Р±РѕР»СЊС€РёРµ РїСЂРёРЅС‚СЃРєСЂРёРЅС‹ РІ СѓСЂРѕРєРµ РєР»РёРєР°Р±РµР»СЊРЅС‹.
	
	
	
	
	1. РћС‚РєСЂС‹РІР°РµРј СЂСѓСЃСЃРєСѓСЋ РїРѕСЂС‚Р°С‚РёРІРЅСѓСЋ РІРµСЂСЃРёСЋ РїСЂРѕРіСЂР°РјРјС‹ Sot... <a href="https://www.liveinternet.ru/users/5106201/post402863222/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Marina-Rozina обратиться по имени Четверг, 05 Января 2017 г. 19:33 (ссылка)

Благодарю за цитирование!

Ответить С цитатой В цитатник

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Музыка

-Всегда под рукой

-

-Цитатник

-Метки

-Ссылки

-Новости

-Друзья

-Постоянные читатели

-Сообщества

Создание плеера "Биение сердца" из статичной картинки. Часть I