Анімація у flash

У цьому уроці ми спробуємо зробити найпростішу анімацію у флеш, в якій будуть використовуватися об'єкти, руху об'єктів і траєкторії.

Для початку слід усвідомити кілька необхідних термінів, які використовуються у флеш:

Кореневої ролик - та область, з якої починається робота. У ньому є послідовність кадрів, в ньому можна створити кілька шарів.

Об'єкт (символ, мувик) - по суті, маленький самостійний ролик - в ньому, так само як і в кореневому ролику є свої кадри і шари. В об'єктах може бути будь-яка графіка і інші об'єкти. Об'єкти мають свої параметри і характеристики, в них навіть є своя (внутрішня) система координат.

Кадр - область ролика, розділена за часом.

У цьому уроці ми намалюємо пташку - найпростішу галочку.

Ми могли б зробити послідовність кадрів, малюючи кожен кадр заново, але це було б довго. Тому ми зробимо 1 цикл помаху крил пташки в окремому об'єкті (символі), а потім будемо просто переміщати об'єкт.

Для створення об'єктів існує кілька способів:

Спочатку намалювати що-небудь, виділити і скористатися командою "Convert to Symbol" ( "Перетворити в Символ")
Створити новий символ в бібліотеці (бібліотеку можна відкрити або в меню "Window-> Library", або за допомогою гарячої клавіші Ctrl + L) і там малювати.

Скористаємося першим способом.

Отже, ми намалювали галочку, тепер її потрібно виділити і в контекстному меню (правою кн. Миші) вибрати "Convert to Symbol"

У віконці, що з'явилося вибираємо "Graphic" (про інших випадках - в іншому уроці). Зверніть увагу на пункт "Registration" - тут можна вибрати точку, яка буде початком координат нового символу. Для нашого символу краще вибрати початок координат в центрі - для цього потрібно натиснути в середній квадратик (1)

Після цього пташка при виділенні матиме такий вигляд:

Тут видно маленький хрестик в середині - це початок координат цього символу.

Тепер цей символ з'явився в бібліотеці - у нього є ім'я "Symbol 1" (2) (ім'я можна змінити на будь-яке інше, але ми цього робити не будемо).

Для того щоб зайти в об'єкт потрібно натиснути на нього 2 рази в кореневому ролику або в бібліотеці. При цьому відкриється графіка, укладена в об'єкті, і його внутрішня послідовність кадрів.

Зайшовши в об'єкт, створимо новий ключовий кадр (3). Найпростіше це зробити за допомогою гарячої клавіші F7 ( "створити порожній ключовий кадр"). У новому кадрі ми повинні намалювати таку фазу руху помаху крил пташки. Щоб можна було орієнтуватися на попередні кадри, існує функція показу декількох кадрів (4). При натисканні на них над лінійкою кадрів з'являється область, на кордоні якої видно маленькі кружечки (5). Натискаючи і утримуючи їх, можна розширювати або звужувати область видимості. При цьому поточний кадр відкритий для редагування, а решта показані напівпрозорої.

Так, орієнтуючись на попередні кадри, ми малюємо кілька фаз одного помаху крил так, щоб останній кадр підходив до першого

Після того як об'єкт з анімацією одного помаху готовий, можна вийти з нього - для цього достатньо натиснути на будь-який порожнє місце ролика, або натиснути "Scene 1" над областю малювання (6). Тепер ми знову перебуваємо в кореневому ролику. Але при спробі запустити ролик, натиснувши Enter, ви виявите, що руху не відбувається. І не дивно - в кореневому ролику поки ще тільки один кадр. Для того щоб створити нові кадри досить виділити пусте місце в будь-якій позиції на тимчасовій лінійці - я вибрав 40-ю - і натиснути F5 (створити кадр).

Тепер, натиснувши Enter, ви побачите кілька повторюваних помахів крил пташки.

Для того, щоб об'єкт з пташкою переміщався необхідно створити "рух" в кадрах. Для цього натисніть в будь-якому місці на створених кадрах правої кн. миші і виберіть "Create Motion Tween"

Тепер кадри придбали такий вигляд:

Для того щоб завершити рух, виділіть останній кадр і натисніть F6 (створити ключовий кадр) потім проведіть пташку в будь-яке місце - наприклад, до правого краю.

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

Тепер можна ускладнити рух - введемо траєкторію.

Для цього натиснути кнопку (7). Над поточним шаром з'явиться новий шар (зверніть увагу, що між ними особлива лінія - тобто шар з об'єктом і шар з траєкторією нерозривно пов'язані). Тепер, перейшовши в шар траєкторії за допомогою "олівця" малюємо будь-яку лінію (але, при цьому в ній не повинно бути складних перетинів, інакше флеш вас не зрозуміє ^ _ ^). Для того, щоб пташка початку переміщатися по траєкторії, потрібно в початковому кадрі (8) помістити на початок лінії (9), а в кінцевому (10) - на протилежний кінець лінії (11).

При цьому можна задати "орієнтацію до траєкторії" - тобто пташка буде повертатися відповідно до напряму руху. Для цього, натиснувши на будь-який кадр зі стрілочкою в нижньому меню "Properties" ставимо галку "Orient to path" (12). Про всяк випадок в параметрі "Rotate" краще вказати "None" (13) - цей параметр задає обертання об'єкта, але про це пізніше ^ _

Тепер пташка летить "носом вперед")))

Об'єкт з пташкою не обов'язково рухається з початку лінії в її кінець - її можна переміщати по лінії вільно як в ту, так і в іншу сторону. Для прикладу, виділимо один з проміжних кадрів руху (14) і перемістимо пташку в іншу позицію (15) (але при цьому вона повинна бути на лінії). Як ми бачимо, на цьому місці з'явився ключовий кадр з новою позицією пташки.

Так само зробимо в іншому місці - виділимо ще кадр (16) і перемістимо пташку в позицію (17)

Тепер наша пташка літає взад-вперед по лінії.

Запам'ятайте "гарячі клавіші", які ми тут застосували:

F5 - створити (додати) кадр (не ключовий, а простий, без змін)
F6 - створити ключовий кадр.
F7 - створити порожній ключовий кадр.

Ще, при створенні "руху" в кадрах існують деякі тонкощі.

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

Рухати можна тільки об'єкти - якщо створити "рух" в кадрі з графікою флеш автоматично об'єднує її в один об'єкт під ім'ям Tween ##. Можна звичайно робити і так, але я особисто віддаю перевагу спочатку створювати об'єкт, а потім застосовувати до нього рух.

Схожі статті