Плавна анімація кнопки при наведенні і відведенні курсору (action script 2), флеш-анімація і дизайн

У цьому уроці я поділюся ще одним методом анімації кнопок. Раніше. я вже розповідала про подібний спосіб створення кнопки. Сьогоднішній метод побудований на принципі програмного програвання анімації вперед і в зворотному напрямку в залежності від положення курсора на кнопці. У першому уроці я створювала 2 різні анімації - положення на і положення за межами кнопки. Так що завдання цього разу в якійсь мірі простіше в плані анімації :) Так само буде використовуватися Action Script 2. Для тих, кому потрібна така кнопка в as3 - Новомосковськ в новому уроці Плавна анімація кнопки при наведенні в as3.

Крок 1. Створення мувікліпа

Cоздадім мувікліп (Cntr 8), назвемо, як подобається. ice-cream 1, наприклад :)

На 3-х окремих шарах розкладемо нашу графіку і підпишемо кожен шар для зручності:

Плавна анімація кнопки при наведенні і відведенні курсору (action script 2), флеш-анімація і дизайн

1 шар button - кнопка. Вона прозора, оскільки графіка розміщена лише в кадрі Hit:

Плавна анімація кнопки при наведенні і відведенні курсору (action script 2), флеш-анімація і дизайн

2-шар ice-cream - морозиво, мувікліп,

3-шар button menu - жовта кнопка, мувікліп.

За задумом, при наведенні курсору наш солодкий продукт збільшиться в розмірах, а кнопка загориться лимонно-жовтим кольором. Створюємо додаткові ключові кадри в 9-му кадрі і робимо анімацію.

В останньому кадрі морозиво збільшуємо масштабуванням і трохи повертаємо, а до кнопки застосовуємо ефект Adjustcolor, збільшуємо значення Contrast 30. Тепер вона яскраво жовта, якою і повинна стає при наведенні.

Плавна анімація кнопки при наведенні і відведенні курсору (action script 2), флеш-анімація і дизайн

Створюємо твінінгових анімацію (клік правою по першому ключовому кадру - Create Motion tween), ставимо уповільнення анімації 100.

Виділяємо кнопку на самому верхньому шарі і прописуємо їй ім'я button в рядку Instance на панелі Properties.

Дуже важливий пункт, хоч і короткий :) Без цього дії наша кнопка не працюватиме.

Тепер виходимо з режиму редагування мувікліпа на головну сцену. Виділяємо його, відкриваємо панель Action (F9). У віконці пишемо наступний код:

Плавна анімація кнопки при наведенні і відведенні курсору (action script 2), флеш-анімація і дизайн

Щоб не набирати багато тексту, текст копіюємо звідси:

onClipEvent (enterFrame)

nextFrame ();

Добрий вечір, Оксана.
Подивився кілька Ваших уроком, які мають відношення до додавання інтерактивної кнопки (наприклад, меню на flash для звичайного html-сайту).
З'явилися такі питання.
1. Який розмір сцени ставити? 1 px, за розміром створюваної кнопки або всього меню, або взагалі стандартний залишати?
2. Які символи ви бачите вставляти в уже готовий html-сторінку, що б всього лише працювала цей swf флешка?
Для кнопки писати те, що видає Adobe Flash або досить просто коду для картинки, з розмірами і посиланням на swf на сервері?
Спасибі, якщо відповісте.
У Мережі досить інформації з цього питання, але толком нічого не написано.

1. Розмір сцени робіть хоч 1 px, але коли ви вставите флешку і будете вказувати потрібний розмір, наприклад блок div у вас 100х50px, а ви встромили флешку 10x20px і при вставці вказуєте розмір на весь блок, то нічого доброго не вийде.
Висновок, вам потрібен якісний флеш в певній частині сайту, робіть саму флешку за розмірами, рівним розміру осередку чи блоку, під цю флешку.
2.

Ось так вставляється флешка в html

Якщо Ви відповісте хоч що-небудь я буду Вам дуууже вдячна!
Дуже сподіваюся на відповідь

Оксана, велике спасибі за урок. дуже мені допоміг!
Тільки ніяк не виходить зробити кнопку з переходом на сайт.
Підкажіть, будь ласка, куди потрібно вставляти цей код
button.onRelease = function () getURL ( 'назва сайту', '_ blank');
>;
>

Я вставляю після основного коду - в результаті у мене сама кнопка починає шалено блимати. Пробувала також вставити в вашому исходнике - виходить те ж саме миготіння (Допоможіть, будь ласка!

Що б ви зробили, якби точно знали що все вийде.