-Рубрики

 -Музыка

 -Я - фотограф

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

 -Поиск по дневнику

Поиск сообщений в blacklady-cat

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 25.04.2009
Записей:
Комментариев:
Написано: 563


Создание анимированных Flash кнопок для сайта

Среда, 18 Ноября 2009 г. 16:11 + в цитатник
Цитата сообщения FlashStudio

 


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

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

alt

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

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

alt

alt

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

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

Далее скопируйте прямоугольник с 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. Далее на скриншоте показаны настройки для всех трёх кадров:

alt

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

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

Затем, когда курсор покидает область кнопки - она должна возращаться в нормальное состаяние. Выбираем 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, так как сайт будет открываться в том же окне, а это не очень удобно :). Так же можете поэксперементировать с настройками. Это альтернативный способ

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

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

Обучение к программе: Selteco Alligator Flash Designer. Урок 7: Создание анимированных Flash кнопок для сайта
Затем выйдите из спрайта нажав клавишу Esc. Напишите на кнопке какой - нибудь текст. Далее дублируйте кнопку, что бы у вас получилось меню. Выбираем Edit > Duplicate и в поле Count ставим нужное кол-во копий.

 


Метки:  

Аноним   обратиться по имени Воскресенье, 25 Июля 2010 г. 23:43 (ссылка)
Форум
Ответить С цитатой В цитатник    |    Не показывать комментарий
Аноним   обратиться по имени Среда, 01 Февраля 2012 г. 07:48 (ссылка)
Ответить С цитатой В цитатник    |    Не показывать комментарий
Аноним   обратиться по имени Четверг, 02 Февраля 2012 г. 02:44 (ссылка)
Ответить С цитатой В цитатник    |    Не показывать комментарий
Аноним   обратиться по имени Понедельник, 21 Января 2013 г. 15:21 (ссылка)
Всё очень здорово. Теперь, господа, сыграем в новую игру - "Угадай программу, в которой это делается".
Ответить С цитатой В цитатник    |    Не показывать комментарий
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку