Обучение к программе: 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 ставим нужное кол-во копий.
- 981 просмотр
Похожие записи
- Обучение к программе: Selteco Alligator Flash Designer. Урок 9: Создание красивой динамической ссылки
- Обучение к программе: Selteco Alligator Flash Designer. Урок 8: Создание анимированного интервала между двумя анимированными объектами.
- Обучение к программе: Selteco Alligator Flash Designer. Урок 6: Создание анимированного фона.
- Обучение к программе: Selteco Alligator Flash Designer. Урок 5: Создание перехода между двумя объектами
Комментарии
Все хорошо кнопку создал,только не могу дублировать. Когда дублировал навожу курсор на меню подсвечиваются сразу все пункты( кто может помочь?
Все хорошо кнопку создал,только не могу дублировать. Когда дублировал навожу курсор на меню подсвечиваются сразу все пункты( кто может помочь?
Я даже не знаю что сказать, там на столько всё просто, а тем более это очень подробно расписано, что лучше рассказать просто невозможно.
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
Fly,
так-то да очень подробно с этим я согласен, но c дублированием возникли проблемы.
По правде у меня эта прога давно не установлена уже, я так и не помню точнее, но уверен, что разобратьс не должно составить труда, возможно вы что то упустили? А вообще я советовал бы изучить не это, а adobe flash :)
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте - https://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум
чуть посидел и все получилось!!!спасибо!