Рисуем кнопку в Adobe Flash.

Среда, 11 Марта 2015 г. 17:31 + в цитатник

Будем учиться рисовать в Adobe Flash. Изучим при этом инструменты рисования, работу с цветом и градиентом.
Результат урока примерно такой

Открываем программу Adobe Flash и создаём документ под ваш проект - Action Script 2 или Action Script 3

Размеры рабочего поля выставляем 280 X 280 пикселей, цвет Рабочей Сцены (Монтажный кадр 1) - на ваш выбор.

12-11-2014 19-14-09 (353x447, 104Kb)

2. Переименовываем текущий слой (Слой 1) в "основа".
Выбираем Инструмент "Овал" на Панели Инструментов

12-11-2014 19-15-46 (494x626, 141Kb)

Цвет Заливки для рисования выбираем серый и указываем отсутствие Обводки.

12-11-2014 19-30-52 (600x383, 143Kb)

С зажатой клавишей "Shift" растягиваем окружность. Размеры окружности не очень важны на этом этапе, мы их далее выставим на вкладке "Свойства".

12-11-2014 19-45-18 (639x690, 161Kb)

Выбираем инструмент "Стрелка" и щелкаем им по нарисованной окружности, чтобы выделить её.

После того, как окружность будет выделена, идём на вкладку "Свойства". В полях ширина (ш) и высота (в) ставим размер 266 пикселей.

12-11-2014 19-57-13 (700x627, 271Kb)

Не снимая выделения с окружности выравниваем её горизонтально и вертикально по центру Рабочего поля.

12-11-2014 20-11-15 (583x631, 259Kb)

Не снимая выделения с окружности, зальем её градиентом. Убедитесь, что Панель "Цвет" открыта и отредактируйте градиент. Для этого, выберите следующие значения на этой панели (естественно не снимая выделения с окружности).
Для заливки окружности градиентом в панели "Цвет" щелкнуть по ковшечку и выставить следующие параметры:
Градиент - линейный;
Поток - расширить цвет.
На линейке градиента щелкнуть по первому маркеру и в окошке для ввода цвета вставить
FFFFFF
Нажать на компьютере клавишу Enter.
Щелкнуть по второму маркеру и ввести цвет
515151
Нажать на компьютере клавишу Enter.

22-11-2014 12-16-22 (697x510, 309Kb)

Залитая градиентом окружность будет выглядеть так

22-11-2014 12-26-19 (634x564, 195Kb)

Окружность залита градиентом, но для дальнейшей работы нам надо поменять направление градиента. Поэтому выбираем Инструмент Трансформация и в раскрывающемся списке выбираем пункт Преобразование градиента (F). Затем щелкаем этим инструментом по окружности, наводим мышку на маркер, который находится справа вверху и с зажатой клавишей Ctrl поворачиваем наш градиент по часовой стрелке на 90 градусов.

22-11-2014 12-32-33 (690x588, 207Kb)

Залитая градиентом окружность теперь должна выглядеть так

22-11-2014 13-22-16 (700x573, 144Kb)

Применим к этой окружности фильтр "Тень"
Но для этого прежде необходимо конвертировать нашу окружность во Фрагмент ролика (мувиклип) Поэтому кликаем инструментом "Стрелка" по нашей фигуре, тем самым выделив её и выбираем в меню
Модификация - Преобразовать в символ (F8)

22-11-2014 19-49-01 (700x544, 218Kb)

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

22-11-2014 19-52-54 (436x191, 72Kb)

Жмём ОК. Окружность превращена нами во Фрагмент ролика.

Теперь идем в Панель Свойств, в раздел "Фильтры". Кликаем на кнопке "Добавить фильтр"

10-03-2015 20-48-46 (333x430, 56Kb)

В списке фильтров выбираем фильтр "Тень" и используем следующие значения:

10-03-2015 20-53-28 (320x522, 122Kb)

Мы создали эффект Внешней Тени. Теперь создадим Внутреннюю Тень.
Для этого опять нажимаем на кнопку "Добавить фильтр" и снова выбираем фильтр Тень, но на этот раз вводим вот такие параметры:

10-03-2015 21-06-52 (358x426, 137Kb)

Наша окружность готова, и должна выглядеть так:

10-03-2015 21-19-02 (700x577, 228Kb)

Создадим новый слой и назовем его "bevel" или "фаска".
Выбираем опять Инструмент "Овал" и рисуем с зажатой клавишей "Shift" окружность темно - серого цвета без обводки:

10-03-2015 21-40-40 (700x658, 279Kb)

Выставляем размеры окружности на слое "bevel"
Ширина - 196 пикс.
Высота - 196 пикс.
Окружность выравниваем по центру

10-03-2015 22-30-29 (700x571, 246Kb)

Предварительно выделив инструментом "Стрелка", вновь созданную на слое"bevel" окружность, заливаем градиентом

Для этого, выберите следующие значения на этой панели (естественно не снимая выделения с окружности).
Для заливки окружности градиентом в панели "Цвет" щелкнуть по ковшечку и выставить следующие параметры:
Градиент - линейный;
Поток - расширить цвет.
На линейке градиента щелкнуть по первому маркеру и в окошке для ввода цвета вставить
CCCCCC
Нажать на компьютере клавишу Enter.
Щелкнуть по второму маркеру и ввести цвет
666666
Нажать на компьютере клавишу Enter.

11-03-2015 13-18-44 (700x545, 210Kb)

Вот так теперь должна выглядеть окружность на слое "bevel".

11-03-2015 13-23-30 (700x564, 199Kb)

Опять, используя Инструмент "Преобразование градиента" (F), для поворота градиетной заливки на 90 градусов против часовой стрелки.
Для этого щелкаем этим инструментом по окружности, наводим мышку на маркер, который находится справа вверху, и с зажатой клавишей Ctrl поворачиваем наш градиент против часовой стрелки на 90 градусов.

11-03-2015 13-42-26 (700x618, 274Kb)

Теперь окружность на слое "bevel" должна выглядеть так. (То есть светлой частью градиента вниз)

11-03-2015 13-49-27 (700x600, 209Kb)

Далее, выше слоя "bevel" создаём слой "цвет"

11-03-2015 13-53-08 (605x579, 195Kb)

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

11-03-2015 14-01-22 (700x583, 273Kb)

В панели "Свойства" устанавливаем размеры для цветной окружности на слое "цвет"

Ширина - 184 пикс.
Высота - 184 пикс.

а затем открываем вкладку "Выравнивание" и выравниваем окружность по центру

11-03-2015 14-11-06 (700x601, 216Kb)

Следующий шаг в создании нашей кнопки - это заливка цветной окружности Радиальным градиентом.

Для этого выделяем Инструментом "Стрелка" цветную окружность, открываем вкладку "Цвет" (естественно не снимая выделения с окружности).
Для заливки цветной окружности Радиальным градиентом в панели "Цвет" щелкнуть по ковшечку и выставить следующие параметры:
Градиент - Радиальный;
Поток - расширить цвет.
На линейке градиента щелкнуть по первому маркеру и в окошке для ввода цвета вставить:

FFFFFF
Нажать на компьютере клавишу Enter.
Щелкнуть по второму крайнему маркеру и ввести цвет:

0066FF
Нажать на компьютере клавишу Enter.

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

00CCFF

11-03-2015 14-55-52 (700x596, 254Kb)

У вас должна получиться вот такая кнопочка

11-03-2015 15-06-26 (700x566, 220Kb)

Добавим к ней ещё один штрих. А именно, выше слоя "цвет" создайте слой "стекло" и на нём нарисуйте Инструментом "Овал" - овал белого цвета без обводки с размерами

Ширина - 151 пикс.
Высота - 94 пикс.

(размеры овала укажите в панели "Свойства")

Расположите овал, щелкнув по нему Инструментом "Стрелка", как на скрине ниже

11-03-2015 15-14-58 (700x569, 258Kb)

Этот овал необходимо залить Линейным градиентом "от Белого к Прозрачному". Для достижения этого эффекта, для начала создаем градиент от Белого к Белому, а затем выставляем значение alpha=0% на конце Градиента.
Выделяем овал на слое "стекло" Инструментом "Стрелка", открываем вкладку "Цвет" и настраиваем градиент.

11-03-2015 15-32-22 (700x570, 261Kb)

И в очередной раз, используя Инструмент "Преобразование градиента", поворачиваем Градиент на слое "стекло" на 90 градусов против часовой стрелки и получаем нашу кнопку.

11-03-2015 15-40-06 (700x574, 242Kb)

Инструментом "Стрелка" выделите овал на слое "стекло" и Модифицируйте его во Фрагмент ролика со следующими параметрами:

11-03-2015 15-50-19 (700x654, 281Kb)

Далее в панели "Свойства" выберите раздел "Цветовой эффект"
В раскрывающемся списке "Стиль" этого раздела выберите вкладку "Альфа - канал" и установите ползунок настройки "Альфа" на значении 65%

11-03-2015 15-58-18 (700x540, 285Kb)

Наша кнопка готова.

Между слоями "цвет" и "стекло" можно также создать дополнительный слой "клипарт" и разместить на нём картинку - иконку или надпись.

11-03-2015 16-15-22 (700x605, 280Kb)

Сохраняем нашу кнопку в формате FLA.

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

11-03-2015 16-23-49 (544x494, 164Kb)

Сохранённый проект затем можно использовать в своих флешках, как самостоятельный элемент или как кнопки для меню и бродилок.

Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash
Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 45 - Текстовый скроллинг средствами флеш.
Часть 46 - Делаем флеш открытку с эффектом курсора «Mouse trailer». Урок для Adobe Flash CS6.
Часть 47 - Рисуем кнопку в Adobe Flash.
Часть 48 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.
Часть 49 - Использование панели «Редактор движения» в Adobe Flash CS6.
Часть 50 - Анимация формы во Flash(морфинг).

Метки: уроки флеш уроки adobe flash cs6 кнопки для web

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

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

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

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

таила обратиться по имени Среда, 11 Марта 2015 г. 17:46 (ссылка)

Спасибо Мариночка! Чудестный урок! Доброго вечера!

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

Четверг, 12 Марта 2015 г. 07:34ссылка

novprospekt

Спасибо Наташенька.

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

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

Марина, спасибо за замечательный урок. Осталось только освоить его.

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

Четверг, 12 Марта 2015 г. 07:35ссылка

novprospekt

Танюш, пожалуйста. Урок не сложный, освоишь, конечно.

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

Четверг, 12 Марта 2015 г. 08:51ссылка

Татьяна_Волкова_Литвинова

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

ВАТ обратиться по имени Среда, 11 Марта 2015 г. 18:55 (ссылка)

Мариночка, спасибо за урок! Попробую сделать такие кнопочки. Цитирую с благодарностью!

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

Четверг, 12 Марта 2015 г. 07:36ссылка

novprospekt

Пожалуйста Верочка.

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

Вторник, 17 Марта 2015 г. 16:48ссылка

ВАТ

Мариночка, кнопку-заготовку сделала уже несколько дней назад. Теперь надо придумать куда их приспособить. Вот в этой я немного уменьщила ободок. Урок очень понравился.

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

Среда, 18 Марта 2015 г. 09:21ссылка

novprospekt

Замечательная кнопочка - плеер получилась. Молодец Верочка.

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

Среда, 18 Марта 2015 г. 12:35ссылка

ВАТ

Марина, когда он так увеличен, то ужасно смотрится. Я несколько раз пыталась вставить его на твою страницу в нормально размере, а он опять так встал. Потом загружу их все на яндекс фото, чтобы никого не пугать. На самом деле она нормально смотрится, не так как здесь.

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