Анімовані кнопки

Оскільки стани кнопки містять тільки один кадр, безпосередньо в них анімацію розмістити не можна. Проте можна піти іншим шляхом: ”винести” анімацію за межі кнопки, а саму кнопку зробити прозорою.

Таким чином, слід розбити ролик на декілька секцій, відповідних різним подіям миші.

У простому варіанті таких секцій буде п'ять:

Анімація, відповідна режиму очікування, тобто відсутності подій миші (Up).

Анімація, відповідна наведенню миші на кнопку (Over).

Анімація, відповідна переміщенню миші в область поза кнопкою.

Анімація, відповідна натисненню лівої кнопки миші над кнопкою (Down).

Анімація, відповідна відпуску лівої кнопки миші як над кнопкою, так і поза кнопкою.

Наприклад, потрібно створити наступну анімовану кнопку. В стані очікування вона обертається. При наведенні на неї мишею вона розбивається на декілька секцій, які розповзаються в різні боки, ”оголяючи” табличку з написом ПОКАЗ. При натисканні на цю табличку кнопка зникає і на її місці з'являється картинка.

Для того, щоб реалізувати цей сценарій, необхідно виконати наступну послідовність дій: 1. Спочатку необхідно створити всі необхідні секції ролика, що містять необхідну анімацію. В даному випадку таких секцій буде шість.

У першій секції повинен обертатися круг. Цей анімаційний фрагмент необхідно зациклити. Початковий ключовий кадр цієї секції слід помітити як Обертання. Ця секція аналогічна стану кнопки Up і згодом чекатиме події Roll Over.

У наступній секції круг повинен розділитися на сектори і ”разїхатиться” в різні боки, ”оголивши” табличку з написом ПОКАЗ. Після закінчення анімації ця секція повинна бути зупинена. Початковий ключовий кадр цієї секції слід помітити як Вхід. Ця секція аналогічна стану кнопки Over і згодом чекатиме або подію Press, або Roll Out.

Ще одна секція, початковий кадр якої помічений як Вихід, повинна містити анімацію сходження секторів круга, тобто зворотну анімації попередньої секції. В кінці цієї секції повинне бути проведена перемотування до секції Обертання, тобто повинне бути здійснений повернення до початкового стану.

Наступна секція відповідає стану, коли ліва кнопка миші натиснута, але ще не відпущена. Ця секція повинна містити зміщення положення таблички управо і вниз, тобто імітацію натиснення. Початковий кадр цієї секції повинен містити зупинку і бути помічений як Натиснуто. Ця секція аналогічна стану кнопки Down і згодом чекатиме події Release або Release Outside.

Передостання секція відповідає стану, коли ліва кнопка миші відпущена над кнопкою або поза кнопкою. Ця секція повинна містити повернення таблички в початкове положення і виконання дій, здійснюваних по натисненню на кнопку. У даному прикладі повинен бути здійснений перехід до останньої секції, що виводить на екран картинку. Початковий кадр цієї секції повинен бути помічений як Відпущено.

Остання секція позначає те, що повинне відбутися по натисканню на кнопку. У даному прикладі це вивід на екран картинки і зупинка ролика. Початковий кадр цієї секції повинен бути помічений як Картинка.

2. Потім необхідно створити прозору кнопку у формі круга.

Цю кнопку слід помістити в ключовий кадр на окремий шар. Ширину кадрової групи цього ключового кадру необхідно зробити рівною загальній кількості кадрів всіх секцій, окрім останньої, оскільки вона містить лише виведення картинки на екран і не повинна реагувати на події миші.

3. Нарешті, необхідно взятися до дій прозорої кнопки і додати наступні команди:

По події Roll Over повинен бути здійснений перехід до мітки Вхід.

По події Roll Out повинен бути здійснений перехід до мітки Вихід.

По події Press повинен бути здійснений перехід до мітки Натиснуто.

По подіях Release і Release Outside повинен бути здійснений перехід до мітки Відпущено. Якщо все було зроблено правильно, цей приклад діятиме таким чином:

1. Поки ніяких подій миші не відбувається, круг просто обертатиметься.

Оскільки інші події Roll Out, Press, Release і Release Outside не можуть наступити раніше, ніж наступить подія Roll Over, можна вважати, що в цьому місці відбувається очікування тільки цієї події.

2. Як тільки курсор миші буде наведений на область, займану прозорою кнопкою, буде виконана команда, вказана в діях кнопки для події Roll Over, по якій буде здійснено перехід до мітки вхід. Потім буде відтворена анімація ”роз'їзду” секторів круга і зупинка.

3. Після чого можливо виникнення одне з двох подій: або курсор миші покине область, займану кнопкою, або буде натиснута ліва кнопка миші.

У першому випадку буде виконана команда, вказана в діях кнопки для події Roll Out, по якій буде здійснений перехід до мітки Вихід. Після чого буде відтворена анімація сходження секторів круга і перемотування до мітки Обертання, тобто кнопка повернеться в початковий стан. У другому випадку буде виконана команда, вказана в діях кнопки для події Press, по якій буде здійснений перехід до мітки I Натиснуто. Потім буде здійснено зрушення таблички з написом ПОКАЗ і проведена зупинка ролика.

4. Оскільки відомо, що натиснута ліва кнопка миші рано чи пізно буде відпущена, в цьому місці можливо виникнення одне з двох подій: або ліва кнопка миші буде відпущена над кнопкою (Release), або - поза нею (Release Outside).

У обох випадках буде виконана команда, вказана для цих подій, по якій буде здійснено перехід до мітки Відпущено.

5. Потім буде відновлено положення таблички і здійснений перехід до мітки Картинка.

6. Нарешті, на екран буде виведена картинка, після чого ролик буде зупинений.