Урок во Flash - Анимация кнопки - Форум web мастеров

Manfred · 18.03.2008, 23:34

уже не помню, с какого сайта взял... этот урок тоже на компе лежал, копирайт за автором урока, как всегда

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

Шаг 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". Эта переменная меняется при подведении или отведении курсора от кнопки.

smoke_th · 28.09.2008, 14:04

Аффтар, >_< ты скобку закрывающую забыл.

Код:

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 (){
//тут вы можете задать любое действие,
//которое хотите, чтобы выполняла кнопка
//при нажатии на нее
}
}

Strange · 28.09.2008, 17:06

А можно, где нить на сервере создать папку, и скидывать туда эти примеры. Ну чтоб посмотреть, что в итоге должно получиться