-Рубрики


Делаем анимированный флеш-плеер в программе Sothink SWF Quicker

Среда, 09 Мая 2012 г. 21:39 + в цитатник
Цитата сообщения Та_ещё_штучка_Я



Хочу поделиться одним из способов сборки анимированного флеш-плеера. Я разделила урок на два этапа. Оговорюсь заранее. Работа предстоит кропотливая, но не сложная.На первой стадии я не пытаюсь переписать готовые посты из дневника Legionary. Вот ссылочка на уроки: http://le8.ru/post144802889/, http://le8.ru/post118952144/?upd, http://le8.ru/journalshowcomments.php?jpostid=1188...rnalid=3236775&go=prev&categ=0 Взяла на себя смелость объединить и дополнить их. Тот, кто уже овладел навыками по изготовлению плеера, может пропустить первый этап и перейти ко второму.


Этап первый. Делаем элементарный плеер.

Открываем Sothink SWF Quicker. Меню - файл. Далее по скриншоту.


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


Вот мой объединённый на одном слое клипарт. Для работы во флеш детали вашей картинки должны быть на отдельных слоях.

Убедились, в наличии клипарта в библиотеке прожки. То есть в правом нижнем её углу


Оставляем его до поры, до времени и приступаем к работе с кнопкой плеера. Для этого идём в меню. Insert - New Symbol

В новом окошке выбираем символ Button.

Прежде чем рисовать кнопочку определимся с её цветом. Желательно, чтобы он соответствовал цветовой гамме клипарта. Смотрим в верхний правй угол прожки.


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


В этом скрине обратите внимание на ведёрко и цветной квадратик. А так же на крохотные окошечки рядом. У меня стоит Type :Linear, то есть "линейный градиент" Вы же можете не морочить голову градиентами и выбрать любой цвет.


Кликаем на треугольничек в уголке квадратика с цветом заливки. Выпадает окошко с палитрой цветов.

Жмём на крохотный ярлычок в левом верхнем уголке.

Выбираем цвет "на ощупь", или же вписав нужный код в соответстующее окошечко. Подтверждаем свой выбор - "ОК".

Так будет выглядеть ваше рабочее поле на данном участке работы

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

Жмём на кадр первого слоя с обозначением "UP"


На рабочем поле рисуем выбранную фигуру. Для этого зажимаем левую кнопку мыши и тянем вниз и вправо.

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

Идём к нашему слою. Встаём на второй кадрик с обозначением "Over"и правой кнопкой мыши выбираем "insert blank keyframe"

Выбираем инструмент и рисуем окружность.

Центрируем её, установив нули в тех же окошках, что и при работе с овалом.

Встаём на третий кадр первого слоя с обозначением "DOWN" и снова правой кнопкой мыши выбираем "insert blank keyframe"

Выбрали нужный инструмент и рисуем прямоугольник с закруглёнными уголками.

Встаём на четвёртый кадр первого слоя - "HIT". Жмём на клавиатуре кнопку "F6",

Взяли инструмент "окружность" и рисуем овал, перекрывая наш прямоугольник.(пряча его). Выровняли по оси координат как предыдущие фигуры.

Создали новый слой. Встали на первый кадр.

Берём инструмент "Текст" и устанавливаем курсор мыши на фигуре. (в моём случае это овал).Зажимая левую кнопку мыши, тянем курсор в право и вниз, вырисовывая прямоугольник.

Встали на белый прямоугольничек, пишем текст - Play. Наше внимание сосредотачиваем на нижней части проги.



Если вы хотите анимированный текст, выбираем тип текста динамический. (на скрине - "Dynamic") Другой вариант текста - статический, то есть неподвижный.Выделенный зелёный квадратик на скрине - цвет текста. Здесь можно выбрать первоначальный цвет и подтвердить, или изменить его в следующих шагах урока.

Написали. Выделили текст так же, как выделяете его в ФШ. То есть зажав левую кнопку мыши, ведёте курсор от последней буквы к начальной.

Выбираем шрифт текста и его размер.


Если шрифт и размер нас устраивает, жмём на инструмент в виде стрелочки. Вокруг текста образуется синяя обводка.

С помощью стрелочек на клавиатуре выраниваем текст по центру кнопочки. Приступаем к добавлению эффекта к тексту. Кликаем на "Click to add.." (смотрим скрин)

Появляется окошко с эффектами. Здесь мы определяемся с цветом текста, нажав на выделенное в скрине - "Settings"


В новом окне выбираем цвет текста, обводки и тени. Я выбрала линейный градиент. Переключиться на линейный, или радиальный градиент можно в выделенном на скрине окошечке.

Выбрать точную(необходимую вам) цветовую гамму можно нажимая поочерёдно выделенные кнопочки на скрине. Нажав для начала на маленький треугольничек в уголке квадратика цвета, выпадают новые окна с цветовой палитрой


Таким же способом выбираем цвет обводки и тени. Для повтора эффекта (постоянной анимации) ставим галочку в нижней части окна "Loop"



Жмём ОК. Возвращаемся к окну с выбором эффекта. Подобрали понравившийся эффект, нажали ОК.

Выскочило вот такое окошко.Жмём "ДА"

Встаём на четвёртый кадр второго слоя и жмём "F5". Возвращаемся на сцену, где собираем плеер, нажав на "Skene 1"



Смотрим в правый нижний угол сцены, в библиотеку. Наш плеер будет выглядеть так, как на скрине

Точно так же рисуем кнопку "Stop" и возвращаемся на сцену. Далее в левой нижней части проги определяем размеры нашего флеша, учитывая параметры клипарта. Графу "Frame rate" оставляем без изменения.

Стоим на первом слое.Цепляем мышью кнопочку "Play" и тащим её из библиотеки на рабочее поле. Выравниваем (определяем ей место ) с помощью клавиш со стрелочками на клавиатуре.

Пока кнопочка выделена вписываем в соответствующую графу (нижняя левая часть проги) play_bt


Добавляем новый слой, встали на него и тащим кнопку "Stop" на рабочее поле. Установили кнопочку поверх кнопки "Play"

Вписываем "имя" кнопочки stop_bt там же, что и в случае с предыдущей кнопкой

Добавляем новый слой. Встаём на него.


В нижней части проги, в указанном поле вписываем скрин


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


В выпавшем окошке жмём Ок

Смотрим, что получилось, нажав на зелёный треугольничек на верхней панели проги.





Экспортируем готовую кнопочку себе в комп. Загружаем на Лире. Берем ссылку на песенку и проверяем.
Код вставки такого вашего плеера будет:
flash=Ссылка_на_сам_плеер?mp3=Ссылка_на_песню
После знака = вписываем размеры готового плеера. Код заключаем в квадратные скобки []


Если возникнут вопросы, спрашивайте. Для настойчивых и упрямых пишу продолжение урока. Так называемый этап второй. Прожку не закрываем )

Рубрики:  ► МУЗЫКА
Метки:  
Понравилось: 5 пользователям

 

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

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

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

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