Урок 4. Створення анімації

Macromedia Flash MX 2004 надає кілька способів створення анімаційних послідовностей:

Анімаційні ефекти - програма сама створює послідовність кадрів, що імітує той чи інший ефект стосовно деякого об'єкта;

Покадрова анімація – користувач створює кожен кадр майбутньої анімації;

Автоматична tweened-анімація, або анімація трансформації - користувач задає початковий і кінцевий кадр, а програма сама створює проміжні кадри на основі програмної інтерполяції.

Анімаційні ефекти

Flash MX 2004 включає попередньо підготовлені анімаційні ефекти (timeline-ефекти), що дозволяють створювати складні анімації, використовуючи мінімальну кількість дій. Ви можете використовувати функцію Timeline Еffectsдо наступних об'єктів:

Графічні об'єкти, включаючи форми, згруповані об'єкти та графічні символи;

Растрові зображення;

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

Як приклад створимо ефект «вибух» стосовно тексту. Для цього надрукуємо деяку фразу або слово (рис. 1), виділимо його за допомогою інструменту Arrow та виконаємо команду Insert => Timeline Effects => Effects => Explode.

Мал. 1. Виділений текстовий об'єкт

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

Мал. 2. Панель Explode

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

Аналогічно ефекти можна застосувати до растрового зображення. Розглянемо приклад із плавним зникненням растрової картинки. Імпортуємо растрове зображення на сцену за командою File => Import => Import до stage(рис. 3) і застосуємо ефект Вlur за командою Insert => Timeline Effects => Effects => Blurролик.

Мал. 3. Растрове зображення, імпортоване на сцену

Для того щоб відредагувати анімаційний ефект, виділіть на сцені об'єкт, асоційований з ефектом, і у вікні, що з'явиться Propertiesнатисніть кнопку Edit(рис. 4) – в результаті з'явиться панель Blur.

Мал. 4. Кнопка Editзнаходиться внизу на панелі Properties

У панелі Blurможна знову змінити параметри ефекту та зберегти нові налаштування (рис. 5).

Мал. 5. Панель Blurдозволяє змінити налаштування ефекту

Покадрова анімація

Розглянемо найпростіший приклад - листочок переміщається з однієї точки екрану до іншої з поворотом навколо своєї осі.

Мал. 6. Перший ключовий кадр анімації

Намалюємо кленовий листочок, наприклад такий, як показано на рис. 6, - відповідний кадр на панелі Timelineзабарвиться в сірий колірі в ньому з'явиться точка, що вказує на те, що це ключовий кадр. Ключовий кадр - це кадр, у якому відбувається приміщення або його зміна.

Мал. 7. Другий кадр створимо перетягуванням та трансформацією першого

Потім клацніть правою кнопкою миші по сусідньому кадру і вставимо ще один ключовий кадр, використовуючи команду Insert Keyframe. В результаті цього кадру з'явиться копія листочка; перемістимо її вниз (користуючись інструментом Arrow) і повернемо, використовуючи команду Modify => Transform => Free Transform(Мал. 7).

Повторимо процедуру таким чином, щоб у 6-му кадрі лист займав кінцеве положення (рис. 8).

Мал. 8. Останній кадр анімації

Зверніть увагу на панель Properties(рис. 8) – у лівій її частині вказується тип об'єкта. У кожному кадрі листок є об'єктом типу Shape(Форма), про інші типи об'єктів буде розказано трохи пізніше.

Для того, щоб експортувати фільм у вигляді SEF-файлу (рідний формат Macromedia для Flash-фільмів), виконаємо команду File => Export => Export Movie. В результаті отримаємо наступний фільм (leave1.fla). Переглянути фільм можна не залишаючи програми Flash за командою Control => Test Movie. Причому щоб переглянути, який обсяг займають окремі кадри фільму, слід виконати команду . В результаті ми побачимо, що кожен із шести кадрів займає близько 600 Кбайт (рис. 9). Таким чином, обсяг фільму складає 3686 байт.

Мал. 9. Перегляд фільму в режимі Bandwidth Profiler

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

Автоматична анімація

Мал. 10. Об'єкт автоматично перетворюється на графічний символ

Розглянемо, як можна зробити ту ж анімацію і отримати компактніший результуючий файл. Виділимо на екрані намальований листок інструментом Arrow та виконаємо команду Insert => Timeline => Create Motion Tween, в результаті листочок буде поміщений у рамочку, а в панелі Propertiesз'явиться повідомлення, що виділений об'єкт має властивості Grafic(Рис. 10). Це означає, що анімований об'єкт автоматично перетворено на графічний символ. Тепер його вже неможливо довільно редагувати інструментом Arrow як об'єкт типу Shape. Використання символів є важливим поняттям у Flash. Одного разу, створивши символ, його можна використовувати кілька разів у фільмі, не збільшуючи розмір результуючого файлу. Символи поділяються на графічні (graphic), символи-кнопки (button) та символи-мувікліпи (movie clip). У цьому уроці розглянемо графічний символ, а інших типів символів повернемося пізніше. Кожен новий символодночасно стає частиною бібліотеки поточного документа (рис. 11).

Мал. 11. Кожен новий символ стає частиною бібліотеки

Якщо виконати команду Window => Library, то можна переконатися, що в бібліотеці з'явився символ і йому за промовчанням присвоєно ім'я Tween 1. Для того, щоб присвоїти символу інше ім'я, достатньо двічі натиснути на назву і замінити його на бажане. Після того як ми сформували графічний символ, перейдемо в кінцевий кадр нашої анімації (нехай це буде 15 кадр) і вставимо ключовий кадр (за командою Insert Keyframe). У цьому кадрі з'явиться копія символу, яку ми перемістимо та повернемо навколо осі (за командою Modify Transform => Free Transform), як у попередньому прикладі. Як видно із рис. 12 всі кадри між двома ключовими пофарбувалися в блакитний колір і від першого ключового кадру до останнього простяглася стрілка, що вказує на створення анімації Motion Tween.

Мал. 12. Стрілка на блакитному тлі свідчить про створення анімації Motion Tween

Виконавши команду Control => Test Movie, Отримаємо інформацію, представлену на рис. 13.

Мал. 13. Перегляд фільму у режимі Bandwidth Profiler

Незважаючи на те, що в цьому прикладі у нас 15, а не шість кадрів, як у попередньому, і анімація вийшла більш плавна, розмір результуючого файлу виявляється меншим - всього 900 байт. Як видно з діаграми (рис. 13), інформація про об'єкт зберігається тільки в першому кадрі, а в кожному новому кадрі необхідно запам'ятовувати лише нові положення листка. На це йде в середньому лише по 20 байт.

Для того, щоб проілюструвати падіння аркуша з поворотом навколо площини аркуша, повторимо попередній приклад, тільки при модифікації останнього ключового кадру додамо команду Modify => Transform => Flip Horizontal. В результаті отримаємо наступний фільм.

Тепер розглянемо приклад, коли листочок наближається до глядача. Для цього в кінцевому кадрі замість дзеркального відображення ( Flip Horizontal) будемо збільшувати розмір листка. Щоб не виникало відчуття уповільнення руху при наближенні об'єкта до глядача, швидкість його руху необхідно збільшувати. Щоб досягти цього ефекту, необхідно клацнути по першому кадру і звернутися до розділу Easeв панелі Properties. Позитивні значення параметра Ease призводять до уповільнення руху, а негативні до прискорення. Виберемо максимальне прискорення об'єкта.

Мал. 14. Виберемо максимальне прискорення об'єкта Ease = -100

Для цього виставимо значення параметра Easeрівним -100 (рис. 14). В результаті отримаємо фільм. Зазначимо, що перший кадр можна помістити і за сценою, тоді ми отримаємо фільм, у якому листок влітатиме у кадр і рухатиметься назустріч глядачеві. Можна моделювати обертання аркуша навколо зміщеного центру симетрії. Сподіваюся, читач сам зможе поекспериментувати, ускладнюючи модифікацію кінцевого кадру та змінюючи таким чином характер руху аркуша.

З наведених прикладів очевидно, що автоматична анімація руху ефективна, коли трансформація об'єкта при його русі задається простими функціями (поворот, масштабування тощо). Якщо необхідно анімувати складні руху (наприклад, рух руки героя мультфільму), то тут анімація трансформації руху не застосовна. Кожен кадр доводиться малювати вручну, тобто застосовувати покадрову анімацію, що складається з набору ключових кадрів. Таким чином, покадрова анімація - це найбільш універсальний, але водночас і найтрудомісткіший вид анімації, крім того, він створює найбільш "важкі" файли. Завжди, коли можна замінити автоматичну покадрову анімацію, - це переважно. Розглянемо ряд прикладів, що дозволяють використовувати автоматичну анімацію руху під час імітації польоту.

Рух заданою траєкторією

Flash дозволяє встановити рух об'єкта вздовж заданої траєкторії. Для того, щоб задати цю траєкторію, виконайте команду Insert => Timeline => Motion Guide.

В результаті над поточним шаром з'явиться спеціальний шар, який за промовчанням матиме ім'я Guide Layer 1.

Клацніть мишею по шару траєкторії та за допомогою інструмента «олівець» намалюємо лінію, вздовж якої планується переміщення листка (рис. 15).

Мал. 15. Приклад завдання траєкторії руху

Тепер перейдемо в перший кадр (клацніть по ньому мишею) і в панелі, що з'явилася. Propertiesвстановимо прапорець Snap(Встановлює режим прив'язки до траєкторії руху) - рис. 16.

Мал. 16. Параметр Snapзадає режим прив'язки до траєкторії руху

Після того як ви поставите прапорець Snap, центр листа поєднається з траєкторією руху. Користуючись інструментом Arrow, можна перемістити листочок вздовж кривої руху, але якщо ви спробуєте відірвати листок від траєкторії та розташувати його поряд з нею, він притягатиметься назад і знову прилипатиме до траєкторії руху (рис. 17).

Мал. 17. Об'єкт як би прилипає до траєкторії руху своїм центром

Перейдіть на останній кадр і аналогічно прив'яжіть листок до кінцевої точкитраєкторії руху. Для надання фільму об'ємності додамо трансформацію Flip Horizontal, - В результаті отримаємо фільм .

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

Очевидно, якщо ми хочемо анімувати політ літака чи птаха, то нам потрібно, щоб вони весь час рухалися носом уперед. У Flash такий характер руху поставити дуже просто (рис. 18).

Мал. 18. Якщо поставити прапорець Orient to Path, птиця летітиме головою вперед

Необхідно поставити прапорець Orient to Path, і рух птиці зміниться на цілком звичне (вихідник до цього ролика - політ птиці. fla).

Мал. 19. Додавання одноколірного фону

Якщо ви хочете додати одноколірний фон, клацніть мишею по фону і в панелі, що з'явиться Properties(рис. 19) у полі Backgroundвиберіть потрібний колір фону.

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

Розташувавши фонове зображення і кожен об'єкт, що анімується на своєму шарі, домогтися контролю над ними набагато простіше. Отже, щоб додати фоновий малюнок, створимо йому новий шар. Для цього клацніть правою кнопкою миші шаром, який на рис. 19 позначений як layer 1, і в меню виберемо рядок Insert layer. У доданому шарі намалюємо сонце. Щоб не заплутатися в номерах шарів, дамо шару назву тло. Для цього необхідно натиснути на поточну назву і ввести необхідне ім'я (рис. 20).

Мал. 20. На новому шарі створимо нерухомий фоновий об'єкт

Як видно із рис. 20, птах знаходиться за сонцем, що суперечить здоровому глузду. Для того, щоб поміняти місцями шари, достатньо в режимі drag-and-drop перетягнути шар з ім'ям "фон" вниз.

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

Мал. 21. Для анімації хмари створимо окремий шар

Тепер додамо до нашої анімації рухливі об'єкти, наприклад, хмара. Для хмари створимо новий шар і на ньому поставимо анімацію трансформації руху. Для того, щоб хмара влітала в сцену, розташуємо її, як показано на рис. 21. В результаті отримаємо наступний фільм (вихідник до цього фільму знаходиться в файлі, що додається)

У цьому уроці розглянемо, що таке анімація руху об'єкта заданою напрямною траєкторією (guide). Створимо умовний об'єкт і намалюємо йому шлях, яким він проходитиме.

Створення нового документа ActionScript 3.0

Як завжди, створюємо новий документ «Action Script 3.0». На правій панелі інструментів вибираємо "Rectangle Tool" та розміщуємо його на сцені.

Отриманий об'єкт переводимо на символ, виділивши його інструментом "Selection tool" і натиснувши праву кнопку миші.

Тепер на панелі timeline потрібно вибрати п'ятдесятий кадр і зробити його ключовим. Натискаємо праву кнопку миші та викликаємо контекстне меню, де вибираємо «Insert Keyframe».

Створимо напрямну, шлях, яким об'єкт рухатиметься. Для цього натискаємо на шар правою кнопкою мишці і в контекстному меню вибираємо «Add Classic Motion Guide».

Повинно вийти два такі шари:

Тепер потрібно на шарі «Guide» намалювати шлях, яким рухатиметься об'єкт. За допомогою інструмента «Pencil Tool», який знаходиться на правій панелі, малюємо напрямну.

Якщо намальований шлях вийшов трохи нерівним, його можна згладити за допомогою інструмента «Smooth Tool», який також як і олівець знаходиться на правій панелі. Спочатку використовуючи інструмент "Selection Tool" двічі клацніть по напрямній, а потім натисніть "Smooth Tool" .

Розміщуємо об'єкт для створення анімації руху

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

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

Тепер потрібно створити проміжні кадри, щоб програма сама розмістила об'єкт там, де потрібно в кожному кадрі. Щоб це зробити, просто вибираємо будь-який середній кадр на шарі, де розташований об'єкт, і натискаємо праву кнопку миші, вибираємо «Create Classic Tween».

У результаті ми маємо отримати два такі шари:

Запускаємо анімацію руху об'єкту

Подивимося, що вийшло. Переходимо до головного верхнього меню «File -> Publish Preview -> Flash» або натискаємо ctrl+enter на клавіатурі. Щоб подивитися прямо в програмі, натисніть клавішу enter.

Давайте зробимо так, щоб об'єкт «повертав» коли пробігає по дорозі. Для цього виберіть перший кадр на шарі, де розташований об'єкт, і трохи поверніть його за допомогою інструмента «Free Transform Tool», який знаходиться на правій панелі.

Тепер у властивостях об'єкта, перебуваючи першому кадрі, виберіть «Orient to path» .

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

Щоб переглянути, що сталося, натисніть ctrl+enter.

Тема:Анімація руху у системі Flash.

Тип уроку: Урок-проект з елементами творчої роботи

Ціль:

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

Розвиваючий аспект– творче застосування своїх знань у галузі двовимірної комп'ютерної графіки.

Цілі уроку:Ознайомити учнів із типами анімації. Сформувати вміння створювати найпростішу анімацію у системі Flash.

Форми організації навчально-пізнавальної діяльності учнів:

- індивідуальна– кожний учень створює індивідуальний проект фрагменту казки «Колобок»;

- групова– індивідуальні проекти учнів дають змогу реалізувати груповий проект казки «Колобок». Робота на перспективу – показ казки дітям ДНЗ та початкової школи у рамках розвитку соціокультурного центру у школі.

План уроку:

Організація уроку.
Постановка проблеми уроку.
Отримання інформації про класифікацію анімації у Flash (евристична розмова).
Актуалізація знань щодо створення мальованих об'єктів у системі.
Демонстрація створення простої анімації.
Практична робота учнів за комп'ютером.
Підбиття підсумків уроку.
Домашнє завдання.

ХІД УРОКУ

1. Організація уроку

Вчитель перевіряє готовність учнів до уроку.

2. Постановка проблеми уроку

Розглянемо деякі об'єкти і з'ясуємо, яким з них ви надаєте перевагу. Які вам подобаються і чому?

Перегляд деяких веб-сторінок, слайдів презентацій з анімацією та без неї.

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

Як створити анімацію – це і є тема сьогоднішнього уроку. Додаток 1).

3. Отримання відомостей про класифікацію анімації у Flash(Евристична розмова з демонстрацією. Додаток 1)

Основне призначення режиму у Flash - «пожвавлення» мальованих зображень.

Оволодівши основними прийомами роботи в системі, ви зможете:

Створити ефективну презентацію чи навчальну програму;
- Створити Web-сайт або внести «живу родзинку» в оформлення вашого сайту, тобто. створення рекламних web роликів (банери);
- Створити мультфільм;
- Запрограмувати свою першу гру.

Перш ніж починати щось робити на практиці, розглянемо базові поняття в анімації: кадр(frames), ключовий кадр, шар(layers), та тимчасова шкала(timeline), символи ( symbols) (Додаток 1).

Анімація- це зміна властивостей об'єкта з часом (Анімація – процес зміни розміру, становища, кольору чи форми об'єкта у часі).

кадр.Усі фільми складаються з кадрів (фреймів). Кожен кадр містить одне статичне зображення. Ілюзія руху створюється завдяки незначним змінам у малюнках від одного кадру до іншого. Кадр може бути складеним вручну, так і згенерованим Flash

Ключовий кадр– кадр доступний для обробки (відображається чорним кружечком, якщо в ньому є зображення, і білим, якщо немає жодного малюнка). Кадр, у якому автор фільму виконує зміну анімованого зображення.

Шар –це блок фільму, що складається з окремих зображень, з анімації зі своєю шкалою часу .

Тимчасова шкала –поле, на якому відображається інформація про шари, про те, які кадри є ключовими, а які генерує Flash.

У Flash анімація, з погляду створення, можна виділити такі підвиди: покадроваанімація, автоматична (трансформаційна)анімація та анімація на основі сценаріїв. У кожного типу анімації є свої переваги та недоліки, сфери застосування.

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

У трансформаційній анімаціїОсновний працю під час її створення виконує Flash, що дозволяє отримати нескладну анімацію. Автоматичне анімування (так звана tweened-анімація), при використанні якої автор створює лише перший та останній кадри мультиплікації, а Flash автоматично генерує усі проміжні кадри.

Анімація на основі сценаріїв. Сценарій є описом поведінки об'єкта власною мовою Flash, який називається ActionScript.

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

Анімація форми

Сьогодні ми познайомимося із принципами створення анімації форми.

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

Анімація руху

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

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

4. Актуалізація знань щодо створення мальованих об'єктів у системі.

З'ясувати, як можна створити об'єкт, вибрати колір фону і колір контуру фігури, виділити об'єкт, де розташовуються властивості об'єктів ( з демонстрацією на інтерактивній дошці).

5. Демонстрація створення простої анімації. Алгоритм виконання.

6. Практична робота учнів за комп'ютером

Створення міні-проекту за казкою "Колобок".

Коментар для вчителя.Кожному учневі видається практична роботастворення окремого фрагмента казки. Рекомендується озвучити казку «Колобок» заздалегідь та розбити звуковий файл на окремі сюжети, щоб у роботі вказати учням тривалість анімації.

Практична робота на тему «Проста анімація руху в системі Flash»

Варіант 1

Завдання . Картинка1.jpg) по стежці котитися колобок і при цьому звучать такі слова:

Колобок полежав, полежав та й покотився з вікна на лаву, з лави на підлогу, по підлозі до дверей, стриб через поріг – і далі по доріжці.

Звук триває 9 секунд. 13 кадрів – 1 секунда. Анімуйте картинку протягом усього цього часу (117 кадрів) та експортуйте фрагмент фільму до каталогу D:/User/_під ім'ям втеча.avi

Алгоритм виконання

Відкрийте програму Flash MX 2004 (D:/SCHOOL/Flash MX 2004/*.exe).
За допомогою панелі інструментів на робочому полі створіть колобку з казки.
Додати фонове зображення:

- Створіть новий шар, вибравши команду Вставити – Шкала часу – Шар(перейти на другий шар, натиснувши клавішу миші на назву шару).
- Імпортуйте картинку фону Файл Імпорт Імпортувати на стадію.(Зображення вибрати з каталогу D:/FOTO/Колобок/Малюнок1.jpg).
- Змініть розмір зображення, використовуючи інструмент «вільна трансформація» , до розміру кадру.

Варіант 2

Завдання . Створіть фрагмент казки «Колобок», де на фоновій картинці (D:/FOTO/Колобок/Картинка2.jpg) по стежці котитися колобок назустріч зайцю і при цьому звучать наступні слова:

Катитися колобок, а назустріч йому заєць:

- Не їж мене, косий, я тобі пісеньку заспіваю.

Варіант – 3

Завдання . Створіть фрагмент казки «Колобок», де на тлі (D:/FOTO/Колобок/Картинка3.jpg) колобок тікає від зайця і при цьому звучать наступні слова: І покотився колобок далі – тільки його заєць і бачив.

Варіант – 4

Завдання . Створіть фрагмент казки «Колобок», де на фоновій картинці (D:/FOTO/Колобок/ Картинка4.jpg) по стежці котитися колобок назустріч вовку і при цьому звучать такі слова:

Катитися колобок стежкою в лісі, а назустріч йому заєць:

– Колобок, колобок! Я тебе з'їм!
- Не їж мене, сірий вовк, я тобі пісеньку заспіваю.

Варіант – 5

Завдання . Створіть фрагмент казки «Колобок», де на фоновій картинці (D:/FOTO/Колобок/ Картинка5.jpg) колобок тікає від вовка і при цьому звучать такі слова:

Варіант – 6

Завдання . Створіть фрагмент казки «Колобок», де на фоновій картинці (D:/FOTO/Колобок/ Картинка6.jpg) по стежці котитися колобок назустріч ведмідь і при цьому звучать такі слова:

Катитися колобок лісом, а назустріч йому ведмідь:

– Колобок, колобок! Я тебе з'їм!
- Ну де тобі, клишоногому, з'їсти мене!

Варіант – 7

Завдання . Створіть фрагмент казки «Колобок», де на фоновій картинці (D:/FOTO/Колобок/ Картинка7.jpg) колобок тікає від ведмедя і при цьому звучать такі слова:

І знову покотився колобок – ведмідь тільки слідом йому подивився.

Варіант – 8

Завдання . Створіть фрагмент казки «Колобок», де на фоновій картинці (D:/FOTO/Колобок/ Картинка8.jpg) по стежці котитися колобок назустріч лисицю і при цьому звучать наступні слова:

Катитися колобок, а назустріч йому лисиця:

- Привіт, колобок! Заспівай мені пісеньку!

Колобок і заспівав свою пісеньку, Аліса слухає та все ближче підкрадається.

Варіант – 9

Завдання . Створіть фрагмент казки «Колобок», де на фоновій картинці (D:/FOTO/Колобок/ Картинка9.jpg) колобок стрибає на ніс лисиці і при цьому звучать такі слова:

Славна пісенька! - сказала лисиця. - Та стара я стала - погано чую. Сядь до мене на шкарпетку та пропой ще разочок.

Варіант – 10

Завдання . Створіть фрагмент казки «Колобок», де на фоновій картинці (D:/FOTO/Колобок/ Картинка10.jpg) лисиця з'їла колобка і при цьому звучать наступні слова:

Колобок стрибнув лисиці на ніс і заспівав:

- Я колобок, колобок!
Аліса його – ам! - І з'їла.

7. Підбиття підсумків уроку

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

На достатньому видаленні по лінійці кадрів (простий підрахунок: частота кадрів, помножена на секунди. Тобто якщо анімація буде йти 3 секунди, треба знайти 36 кадр) за допомогою клавіші F6 створюємо копію цього ключового кадру. Тут буде кінцева фаза анімації.

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

Перейдемо до першого ключового кадру, клацнувши в осередку кадру. На панелі властивостей виберемо зі списку "Анімація - Рух". Такий вибір, як видно на рис. 7.3 негайно визначає бузковий колір проміжних кадрів тимчасової шкали, і з'являється стрілка, що з'єднує початок і кінець анімації. Якщо замість стрілки з'являється штрихова лінія, значить, щось зроблено не так і анімації, швидше за все, не буде. Навіть якщо анімація і вийде, мабуть, збій станеться пізніше. Ось деякі причини помилки: у кадрі знаходиться невідповідний об'єкт (наприклад, просто несгрупований малюнок), у кадрі збереглися "залишки" якихось об'єктів, рух застосовується, наприклад, до двох груп відразу. Погляньте на панель властивостей кадру: якщо там з'явилася жовта трикутна кнопка з попереджувальним знаком (!), Flash намагається повідомити вам про помилку.

Мал. 7.3.

При виборі "Рух" на панелі властивостей відкриваються додаткові параметри "анімації руху" (мал. 6 4).

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

Змусимо об'єкт рухатися по колу.
1. Почнемо з того, що намалюємо у першому кадрі квадрат (зірку, коло…). Видалимо у фігури контур (якщо він намальований).
2. Згрупуємо рисунок. Навіщо? У нас лише один об'єкт? Але цей об'єкт – не група, не текстовий блок та не екземпляр символу. Тому – групуємо.
3. Виділимо групу інструментом перетворення та перенесемо центр майбутнього обертання на деяку відстань, а сам об'єкт-групу зрушимо від центру монтажного столу.
4. Оцінимо тривалість анімації - якщо наша анімація триватиме протягом 4-6 кадрів, навіть комп'ютер не зможе зробити її плавною. Умовимося, що в цьому випадку нам "вистачить" 30 кадрів.
5. Перейдемо до тридцятого кадру. Вставимо ключовий кадр – копію першого кадру – за допомогою клавіші F6.
6. Повернемося до першого кадру.
7. На панелі властивостей кадру виберемо анімацію руху. У додатковому списку "Поворот" обов'язково виберемо примусове обертання або за годинниковою або проти годинникової стрілки. Кількість примусових оборотів – один.
От і все. Переглянемо (протестуємо) фільм. Якщо потрібно, внесемо зміни. Так, внесемо. Причому такі: у певній точці наш об'єкт має зменшитись, а потім повернутися до початкового розміру. Для цього:
1. поставимо зчитуючу головку в середину "бузкової смужки" на тимчасовій шкалі;
2. на монтажному столі бачимо деяке проміжне положення нашого об'єкта. Тут немає ключового кадру, але його легко зробити, просто виконавши одним із способів вставку ключового кадру;
3. у новоствореному ключовому кадрі змінимо масштаб нашого об'єкта;
4. можна тестувати фільм.
Можна створити анімацію руху двома способами:
- за допомогою панелі властивостей кадру;
- за допомогою команди "Створити анімацію руху" контекстного меню правою кнопкою миші на кадрі.
Для анімації руху за допомогою команди контекстного меню виконуємо такі дії:
- Малюємо або вставляємо будь-який об'єкт у ключовий кадр.
- Клацаємо правою кнопкою миші в комірці першого кадру та в контекстному меню вибираємо команду "Створити анімацію руху". При цьому все зображення в кадрі буде автоматично перетворено на графічний символ з ім'ям "Побудова анімації1" (з'являється блакитна рамка виділення і точка прив'язки в центрі рамки).
- Створюємо останній ключовий кадр в анімації руху та переміщуємо, трансформуємо об'єкт.
Але часто не можна описати рух переміщенням по прямій лінії. При описаній анімації руху у будь-якому разі наші об'єкти рухаються по відрізках прямої між ключовими кадрами (або криву досить важко задати). Якщо необхідний рух складною траєкторією, в принципі, можна розбити цей рух на масу окремих шматочків і... отримати анімацію, близьку до покадрової. Втім, бувають такі ситуації, коли це єдиний вихід.

Але існує ще один спосіб – задати траєкторію руху. Для цього використовується спеціальний шар, який керує рухом: путівник, на якому малюється лінія - напрямна або траєкторія руху.

Щоб змусити об'єкт рухатися певною траєкторією, необхідно виконати наступні дії.
1. Створити ключові кадри з початковим та кінцевим положеннями об'єкта, встановити між ними анімацію руху.
2. Клацнути правою кнопкою миші на ім'я шару, що містить рух анімації. У контекстному меню вибрати "Додати путівник" або клацнути на відповідній піктограмі внизу зліва.
3. В результаті в списку шарів з'явиться новий шар, позначений спеціальним значком (рис. 7.5), а ім'я шару з анімацією зрушить праворуч - ознака того, що цей шар став веденим.
4. Натиснути на ім'я шару-путівника, щоб зробити його активним.
5. У ключовому кадрі цього шару будь-яким інструментом малювання контурів намалювати траєкторію руху об'єкта. Ця лінія не повинна містити ділянки, що перетинаються, розриви і не повинна бути замкненою.
6. Виділити ключові кадри анімації та на панелі властивостей кадру (включивши анімацію руху) задати:
7. "Орієнтувати шляхом", якщо потрібно зорієнтувати вісь симетрії об'єкта по напрямній лінії;
8. "Прив'язати", тому що треба прив'язати точку реєстрації об'єкта до напрямної руху (без цього параметра об'єкт не захоче рухатися по кривій!).
Протестувати фільм.

Основні помилки при напрямку об'єкта по заданому шляху дві: учні не прив'язують об'єкт у другому ключовому кадрі або направляюча лінія має дрібні (видимі лише при великому збільшенні) розриви.

Виконаємо ще одну міні-вправу – рух олівця по паперу. Для цього:

У першому ключовому кадрі намалюємо олівець або імпортуємо його зображення з кліп-арту у векторному форматі.
Згрупуємо зображення олівця, інструментом "Вільне перетворення" повернемо олівець так, як він виглядає з боку при листі (можна розташувати олівець у лівій частині монтажного столу, оскільки ми пишемо зліва направо).
В даному випадку дуже важливе розташування точки реєстрації нашого об'єкта – поставимо її на кінчик грифеля олівця.
Через 30-40 кадрів створимо останній ключовий кадр анімації.
У ньому перенесемо зображення олівця в інше місце монтажного столу. Можна трохи повернути його.
Виділимо всі кадри одночасно, "протягнувши" курсор миші вздовж смужки кадрів, і в панелі властивостей виберемо анімацію руху і поставимо "галочки" поряд з параметрами "Орієнтувати по дорозі" та "Прив'язати".
Додамо шар, який керує рухом, - путівник.
У ключовому кадрі цього шару намалюємо траєкторію руху. Перевіримо, що смужка проміжних кадрів збігається із довжиною нашої анімації; ключового кадру наприкінці не потрібно.
Протестуємо фільм.
Можливо, ви все зробили акуратно і олівець почав рух намальованим шляхом, але наш олівець крутиться навколо кривої як ненормальний. Відключимо галочку біля параметра "Орієнтувати по дорозі" - рух олівця став реалістичнішим.

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

От і все! Основи автоматичної анімації у програмі Flash нами вивчені. Залишилося лише познайомитися зі складнішими прийомами, щоб стати справжніми професіоналами.

Зразкові питання для контролю

Як редагувати текст?
Як перетворити текст на "намальовані літери"?
З якою метою застосовують анімацію руху?
Чим анімація руху відрізняється від анімації форми?
Чим анімація руху відрізняється від покрокової анімації?
Для яких об'єктів можна створити анімацію руху?
Як задаються налаштування анімації руху?
Навіщо і як створюється шар-путівник?

На що схожий мультфільм, у якому немає дії? На що перетвориться мультфільм, що не розповідає історію? Напевно, ви бачили, як художники в студії малюють етюди з живої моделі. Такі заняття дуже корисні для розуміння анатомії, і як поводяться м'язи в русі. Проте специфіка передачі такого руху не дає ясності! Вона обмежена відтворенням реального життя, не більше. Рух та діяльність у мультиплікації зображуються зовсім інакше. Тому знань, як правильно промалювати тіло, недостатньо. Особливо важливо освоїти техніки, які дозволять "оживити" форму. Саме про це ми розповімо у цьому курсі!

Що важливо знати

Коли художник працює над персонажем, який опинився у певній ситуації, йому важливо в першу чергу створити дію. Будь-яка сцена, в яку ви поміщаєте свій персонаж, повинна допомогти глядачеві побачити намір, що спонукає його до дії. Побачити мотиви, почуття, навички (або їх відсутність) та особистість загалом. Цієї мети необхідно досягти навіть за повної відсутності діалогу. І тут малюнки мають перевагу: ми можемо пограти з мовою тіла і роздмухати емоції до краю. Вам не доведеться розщедрюватися на акторів, студію та інші витрати. Достатньо паперу та олівця. Уяві немає межі!

Щоб досягти цих результатів в анімації, потрібно націлитись на дві речі:

Простота;
Ритм.

Поступово ми зрозуміємо, яку роль грає кожна їх у композиції мальованої сцени.

1. Крива руху

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

Крива руху має бути плавною і мати напрямок, щоб нам було очевидно, що має намір зробити кожен персонаж.

Зверніть увагу, як дивно виглядає дизайн, заснований на складних кривих руху.

Приклад неправильного використання кривої руху – лінія не вписується в контекст належним чином.

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

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

2. 12 базових принципів анімації

У 1981 році два найбільші аніматори кіностудії Дісней (Франк Томас і Оллі Джонсон) написали книгу "Ілюзія життя". Вони представили публіці "12 базових концепцій анімації", які застосовують студію з 1930-х років у спробі створювати максимально реалістичну анімацію. Хоча ці концепції були розроблені для використання у традиційній анімації, вони залишаються незмінними і сьогодні – навіть у цифрових проектах.

Базові концепції полягають у наступному:

Стиснення та розтягування (Squash and stretch)
Підготовка або попередження (Anticipation)
Постановка (Staging)
Наскрізна дія та Поза до пози (Straight ahead action and pose to pose)
Інерція та оверлепінг (Follow through and overlapping action)
Повільний вхід та повільний вихід (Slow in and slow out)
Арка (Arcs)
Другорядна дія (Secondary aciton)
Таймінг (Timing)
Перебільшення (Exaggeration)
Кінцева промальовка (Solid drawing)
Потяг (Appeal)

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

Стиснення та розтягування

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

Зверніть увагу на фізичні аспекти м'яча, що відскакує: коли він летить вниз з прискоренням, його форма розтягується. Коли м'яч ударяється об землю, він витягується горизонталлю (що підкреслює силу гравітаційного тяжіння).

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

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

Ця ж техніка застосована до дії. Вам відразу видно, що персонаж несе важкий тягар. Зауважте, що вся нижня половинатіла стиснута, а верхня розтягнута.

Приголомшливо, правда? Ця техніка підводить нас до наступною темою:

Перебільшення

Тут особливо нічого говорити, оскільки принцип наочний сам собою. Перебільшені жести та положення тіла створюють драматичний ефект – це обов'язкове правило мультиплікації. Уявіть, що відбувається, коли ми здивовані чи налякані – від несподіванки наше тіло реагує спонтанно. Те саме має статися і з мультяшним малюнком, але з набагато більш вираженим результатом!

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

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

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

Підготовка або попередження

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

Класичний прикладпідготовки: персонаж ось-ось побіжить і залишить сцену!

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

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

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

Націлювання та акцент

В анімації ми називаємо "націлюванням"ефект, який передує "акценту". Обидва необхідні у тому, щоб помітно виділити вираз подиву. Вони здійснюються за таким алгоритмом:

Персонаж бачить щось дивовижне;
Виникає передчуття (голова швидко опускається);
Момент "акценту" має місце, голова піднімається нагору.
Персонаж повертається у вихідний стан.

Давайте простежимо, як працює цей алгоритм.

Крок 1

Починаємо з малюнка персонажа з радісним чи природним виразом обличчя:

Крок 2

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

Крок 3

Крок 4

Персонаж заспокоюється та повертається у вихідний стан.

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

Тут ми спостерігаємо використання техніки "стиснення та розтягування", яка додає рухливості та надає імпульсу руху. У реальному житті єдиною рухомою частиною нашого черепа є нижня щелепа, що відкривається та закривається. Але в анімації все може розтягуватись – навіть голова!

Трохи згодом ми ще повернемося до "таймінгу".

Повільний вхід та повільний вихід

Цілком природно, що коли ми готуємося здійснити раптовий рух або здійснити будь-яку дію, яка потребує зусиль, то нашому тілу необхідна якась частка часу, щоб зосередити енергію, необхідну для цієї дії. В результаті виникає миттєве прискорення (або постійно рівномірне, залежно від руху). Завдяки цьому анімаційний персонаж виглядає правдоподібно, і число ключових кадрів і фаз змінюється залежно від частоти – більш перебільшена картинка того, що відбувається у реальному житті.

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

Порада:якщо ви веб-дизайнер і працюєте з переходами у створенні анімації на сторінках сайтів, ви, напевно, стикалися з концепцією "таймінгу", для якої застосовується функція Transition (Перехід)у CSS3. У цій функції, крім інших параметрів, використовуються "Плавний вхід" та "Плавний вихід", щоб описати криву швидкості анімації. Аналогічно тому, якщо ви працюєте в After Effects, ви, напевно, помітили в меню Keyframe Assistantкоманди "Плавно плавно", "Плавний вхід" та "Плавний вихід". У тому чи іншому випадку, якщо ви користувалися цими опціями - означає, що ви вже застосовуєте знаменитий принцип анімації у своїх проектах!

Потяг

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

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

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

Побіжно пройдемося по кожному з принципів, що залишилися, щоб досягти загального розуміння:

Постановка

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

Я додав машину в кадр, щоб наголосити на сенсі того, що відбувається. Тепер ми маємо чіткий контекст, і все стає зрозумілим!

Наскрізна дія та Поза до пози

"Наскрізна дія" означає докладне розкадрування анімаційної сцени з початку до кінця. "Поза до пози" стосується лише промальовування ключових кадрів, проміжки між якими пізніше доповняться фазами. Цікаво, що перша техніка використовується тільки в анімації 2D. Але техніка "Поза до пози" все ще застосовується у розкадруванні фільмів та анімації 3D.

Інерція та Оверлепінг

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

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

Арка

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

Фонова дія

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

Таймінг

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

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

Кінцева промальовка

Кінцеве промальовування відноситься до точності малюнків на папері. Малюнки повинні мати вагу та об'єм, щоб їх правильно бачили та трактували. При цьому тут не йдеться про детальне промальовування, щоб зробити малюнок реалістичним. Ми говоримо про те, як ви представите публіці своє теоретичне знання малюнка. Художник, який освоїв основи дизайну, може створити ілюзію обсягу своїх малюнках навіть на ескізі 2D. У цьому полягає мистецтво ілюзії правдоподібності.

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

На платформі Tuts+ є кілька статей та курсів, написаних різними авторами, які допоможуть вам заглибитись в основи малюнка. Там ви зможете пройти різні стилі малювання та станете повноцінним художником.

3. Послідовні рухи та цикли ходьби

За словами Кена Харріса, аніматора студії "Уорнер Бразерс" "Ходьба - найперше, що потрібно вивчити". Навчитися змусити мультяшного персонажа ходити саме так, як це потрібно вам – найскладніше завдання в анімації. Є кілька способів, і вони відрізняються залежно від обсягу, складності, контексту та насиченості сцени.

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

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

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

Проаналізуємо спрощений процес малюнку внизу:

Приклад простого циклу ходьби: тіло злегка піднімається вгору стадії перенесення.

Зверніть увагу, що руки рухаються протилежно до ног; а коли тіло піднімається вгору в стадії переносу, одна нога пряма.

Тепер заповнюємо проміжки додатковими фазами та завершуємо основний цикл ходьби в анімації:

Різні види ходьби та бігу

Як я згадував, в анімації (і в житті) є різні ходи, і ними можна користуватися для того, щоб передавати потрібні почуття та бажання персонажів. Різні шаблони передають це:

Знамениті шаблони анімації: вони були створені на основі книги Престона Блейра "Мультиплікаційна анімація". Упевнений, вам знайомі ці картинки з різних мультфільмів.

приклад прогулянкового кроку: тіло постійно рухається вгору-вниз.

Відмінності в ходьбі чотирилапих тварин

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

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

Подивіться вгорі, як поводяться передні та задні лапи в стадії перенесеннятіла: голова злегка опускається вниз, коли задня ногапереноситься вперед. Назад відбувається під час перенесення передньої лапи.

В анімації є й інші види ходи тварин, які наслідують власний ритм. Нижче розглянемо дві з них:

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

Приклад анімованого галопу. Передні лапи ініціюють рух та задають необхідний імпульс.

Реалістична передача циклу ходьби чи бігу залежить від кількох факторів, таких як вага, зростання, намір... Найважливіше тут - спостерігати за цими рухами, ґрунтуючись на реальних прикладах із життя.

Малювання ходьби і бігу - досить складна тема, яка заслуговує на окремий курс, присвячений тільки їй. Анатомія деяких тварин, таких як коні, має свої відмінності, через які їхні ноги рухаються по-іншому. Ознайомтеся з розділом "Копитні тварини" у моєму , там буде більше подробиць. Якщо ви хочете глибше вивчити рух коня, подивіться , написаний Монікою Загробельной.

З'єднуємо всі разом

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

Кінець!

Роль традиційної анімації у мистецтві 21 століття сьогодні активно дискутується. Сучасні анімаційні студії типу Піксар або Дрімворкс, як і раніше, користуються як мінімум 90% технік, що описуються вище. Здатність пожвавити малюнок - неважливо, чи за допомогою пінапа, коміксів чи мультиплікації - чудова річ. Якщо ми можемо змусити дитину повірити, що тварина може розмовляти і діяти як людина, це приголомшливо. Коли у глядача прокидаються емоції, жодними словами не висловити почуття, які відчуває на той момент художник.

Carlos Gomes Cabral

I'm's products from the madness of the 80's, живе в місті Rio de Janeiro (Brazil). I've been fond of arts, comics and music since I was a child, I dedicate myslf до величезних проектів на той час і I hate sitting still. mobility company. I'm в love with motion graphics, HTML5, web design and UX trends. You can find me on Twitter (@cgcabral).