Поиск по сайту
Дизайнерский форум
Рассылка
Наша кнопка
Мы рекомендуем
|
Анимация кнопки при наведении на нее курсора
Шаг 1
В этом уроке вы научитесь, как создать плавную анимацию при наведении курсорана кнопку и отведении его от нее. Для этого мы не будем помещать анимацию в саму кнопку, а сделаем отдельный мувиклип с анимацией, которая будет проигрываться при наведении на кнопку, на главной сцене поверх кнопки, дабы всегда можно было легко и быстро отредактировать его. Суть урока состоит в том, что мы создадим всего один мувиклип, в котором будет анимация появления эффекта над кнопкой, и при наведении он будет проигрываться нормально, а при отведении - в обратную сторону. Соответсвтенно в этом уроке будет задействован 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". Эта переменная меняется при подведении или отведении курсора от кнопки.
 Скачать исходник
|
|
