Анимационная кнопка

Полезные уроки по Флешу

Модераторы: Globator, Сильфида, Любовь

Аватара пользователя
Дима
Сообщения: 537
Зарегистрирован: Чт июн 21, 2007 7:14 am
Antispam: Да
Откуда: Уссурийск
Контактная информация:

Анимационная кнопка

Сообщение Дима » Чт ноя 15, 2007 12:11 pm

Мы на этот раз будем делать не простую кнопку, а анимационную, тоесть при наведении должна быть какая-то анимация.
Нужно создать кнопку, как это сделать, читайте сдесь
Над кнопкой создайте новый слой.
Изображение

Допустим мы хотим сделать анимацию в виде движующихся линий.
На втором слое нарисуйте линии с помощью инструмента Line Tool(N). Лучше сделать линии с мягкими краями в фотошопе, но я просто пример покажу
Изображение

Они не обязательно должны совпадать по верхним и нижним контурам с кнопкой, но они должны быть одинаковы. Используйте клавишу shift
Выделите линии. Для этого просто нажмите на название слоя, и то, что находится на слое - то выделится.
Изображение

Линии выделены. Нажмите F8 - MovieClip
Изображение

Теперь нажмите два раза на любую из линий, на таймлане появился один слой:
Изображение

Если вы хотите, чтоб линии двигались быстро, нужно выбирать кадр по ближе к началу, чем дальше, тем медленнее. Я выбрал 7 кадр:
Изображение

Правой кнопкой по любому кадру - Create Motion Tween:
Изображение

Выделите последний кадр (у меня он является 7), просто нажмите по нему:
Изображение

Полоски должны выделиться. Передвиньте их на другую сторону кнопки, нажав shift, чтобы было ровно с обеих сторон:
Изображение

Теперь нажмите Ctrl+Enter и посмотрите свою анимацию. Чтобы анимация не выскакивала сама по себе, нужно сделать вот что:
Создайте новый слой, выделите первый кадр:
Изображение

Нажмите F9 и напишите код:
Выделите последний кадр:
Изображение

Нажмите F6
Изображение

Нажмите F9 и напишите тот же код:
Изображение

Теперь нажмите на иконку, чтобы выйти на главную сцену:
Изображение

Выделите свою кнопку, нажав на нее один раз. В панели Properties, в окошке под названием Instans Name напишите имя кнопки:
Изображение

Я назвал fg, имя не принципиально
Изображение

Выделите кнопку, если она не выделена
Изображение

Нажмите F9
Изображение

Напишите следующий код:

Код: Выделить всё

on(rollOver){
fg.gotoAndPlay(2)
}


Если вы назвали кнопку не так, как я, то вместо fg напишите свое имя кнопки.
RollOver - этот код означает "при наведении", тоесть при наведении эта анимация будет воспроизводиться
(2) - почему два? Потому что не один. Иногда один не сработает, потому что у нас там в конце стоп стоит. Проверим - Ctrl+Enter.
Изображение

Чтобы линии не были видны за краями кнопки, вернитесь на первый слой, скопируйте кнопку:
Изображение

Создайте новый слой над вторым:
Изображение

На 3 слое нажмите на рабочее поле правой кнопкой, выберите Pastу in Plase:
Изображение

Нажмите на название слоя правой кнопкой, и выберите Маска:
Изображение
Изображение

Готово. Чтобы кнопка куда-то вила, нажмите на название первого слоя.
Изображение

Нажмите F9. Допишите код:
Изображение

Результат
Исходник

Аватара пользователя
выдр
Сообщения: 650
Зарегистрирован: Пн янв 22, 2007 4:16 pm
Antispam: Да
Откуда: славный город Новосибирск
Контактная информация:

Сообщение выдр » Пт ноя 16, 2007 1:34 pm

Выделите свою кнопку, нажав на нее один раз.

ты хотел сказать свои линии? а то я кнопку назвал - нифига! назвал и прописал линии - все работает...
А в остальном урок оффигительный и сразу многому учимся! Дима, ты рИальный молодец! доделаю - покажу что получилось =)

Аватара пользователя
Дима
Сообщения: 537
Зарегистрирован: Чт июн 21, 2007 7:14 am
Antispam: Да
Откуда: Уссурийск
Контактная информация:

Сообщение Дима » Пт ноя 16, 2007 3:21 pm

Странно, я вроде все правильно написал. Ну ладно, главное что получилось


Вернуться в «Уроки Adobe Flash»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость