Рисуем кнопку в 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
Результат урока примерно такой
Открываем программу 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]Сохранённый проект затем можно использовать в своих флешках, как самостоятельный элемент или как кнопки для меню и бродилок.
Татьяна_Волкова_Литвинова
12-03-2015-08:51
удалить
Ответ на комментарий novprospekt #
Ответ на комментарий novprospekt #
Марина, всё в порядке! Не знаю в чём была причина.
Мариночка, спасибо огромное за подробный урок!!!
Ответ на комментарий novprospekt #
а следующий пост уже видела в почте...точно что то мудрят....
Ответ на комментарий novprospekt #
Мариночка, кнопку-заготовку сделала уже несколько дней назад. Теперь надо придумать куда их приспособить. Вот в этой я немного уменьщила ободок. Урок очень понравился.
novprospekt
18-03-2015-09:19
удалить
Ответ на комментарий risulchik #
Пожалуйста.
novprospekt
18-03-2015-09:19
удалить
Ответ на комментарий сукулентная #
Пожалуйста.
novprospekt
18-03-2015-09:21
удалить
Ответ на комментарий ВАТ #
Замечательная кнопочка - плеер получилась. Молодец Верочка.
Ответ на комментарий novprospekt #
Марина, когда он так увеличен, то ужасно смотрится. Я несколько раз пыталась вставить его на твою страницу в нормально размере, а он опять так встал. Потом загружу их все на яндекс фото, чтобы никого не пугать. На самом деле она нормально смотрится, не так как здесь.
Татьяна_Волкова_Литвинова
19-04-2015-07:44
удалить
Марина, спасибо за урок! Кнопочка получилась. Вопрос: "А ты музыку в них загружаешь через фрагменты кода?" Урок замечательный, спасибо!
Вы сейчас не можете прокомментировать это сообщение.
Дневник Рисуем кнопку в Adobe Flash. | novprospekt - Дневник novprospekt |
Лента друзей novprospekt
/ Полная версия
Добавить в друзья
Страницы:
«позже
раньше»