• Авторизация


Урок во флеш.Делаем анимированный флеш-плеер в программе Sothink SWF Quicker 08-04-2012 17:34 к комментариям - к полной версии - понравилось!




Хочу поделиться одним из способов сборки анимированного флеш-плеера. Я разделила урок на два этапа. Оговорюсь заранее. Работа предстоит кропотливая, но не сложная.На первой стадии я не пытаюсь переписать готовые посты из дневника 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=Ссылка_на_песню
После знака = вписываем размеры готового плеера. Код заключаем в квадратные скобки []


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

вверх^ к полной версии понравилось! в evernote
Комментарии (60): вперёд»
MissKcu 08-04-2012-17:57 удалить
УТАЩИЛА...туда же....
Ответ на комментарий MissKcu # океюшки ) надеюсь, всё понятно..но если чё..подскажу.
MissKcu 08-04-2012-18:01 удалить
Ответ на комментарий Та_ещё_штучка_Я # если че...я дорогу назад знаю...смеюсь....
Franzuzhenka 08-04-2012-19:53 удалить
kogda nibud wsö rawno oswoü!!! Spasibki rodnulja!
Ответ на комментарий Franzuzhenka # Пожалуйста, Катюш! ..конечно освоишь!
СПАСИБо, огромное, буду изучать и делать [600x362]
Ответ на комментарий Нина_Гуревич # С праздником вас!
..и пожалуйста, у вас получится!
Ответ на комментарий Kapitoshka_N # Пожалуйста!
Лешины уроки у меня есть. Но вот эта программка осталась на старом ноуте с Windows XP....
сейчас ее снова скачала, а она у меня в Windows 7 не хочет работать.
Чёт я не так делаю....А очень хочется...
Ответ на комментарий Наталья_Ивановна_НИК # сейчас ссылку поищу. у меня тож не всё становится на винду..
Ответ на комментарий Та_ещё_штучка_Я # Спасибо.
Ответ на комментарий Наталья_Ивановна_НИК # http://novprospekt.ru/post162459685/
посмотрите в комментах, я от туда брала ссылку.
Или здесь:
http://www.liveinternet.ru/users/morela4/post190048845/
Ответ на комментарий Та_ещё_штучка_Я # Хорошо,сейчас попробую!
Ответ на комментарий Та_ещё_штучка_Я # В общем,что-то не получается...от morela4 всего на 30 дней- пробная...
Ладно,потом попробую...
Ответ на комментарий Наталья_Ивановна_НИК # сходите по первой ссылочке, там два варианта предложены...не пробники!
Ответ на комментарий татьяна_татуревич # Пожалуйста, Танюш!
Ответ на комментарий Лида_Юринец # Пожалуйста!
alla56 10-04-2012-09:25 удалить
СПАСИБО Будем учиться.
Ответ на комментарий alla56 # это очень увлекательно! Пожалуйста!
Ответ на комментарий pappesa # Пожалуйста!
Mausinka 12-04-2012-14:51 удалить
спасибо Алечка за прекрасный урок! будем учиться....если что прибегу с вопросами....))))
Ответ на комментарий Mausinka # Пожалуйста! ..прибегай, Танюш )
Cadmii 22-04-2012-00:02 удалить
Здравствуйте,Аля!
Мне очень нужно задавать Вам вопрос. Прошу не обижайтесь за вторжение.

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

Но вот как в просто флеш плеер вставить музыку?
Например, я сделала флеш с разными картинками. Опубликовала их. А потом хочу в этот флеш-плеер вставить подходящую музыку.
Я вроде все правильно делала. А в пустом флеше вставленная музыка не играет, кнопки не реагируют.
Может код какой-то другой должен быть. Чтобы и флеш и плеер вместе были.?
Спасибо за внимание! Ну и за любой ответ!
Ответ на комментарий Cadmii # попробую объяснить про код.
Вы загружаете флеш- плеер. Опубликовываете в черновик дневника.
Дальше жмёте "редактировать сообщение"
У вас в черновике увидите код, заключённый в квадратные скобки.
Вам нужно загрузить какую нить музычку сюда же, в редактировании сообщения.
Загрузили. Снова редактируете сообщение.
Теперь внимание! В конце кода (перед квадратной скобкой ) дописываете:
?mp3=Ссылка_на_песню.
БЕЗ пробелов и отступов.
В готовом виде код будет так выглядеть:
flash=110,149,http://img1.liveinternet.ru/images/attach/c/2//3863/3863712_t_f_001_002.swf?mp3=Ссылка_на_песню
110,149, - вот это размеры вашего плеера. Но и без размеров(без цифр) флеш тож будет играть.
Вместо "Ссылка на песню!" вставляете ссылку на вашу музычку, которая начинается с "httr " (не помню точно значки)
И не забудте квадратные скобки в начале и в конце всего кода. Вот такие: []
Ответ на комментарий Cadmii # код конечно же ваш. Здесь просто для примера написала.
Cadmii 22-04-2012-00:47 удалить
Ответ на комментарий Та_ещё_штучка_Я # Все так сделала. Но кнопки не реагируют. Попробую плеер еще раз сделать.


Аля!!!!!!!!!!!!Спасибо!!!!!!!!!!!!!


Комментарии (60): вперёд» вверх^

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

Дневник Урок во флеш.Делаем анимированный флеш-плеер в программе Sothink SWF Quicker | Та_ещё_штучка_Я - Дневник Та_ещё_штучка_Я | Лента друзей Та_ещё_штучка_Я / Полная версия Добавить в друзья Страницы: раньше»