|
|
Анимация кнопки при наведении на нее курсора
Шаг 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". Эта переменная меняется при подведении или отведении курсора от кнопки.
 Скачать исходник
|
| Категория: Flash | Добавил: GL_Loney (23.09.2009)
|
| Просмотров: 2572 | Комментарии: 2
| Рейтинг: 0.0/0 |
|
| Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
