Svoboda | Graniru | BBC Russia | Golosameriki | Facebook

 -Рубрики

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


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

Воскресенье, 05 Января 2014 г. 06:16 + в цитатник
Цитата сообщения 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". Еще выше, третий слой для подписи - "Подпись" и самый верхний - четвертый слой для записи скрипта - "Скрипт".

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





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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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


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

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


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

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


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

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


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

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

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

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


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

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


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

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


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

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


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

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

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


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


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.
Далее, обязательно необходимо нажать кнопку "Встроить шрифт" и проставить галочки во всех чекбоксах, а также выбрать используемые символы.

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


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


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

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







Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash

Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 18 - Вечный таймер обратного отсчета в программе Sothink SWF Quicker. AS2 .
Часть 19 - Делаем «Вечный таймер обратного отсчета» в Adobe Flash. AS3
Часть 20 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.




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

Часть 1 - Символы Православия. Клипарт PNG.
Часть 2 - Кластеры "Рождественское тепло".
...
Часть 16 - Векторный клипарт «Снежное Рождество».
Часть 17 - Набор для дизайна «Рождество».
Часть 18 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.




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

Часть 1 - Музыкальная флеш открытка к 23 февраля.
Часть 2 - Flash плееры "Цветочные"
...
Часть 22 - Флеш часики, информер и флеш плеер «Старое кафе».
Часть 23 - Прикольное флеш поздравление с Новым Годом.
Часть 24 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.


Серия сообщений "Sothink SWF Quicker.":
Часть 1 - Создаем таймер обратного отсчета в программе Sothink SWFQuicker
Часть 2 - Делаем элементарные часики.Начинаем учиться созданию flash
...
Часть 14 - Вечный таймер обратного отсчета в программе Sothink SWF Quicker. AS2
Часть 15 - Делаем снегопад в SWFQuicker..)
Часть 16 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.
Часть 17 - Учимся делать флеш-плеер c кнопкой в Sothink SWF Quicker
Часть 18 - Урок. Включить анимацию кнопкой в программе Sothink SWF Quicker
...
Часть 32 - Как сделать красивый текст в программе Sothink SWF Quicker
Часть 33 - Создаем плеер в Sothink SWF Quicker
Часть 34 - Создание плеера с кнопками из картинки с анимацией. Часть I – Создание плеера с двумя кнопками

Рубрики:  Флеш/Уроки флеш

Понравилось: 1 пользователю