Мобильный LiveInternet Рисуем кнопку в Adobe Flash.

Авторизация

Дневник novprospekt Лента друзей - Дневник - Полная версия

Рисуем кнопку в Adobe Flash. 11-03-2015 17:31 к комментариям - к полной версии - понравилось!

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

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

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

[353x447]

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

[494x626]

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

[600x383]

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

[639x690]

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

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

[700x627]

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

[583x631]

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

[697x510]

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

[634x564]

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

[690x588]

[700x516]

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

[700x573]

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

[700x544]

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

[436x191]

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

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

[333x430]

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

[320x522]

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

[358x426]

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

[700x577]

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

[700x658]

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

[700x571]

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

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

[700x545]

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

[700x564]

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

[700x618]

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

[700x600]

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

[605x579]

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

[700x583]

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

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

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

[700x601]

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

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

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

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

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

00CCFF

[700x596]

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

[700x566]

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

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

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

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

[700x569]

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

[700x570]

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

[700x574]

[700x556]

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

[700x654]

[436x191]

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

[700x540]

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

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

[700x605]

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

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

[544x494]

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

вверх^ к полной версии понравилось! в evernote

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

таила 11-03-2015-17:46 удалить

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

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