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

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


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


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


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":

уроки в разных флешпрограммах, авторские уроки 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.
Часть 19 - С Рождеством!
 

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

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