Плеер кнопка из анимашки. Урок для Sothink SWF Quicker

Понедельник, 14 Марта 2016 г. 23:47 + в цитатник

Цитата сообщения novprospekt

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

Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.

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

А это анимационная картинка сделанная мною для плеера

Вы тоже можете сделать свою анимацию или взять готовую из интернета.
Урок выполнен в программе Sothink SWF Quicker русская портативная версия SothinkSWFQuicker_5.3.511
Скачать эту версию можно здесь
http://rusfolder.com/37464551
1 Открываем программу и В панели "Свойства" выставляем параметры для флеш ролика
Ширина рабочего поля в пикселях.
Высота рабочего поля в пикселях.
Частота кадров и цвет фона.
Размеры рабочего поля равны размерам вашей картинки
В моем случае это 550 пикс x 500 пикс. Частота кадров равна 12 кадрам в сек.

Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.

2.Далее, на Временной Шкале создаем 4 слоя (снизу вверх). Самый нижний слой "Play". Здесь будет картинка, работающая как кнопка "Play". Над этим слоем второй слой - "Stop". Здесь будет располагаться картинка - кнопка "Stop". Еще выше, третий слой для подписи - "Подпись" и самый верхний - четвертый слой для записи скрипта - "Скрипт".

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

Загружаем анимационную картинку. Для это создаем для нее некий контейнер - "Новый символ".
Вкладка меню "Вставка - Новый символ".

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

После того как нажмете ОК, откроется окно редактирования вновь созданного символа - "Символ1"
В этот символ и загружаем нашу анимашку. Файл - Импорт.

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

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

В палитре "Трансформация" для "Символ1" настраиваем параметры. Координаты X и Y обязательно должны быть равны 0, а ширина и высота картинки - это размеры загруженной анимашки. В моем случае width="550", а height="500".

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

На основном рабочем поле "Сцена1" выделяем слой "play", а в палитре инструментов выбираем инструмент "Выбор". В Библиотеке полосу прокрутки устанавливаем в самом верху и инструментом "Выбор" перетягиваем на рабочее поле первый кадр (первую картинку) нашей анимашки. В палитре "Трансформация" устанавливаем размеры этой статичной картинки и выравниваем картинку по центру. Для выравнивания по центру координата X должна быть равна половине размера ширины картинки, а координата Y должна быть равна половине высоты картинки. В моем случае при размерах картинки 550x500 пикс. - X=275; Y=250.
При установке параметров в палитре "Трансформация" картинка должна быть выделена на рабочем поле, а активным слоем должен быть слой "play"

Теперь эту статичную картинку, размещенную на слое "play", для того, что она могла стать элементом создаваемого плеера, необходимо сделать символом - видеороликом.
Для этого, проверяем, чтобы наша картинка была выделена на рабочем поле, а затем на панели "Свойства" находим кликабельную надпись "Преобразовать в символ". Щелкаем по этой надписи.

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

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

Кнопка "play" для нашего плеера готова.

Теперь сделаем кнопку "stop". Кнопку "stop" мы будем делать из видеоролика "Cимвол1", т.е. из самой анимашки. Но сначала закроем замочком слой "play", чтобы случайно не сдвинуть расположенную на нем картинку. Щелкаем на слое "play" в клеточку рядом с глазком видимости слоя. В клеточке появится замочек.

Следующим шагом выделяем слой "stop" и из Библиотеки перетягиваем на этот слой "Cимвол1".

В палитре "Трансформация" выравниваем по середине рабочего поля этот видеоролик. Для выравнивания по центру координата X = половине размера ширины картинки, а координата Y должна быть равна половине высоты картинки. В моем случае это X=275; Y=250.

Для того чтобы этот видеоролик "Cимвол1" выполнял в нашем плеере функцию кнопки "stop", в палитре "Свойства" вписываем ему в графе "Имя" -
"stop_bt"
При этом не забываем, что активным слоем должен быть слой "stop", сам видеоролик "символ1" должен быть выделен на рабочем поле инструментом "Выбор".

Кнопка "stop" также готова.
Наши кнопки плеера - "play" и "stop" готовы и им присвоены имена "play_bt" и "stop_bt"
Картинки, выполняющие роль кнопок располагаются одна над другой и картинка - кнопка "stop" закрывает собой кнопку "play".
Чтобы кнопки заработали в нашем плеере, необходимо задать сценарий их работы, то есть. вставить в флешку скрипт.
Выделяем слой "скрипт" и в палитре "Свойства" переходим на вкладку "Действие". Открываем эту вкладку. Вставляем скопированный скрипт, который приведен ниже, и производим проверку скрипта на ошибку. Если все верно, то тестируем сам ролик.
Нажимаем на статичную картинку и должна открываться анимационная картинка.

code:


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();

};

Для создания подписи с активной ссылкой на ваш дневник выделяем слой "подпись" и выбираем инструмент "Текст". На слое "подпись", вне картинки плеера, растягиваем текстовое поле для подписи и в палитре "Свойства" задаем параметры текста. Тип текста обязательно должен быть "HTML". Шрифт, его цвет и расположение - на ваше усмотрение. Внизу, справа, в палитре "Свойства" имеется строка для ввода URL - адреса ресурса, на который будет ссылка (строчка для введения адреса помечена значком цепочки). Рядом со строкой для введения адреса есть строка для выбора того, как будет открываться ваша ссылка. Необходимо выбрать цель - _blank.
Далее, обязательно необходимо нажать кнопку "Встроить шрифт" и проставить галочки во всех чекбоксах, а также выбрать используемые символы.

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

code:


[flash=ширина флешки,высота флешки,http://(Ссылка на флешку).swf?
mp3=http://(Ссылка на музыку).mp3]

Серия сообщений "Рождество":

Часть 1 - Символы Православия. Клипарт PNG.
Часть 2 - Кластеры "Рождественское тепло".
...
Часть 16 - Векторный клипарт «Снежное Рождество».
Часть 17 - Набор для дизайна «Рождество».
Часть 18 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.
Часть 19 - С Рождеством!
Часть 20 - Флеш эффект движения картинок. Флеш галерея «Photo Stack Gallery».
Часть 21 - Надписи и шрифты «С Новым Годом и Рождеством».
Часть 22 - Коллажи с анимацией "С Рождеством!".
Часть 23 - Маски для Photoshop и Corel «Christmas masks».

Серия сообщений "Flash плееры":

Часть 1 - Flash плееры "Цветочные"
Часть 2 - Осенние флешки для приветствий в дневниках и эпиграфах..
...
Часть 19 - Флеш часики, информер и флеш плеер «Старое кафе».
Часть 20 - Прикольное флеш поздравление с Новым Годом.
Часть 21 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.
Часть 22 - Флеш плеер «Радио микс».
Часть 23 - Плеер - радиомикс «Мужской характер».
...
Часть 30 - Как получить ссылку на поток онлайн радиостанции.
Часть 31 - Флеш поздравления с Новым Годом.
Часть 32 - Рамочка с флеш «За Святую Русь помолюсь...».

Серия сообщений "Флешки Новогодние":

Часть 1 - Флешинформер "До Нового Года осталось..."
Часть 2 - Создаем флешки в программе Aleo Flash Intro Banner Maker.Часть первая.
...
Часть 13 - Флеш календарики с часиками в новогоднем дизайне.
Часть 14 - Новогодняя флеш гирлянда с приветствием.
Часть 15 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.
Часть 16 - Снегопад с блёстками. Урок для Adobe Flash.
Часть 17 - Плеер с календариком, часиками и приветствием «Снег с блёстками»
...
Часть 25 - Флеш поздравления с Новым Годом.
Часть 26 - Флеш открытка «2015».
Часть 27 - С Новым Годом!

Серия сообщений "Уроки по музыке":
Часть 1 - Как легко найти и вставить музыку в дневник
Часть 2 - Добавляем музыку в дневник...Урок
...
Часть 9 - Конвертируем любое видео в МР3
Часть 10 - Делаем кнопку со звуком
Часть 11 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker
Часть 12 - Мощный музыкальный граббер.
Часть 13 - Поём под караоке
Часть 14 - Cкачать музыку и видео программой vkmusic
Часть 15 - Онлайн микрофон для записи голоса
Часть 16 - Все саундтреки.РФ

Метки: Плеер кнопка

<a href="https://www.liveinternet.ru/users/lagad/post386709592/">РџР»РµРµСЂ РєРЅРѕРїРєР° РёР· Р°РЅРёРјР°С€РєРё. РЈСЂРѕРє РґР»СЏ Sothink SWF Quicker</a><br/>РџР»РµРµСЂ РєРЅРѕРїРєР° РёР· Р°РЅРёРјР°С€РєРё. РЈСЂРѕРє РґР»СЏ Sothink SWF Quicker.

Р‘СѓРґРµРј РґРµР»Р°С‚СЊ РїСЂРѕСЃС‚РѕР№ РїРѕС‚РѕРєРѕРІС‹Р№ РїР»РµРµСЂ - РєРЅРѕРїРєСѓ РёР· Р°РЅРёРјР°С†РёРѕРЅРЅРѕР№ РєР°СЂС‚РёРЅРєРё. РС‚Рѕ РѕС‡РµРЅСЊ Р±С‹СЃС‚СЂС‹Р№ СЃРїРѕСЃРѕР± СЃРѕР·РґР°С‚СЊ РјСѓР·С‹РєР°Р»СЊРЅСѓСЋ С„Р»РµС€ РєР°СЂС‚РёРЅРєСѓ РґР»СЏ СѓРєСЂР°С€РµРЅРёСЏ СЃРІРѕРёС… Р·Р°РїРёСЃРµР№ РёР»Рё СЌРїРёРіСЂР°С„Р° РґРЅРµРІРЅРёРєР°. Р”Р»СЏ СЃРѕР·РґР°РЅРёСЏ РїР»РµРµСЂР° РЅР°Рј РїРѕС‚СЂРµР±СѓРµС‚СЃСЏ С‚РѕР»СЊРєРѕ РѕРґРЅР° РёРЅС‚РµСЂРµСЃРЅР°СЏ Р°РЅРёРјР°С†РёРѕРЅРЅР°СЏ РєР°СЂС‚РёРЅРєР° Рё РјРёРЅРёРјСѓРј РґРµР№СЃС‚РІРёР№. 
Р’РѕС‚ РјРѕР№ СЂРµР·СѓР»СЊС‚Р°С‚ СѓСЂРѕРєР°.

Рђ СЌС‚Рѕ Р°РЅРёРјР°С†РёРѕРЅРЅР°СЏ РєР°СЂС‚РёРЅРєР° СЃРґРµР»Р°РЅРЅР°СЏ РјРЅРѕСЋ РґР»СЏ РїР»РµРµСЂР°

Р’С‹ С‚РѕР¶Рµ РјРѕР¶РµС‚Рµ СЃРґРµР»Р°С‚СЊ СЃРІРѕСЋ Р°РЅРёРјР°С†РёСЋ РёР»Рё РІР·СЏС‚СЊ РіРѕС‚РѕРІСѓСЋ РёР· РёРЅС‚РµСЂРЅРµС‚Р°.
РЈСЂРѕРє РІС‹РїРѕР»РЅРµРЅ РІ РїСЂРѕРіСЂР°РјРјРµ Sothink SWF Quicker СЂСѓСЃСЃРєР°СЏ РїРѕСЂС‚Р°С‚РёРІРЅР°СЏ РІРµСЂСЃРёСЏ SothinkSWFQuicker_5.3.511
... <a href="https://www.liveinternet.ru/users/lagad/post386709592/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

LiveInternetLiveInternet

-Подписка по e-mail

-Метки

-Цитатник

-Рубрики

-Ссылки

-Музыка

-Приложения

-Поиск по дневнику

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

-Статистика

Плеер кнопка из анимашки. Урок для Sothink SWF Quicker