Создание плеера "Биение сердца" из статичной картинки. Часть I
27-10-2016 17:46
к комментариям - к полной версии
- понравилось!
Будем делать плеер из статичной картинки сердце. При включении плеера у нас получится эффект биения сердца. Я взяла такую картинку
В качестве кнопочки я возьму анимированное сердечко
В результате у нас получится такой плеер
Вы можете взять любое другое сердце в качестве основной картинки. Например, здесь.
Кнопочку сердечко вы можете выбрать из моего альбома Кнопки сердечки на Яндекс фото, который я подготовила для вас. Альбом находится здесь.
Все большие принтскрины в уроке кликабельны.
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 открытку с музыкой своими руками я и научилась эффекту "Биение сердца".
вверх^
к полной версии
понравилось!
в evernote
Будем делать плеер из статичной картинки сердце. При включении плеера у нас получится эффект биения сердца. Я взяла такую картинку
В качестве кнопочки я возьму анимированное сердечко
В результате у нас получится такой плеер
Вы можете взять любое другое сердце в качестве основной картинки. Например, здесь.
Кнопочку сердечко вы можете выбрать из моего альбома Кнопки сердечки на Яндекс фото, который я подготовила для вас. Альбом находится здесь.
Все большие принтскрины в уроке кликабельны.
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 открытку с музыкой своими руками я и научилась эффекту "Биение сердца".
koreckolga
19-11-2016-13:30
удалить
Я что-то в почте пропустила эти уроки! Спасибо большое, Маришенька!!!
Как страшно-то
...сколько всего надо проделать..Ой,Мариночка,рукодельница же!!!!!!!!!..Спасибо за такой подробный урок!!!!!
...сколько всего надо проделать..Ой,Мариночка,рукодельница же!!!!!!!!!..Спасибо за такой подробный урок!!!!!
Marina-Rozina
06-01-2017-08:59
удалить
Ответ на комментарий koreckolga #
Благодарю, Олечка, за цитирование! Надеюсь, что урок тебе пригодится.
Мариночка, очень хорошие, понятные у Вас уроки. С большим интересом и благодарностью цитирую!
Marina-Rozina
22-02-2017-20:16
удалить
Ответ на комментарий Mono-Liza #
Спасибо за цитирование! Очень рада, что понравилось. Желаю больших творческих успехов!
Ответ на комментарий Marina-Rozina #
Мариночка! Плеры такие я делала, но мне не понятно, какую роль играет кнопка? Ведь он включается и без нее.
Marina-Rozina
23-02-2017-08:23
удалить
Ответ на комментарий Mono-Liza #
Чудесный плеер, Лизочка! Спасибо! Кнопка никакой роли не играет, верно. Я делаю их лишь потому, что иначе совсем будет не понятно, что это плеер. Картинка и картинка. И так некоторые новички пишут, что им не понятно, что это плеер, что надо либо писать Play, либо ставить треугольные кнопочки-включашки. Я первое время так и делала, но потом они мне надоели. Добавляю теперь либо мигающие, либо вертящиеся кнопочки, чтобы привлечь внимание, что это не просто картинка.
Ответ на комментарий Marina-Rozina #
Мариночка, все поняла. Я - Людмила.
Приглашаю тебя в гости! Если тебе интересно, то зайди в рубрику "Мои работы в программах". Вот флеш плеер, который я делала ко дню влюбленных, он тоже с кнопкой, но, здесь, она рабочая
Дневник_Девы
04-03-2018-14:54
удалить
Вот такие труды!!!!!!!!!!!!Красиво,однако! 
Вы сейчас не можете прокомментировать это сообщение.
Дневник Создание плеера "Биение сердца" из статичной картинки. Часть I | Marina-Rozina - Дневник Marina_Rozina |
Лента друзей Marina-Rozina
/ Полная версия
Добавить в друзья
Страницы:
«позже
раньше»