Делаем интерактивные флеш кнопки для плеера.

Четверг, 18 Сентября 2014 г. 10:22 + в цитатник

Дороие мои, спасибо вам за поддержку и теплые слова, за вашу заботу обо мне. Мне очень приятно, что вы ждете меня и помните обо мне. Давно уже ничего не писала из уроков, но очень много разных заготовок. Вот урок как сделать кнопочку из векторного клипарта. Может быть кого-т он заинтересует.
В этом уроке сделана кнопочка "PLAY". По аналогии можно сделать и кнопочку "STOP". Как из этих кнопочек собрать плеер - урок (от Леночки jzayka) здесь:

Загружаем музыку в Adobe Flash CS6 c помощью Панели"Фрагменты кода"

Будем делать интерактивные флеш кнопки для плееров, используя векторный клипарт формата AI. Формат AI это векторный формат программы Adobe Illustrator. Его напрямую можно импортировать в программу Adobe Flash и использовать все элементы векторного файла в создании флешек. Вот примеры таких кнопочек и плееры собранные из этих кнопочек.

Скачать векторные файлы для работы можно по ссылке

Кнопки техно

Фрукты

Скачать звуки для кнопок

Звуки для кнопок

Итак начнем.
Создайте папку для нового проекта и откройте программу Adobe Flash

Создайте документ Action Script 3

Файл - Создать
02-07-2014 19-22-15 (700x449, 182Kb)

Импортируем в Библиотеку векторный файл 1.ai из набора "Кнопки техно"

Файл - Импорт - Импортировать в библиотеку

02-07-2014 19-24-58 (700x396, 195Kb)

Откроется вот такое диалоговое окно. Нажимаем "ОК".

02-07-2014 19-39-12 (700x477, 167Kb)

Теперь откройте вкладку Библиотека и там увидите следующие файлы

02-07-2014 19-43-38 (531x577, 86Kb)

Нас интересует векторный файл 1.ai и мы его инструментом Стрелка (черная стрелка) перетаскиваем из Библиотеки на Основную сцену - Монтажный кадр 1.

02-07-2014 20-17-58 (700x523, 162Kb)

Дважды щелкните по фону картинки на Основной сцене - Монтажном кадр 1 инструментом "Стрелка" и попадёте непосредственно в режим редактирование файла 1.ai. То, что вы находитесь в режиме редактирования векторного файла 1.ai, вам укажет новая вкладка "1.ai", которая появиться рядом с вкладкой "Монтажный кадр 1".

02-07-2014 20-45-57 (552x412, 104Kb)

Теперь щелкните дважды по любому из элементов, расположенных на картинке и попадёте в режим редактирования группы, в которую и входят все элементы, изображенные на общей картинке. Если при переходе в режим редактирования группы у вас выделились все ее элементы, то это выделение надо сбросить, щелкнув инструментом Стрелка вне картинки. То, что вы находитесь в режиме редактирования Группы векторного файла 1.ai, вам укажет новая вкладка "Группа", которая появиться рядом с вкладками "Монтажный кадр 1" и "1.ai".

04-07-2014 0-04-11 (610x402, 109Kb)

Займемся непосредственно созданием интерактивных кнопочек для плеера из подготовленного материала. Но прежде нам надо создать еще один документ AS3.

Файл - Создать - Action Script 3

Этот, вновь созданный документ, необходимо сохранить в созданную ранее папку проекта под каким - либо именем, например - "Кнопка техно".

Файл - Сохранить как.

Теперь вам просто периодически необходимо будет нажимать Файл - Сохранить, чтобы все сделанные вами изменения в работе сохранялись.

У вас на Рабочем поле теперь открыты два документа - документ с импортированным векторным файлом 1.ai (у меня это документ Безымянный - 1) и документ "Кнопка техно"

04-07-2014 0-24-09 (670x302, 42Kb)

Возвращаемся на вкладку "Безымянный - 1", где у нас открыт режим редактирования группы векторного файла 1.ai и здесь выберем элементы для нашей интерактивной кнопки - плеера. Используя инструмент Стрелка, с зажатой клавишей Shift, выделите понравившиеся вам элементы. Я выбрала три кнопки стрелки с чернобелой, оранжевой и голубой подсветками.

04-07-2014 0-35-21 (700x470, 156Kb)

После того как нужные элементы выделены, копируем их

Правка - Копировать

Переходим на вкладку документа "Кнопка техно" и вставляем скопированные элементы.

Правка - Вставить в центр

На Рабочем поле - Монтажном кадре - 1 документа "Кнопка техно" появятся выбранные нами элементы.

04-07-2014 0-46-54 (648x497, 63Kb)

Поочередно выделяя эти элементы инструментом Стрелка, превращаем их в символы - Графика.

Выделите инструментом Стрелка черно-белую кнопку

Модификация - Преобразовать в символ

В открывшемся диалоговом окне "Преобразовать в символ" выставляем следующие параметры

04-07-2014 1-06-48 (553x425, 78Kb)

Далее тоже проделываем с другими вставленными элементами.

04-07-2014 1-11-56 (570x431, 95Kb)

В Библиотеки у нас появились три графических символа, а с Рабочего поля - Монтажный кадр 1 их нужно удалить (выделяем элементы инструментом Стрелка и нажимаем клавишу Delete).

04-07-2014 2-01-14 (700x683, 180Kb)

Для плеера - кнопки нам нужны две кнопки - кнопка Play и кнопка Stop

Сделаем интерактивную кнопку Play. Для этого создадим символ - Кнопка.

Вставка - Создать символ

04-07-2014 2-59-08 (436x191, 53Kb)

После создания символа Кнопка мы попадаем в поле его редактирования

Временная шкала (Timeline) для символа Кнопка имеет вот такой вид. На ней находятся всего 4 кадра с заголовками "Up", "Over", "Down" и "Hit".

04-07-2014 3-06-21 (700x521, 179Kb)

Именно использование этих 4 кадров и позволит создать нам интерактивность кнопки, а именно наглядное взаимодействие символа Кнопка и компьютерной мыши.

Состояния кнопки, реакция на действия мышки

«Up» (вверх) — состояние кнопки, когда мышка находится вне ее.
«Over» (над) — курсор мышки наведен на кнопку.
«Down» (вниз) — отражает состояние кнопки, когда по ней производится клик кнопки мышки.
«Hit» (нажатие) — определяет область в флеш ролике, которая будет реагировать на действия мышки. Эта область не отображается в ролике визуально.

Выделяем кадр "Up" из Библиотеки на Рабочее поле перетаскиваем графический символ "Черно-белый".
04-07-2014 3-24-05 (700x575, 185Kb)

Открываем вкладку Выровнять и нажимаем кнопки "Выровнять горизонтально по центру" и "Выровнять вертикально по центру". При этом обязательно должна стоять галочка в чекбоксе "Выровнять в пределах рабочей области"

04-07-2014 3-31-03 (700x554, 208Kb)

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

04-07-2014 3-42-15 (700x569, 246Kb)

В пустой ключевой кадр "Over" из Библиотеки перетаскиваем графический символ "голубой" и также как и графический символ "Черно-белый"выравниваем с помощью Вкладки "Выровнять".

04-07-2014 3-49-04 (700x561, 161Kb)

Щелкните кадр "Down" и вызовите правой кнопкой мыши контекстное меню. В нём выберите пункт "Вставить ключевой кадр"

04-07-2014 4-06-36 (700x650, 274Kb)

В кадре "Down" в этом случае отобразиться тот же самый графический объект, что и в кадре "Over".

Щелкните в кадре "Hit" и также вызвав контекстное меню выберите пункт "Вставить ключевой кадр". В этом случае в кадре "Hit" отобразиться тот же самый графический объект, что и в кадре "Down".

Теперь вернитесь в кадр "Down". Этот кадр отображает расположенный в нем объект в тот момент, когда мы нажимаем на кнопку компьютерной мышкой. Но в нашем случае этот кадр повторяет кадр "Over" и никаких видимых изменений не происходит. Поэтому интерактивность этому кадру мы придадим следующим образом. Выделите на Рабочем поле находящийся в этом кадре графический объект "голубой" и откройте вкладку "Преобразовать"
04-07-2014 23-50-53 (700x543, 180Kb)

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

04-07-2014 23-58-10 (445x587, 197Kb)

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

05-07-2014 0-09-05 (560x389, 172Kb)

Щелкните по связи (цепочка), чтобы разорвать её и для процентного показателя ширины, выделенного объекта, измените значение со 100 на 95.

05-07-2014 0-19-12 (414x368, 72Kb)

Теперь наша кнопка при нажатии на неё мышью, как бы сожмется по ширине, а это укажет, что контакт с мышью произошел.

Теперь выше слоя Слой 1, создадим новый слой Слой 2 на котором будем размещать текст - надпись для кнопки. В нашем случае, так как мы делаем кнопку "Play" для плеера, то и текст соответственно будет Play или Играть. Но текст в кадрах "Up", "Over" и "Down" также будет изменяться в нашем случае будет меняться цвет текста и его размер.

Итак, создаем для текста Слой 2, выше Слой 1, и щелкаем в кадр "Up". В кадре "Up" темно - серым цветом инструментом Текст пишем - "Play". Шрифт и его размер выбираем по своему усмотрению. Шрифт также обязательно внедряем.

05-07-2014 1-26-47 (547x670, 164Kb)

Находясь в кадре "Up", инструментом Стрелка щелкаем по тексту и перемещаем текст на кнопку в нужное место.

05-07-2014 1-41-30 (567x627, 167Kb)

Всё также находясь на Слой 2 для текста, щелкаем в кадр "Over" и правой кнопкой мыши вызываем контекстное меню, в котором щелкаем пункт "Преобразовать в ключевые кадры"

05-07-2014 1-44-26 (609x453, 219Kb)

Находясь в кадре "Over" инструментом Текст выделяем надпись "Play", а в палитре Свойства меняем цвет текста на близкий к голубому.

05-07-2014 2-00-16 (700x492, 243Kb)

Всё также находясь на Слой 2 для текста, щелкаем кадр "Down" и вызвав контекстное меню правой кнопкой мыши, выбираем пункт "Преобразовать в ключевые кадры". Надпись "Play" на кнопке выделяем инструментом Стрелка. Открываем вкладку "Преобразовать" и изменяем масштаб надписи по ширине со 100% на 95%.

05-07-2014 2-18-33 (652x648, 221Kb)

Выше слоя Слой 2 создаем Слой 3 на котором в кадре "Down" разместим звук для кнопки. После того как мы такой звук разместим в кадре "Down", то при нажатии на кнопку этот звук мы можем услышать.
Скачиваем архив со звуками для кнопок и выбираем, то что вам больше понравилось. Затем импортируем звук в Библиотеку.

Файл - Импорт - Импортировать в библиотеку

Звук появиться в Библиотеке. А мы, выделив слой Слой 3, щелкнем в кадре "Down" и вызвав контекстное меню правой кнопкой мыши, выберем пункт "Преобразовать в ключевые кадры".
Слой 3 активен и активен кадр "Down". Далее, инструментом Стрелка из Библиотеки на кнопку на Рабочее поле перетягиваем звук для кнопки. После того, как звук будет добавлен на кнопку из Библиотеки, в кадре "Down" можно будет увидеть музыкальную дорожку этого звука.

05-07-2014 2-40-12 (700x579, 225Kb)

Давайте протестируем нашу интерактивную кнопочку "Play". Для этого перейдем на вкладку Монтажный кадр 1 и из Библиотеки на Рабочий стол инструментом Стрелка перетянем "кнопку play"

05-07-2014 2-52-28 (700x539, 160Kb)

Тестируем кнопку Ctrl+Enter. При наведении мышкой на кнопку должно появляться голубое свечение и надпись изменять цвет на голубой. При нажатии на кнопку слышится щелчок и кнопка сжимается в размере.

Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash
Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 25 - Работа по уроку «Создание эффекта Боке».
Часть 26 - Календарик. Работа Preriy
Часть 27 - Делаем интерактивные флеш кнопки для плеера.
Часть 28 - Флеш фильтр для программной анимации «Flamme» . Action Script 2.
Часть 29 - Анимация дождя в Adobe Flash. Урок первый.
...
Часть 48 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.
Часть 49 - Использование панели «Редактор движения» в Adobe Flash CS6.
Часть 50 - Анимация формы во Flash(морфинг).

Серия сообщений "Флеш заготовки":
флеш заготовки, флеш материал
Часть 1 - Флеш заготовки «Часики, календарики и приветствия».
Часть 2 - Флеш заготовки «Календарики и часики».
...
Часть 14 - Мои копилочки с Я - ру. Для часиков.
Часть 15 - Мои копилочки с Я - ру. Пасхальные кластеры и декор для дизайна флешек.
Часть 16 - Делаем интерактивные флеш кнопки для плеера.
Часть 17 - Анимированные флеш кнопки.
Часть 18 - FLA исходники для Adobe Flash CS6 «Happy Valentine's Day».
Часть 19 - Флеш заготовки «Календари цветные». AS2.

Метки: флеш кнопки флеш плеер векторный клипарт

Процитировано 65 раз
Понравилось: 40 пользователям

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

ВАТ обратиться по имени Четверг, 18 Сентября 2014 г. 10:37 (ссылка)

Мариночка, спасибо большое! Как вовремя! Я как раз начала разбираться с кнопочками. Спасибо большое! Цитирую с благодарностью!

Ответить С цитатой В цитатник

Пятница, 19 Сентября 2014 г. 14:43ссылка

novprospekt

Верочка, очень рада тебе и рада, что урок пригодится. Если что-то будет непонятно, пиши. Потихоньку буду отвечать.

Ответить С цитатой В цитатник Обратиться по имени

jzayka обратиться по имени Четверг, 18 Сентября 2014 г. 10:46 (ссылка)

Мариночка,приветик..)
Цитирую с удовольствием урок..
Спасибо !!!Поправляйся,мы ждем тебя!!!

Ответить С цитатой В цитатник

Пятница, 19 Сентября 2014 г. 14:44ссылка

novprospekt

Спасибо Леночка. Буду потихоньку восстанавливаться. Так хочется заниматься с вами флешками. Да и задумок разных много.

Ответить С цитатой В цитатник Обратиться по имени

Пятница, 19 Сентября 2014 г. 17:27ссылка

jzayka

Главное,Мариша,здоровье..)
Флешки никуда не денутся..Вчера пробовала с ai форматом разобраться.А именно как загружать в Адобе.
Теперь поняла..Только смущают большие размеры..
С фруктами хотела поработать..Но остановилась на маленьких-круглых..
Кнопки я еще в прошлом году освоила..Мне проще с мувиками..
Вчера с удовольствием вспомнила..Люблю твои уроки..
Я "выросла" на них..И теперь уже по-другому вижу их и воспринимаю..
Здоровья,Здоровья еще раз Здоровья!!!

Ответить С цитатой В цитатник Обратиться по имени

Lana-Lanochka обратиться по имени Четверг, 18 Сентября 2014 г. 11:00 (ссылка)

Спасибо за прекрасный урок!

Ответить С цитатой В цитатник

Пятница, 19 Сентября 2014 г. 14:45ссылка

novprospekt

Пожалуйста. Рада буду если пригодится.

Ответить С цитатой В цитатник Обратиться по имени

Татьяна_Волкова_Литвинова обратиться по имени Четверг, 18 Сентября 2014 г. 11:11 (ссылка)

Марина, спасибо за урок! Многие из нас увлечены изучением кнопок, кто в Сотнике, а кто в АФ. Твой урок сейчас поможет нам разобраться и познать. Здоровья тебе и возвращения домой!

Ответить С цитатой В цитатник