Мобильный LiveInternet Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.

Авторизация

Дневник novprospekt Лента друзей - Дневник - Полная версия

Плеер кнопка из анимашки. Урок для Sothink SWF Quicker. 04-01-2014 15:47 к комментариям - к полной версии - понравилось!

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

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

[550x550]

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

[700x]

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

[700x]

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

[700x372]

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

[700x]

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

[703x431]

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

[655x515]

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

[700x]

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

[700x]

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

[270x221]

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

[700x]

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

[700x]

[318x243]

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

[700x]

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

[700x]

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

[700x]

[700x]

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

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

[700x]

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

[700x]

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

[700x]

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

[700x]

[700x]

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

[700x]

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

[700x]

[700x]

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

code:


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

вверх^ к полной версии понравилось! в evernote

Комментарии (116): вперёд» последняя»

марина-значит_морская 04-01-2014-15:58 удалить

Спасибо Мариночка ! С Новым Годом!!!

Вы сейчас не можете прокомментировать это сообщение.