-Метки

3d куколки corel paint shop pro faq flash gimp halloween html Маски анимационные картинки анимационные фоны анимация анимашки бесшовные фоны видеоуроки видеоуроки фотошоп винтаж все для gimp все для дизайна все для фотошоп вязание вязание крючком год змеи девушки день всех влюбленных день св. валентина зима календари картинки картинки для творчества картины художников картины художников картинки для творчества кисти для фотошоп клипарт клипарт png клипарт девушки клипарт на прозрачном слое коллаж коллажи коллажи в corel компьютерная грамотность компьютерные уроки для чайников куколки кулинария любовь маски для фотошоп и corel мои работы морская тема мужская тема новогоднии обои и фоны новый год обои для рабочего стола осень открытки к праздникам оформление дневника оформление постов пасха пасхальные идеи подарки к праздникам своими руками поделки полезности праздники программы рамочки рамочки для постов растровый клипарт jpg рецепты рождество романтика рукоделие ручная работа своими руками сердечки сказочные картинки скачать gimp скрапнабор скрапнаборы украшалки уроки corel уроки corel paint shop pro уроки flash уроки gimp уроки html уроки photoshop уроки анимации уроки анимации в фотошоп уроки корел уроки фотошоп фильмы и аудиокниги онлайн фильтры и плагины фильтры и плагины фотошоп фильтры фотошоп флешинформеры флешки флешчасики фоны фоны для коллажей фэнтази хобби часики элементы для дизайна

 -Рубрики

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

link back to: http://www.waldgeist.co.uk

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

Поиск сообщений в mariflash

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

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 29.11.2009
Записей:
Комментариев:
Написано: 2417


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

Суббота, 04 Января 2014 г. 22:21 + в цитатник
Цитата сообщения novprospekt

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


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

Вы тоже можете сделать свою анимацию или взять готовую из интернета.
Урок выполнен в программе 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.


Серия сообщений "Flash":
Часть 1 - Клипарт PNG «Винтажные часы (Vintage Watches )».
Часть 2 - Флешки для эпиграфов с календариком часиками и радио.
...
Часть 7 - Флеш календарики с часиками в новогоднем дизайне.
Часть 8 - Флеш заготовки «Календарики и часики».
Часть 9 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.
Часть 10 - Флеш плеер с часиками и календарем.
Часть 11 - Флеш календарики.

Метки:  

Миледи_Малиновская   обратиться по имени Понедельник, 27 Января 2014 г. 08:52 (ссылка)
спасибо за подробный урок...но у меня проблемы...несколько раз переделывала урок...после сохранения на комп и загрузки на лиру у меня нет кнопок плей и стоп...что я сделала не так? или это может быть из за того, что я не верно вставила в код для подгрузки музыки?... и как сделать так, чтобы подпись была на прозрачном фоне, а не на белом?
000 (406x363, 170Kb)
Ответить С цитатой В цитатник
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку