Делаем анимированный флеш-плеер в программе Sothink SWF Quicker |
Хочу поделиться одним из способов сборки анимированного флеш-плеера. Я разделила урок на два этапа. Оговорюсь заранее. Работа предстоит кропотливая, но не сложная.На первой стадии я не пытаюсь переписать готовые посты из дневника 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=Ссылка_на_песню
После знака = вписываем размеры готового плеера. Код заключаем в квадратные скобки []
Если возникнут вопросы, спрашивайте. Для настойчивых и упрямых пишу продолжение урока. Так называемый этап второй. Прожку не закрываем )
Рубрики: | ► МУЗЫКА |
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |