Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Анимация кнопки при наведении на нее курсора


alt

В этом уроке вы научитесь как создать плавную анимацию при наведении курсорана кнопку и отведении его от нее. Соответсвтенно в этом уроке будет задействован ActionScript, который будет определять положение курсора.

Для начала создадим новый мувиклип, и теперь все, что мы будем делать дальше, будем делать в нем.

Создадим пустой мувиклип нажатием кливаш Ctrl+F8 и назовем его MyButtonMC:

Анимация кнопки при наведении на нее курсора

Шаг 2

Создадим собственно анимацию: допустим я хочу, чтобы над кнопкой появлялся текст. Для этого в мувиклип, который мы тоьлко что создали, поместим текст. Теперь вернемся в самый первый мивиклип, о котором я говорил раньше, создадим новый слой (на первом слое у нас уже должен находится рисунок, который будет нашей кнопкой - у нас черный кружок) и поместим на этот слой в первом кадре клип, который создали только что.

Зададим его прозрачность на 0 (для этого выделим его, откроем панель Propeties, в выпадающем меню Colors выберем Brightness и установим значение на 0. Теперь создадим перейдем на 10 кадров вперед и создадим новый ключевой кадр нажатием F6. Мувиклип по умолчанию имеет прозрачность как в первом кадре, однако нам нужно, чтобы он был полностью непрозрачен. Для этого опять выбираем Brightness и устанавливаем значение на 100. Теперь нажимаем правой кнопкой мыши на пространстве между первым и последним кадрами и нажмем в появившемся меню Create Motion Tween. Получается, что за десять кадров мувиклип будет изменять свою непрозрачность от 0 до 100.

Анимация кнопки при наведении на нее курсора

Шаг 3

После создания анимации нам нужно создать объект, который будет взаимодействовать с курсором пользователя, т.е. в нашем случае саму кнопку. Для этого выделим наш черный круг и переведем его в кнопку: F8 -> button.

Выделим нашу новоиспеченную кнопку, откроем панель Propeties и зададим ей instance name - "enter_btn".

Анимация кнопки при наведении на нее курсора

Шаг 4

Теперь вернемся на главную сцену и вставим наш самый первый мувиклип, содержащий в себе саму кнопку и анимацию при наведении / отведении от нее курсора.

Выделим этот мувиклип, откроем панель Action и вставим следующий код:
onClipEvent (enterFrame) {
if (go) {
nextFrame();
} else {
prevFrame();
}
}

onClipEvent (load) {
var go;
stop();
enter_btn.onRollOver = function() {
go = true;
};
enter_btn.onRollOut = function() {
go = false;
};
enter_btn.OnRelease = function (){
//тут вы можете задать любое действие,
//которое хотите, чтобы выполняла кнопка
//при нажатии на нее
}
Теперь тестим клип, нажимаем Ctrl+Enter. Код работает достаточно просто: анимация либо играется вперед или назад в зависимости от значения переменной "go". Эта переменная меняется при подведении или отведении курсора от кнопки.

Скачать исходник:

Нажмите для скачивания button.zip!
Название: button.zip
Размер: 5 Kb



Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

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