У цьому уроці ми хочемо розповісти про основні етапи створення анімованих персонажів за допомогою програми Flash на прикладі розробки персонажа гри «Вчимося граючи» та аватара для Web-сайту.

Персонаж комп'ютерної гри

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

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

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

1 Програма містить 12 тем для вивчення («Форма. Колір. Число», «Пори року», «Годинник», «Птахи», «Тварини», «Усний рахунок», «Геометричні фігури», «Римські цифри», «Дроби », «Палітра художника», « Англійська мова", "Нотна грамота").

У створенні гри брали участь Олександр Прохоров, Михайло Морозов, Дмитро Бистров, Олена Андріанова, Андрій В'язніков. Більш детальну інформацію про гру можна отримати за адресою: http://computergames.com.ru/54/7217.html.

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

Як приклад показана анімація переміщень Колобка зверху вниз: анімація 1 .

На першому етапі створюються ескізи зовнішнього вигляду героя (рис. 4), а також ескізи його переміщень та основних дій (рис. 5).

Паралельно робляться ескізи, де показується, як персонаж виглядатиме у різних темах гри. Зокрема, на рис. 6. показаний ескіз до теми «Астрономія», але в рис. 7 ескіз до теми «Дроби».

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

На рис. 8 видно, що персонаж складається із окремих елементів.

2 Ця роботавиконувалася Оленою Адріанової.

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

Розглянемо докладніше, із чого зроблено нашого героя. Папка "Частини", показана на рис. 9 містить 12 елементів (в основному це мувікліпи), з яких складається Колобок. Наприклад, ліва нога Symbol 4d (рис. 9), права рука Symbol 7d (рис. 10) і т.п.

При цьому окремі елементи, такі як Symbol 12d (рис. 11), вже містять анімацію руху брів і очей і теж складаються з окремих елементів.

Зокрема, мувікліп Symbol 12d складається з окремих складових: брови (Symbol 34) (рис. 12), ліве око (рис. 13). У свою чергу, мувікліп, що зображує ліве око, базується на мувікліпі «очей» (рис. 14).

Таким чином, герой ніби збирається з окремих деталей конструктора.

Для того щоб показати, як переміщаються окремі елементи, з яких складається Колобок, під час ходьби звернемося до малюнка, де показаний цикл ходьби в режимі Оnion Skinning (калька). З рис. 15 видно, що під час ходьби в нього переміщаються не тільки руки та ноги, але практично всі елементи, з яких він складається. При цьому всі елементи анімовані в режимі автоматичної анімації руху (Motion Tweening) і тільки руки (вірніше лінії, які з'єднують кисті рук з тілом), анімовані в режимі автоматичної анімації формозміни Shape Tweening (на рис. 8 ця анімація задана в шарах Layer 5 і Layer 7).

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

Аналогічно анімуються рухи Колобка під час руху вправо та вгору.

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

Основні варіанти руху Колобка можна спостерігати у цьому ролику.

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

Для того щоб краще розібратися в тому, як анімований цей персонаж, можна звернутися до вихідного fla-файлу.

Аватар для сайту

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

Розглянемо приклад створення такого персонажа.

На початковому етапі вибиралися ті настрої героя, які мали бути зацікавленими задіяні за сценарієм, і художник робив відповідні нариси (рис. 18).

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

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

У першому кадрі розміщуємо зображення обличчя «сумний» за командою File => Import=> Import до stage, а потім переводимо його у векторний вигляд за командою Modify => Bitmap => Trace Bitmap.

Потім стосовно першого кадру записуємо рядок коду stop();рис. 20.

Цей кодвказує, що програма не повинна переходити до наступного кадру доти, доки користувач не виконає певну керуючу дію.

Так, верхня кнопка міститиме код, показаний на рис. 21.

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

Для більш детального знайомства з цим роликом можна звернутися до вихідного

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

Ваша перша анімація персонажа

Спочатку потрібно створити векторний персонаж у Sketch. Ви можете використовувати мій готовий приклад(Разом з прикладом principle) - скачайте вихідні коди .

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

Коли ви намалювали та згрупували свій персонаж у Sketch, відкрийте Principle та виберіть “Import”. Артборд персонажа імпортується в Sketch. Після імпорту у вас буде новий артборд усередині Principle.

Виділіть артборд та продублюйте 4 рази. З'єднайте кожен артборд з наступним, а останній із першим, використовуючи “Auto”. Це якраз і згенерує анімацію. Кожен шар на кожному артборді анімуватиметься з шаром з такою ж назвою в наступному артборді.

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

Ось і все, тепер запишемо анімацію.

Запис анімації

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

Що далі?

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

21
березень
2008

Жанр: Анімовані персонажі
developer: Oska Software
Ліки: Не потрібно
Платформа: Win XP/VISTA
Системні вимоги: Веселі анімовані персонажі, в основному – симпатичні дівчата, які житимуть на Вашому робочому столі. Через невеликі проміжки часу вони будуть здійснювати різні кумедні дії, але також і Ви можете викликати будь-яку дію, натиснувши курсором миші по персонажу.
(мультяшки - персонажі приємно займають і розважають поки комп робить якусь операцію. Коли працюєш не заважають.)
Опис: Довго шукав, довго качав, знайшов і викладаю. Дякую сайту http://www.nautilus-position.narod.ru/ (http://nautilus.fastbb.ru)
Спочатку потрібно встановити DeskMates (basic) + FatB, потім за бажанням все інше. В арживі 2D та 3D Анімація, а також живі герої
Дод. інформація: Спочатку потрібно встановити DeskMates (basic) +FatB

27
квіт
2009

Рік виконання: 2009
Жанр: Листівки
Розробник: Саморобка
Кількість картинок: 1915
Роздільна здатність картинок: 100px × 100px; 500px × 600px; 400px × 297px та ін.
Формат картинок:
Опис: Листівки на всі випадки життєдіяльності. Від приколів, до побажання спокійного сну. Також присутні листівки на свята - 1 квітня, 8 березня, день космонавтики, з новим роком та багато іншого
Дод. інформація:

14
сен
2012

Анімовані листівки

Рік зробити: 2012
Жанр: Листівки
Кількість файлів: 2477
Роздільна здатність: Від 200x286 до 6056x4592
Формат: GIF, JPG
Опис: Величезна кількість листівок (статичних та анімованих) до різних свят. Є листівки різними мовами. ,

29
сер
2010

Анімовані аватарки!

Рік виконання: 2008-2010
Жанр: Аватари
Кількість файлів: 6220
Роздільна здатність: Від 22х22 до 150х150
Формат: .gif
Опис: Купа різноманітних анімовані аватарок на різну тематику. (Фентезі, мультяшки, аніме, приколи, символи, дорожні знаки, смайлики, з фільмів, квіти і т.д.) Кількість аватарок постійно збільшується, а приклади залишаються старі! Якщо хтось побачить повторення, прохання написати назву файлу. І прошу вибачте за те, що папка "Мульти та аніме 100х100" знаходиться в архіві. Інакше не вдається залити торрент. --------

03
грудень
2010

Анімовані шпалери DreamScene

Рік виконання: 2009

Кількість файлів: 58

Формат: wmv, mpg
Платформа: Windows Vista, 7 58 високоякісних шпалер на робочий стіл! Ідеально підходять і просто зачаровують своєю красою та пишнотою!
Установка: 1. Запустіть DreamScenes Enabler 1.2.exe від імені адміністратора 2. Натисніть Enable 3. Натисніть Finish 4. Перезавантажте комп'ютер. 5. Зайдіть в папку C: Windows Web Windows DreamScene, там буде вже один дрім, для його запуску клацніть правою кнопкою миші, виберіть Set as Desktop Bacrground. 6. Н...

06
грудень
2010

Анімовані шпалери DreamScene "Космос"

Рік зробити: 2010
Жанр: Анімовані шпалери робочого столу
Кількість файлів: 22
Роздільна здатність: 1280x720, 1920х1080
Формат: ехе, wmv
Платформа: Windows Vista, 7 Збірник чудових космічних футажів (заставок).
Установка: 1. Запустіть DreamScenes Enabler 1.2.exe від імені адміністратора 2. Натисніть Enable 3. Натисніть Finish 4. Перезавантажте комп'ютер. 5. Зайдіть в папку C: Windows Web Windows DreamScene, там буде вже один дрім, для його запуску клацніть правою кнопкою миші, виберіть Set as Desktop Bacrground. 6. Нові дріми для установки просто кидайте...

07
грудень
2010

Анімовані шпалери DreamScene «Різне»

Рік зробити: 2010
Жанр: Анімовані шпалери робочого столу
Кількість файлів: 11
Роздільна здатність: 1280x720, 1920х1080
Формат: ехе, wmv, mpg

Установка: 1. Запустіть DreamScenes Enabler 1.2.exe від імені адміністратора 2. Натисніть Enable 3. Натисніть Finish 4. Перезавантажте комп'ютер. 5. Зайдіть в папку C: Windows Web Windows DreamScene, там буде вже один дрім, для його запуску клацніть правою кнопкою миші, виберіть Set as Desktop Bacrground. 6. Нові дріми для установки просто кидайте в ту ж саму...

08
грудень
2010

Анімовані шпалери DreamScene "Sexy"

Рік зробити: 2010
Жанр: Анімовані шпалери робочого столу
Кількість файлів: 27
Роздільна здатність: 1280x720
Формат: ехе, wmv
Платформа: Windows Vista, 7 Збірник чудових футажів (заставок).
Установка: 1. Запустіть DreamScenes Enabler 1.2.exe від імені адміністратора 2. Натисніть Enable 3. Натисніть Finish 4. Перезавантажте комп'ютер. 5. Зайдіть в папку C: Windows Web Windows DreamScene, там буде вже один дрім, для його запуску клацніть правою кнопкою миші, виберіть Set as Desktop Bacrground. 6. Нові дріми для установки просто кидайте в ту ж папку Windows Dre ...

09
січ
2010

Рік зробити: 2010
Жанр: анімовані шпалери
Кількість файлів: 140
Розробник: DreamScene
Сайт розробника: www.vistadreams.org/
Оберіть мову інтерфейсу:
Платформа: vista,7
Системні вимоги:
Процесор: Pentium IV
Пам'ять: 512 RAM
Відеокарта: 256 MB Вільне місцена
ЖД: 2.83 GB
Роздільна здатність: 1280x720
Формат: wmv ліки: присутні
Опис: дівчина космос природа водоспади море 3D монтаж1. Запустіть DreamScenes Enabler 1.2.exe від імені адміністратора 2. Натисніть Enable 3. Натисніть Finish 4. Перезавантажте комп'ютер. 5. Зайдіть до папки C:WindowsWebWindows DreamScene, там буде вже один...

07
грудень
2010

Анімовані шпалери DreamScene "Nature"

Рік зробити: 2010
Жанр: Анімовані шпалери робочого столу
Кількість файлів: 45
Роздільна здатність: 1280x720, 1920х1080
Формат: ехе, wmv
Платформа: Windows Vista, 7 Збірник чудових футажів (заставок).
Установка: 1. Запустіть DreamScenes Enabler 1.2.exe від імені адміністратора 2. Натисніть Enable 3. Натисніть Finish 4. Перезавантажте комп'ютер. 5. Зайдіть в папку C: Windows Web Windows DreamScene, там буде вже один дрім, для його запуску клацніть правою кнопкою миші, виберіть Set as Desktop Bacrground. 6. Нові дріми для установки просто кидайте в ту ж папку.

13
грудень
2010

Анімовані шпалери DreamScene «Різне» №7

Рік зробити: 2010
Жанр: Анімовані шпалери робочого столу
Кількість файлів: 30
Роздільна здатність: від 720x480 до 1920х1200
Формат: ехе, wmv
Платформа: Windows Vista, 7 Збірник чудових футажів (заставок).

13
грудень
2010

Анімовані шпалери DreamScene «Різне» №6

Рік зробити: 2010
Жанр: Анімовані шпалери робочого столу
Кількість файлів: 31
Роздільна здатність: від 720x480 до 1920х1080
Формат: ехе, wmv
Платформа: Windows Vista, 7 Збірник чудових футажів (заставок).
Установка: 1. Запустіть DreamScenes Enabler 1.2.exe від імені адміністратора 2. Натисніть Enable 3. Натисніть Finish 4. Перезавантажте комп'ютер. 5. Зайдіть в папку C: Windows Web Windows DreamScene, там буде вже один дрім, для його запуску клацніть правою кнопкою миші, виберіть Set as Desktop Bacrground. 6. Нові дріми для установки просто кидайте в ту...

Діляється порадами, які допоможуть швидше та ефективніше створювати якісну анімацію.

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

Порада №1: Блокінг ключових поз

Сфокусуйтеся на важливих рухах персонажа, пам'ятаючи про "повну анімаційну картину"

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

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

Порада №2: Копіпаст ключів

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

Порада №3: ​​Використовувати надійний рігг

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

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

Порада №4: Змусіть тангенти працювати

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

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

Порада №5: Нехай програма працює за вас

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

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

Порада №6: Використовуйте проксі-модель, щоб полегшити в'юпорт

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

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

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

Порада №7: 3 кити гарної анімації: підготовка, дія та реакція

Плануйте анімацію з урахуванням 3 фаз: підготовки, дії та реакції

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

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

Порада №8: Подивіться на те, що відбувається очима персонажа

Не бійтеся записувати себе на камеру

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

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

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

Порада №9: Використовуйте дзеркало

Найкращий ваш референс - ви самі

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

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

Порада №10: Використовуйте анімацію повторно

Бібліотека з анімаціями допоможе вам працювати швидше та ефективніше

Це рада застосовується до всіх областей CG-індустрії. Його також можна використовувати і в анімації.

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

І на останок. Пам'ятайте, що обличчя потрібно анімувати в останню чергу

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