Get Adobe Flash player
Главная » Flash Обучение » Flash Уроки Текстом » Анимированые кнопки без использования скрипта

Мы в твиттере

Как создать?

Подпишитесь сейчас и вы получите на email серию бесплатных видеоуроков по flash.

Ваш e-mail:

Ваше имя на русском:

Подписавшись, Вы получите 4 видео урока, которые научат вас создавать flash презентации, flash баннеры, flash кнопки буквально за несколько минут!

Курс по flash cs5

 

Adobe Flash CS4 и Actionscript 3.0. Полный курс видео уроков.

Внимание!

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

110 видео уроков,

в превосходном качестве помогут пройти, Вам, терни flash анимации самым быстрым и легким путём!

+ActionScript 3.0

Подробнее!..

www.megastock.ru
Уведомление об ответственности


Анимированые кнопки без использования скрипта

Aloran   21 марта 2009    Раздел сайта: Flash Обучение » Flash Уроки Текстом

Я начал осваивать Flash всего две недели назад и уже столкнулся с тем, что меня не устраивают пнопки ввиде простых прямоугольников, да и анимированные кнопки в библиотеке не отличаются большим разнообразием. И вот вчера я наткунулся на метод создания кнопок и хочу с вами им поделиться.

В этом уроке мы будем делать:

1) Кнопку
2) Сделаем ее стеклянной
3) Сделаем ее с тенью

Ну что готовы?! Тогда вперед...

1. Откройте новый документ. С помощью инструмента Rectangle tool нарисуйте прямоугольник размером с будущую кнопку. Не отпуская кнопку мыши нажмите на клавишу курсора «вниз». Таким образом вы получите закругленные края. Держите клавишу курсора «вниз» пока углы не превратятся в полукруги, т.е. до максимальной округлости прямоугольника.

2. Удалите контур – двойно щелчок по контуру для выделение и нажмите клавишу Delete.

3. Увеличьте масштаб перед тем как выполнять следующие шаги – для лучшего выполнения рисунка.

alt

4. Выделите прямоугольник и выберите в меню Modify > Convert to Symbol (аналогично нажатию клавиши F8). Выберите символ Button, назовите его aqua button и нажмите OK.

5. Щелкните два раза по только что созданному символу для того, чтобы продолжить его редактирование.

6. Переименуйте первый слой (помните! Вы находитесь на временной шкале символа aqua button!) в background

alt

7. Выделите прямоугольник с округлыми углами.

8. Откройте панель Color Mixer , если она еще не была открыта (Window > Color Mixer). Выберите следующий цвет любой цвет, я выбрал красный.

9. Заблокируйте слой background и создайте новый слой. Назовите его gradient.

10. Щелкните правой кнопкой в первом кадре слоя background, и в появившемся меню выберите Copy Frames. Теперь щелкните правой кнопкой в первом кадре слоя gradient, и в появившемся меню выберите Paste Frames.

11. Продолжаем работу в слое gradient. Выделите рисунок, который находится на сцене и залейте его градиентной заливкой. Для этого перейдите в панель Color Mixer, выберите тип заливки Linear. Двойной щелчок по левому маленькому прямоугольнику заливки и выберите цвет светлый оттенок (у меня розовый), теперь двойной щелчок по второму прямоугольничку и выберите основной цвет (т.е. градиент должен быть от светлого к темному)

12. Возьмите инструмент Gradient Transform Tool (F) на панели инструментов. Переверните градиент на 90 градусов против часовой стрелке удерживая клавишу SHIFT. Для этого подведите курсор к круглому маркеру, когда появятся груговые стрелки начинайте тянуть.

13. Отредактириуйте размер градинта по размеру вашей кнопки. Для этого щелкните по маркеру со стрелочкой и тяните удерживая кнопку мыши нажатой.

См. картинку ниже:

Анимированые кнопки без использования скрипта

14. Возьмите инструмент Free Transform Tool (Q). На панели инструментов в разделе Options щелкните по кнопке Scale.

15. Щелкните по закругленному градиентному прямоугольнику и удерживая ALT немного уменьшите его. Для этого потяните один из прямоугольных угловых маркеров. Совсем немного (!!!) относительного оригинального размера.

16. Отключите опцию Scale. Щелкните по среднему боковому маркеру (любому) и удерживая ALT растяните немного нашу форму.

alt

17. Создайте новый слой и назовите его shine

18. Выделите градиентный рисунок в слое gradient и копируйте его (CTRL+C). Заблокируйте этот слой, перейдите в слой shine и вставьте рисунок (CTRL+V).
Выберите сплошную заливку для только что вставленного рисунка, чтобы вы лучше его видели.

19. С помощью инструмента Transform Tool (Q) уменьшите будущий блик (см. рисунок ниже). Высота блика должна быть в половину меньше общей высоты кнопки.

alt

20. Выберите инструмент Selction Tool (V). Выделите правую часть блика и перенесите ее вправо (удерживая клавишу SHIFT)

21. Выделите часть блика, того, что остался слева.

22. Растяните ее с помощью инструмента Free Transform Tool (Q) так как показано на рисунке:

alt

Отлично! Наш блик на месте. Теперь я объясню почему мы меняли размер нашего блика таким сложным способом. Дело в том, что если бы мы просто растянули его с помощью инструмента Free Transform, то изменилась бы округленность наших углов. А нам этого не нужно.

Это не значит, что всегда следует прибегать к такому способу трансформации. Рисуя во флеше экспериментируйте и вы поймете как реагируют рисунки на изменения, сделанные с помощью Free Transform. Предложенный способ не лучший, просто для данного урока он наиболее удобный.

23. Давайте теперь сделаем блик похожим на блик. Выделите блик. Перейдите в панель color mixer. Выберите тип заливки Linear.

Повторите шаг 11 данного урока только установите цвет #FFFFFF (белый) для обоих маркеров. Для правого маркера установите Alpha равное 1-2%, а для левого 75-10-%. Переместите маркеры немного ближе к середине, чтобы переход цвета не был таким плавным.

alt

24. С помощью инструмента Gradient Transform Tool (F) переверните градиент на 90%  и измените его высоту как рассказано в шагах 12-13 данного урока. Снимите выделение с кнопки, щелкнув мышкой где-нибудь на сцене. У вас должен получиться следующий результат.

alt

25. Теперь при желании вы можете добавить текст. Создайте новый слой между слоями gradient и shine и введите нужный текст. Поэкспериментируйте с цветом текста, чтобы добиться лучшего результата.

26. Теперь надо сделать тень. Выбираем объект на слое background. Незабудьте снять блокировку со слоя. Жмем F8 и превращаем объект в MovieClip. В окне Properties (при выделенном клипе) найдите внизу вкладку Filters и добавте фильтр Drop Shadow.

Ура наша стеклянная кнопка готова!!!

alt

Мы нарисовали кнопку, но она не анимирована. Анимация кнопки будет вашим домашним заданием. Не пугайтесь это не сложно. Посмотрите на рисунок.

alt

Первый кадр (Up)  определяет состояние отжатой кнопки и описывает ее внешний вид в обычном, неактивном состоянии.

Второй кадр (Ovr) определяет состояние кнопки, находящейся под указателем мыши - это состояние возникает, когда пользователь наводит указатель мыши на кнопку.

Третий кадр (Down) описывает состояние нажатой кнопки, возникающее при щелчке по кнопке мышкой.

Четвертый кадр (Hit невидимый вне режима редактирования символа) определяет активную область кнопки - она представляет собой область, над которой пользователь должен поместить указатель мыши, чтобы активировать остальные состояния кнопки.

Выделите все слои в кадре Down. Нажмите правую клавишу и выберите Insert Frame и  и весь ваш труд скоприуется на эти кадры.

Теперь осталось только отредактировать отдельные слои в нужном кадре (при этом если меняете слой то перед изменением на каждом кадре слоя, кроме Up, нажмите правую клавишу и и выберите Insert Keyframe) и вуаля у вас анимированная кнопка.

button.swf [1,68 Kb] (cкачиваний: 4997)

Большое спасибо за внимание. Если буду вопросы отвечу с удовольствием.

Урок сделан на основе http://demiart.ru/forum/index.php?showtopic=43308

Просмотров: 27138 | Комментарии (29) | Анимация, flash урок, кнопка
#1   vitkuz      21 марта 2009 13:34   ICQ: --   



Регистрация: 17.07.2008
Публикаций: 96
Комментариев: 162
Aloran, картинки по возможности по центу размещайте - так оно смотрится лучше.

Супер урок - спасибо! Всем пример, как надо делать!
#2   Aloran      22 марта 2009 01:08   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
кто стер мой комент ne_huligan
#3   morphem85      22 марта 2009 11:20   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Спасибо!
#4   lelya      23 марта 2009 07:01   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
большое спасибо))
#5   Frezy Grand      2 апреля 2009 23:28   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Спасибо :)
#6   balabol999      6 апреля 2009 22:00   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
блин, почему так мало хороших сайтов осталось? этот, благо, вне конкуренции!
#7   Anuka      23 апреля 2009 16:35   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Может мой вопрос покажется очень глупым sorry я еще ничего не смыслю в Flash,но не проще было нарисовать красивую кнопочку в Photoshop и просто импортировать?? dontknow
#8   Aloran      28 апреля 2009 22:09   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Конечно можно.
Но тогда при маштабировании, твоя кнопка из фотошопа станет некрасивой, а эта за счет того что она векторная - нет.
#9   nadya.fd      30 апреля 2009 19:58   ICQ: --   



Регистрация: 8.03.2009
Публикаций: 0
Комментариев: 25
yahoo
Кнопочки я уже умею создавать, но Так красиво их рисовать!!!
Пробовала с градиентом играть, но такая фигня получалась swoon
ООООтличный урок, не только для флешера но и для начинающего дизайнера :)

Ах, да!
Еще пункт 1. "Не отпуская кнопку мыши нажмите на клавишу курсора «вниз». Таким образом вы получите закругленные края."
-Это просто чудо! Я все время в инспекторе объектов пробовала, выставляя значения, пока не получу красивый результат. А петерь так удобно!
#10   Run2run      20 мая 2009 21:24   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Где-то я такой урок уже видел... Но у Вас он сделан гораздо подробнее! Прекрасный урок!
#11   kostya84      28 мая 2009 23:50   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Да прикольно нечего не скажешь!!! goodgood
#12   mishuk      29 мая 2009 17:46   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Норм урок, подробно, для начинающих вообще класс! good
#13   kornet      6 июня 2009 00:08   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Спасибо, полезно!
#14   VladC#      10 июня 2009 18:36   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
клевый урок, сегодня сделал кнопочки, для сайта нашей организации, только в черных тонах по этому примеру, так такая прелесть получилась, спасибо большое.
#15   Aloran      11 июня 2009 01:14   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Рад что смог помочь)))
#16   Daruss      12 июня 2009 13:04   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Я тут новенький, подскажите плиз, через какую прогу делаеца эта кнопка??
#17   nobody0      20 июня 2009 19:43   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Adobe FLASH CS4,

которой, в сущности, сайт и посвящен.
#18   leo150      5 июля 2009 19:57   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
respekt


9. Заблокируйте слой background и создайте новый слой. Назовите его gradient.
помогите плз

как слой заблокировать и создать нoвый?
helper
#19   Fly      6 июля 2009 02:10   ICQ: --   



Регистрация: 21.07.2008
Публикаций: 65
Комментариев: 592
Цитата: leo150

как слой заблокировать и создать нoвый?

Уууу... Вам я бы посоветовал сюда: Курс по flash
А вообще, там, где слои надо на нужном слое поставить галочку под замочком, что бы его заблокировать, а для создания нового, то там есть кнопочка "new layer"


--------------------
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
#20   rb      13 июля 2009 02:48   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Хороший урок для тех кто даже во флеш плохо рисует.
#21   ricko      6 августа 2009 22:00   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
а как добавить плавность перехода между состояниями?
к примеру между up  и over ?
#22   Aloran      10 августа 2009 19:19   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
ricko,
поместиь в over анимацию плавного перехода например. Но не вижу смысла для такой вещи как кнопка.
#23   Serafim      30 августа 2009 04:24   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
> Откройте новый документ.
А какой создавать? Новый Flash Acton Script 3 или Flash Project? Или ещё что? 
(P.S. У меня CS3, может из-за этого нет в списке кнопочки или я просто не понимаю чего-то) 
#24   Fly      30 августа 2009 12:00   ICQ: --   



Регистрация: 21.07.2008
Публикаций: 65
Комментариев: 592
Ставьте CS4...


--------------------
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
#25   Moresil      23 сентября 2009 23:56   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
В CS3 тоже всё нормально выходит. Создавайте новый Flash File (ActionScript 3) и дальше всё по пунктам.
#26   buden      23 января 2010 16:24   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Благодарю, первый по-настоящему полезный сайт по flash-дизайну, который удалось найти. Даже не поленился зарегистрироваться. smile Надеюсь, здесь много материалов, подобных этому. Автору отдельное спасибо.))
#27   28i95      2 февраля 2010 19:46   ICQ: --   



Регистрация: 24.10.2009
Публикаций: 1
Комментариев: 14
А я кнопочки по круче умею делать ) 
#28   fredi3000      12 ноября 2010 17:39   ICQ: --   



Регистрация: 12.11.2010
Публикаций: 0
Комментариев: 1
Люди добрые подскажите пожалуйста, что за .... у меня творится, все сделал,как полагается, а она у меня не хочет работать, точнее когда пытаешься нажать на кнопку, в пределах текста ничего не получается, за то можно выделить текст на кнопке, хотя зачем это надо((( кнопка активна только по краям за пределами текста, в чем может быть проблема, подскажите пожалуйста!!! 
#29   Orlyata      7 января 2011 02:43   ICQ: --   



Регистрация: 7.01.2011
Публикаций: 0
Комментариев: 2
Aloran,
В продолжение вопроса о плавности. Как войти в анимацию каждого отделного состояния. При попытке сделать это у себя я однозначно сталкиваюсь с тем что изменяя как мне кажется одно состояние изменяются все :(((

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.