Обучение к программе: Selteco Alligator Flash Designer. Урок 7: Создание анимированных Flash кнопок для сайта

Content on this page requires a newer version of Adobe Flash Player.

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

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

Создайте спрайт, который содержит 3 фрейма, Master Frame, и 2 рабочих фрейма (Frame 1 и Frame 2)

На скриншотах показано где надо нажимать. Первый скриншот создаёт спрайт (Sprite), на втором под цифрой 1 - Mater Frame, а под цифрой 2 - Frame (Frame 2). Справа в колонке Frame List созданные фреймы должны показываться.

После того, как создали спрайт и в нём 3 фрейма - переходим в Master Frame и заливаем его оранжевым цветом по градиенту, что бы создавалось впечатление 3D. Делаем это командой Item > Line and Fill > Gradient Fill и в раскрывающемся меню ставим 3D Outset. Жмём Ок.

Далее скопируйте прямоугольник с Mater Frame на Frame 2 и с помощью команды Gradient Fill выберете в Fill Color серый цвет. Frame 1 оставляем пустым.

Mater Frame - это активная область кнопки, то есть, когда вы нажимаете на кнопку, Frame 1 - это нормальное состояние кнопки, а Frame 2 - это состояние, когда вы наводите на неё курсор мышки.

Во Frame List выставляем background у Frame 1 и Frame 2 из списка "Master Frame 1".

После выбора Master Frame как фон Frame 1 и Frame 2 активная область будет воспроизведена на обоих фреймах, поэтому мы должны остановить эти кадры, поставив галочку stop. Далее на скриншоте показаны настройки для всех трёх кадров:

Чтобы определить действия мыши выделите оранжевый прямоугольник на Master Frame. Выберите Item > Actions > On Over и поставьте в настройках галочку: Go to Frame и из списка выберите Frame 2. То есть при наведении мышки на кнопку - будет ролик будет перескакивать на второй фрейм.

Затем, когда курсор покидает область кнопки - она должна возращаться в нормальное состаяние. Выбираем Item > Actions > On Out и выбираем в настройках Go to Frame 1 (У вас должен быть всё езё выделен Master Frame).

Можете пока проверить то, что у вас получилось: нажимаем F9 и наводин курсор мышки на кнопку и затем убираем курсор. Кнопка должна менять цвет оранжевый-серый-оранжевый соответственно.

Теперь давайте добавим небольшую анимацию. Перейдём во Frame List к Frame 2, что бы сделать блик, когда вы наводите курсор мышки на кнопку.

Выделим серый прямоугольник и выберим Animation > Flash In и поставим 30%.

Для того, что бы при нажатии на кнопку происходило какое-нибудь действие, например открывалась страница сайта надо выделить оранжевый прямоугольник в Master Frame и выбрать в меню Item > Actions > On Click и ввести URL адрес. Обязательно проставьте _blank, так как сайт будет открываться в том же окне, а это не очень удобно :). Так же можете поэксперементировать с настройками. Это альтернативный способ

Правильно будет (если вы делаете сайт или игру) когда пользователь нажимает на кнопку фильм идёт на другой кадр. Надо выделить оранжевый прямоугольник в Master Frame и выбрать в меню Item > Actions > On Click. Далее жмём More Actions, затем Jump&Stop или Jump&Play (в зависимости от того, что вам надо). Далее выбираем _root и в следующем диалоге пишем название нужного кадра, так как у нас выбор не велик, то можно написать Frame 2 для примера.

Затем выйдите из спрайта нажав клавишу Esc. Напишите на кнопке какой - нибудь текст. Далее дублируйте кнопку, что бы у вас получилось меню. Выбираем Edit > Duplicate и в поле Count ставим нужное кол-во копий.

Похожие записи

Комментарии

Аватар пользователя Pavel777

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

Аватар пользователя Fly
Цитата: Pavel777

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

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

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

Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя Pavel777

mda

Fly,
так-то да очень подробно с этим я согласен, но c дублированием возникли проблемы.

Аватар пользователя Fly

По правде у меня эта прога давно не установлена уже, я так и не помню точнее, но уверен, что разобратьс не должно составить труда, возможно вы что то упустили? А вообще я советовал бы изучить не это, а adobe flash :)

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

Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя Pavel777

чуть посидел и все получилось!!!спасибо!