Анимация на движение по дадена траектория. Създаване на motion tween

Урок 4

Macromedia Flash MX 2004 предоставя няколко начина за създаване на анимационни последователности:

Анимационни ефекти – самата програма създава поредица от кадри, които имитира един или друг ефект по отношение на някакъв обект;

Анимация кадър по кадър - потребителят създава всеки кадър от бъдещата анимация;

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

Анимационни ефекти

Flash MX 2004 включва предварително изградени анимационни ефекти (ефекти на времевата линия), които ви позволяват да създавате сложни анимации с минимален брой стъпки. Можете да използвате функцията Ефекти на времевата линиякъм следните обекти:

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

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

Когато добавите анимационни ефекти към обект, Flash автоматично създава подходящия слой и всички трансформации на движение и форма, необходими за този ефект, се прилагат върху този слой. Новият слой автоматично получава същото име като ефекта.

Като пример, нека създадем ефект на "експлозия" върху текст. За да направите това, отпечатваме някаква фраза или дума (фиг. 1), избираме я с инструмента Стрелка и изпълняваме командата Insert => Timeline Effects => Effects => Explode.

Ориз. 1. Избран текстов обект

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

Ориз. 2. Панел за експлодиране

Наличието на прозорец за предварителен преглед ви позволява да анализирате различни вариации на ефекти, без да напускате панела Експлодирай. След като изберете необходимите опции, щракнете върху бутона Добреи вземете нещо като тази анимация.

По подобен начин ефектите могат да бъдат приложени към растерна карта. Нека разгледаме пример с плавно изчезване на растерно изображение. Импортиране на растерно изображение в сцената по команда Файл => Импортиране => Импортиране в сцена(Фиг. 3) и приложете ефекта Blur върху командата Вмъкване => Ефекти на времевата линия => Ефекти => Размазваневидеоклип .

Ориз. 3. Растерно изображение, импортирано в сцената

За да редактирате анимационен ефект, изберете обекта, свързан с ефекта, на сцената и в прозореца, който се показва ИмотиНатисни бутона редактиране(фиг. 4) - в резултат на това ще се появи панел Размазване.

Ориз. 4. Бутон редактиранеразположен в долната част на панела. Имоти

В панела Размазванеможете отново да промените параметрите на ефекта и да запазите новите настройки (фиг. 5).

Ориз. 5. Панел Размазваневи позволява да промените настройките на ефекта

Спиране на анимацията

Помислете за най-простия пример - листът се движи от една точка на екрана в друга с въртене около оста си.

Ориз. 6. Първи анимационен ключов кадър

Нека нарисуваме например кленов лист, както е показано на фиг. 6, - съответната рамка на панела Времева линияще стане сив и в него ще се появи точка, което показва, че това е ключов кадър. Ключовият кадър е рамка, в която се поставя или променя съдържанието.

Ориз. 7. Създайте втория кадър, като плъзнете и трансформирате първия

След това щракнете с десния бутон върху съседната рамка и вмъкнете друг ключов кадър с помощта на командата Вмъкване на ключов кадър. В резултат на това в тази рамка ще се появи копие на листа; преместете го надолу (с помощта на инструмента стрелка) и го завъртете с командата Промяна => Трансформиране => Безплатна трансформация(фиг. 7).

Нека повторим процедурата, така че в 6-ия кадър листът да заеме крайната позиция (фиг. 8).

Ориз. 8. Последен кадър на анимацията

Обърнете внимание на панела Имоти(фиг. 8) - в лявата му част е посочен видът на обекта. Във всеки кадър листът е обект от тип форма(форма), други видове обекти ще бъдат обсъдени по-късно.

За да експортирате филм като SEF файл (родният формат на Macromedia за Flash филми), изпълнете командата Файл => Експорт => Експортиране на филм. В резултат на това получаваме следния филм leave1.fla). Можете да гледате получения филм, без да напускате програмата Flash по команда Контрол => Тестов филм. Освен това, за да видите колко място е заето от отделни кадри на филма, трябва да изпълните командата . В резултат ще видим, че всеки от шестте кадъра заема около 600 KB (фиг. 9). По този начин обемът на целия филм е 3686 байта.

Ориз. 9. Гледайте филм в режим Bandwidth Profiler

За да прецените дали това е много или малко, помислете как може да се направи подобен филм с помощта на автоматична анимация или анимация за трансформация на движение.

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

Ориз. 10. Обектът автоматично се превръща в графичен символ

Нека видим как можем да направим същата анимация и да получим по-компактен резултатен файл. Изберете нарисуваното листо на екрана с инструмента стрелка и изпълнете командата Вмъкване => Времева линия => Създаване на Motion Tween, в резултат на това листът ще бъде поставен в рамка и в панела Имотисе появява съобщение, че избраният обект има свойства Графични(фиг. 10). Това означава, че анимираният обект автоматично се преобразува в графичен символ. Сега вече не може да се редактира произволно с инструмента Стрелка като обект от тип Shape. Използването на символи е важна концепция във Flash. След като даден символ е създаден, той може да се използва няколко пъти във филм, без да се увеличава размерът на получения файл. Символите са разделени на графични (графични), символи на бутони (бутони) и символи на видеоклипове (филмови клипове). В този урок ще разгледаме графичен символ и ще се върнем към други видове символи по-късно. Всеки нов символ веднага става част от библиотеката на текущия документ (фиг. 11).

Ориз. 11. Всеки нов символ става част от библиотеката

Ако изпълните командата Прозорец => Библиотека, можете да се уверите, че символът се е появил в библиотеката и че по подразбиране е наречен Tween 1. За да зададете различно име на символа, просто щракнете двукратно върху името и го заменете с желаното. След като сме оформили графичен символ, отидете на последния кадър на нашата анимация (нека е 15-ия кадър) и вмъкнете ключов кадър (използвайки командата Insert ключова рамка). В тази рамка ще се появи копие на символа, което ще местим и завъртаме около оста (по команда Промяна на трансформация=>Безплатна трансформация) както в предишния пример. Както се вижда от фиг. 12, всички кадри между два ключови кадъра станаха сини и стрелка, опъната от първия ключов кадър до последния, което показва създаването на анимация движение tween.

Ориз. 12. Стрелка на син фон показва създаването на анимация движение tween

Чрез изпълнение на командата Контрол => Тестов филм, получаваме информацията, представена на фиг. тринадесет.

Ориз. 13. Гледане на филм в режим Bandwidth Profiler

Въпреки факта, че в този пример имаме 15, а не шест кадъра, както в предишния, и анимацията се оказа по-гладка, размерът на получения файл е по-малък - само 900 байта. Както се вижда от диаграмата (фиг. 13), информацията за обекта се съхранява само в първия кадър, като във всеки нов кадър е необходимо да се запомнят само нови позиции на листа. Това отнема средно само 20 байта.

За да илюстрираме падането на лист с завъртане около равнината на листа, повтаряме предишния пример, само когато модифицираме последния ключов кадър, добавяме командата Промяна => Трансформиране => ОбръщанеХоризонтална. Резултатът е следният филм.

Сега разгледайте пример, когато листо се приближава до зрителя. За да направите това, в крайния кадър вместо огледално ( Обръщане хоризонтално) ще увеличи размера на листа. За да се избегне усещането за забавяне, когато обектът се приближава до зрителя, трябва да се увеличи скоростта на неговото движение. За да постигнете този ефект, трябва да кликнете върху първия кадър и да се обърнете към секцията Лекотав панела Имоти. Положителните стойности на параметъра Ease причиняват забавяне на движението, а отрицателните стойности го ускоряват. Нека изберем максималното ускорение на обекта.

Ориз. 14. Изберете максималното ускорение на обекта Ease = -100

За да направите това, задайте стойността на параметъра Лекотаравно на –100 (фиг. 14). Резултатът е филм. Имайте предвид, че първият кадър може да бъде поставен и зад сцената, след което ще получим филм, в който листото ще лети в кадъра и ще се придвижи към зрителя. Можете да симулирате въртенето на листа около изместен център на симетрия. Надявам се, че самият читател ще може да експериментира, усложнявайки модификацията на крайната рамка и по този начин променяйки естеството на движението на листа.

От представените примери е очевидно, че автоматичната анимация на движение е ефективна, когато трансформацията на обект по време на неговото движение се задава чрез прости функции (въртене, мащабиране и др.). Ако е необходимо да се анимират сложни движения (например движението на ръката на анимационен герой), тогава анимацията за трансформация на движение не е приложима тук. Всеки кадър трябва да бъде нарисуван ръчно, тоест се прилага анимация кадър по кадър, състояща се от набор от ключови кадри. По този начин анимацията кадър по кадър е най-гъвкавият, но в същото време най-отнемащият време тип анимация, освен това създава най-„тежките“ файлове. Винаги, когато е възможно да се замени кадър по кадър анимация с автоматична, това е за предпочитане. Нека разгледаме редица примери, които ви позволяват да използвате автоматична анимация на движение, когато симулирате полет.

Движение по дадена траектория

Flash ви позволява да зададете движението на обект по даден път. За да зададете тази траектория, изпълнете командата Вмъкване => Времева линия => Ръководство за движение.

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

Нека щракнем върху слоя с траекторията и използваме инструмента молив, за да начертаем линия, по която планираме да преместим листа (фиг. 15).

Ориз. 15. Пример за задаване на траекторията на движение

Сега да преминем към първия кадър (щракнете върху него с мишката) и в панела, който се показва Имотиотметнете квадратчето щракнете(задава режима на свързване към траекторията на движение) - фиг. шестнадесет.

Ориз. 16. Параметър щракнетезадава режима на щракване към пътя на движение

След като поставите отметка в квадратчето щракнете, центърът на листа е подравнен с пътя на движение. С помощта на инструмента Стрелка можете да преместите листото по кривата на движение, но ако се опитате да откъснете листото от пътя и да го поставите до него, то ще бъде изтеглено назад и отново ще се „залепи“ за пътя на движение (фиг. . 17).

Ориз. 17. Обектът като че ли се придържа към траекторията на движение със своя център

Отидете до последния кадър и по подобен начин свържете листа към крайната точка на пътя на движение. За да придадете обем на филма, добавете трансформация Обръщане хоризонтално, - в резултат получаваме филм.

Когато листът се движи по пътеката, за нас няма значение как ще се завърти в посоката на движение. Но ако зададем пътя на полета на птицата по подобен начин, тогава в някои части на кривата ще се окаже, че птицата първо лети с опашка.

Очевидно, ако искаме да анимираме полета на самолет или птица, тогава имаме нужда от него, за да се движим напред през цялото време. Във Flash е много лесно да се зададе такъв характер на движение (фиг. 18).

Ориз. 18. Ако поставите отметка в квадратчето Ориентиране към Пътя, птицата ще лети с главата напред

Изисква се квадратче за отметка Ориентиране към Пътя, а движението на птицата ще се промени на доста познато (източникът за това видео е полетът на птица.fla).

Ориз. 19. Добавяне на едноцветен фон

Ако искате да добавите едноцветен фон, щракнете върху фона и в панела, който се показва Имоти(фиг. 19) в полето заден планизберете желания цвят на фона.

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

Чрез поставянето на фоновото изображение и всеки анимиран обект върху собствен слой е много по-лесно да се постигне контрол над тях. И така, за да добавим фоново изображение, нека създадем нов слой за него. За да направите това, щракнете с десния бутон върху слоя, който на фиг. 19 е обозначен като слой 1 и в падащото меню изберете реда Вмъкване на слой. В добавения слой нарисувайте слънцето. За да не се объркате от номерата на слоевете, нека наречем слоя "фон". За да направите това, щракнете върху текущото име и въведете необходимото име (фиг. 20).

Ориз. 20. Създайте стационарен фонов обект на нов слой

Както се вижда от фиг. 20, птицата е зад слънцето, което противоречи на здравия разум. За да размените слоевете, е достатъчно да плъзнете слоя с името "фон" надолу в режим на плъзгане и пускане.

Нека редактираме филмовите обекти (за да може птицата да кръжи на фона на слънцето, да променим траекторията на полета си и да променим съотношението на размерите на слънцето и птицата) и да получим следния филм.

Ориз. 21. За да анимирате облака, създайте отделен слой

Сега нека добавим движещи се обекти към нашата анимация, като например облак. За облака създайте нов слой и задайте анимацията за трансформация на движение върху него. За да може облакът да лети в сцената, поставете го, както е показано на фиг. 21. В резултат получаваме следния филм (източникът за този филм е в прикачения файл

В този урок ще разгледаме какво представлява анимацията на движението на обект по даден направляващ път (водач). Нека създадем условен обект и да начертаем път за него, по който ще премине.

Създаване на нов документ ActionScript 3.0

Както обикновено, създаваме нов документ "Action Script 3.0". В дясната лента с инструменти изберете "Rectangle Tool" и го поставете на сцената.

Превеждаме получения обект в символ, като го избираме с инструмента за избор и натискаме десния бутон на мишката.

Сега в панела на времевата линия изберете петдесетия кадър и го направете като ключ. Натискаме десния бутон на мишката и извикваме контекстното меню, където избираме "Вмъкване на ключов кадър".

Нека създадем водач, пътека, по която ще се движи обектът. За да направите това, щракнете с десния бутон върху слоя и изберете "Add Classic Motion Guide" в контекстното меню, което се показва.

Трябва да получите два такива слоя:

Сега трябва да нарисувате път в слоя „Пътеводител“, по който ще се движи обектът. С помощта на инструмента "Pencil Tool", който се намира в десния панел, нарисувайте водач.

Ако начертаният път се окаже малко неравномерен, тогава той може да бъде изгладен с инструмента Smooth Tool, който, подобно на молива, се намира в десния панел. Първо, като използвате инструмента за избор, щракнете двукратно върху ръководството и след това щракнете върху инструмента за гладка.

Поставете обект, за да създадете анимация на движение

Сега нека поставим нашия обект върху начертания път. За да направите това, застанете на първия кадър на слоя, вземете обекта с "Инструмента за избор" и го докарайте до левия ръб на линията, той ще се "залепи" за него, или по-скоро, точката на закрепване на обекта ще се присъедини към ръководството.

Направете същото за петдесетата рамка, вземете обекта и го поставете на десния край на линията.

Сега трябва да създадем междинни кадри, така че самата програма да постави обекта там, където е необходим, във всеки кадър. За да направите това, просто изберете всяка средна рамка на слоя, където се намира обектът, и натиснете десния бутон на мишката, изберете "Създаване на класически Tween".

В резултат на това трябва да получим два такива слоя:

Започваме анимацията на движението на обекта

Да видим какво стана. Отидете в главното горно меню "Файл -> Публикуване предварителен преглед -> Flash" или натиснете ctrl + enter на клавиатурата. За да видите директно в програмата, натиснете клавиша за въвеждане.

Нека накараме обекта да се "завие", докато върви по пътя. За да направите това, изберете първия кадър на слоя, където се намира обектът, и го завъртете малко с помощта на Free Transform Tool, който се намира в десния панел.

Сега в свойствата на обекта, като сте на първия кадър, изберете "Ориентиране към пътя".

Изберете петдесетия кадър на слоя, където се намира обектът, и точно както в първия кадър, го завъртете малко.

За да видите какво се е случило, натиснете ctrl+enter.

Предмет:Анимация на движение във Flash.

Тип урок: Проект за урок с елементи на творческа работа.

Цел:

Образователен аспект- развитие на творческите способности на учениците с помощта на активно образно мислене, развитие на умението за работа с компютър и информация за разширяване на знанията им.

Аспект на развитие- творческо приложение на знанията си в областта на двуизмерната компютърна графика.

Цели на урока:Запознайте учениците с видовете анимация. За формиране на способността за създаване на най-простата анимация във Flash системата.

Форми на организация на учебно-познавателната дейност на учениците:

- индивидуален- всеки ученик създава индивидуален проект на фрагмент от приказката „Джинджифилов човек“;

- група- индивидуалните проекти на учениците позволяват реализирането на групов проект на приказката "Джинджифилов човек". Работа за бъдещето - показване на приказка на деца от предучилищна образователна институция и основно училище като част от развитието на социокултурен център в училище.

План на урока:

  1. Организация на урока.
  2. Постановка на проблема на урока.
  3. Научете за класификацията на анимацията във Flash (евристичен разговор).
  4. Актуализиране на знанията за създаване на нарисувани обекти в системата.
  5. Демонстрация на създаване на проста анимация.
  6. Практическа работа на учениците на компютър.
  7. Обобщаване на урока.
  8. Домашна работа.

ПО ВРЕМЕ НА УРОКИТЕ

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

Учителят проверява готовността на учениците за урока.

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

Помислете за някои обекти и разберете кой предпочитате. Кои харесвате повече и защо?

Преглеждане на някои уеб страници, презентационни слайдове със и без анимация.

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

Как да създадете анимация - това е темата на днешния урок ( Приложение 1).

3. Получаване на информация за класификацията на анимацията във Flash(евристичен разговор с демонстрация. Приложение 1)

Основната цел на системата във Flash е да "анимира" нарисувани изображения.

След като овладеете основните методи за работа в системата, вие ще можете да:

Създайте ефективна презентация или програма за обучение;
- направете уеб сайт или добавете "жива жар" към дизайна на вашия сайт, т.е. създаване на промоционални уеб видеоклипове (банери);
- създаване на карикатура;
- Програмирайте първата си игра.

Преди да започнем да правим нещо на практика, нека разгледаме основните понятия в анимацията: кадър(рамки), слой с ключов кадър(слоеве) и времева линия(временна линия), знаци ( символи) (Приложение 1).

Анимация- това е промяна в свойствата на обект с течение на времето (Анимацията е процес на промяна на размера, позицията, цвета или формата на обект с течение на времето).

Кадър.Всички филми се състоят от кадри (кадри). Всеки кадър съдържа едно статично изображение. Илюзията за движение се създава чрез леки промени в рисунките от една рамка в друга. Рамката може да бъде или ръчно съставена, или генерирана от Flash

ключова рамка– рамка, достъпна за обработка (показва се като черен кръг, ако съдържа изображение, и бял, ако няма изображение). Кадърът, в който създателят на филма извършва промяна на анимацията.

Слой -това е блок от филм, състоящ се от отделни изображения, от анимация със собствена времева линия .

Хронология -поле, което показва информация за слоевете, кои кадри са ключови и кои кадри се генерират от Flash.

Във Flash анимация, по отношение на създаването, могат да се разграничат следните подтипове: кадър по кадъранимация, автоматичен (трансформираща)анимация и анимация, базирана на скрипт. Всеки вид анимация има своите предимства и недостатъци, области на приложение.

Спиране на анимациятасе състои изцяло от ключови кадри и вие сами създавате съдържанието на кадрите. Това е подобно на процеса на създаване на карикатури, когато всеки кадър е нарисуван на отделен лист и ако имате 5000 кадъра в карикатурата, тогава ще трябва да нарисувате съответно 5000 рисунки. (покажи хартиено слайдшоу). В Flashтова, разбира се, е много по-лесно да се направи, отколкото на хартия, но все пак е трудна работа, освен това размерът на файла с анимацията кадър по кадър се оказва голям. Във Flash анимацията кадър по кадър се използва, когато проблемът не може да бъде решен по друг начин.

В трансформационна анимацияосновната работа по време на създаването му се извършва от Flash, което ви позволява да получите проста анимация. Автоматична анимация (т.нар. tweened animation), при използване на която авторът създава само първия и последния кадър на анимацията, а Flash автоматично генерира всички междинни кадри.

Анимация, базирана на скрипт. Скриптът е описание на поведението на обект на роден Flash език, наречен ActionScript.

От гледна точка на метода на изграждане, анимацията се разделя на анимация на движениеи анимация за промяна на формата. Анимацията на движение се изпълнява върху екземпляри на обект и ви позволява да го премествате, променяте мащаба, трансформирате, прозрачността, прилагате цвят; докато формата на обекта остава непроменена. Анимациите за преоформяне работят директно с чертежи и ви позволяват да промените един чертеж на друг, като същевременно променяте неговата позиция, размер и цвят.

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

Днес ще се запознаем с принципите на създаване на анимация на формата.

За разлика от анимацията на движение, анимацията на формата работи само с примитиви, тоест с форми, създадени с помощта на инструменти за рисуване. Точно както при анимацията с движение, не трябва да има повече от една анимирана фигура в един слой.

Анимация на движение

Създаването на анимация на движение се различава от анимацията кадър по кадър по това, че не е необходимо да създаваме всеки кадър ръчно, достатъчно е да създадем първия анимационен кадър и последния, програмата ще попълни всички междинни кадри автоматично. Имайте предвид, че туинингът е приложим само за символи и не трябва да има повече от един анимиран символ на един слой.

С други думи, Преди да започнете да създавате своя собствена „карикатура“, трябва да вземете решение за избора на механизма за нейното изпълнение.

4. Актуализация на знанията за създаване на нарисувани обекти в системата.

Разберете как можете да създадете обект, изберете цвета на фона и цвета на контура на формата, изберете обекта, където се намират свойствата на обекта ( с демонстрация на интерактивна бяла дъска).

5. Демонстрация на създаване на проста анимация Алгоритъм за изпълнение.

6. Практическа работа на учениците пред компютъра

Създаване на мини-проект по приказката "Джинджифилов човек".

Коментар за учителя.На всеки ученик се дава практическа работа за създаване на отделен фрагмент от приказка. Препоръчва се предварително да се озвучи приказката "Колобок" и да се раздели звуковият файл на отделни сюжети, за да се посочи на учениците продължителността на анимацията в творбата.

Практическа работа по темата "Най-простата анимация на движение във Flash системата"

Опция 1

Упражнение . Picture1.jpg) кифла се търкаля по пътеката и звучат следните думи:

Колобок легна, легна и се претърколи от прозореца до пейката, от пейката до пода, по пода до вратата, прескочи прага - и по-нататък по пътеката.

Звукът отнема 9 секунди. 13 кадъра - 1 секунда. Анимирайте картината през цялото това време (117 кадъра) и експортирайте фрагмента от филма в каталога D:/Потребител/_под името escape.avi

Алгоритъм за изпълнение

  1. Отворете програмата Flash MX 2004 (D:/УЧИЛИЩЕ/ Flash MX 2004/*.exe).
  2. С помощта на лентата с инструменти на работното поле създайте колобок от приказка.
  3. Добавете фоново изображение:

- Създайте нов слой, като изберете командата Поставяне - Времева линия - Слой(отидете на втория слой, като щракнете върху името на слоя).
- Импортиране на фоново изображение Файл - Импортиране - Импортиране в сцената.(Изберете снимка от директорията D:/FOTO/Kolobok/Figure1.jpg).
- Преоразмерете изображението с помощта на инструмента за безплатно трансформиране, за да пасне на рамката.

Вариант - 2

Упражнение . Създайте фрагмент от приказката "Джинджифилов човек", където на фоновата картина (D: / FOTO / Gingerbread Man / Picture2.jpg) кифла се търкаля по пътеката към заек и звучат следните думи:

Кок се търкаля и заек го среща:


- Не ме яж, косо, ще ти изпея песен.

Вариант - 3

Упражнение . Създайте фрагмент от приказката "Джинджифилов човек", където на фоновата картина (D: / FOTO / Gingerbread Man / Picture3.jpg) кифличката бяга от заека и звучат следните думи: И кифличката се търкулна по-нататък - само заекът го видя.

Вариант - 4

Упражнение . Създайте фрагмент от приказката "Джинджифилов човек", където на заден план (D: / FOTO / Gingerbread Man / Снимка4.jpg) кок се търкаля по пътеката към вълка и в същото време звучат следните думи:

Натруфен човек се търкаля по пътека в гората и заек го среща:

- Джинджифилов човече, натруфен човек! Ще те изям!
- Не ме яж, сив вълче, ще ти изпея песен.

Вариант - 5

Упражнение . Създайте фрагмент от приказката "Джинджифилов човек", където на заден план (D: / FOTO / Gingerbread Man / Снимка 5.jpg) меденкинята бяга от вълка и в същото време звучат следните думи:

Вариант - 6

Упражнение . Създайте фрагмент от приказката "Джинджифилов човек", където на заден план (D: / FOTO / Gingerbread Man / Снимка6.jpg) по пътеката се търкаля кок към мечка и в същото време звучат следните думи:

Натруфен човечец се търкаля през гората и мечка го среща:

- Джинджифилов човече, натруфен човек! Ще те изям!
- Е, къде си, косонога, яж ме!

Вариант - 7

Упражнение . Създайте фрагмент от приказката "Джинджифилов човек", където на заден план (D: / FOTO / Gingerbread Man / Снимка7.jpg) джинджифиловият човечец бяга от мечката и в същото време звучат следните думи:

И пак кифличката се търкулна - мечката само го гледаше.

Вариант - 8

Упражнение . Създайте фрагмент от приказката "Джинджифилов човек", където на заден план (D: / FOTO / Gingerbread Man / Снимка8.jpg) кок се търкаля по пътеката към лисицата и в същото време звучат следните думи:

Кок се търкаля и лисица го среща:

- Здравей, колобок! Изпей ми песен!

Колобок изпя песента си, Алис слуша и пълзи все по-близо и по-близо.

Вариант - 9

Упражнение . Създайте фрагмент от приказката "Джинджифилов човек", където на заден план (D: / FOTO / Gingerbread Man / Снимка9.jpg) джинджифиловият човечец скача на носа на лисицата и в същото време звучат следните думи:

Славна песен! - каза лисицата - Да, остарях - не чувам добре. Седнете на пръста ми и запейте още веднъж.

Вариант - 10

Упражнение . Създайте фрагмент от приказката "Джинджифилов човек", където на заден план (D: / FOTO / Gingerbread Man / Снимка 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. можете да тествате филма.

    Можете да създадете motion tween по два начина:

    • използване на панела със свойства на рамката;
    • с помощта на командата "Създаване на анимация" от контекстното меню чрез щракване с десен бутон върху рамката.

    За да анимирате движение с помощта на командата от контекстното меню, изпълнете следните действия:

    • Начертайте или поставете всеки обект в ключов кадър.
    • Щракнете с десния бутон върху клетката на първия кадър и изберете командата "Създаване на движение на Tween" от контекстното меню. Това автоматично ще преобразува цялото изображение в рамката в графичен символ, наречен "Animation Construction1" (появява се синя рамка за избор и точка за закрепване в центъра на рамката).
    • Създайте последния ключов кадър в tween и преместете, трансформирайте обекта.

    Но много често е невъзможно да се опише движението чрез движение по права линия. С описаната анимация на движение, във всеки случай, нашите обекти се движат по прави сегменти между ключови кадри (или е достатъчно трудно да се зададе крива). Ако трябва да се движите по сложна траектория, по принцип можете да разделите това движение на много отделни части и ... да получите анимация, която е близка до кадър по кадър. Има обаче ситуации, когато това е единственият изход.

    Но има и друг начин - да зададете траекторията на движение. За това се използва специален слой, който контролира движението: водач, върху който е начертана линия - водач или траектория на движение.

    За да накарате обект да се движи по определен път, трябва да изпълните следните стъпки.

    1. Създайте ключови кадри с начална и крайна позиция на обекта, задайте анимация на движение между тях.
    2. Щракнете с десния бутон върху името на слоя, съдържащ tween. В контекстното меню изберете „Добавяне на пътеводител“ или кликнете върху съответната икона долу вляво.
    3. В резултат на това в списъка със слоеве ще се появи нов слой, маркиран със специална икона (фиг. 7.5), а името на слоя с анимация ще се премести вдясно - знак, че този слой е станал подчинен.
    4. Щракнете върху името на направляващия слой, за да го направите активен.
    5. В ключовия кадър на този слой използвайте всеки инструмент за рисуване на пътя, за да нарисувате пътя на обекта. Този ред не трябва да съдържа пресичащи се секции, прекъсвания и не трябва да се затваря.
    6. Изберете ключови кадри за анимация и в панела със свойства на рамката (чрез включване на анимацията на движение) задайте:
    7. „Ориентиране по пътя“, ако искате да ориентирате оста на симетрия на обекта по направляващата линия;
    8. „Snap“, защото трябва да щракнете точката на регистрация на обекта към водача за движение (Без този параметър обектът няма да иска да се движи по кривата!).
  • Тествайте филма.

Има две основни грешки при насочване на обект по даден път: учениците не закотвят обекта във втория ключов кадър или водещата линия има малки (видими само при голямо увеличение) прекъсвания.

Нека направим още едно мини-упражнение - движението на молив върху хартия. За това:

  1. В първия ключов кадър нарисувайте молив или импортирайте изображението му от клип-арт във векторен формат.
  2. Групирайте изображението с молив, използвайте инструмента за свободна трансформация, за да завъртите молива, както изглежда отстрани, когато пишете (можете да поставите молива от лявата страна на картона, тъй като пишем отляво надясно).
  3. В този случай местоположението на точката за регистрация на нашия обект е много важно - нека го поставим на върха на оловото на молива.
  4. След 30-40 кадъра ще създадем последния ключов кадър на анимацията.
  5. В него ще прехвърлим изображението на молива на друго място на картона.Можете да го завъртите малко.
  6. Нека изберем всички кадри едновременно, като "разтягаме" курсора на мишката по лентата от кадри и в панела със свойства изберете анимацията на движение и поставете отметка в квадратчетата до "Ориентиране по пътя" и "Щракване" параметри.
  7. Нека добавим слой, който контролира движението – водач.
  8. В ключовата рамка на този слой нарисувайте траекторията на движение. Нека проверим дали лентата за анимация съответства на дължината на нашата анимация; няма нужда от ключов кадър в края.
  9. Нека тестваме филма.
  10. Може би сте направили всичко внимателно и моливът започна да се движи по начертания път, но нашият молив се върти около кривата като луд. Изключете квадратчето за отметка до параметъра "Ориентиране по пътя" - движението на молива стана по-реалистично.

Имайте предвид, че пътят на обекта е невидим в тестов режим на филм и няма да се вижда в готовия филм. Ако искате да видите траекторията във филма, трябва да го копирате и поставите на всеки друг (видим) слой (има команда „Поставяне на място“ в менюто за редактиране).

Това е всичко! Научихме основите на автоматичната анимация във Flash. Остава само да се запознаете с по-сложни техники, за да станете истински професионалисти.

Примерни въпроси за контрол

  1. Как да редактирам текст?
  2. Как да превърнем текста в "начертани букви"?
  3. Каква е целта на анимацията с движение?
  4. Как анимацията на движение се различава от анимацията на формата?
  5. Как анимацията на движение се различава от анимацията на стъпки?
  6. Какъв вид обекти могат да бъдат tweened?
  7. Как се задават настройките за анимация на движение?
  8. Защо и как се създава направляващ слой?

Какво е карикатура без действие? Какво ще стане с карикатура, която не разказва история? Със сигурност сте виждали как художници в студиото рисуват скици от модел на живо. Такива упражнения са много полезни за разбиране на анатомията и как се държат мускулите при движение. Спецификата на предаването на такова движение обаче не дава пълна яснота! То е ограничено до възпроизвеждане на реалния живот, нищо повече. Движението и активността в анимацията са изобразени по съвсем различен начин. Следователно знанието как да нарисувате тялото правилно не е достатъчно. Особено важно е да овладеете техники, които ще ви позволят да "съживите" формата. Това е, което ще покрием в този курс!

Какво е важно да се знае

Когато художник работи върху герой, който е в определена ситуация, за него/тя е важно първо да създаде действието. Всяка сцена, в която поставите героя си, трябва да помогне на зрителя да види намерението, което ги подтиква към действие. Вижте мотивите, чувствата, уменията (или липсата на такива) и личността като цяло. Тази цел трябва да бъде постигната дори при липса на диалог. И тук рисунките имат предимство: можем да играем с езика на тялото и да надуем емоциите до краен предел. Не е нужно да плащате пари за актьори, студио и други разходи. Достатъчно хартия и молив. Въображението няма граници!

За да постигнете тези резултати в анимацията, трябва да се стремите към две неща:

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

Постепенно ще разберем каква роля играе всеки от тях в композицията на нарисуваната сцена.

1. Крива на движение

"Крива на движение" е въображаем път, по който се движи тялото на вашия герой. Характеризира се с простота и интензивност. Тази брилянтна техника ще ви помогне да постигнете желаната цел, когато планирате вашите рисунки. С него ще можете да създадете драматичен ефект. Имайте това предвид следващия път, когато скицирате герои в действие.

Кривата на движение трябва да бъде гладка и насочена, така че да е очевидно за нас какво възнамерява да направи всеки герой.

Забележете колко странно изглежда дизайнът на базата на сложни криви на движение.



Пример за неправилно използване на крива на движение е, че линията не се вписва в контекста по начина, по който би трябвало.

В карикатурата виждаме перфектен пример за простота и ритъм. Кривата на движение дава на художника възможността да засили ефекта от своите сцени. Помислете за кривата още преди да започнете да рисувате пропорциите на знаците. Уверявам ви, финалната рисунка с движение ще ви задоволи повече от.

За да разберем точно кои техники и методи ще помогнат да вдъхнем живот на анимационните герои, трябва да се запознаем с теоретичните принципи, на които се основават тези техники.

2. 12 основни принципа на анимацията

През 1981 г. двама от най-големите аниматори на Дисни (Франк Томас и Оли Джонсън) написаха Илюзията на живота. Те представиха на публиката "12-те основни концепции за анимация", които студиото използва от 30-те години на миналия век в опит да създаде възможно най-реалистичната анимация. Въпреки че тези концепции са разработени за използване в традиционната анимация, те остават същите и днес - дори в дигитални проекти.

Основните понятия са както следва:

  • Скуош и разтягане
  • Подготовка или очакване (Anticipation)
  • Постановка
  • Прави действия и поза, за да поза
  • Инерция и припокриване (Проследяване и припокриващо действие)
  • Забавете се и забавете (Бавете и забавете)
  • арка (дъги)
  • Вторично действие (вторично действие)
  • Време
  • Преувеличение
  • Окончателен чертеж (Плътен чертеж)
  • Привличане (Обжалване)

Нямам намерение да ви затрупвам с пълен набор от техники за анимация, така че нека се съсредоточим върху най-важните и се опитаме да разберем как те могат да подправят един „скучен“ дизайн.

Компресиране и разтягане

Това е основната, ако не и най-важната техника, която трябва да използваме при създаване на динамика на движението на героя. Цялата концепция се свежда до притискане и разтягане на пропорциите на персонаж или обект в съответствие с движението. Тази техника ни позволява да добавим тежест и плавност към движението. Вижте как се прилага към обект:



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

Примерът по-горе илюстрира перфектно тази техника. Малко вероятно е в реалния живот да видите топка да се деформира така, когато отскача, но в анимацията работи чудесно!



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


Същата техника се прилага и за действие. Веднага можете да видите, че героят носи тежък товар. Забележете, че цялата долна половина на тялото е компресирана, докато горната половина е опъната.

Удивително, нали? Тази техника ни води до следващата тема:

Преувеличение

Тук няма какво много да се каже, тъй като принципът е ясен сам по себе си. Преувеличените жестове и позициите на тялото създават драматичен ефект – това е задължително правило на анимацията. Представете си какво се случва, когато сме изненадани или уплашени – от изненада тялото ни реагира спонтанно. Същото трябва да се случи и с рисунката на карикатурата, но с много по-изразен резултат!



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

Според правилата на студиото на Дисни тази техника трябва да бъде правдоподобна, за да отразява живота, но в по-екстремна форма. Преувеличението предполага промени във физическите характеристики на героя или в елемента от сцената, в която се намира. Не забравяйте обаче, че за вас е важно ясно да разберете какво точно движение илюстрирате с тази техника, за да не подведете зрителя.



Преувеличение: Обърнете внимание на траекториите на героя. Те помагат да се подчертае точката на приложение на силата, с която той се опитва да вдигне товара. Така определено ще убедите зрителя, че топката е изключително тежка!

Подготовка или очакване

Подготовката или очакването е техника, използвана за подготовка на зрителя за действието, което предстои да се случи. Използва се за подготовка на движението или появата на обект, персонаж и т.н., т. нар. предварителен набор от енергия, който често предхожда кулминацията.



Класически пример за подготовка: героят е на път да избяга и да напусне сцената!

Теоретично подготовката се създава от мигновено движение, на което едновременно се противопоставя движение в обратна посока. В анимацията това означава в по-голямата си част подготовка за незабавно действие и връщане, за да завършите цикъла.



Забележете как добавяме действие в анимацията по-горе: в началото има кратко очакване на движение, което впоследствие служи като задействане на движение. След това наблюдаваме как тялото се връща от движение към състояние на покой.

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

Насочване и акцентиране

В анимацията се обаждаме "насочване"ефект, който предхожда "акцент". И двете са необходими, за да се подчертае изражението на изненадата. Те се извършват по следния алгоритъм:

  • Героят вижда нещо невероятно;
  • Има очакване (главата пада бързо);
  • Настъпва моментът на "акцент", главата се издига нагоре.
  • Героят се връща в първоначалното си състояние.

Нека видим как работи този алгоритъм.

Етап 1

Започваме с рисуване на герой с щастливо или естествено изражение:


Стъпка 2

Героят вижда нещо невероятно и в очакване на момента навежда глава надолу и затваря очи. Това движение засилва впечатлението, че той вижда нещо невероятно!


Стъпка 3


Стъпка 4

Героят се успокоява и се връща в първоначалното си състояние.


По време на този процес аниматорите използват техника, наречена времетосцени, които добавят междинни фази, за да създадат плавен преход между кадрите.



Тук виждаме използването на техниката „стискане и разтягане”, която добавя мобилност и дава тласък на движението. В реалния живот единствената движеща се част от нашия череп е долната челюст, която се отваря и затваря. Но в анимацията всичко може да се разтегне - дори главата!

Малко по-късно ще се върнем към "тайминг".

Бавно влизане и бавно излизане

Съвсем естествено е, че когато се подготвяме да направим внезапно движение или да извършим някакво действие, изискващо усилие, тялото ни се нуждае от част от времето, за да концентрира енергията, необходима за това действие. В резултат на това има моментално ускорение (или постоянно равномерно, в зависимост от движението). Това прави анимирания герой да изглежда правдоподобен, а броят на ключовите кадри и фазите се променят с честота - по-преувеличена картина на това, което се случва в реалния живот.

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


съвет:Ако сте уеб дизайнер и работите с преходи за създаване на анимации на страниците на уебсайтове, трябва да сте се сблъскали с концепцията за „време“, за която функцията преходв CSS3. Тази функция използва "Smooth Enter" и "Smooth Exit" наред с други параметри, за да опише кривата на скоростта в анимацията. По същия начин, ако работите в After Effects, вероятно сте забелязали в менюто Помощник за ключови кадрикоманди "Гладко плавно", "Гладко влизане" и "Гладко излизане". В един или друг случай, ако сте използвали тези опции, това означава, че вече прилагате известния принцип на анимация във вашите проекти!

атракция

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


Вижте как рисунката по-горе улавя конкретно привличането на всеки герой. За да се подчертаят определени черти, са достатъчни незначителни детайли, например женски силует или удължено лице на иконом и стегната, но безотказно елегантна поза. Тук е важно да разберете естеството на всяка характеристика, когато ги добавяте към вашите сцени.

Наблюдавайте какви конкретни движения и действия извършва всеки герой, за да се отвори пред зрителя. Ще се държат ли като чувствена жена? Как е крадецът? Като измамник? Как е икономът? Как е сервитьорът? Как е стилистът? Какъв вид специфичнихарактеристики отличават този конкретен характер? Какви дрехи носят? Трябва постоянно да наблюдаваме нюансите на поведението на хората в реалния живот, за да използваме тези детайли в своя полза.

Нека бързо да разгледаме всеки от останалите принципи, за да постигнем общо разбиране:

постановка

Продукцията е създадена, за да насочи вниманието на публиката към важен компонент в кадъра. Продукцията може да използва допълнителни сценарии или обекти. Всъщност тази техника е необходима, за да се съсредоточи върху най-важното и да премахне всички незначителни детайли. Тази концепция се използва усилено в комиксите. Цвят, светлина, ъгъл на камерата се използват за фокусиране на вниманието на зрителя върху най-важните детайли.



Добавих кола към рамката, за да подчертая смисъла на случващото се. Сега имаме ясен контекст и всичко става ясно!

Чрез действие и поза до пози

„Чрез действие“ означава подробен сценарий на анимационна сцена от началото до края. „Поза в поза“ се отнася само за ключови кадри за рисуване, пропуските между които по-късно ще бъдат допълнени с фази. Интересното е, че първата техника се използва само в 2D анимация. Но техниката Pose to Pose все още се използва във филмовия сториборд и 3D анимацията.

Инерция и припокриване

Инерцията се отнася до продължаващото движение на отделни части от тялото на героя поради движението на цялото тяло. Например, някои части на тялото продължават да се движат, въпреки факта, че героят внезапно е спрял. "Припокриване" е техника, поради която някои части на тялото се движат с известно закъснение от основната. Например тялото, крайниците или косата се движат на различен интервал от време от главата. Комбинацията от тези две техники ви позволява да създавате по-реалистични анимации.



Забележете как косата и ризата се движат с различни скорости, за да следват движението.

арх

Когато движението на героя следва определен път, ние го наричаме "арка". Представете си цикличните движения на ръцете на диригент на оркестъра, или последователността от движения на скейтър, или олимпийски спортист, изпълняващ висок скок. Всеки от тях прави множество движения, които се сливат във верига от плавни последователни елементи. Ако в даден момент прекъснете тази верига и принудите героя си да направи нещо, което не се вписва в нея, вашата анимация ще изглежда странна.

фоново действие

Фоновото действие се добавя към основното действие в рамката, за да подобри ефекта, който искате да имате. Представете си герой, който върви по улицата и не обръща внимание на случващото се наоколо. В същото време покрай него препускат автомобили, за да подчертаят опасността. Или си представете изражението на съмнение върху лицето на въжеходеца. Това са примери за фонови действия в кадъра, които подчертават значението му.

Време

„Време“ означава изчисляване на броя на чертежите, които съставляват определено действие. Например, обект или герой, който се движи бавно или трудно, обикновено е тежък герой. Времето диктува броя на кадрите и фазите, които трябва да нарисувате, за да предадете сцената правдоподобно. Ще трябва да направите същото, за да нарисувате лек обект.

Времее изключително важна концепция в анимацията и се използва широко за създаване на герои и техните действия.

окончателен чертеж

Окончателният чертеж се отнася до точността на чертежите на хартия. Чертежите трябва да имат тегло и обем, за да бъдат видени и интерпретирани правилно. В същото време не говорим за детайлно рисуване, за да направим рисунката реалистична. Говорим за това как представяте своите теоретични познания по рисуване пред публика. Художник, който е усвоил основите на дизайна, може да създаде илюзията за обем в своите рисунки, дори върху 2D скица. Това е изкуството на илюзията за достоверност.

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


Платформата Tuts+ има няколко статии и курсове, написани от различни автори, които да ви помогнат да се задълбочите в основите на рисуването. Там можете да преминете през различни стилове на рисуване и да станете пълноправен художник.

3. Последователни движения и цикли на ходене

По думите на Кен Харис, аниматор в Warner Bros., „Ходенето е първото нещо, което трябва да научите“. Да се ​​научиш как да накараш анимационен герой да ходи точно по начина, по който искаш, е най-трудната задача в анимацията. Има няколко начина и те се различават в зависимост от обема, сложността, контекста и наситеността на сцената.

Любопитното е, че ходенето не е нищо повече от опит да се поддържаш в изправено положение. С други думи, ние се опитваме да избегнем падането на земята! Представете си бебе, което се опитва да се изправи... като се наведе напред, може да направи рефлекторна стъпка.

Възрастните ходят уверено и като правило не правят внезапни стъпки. Всъщност ние едва вдигаме краката си от земята. Движенията ни са сведени до необходимия минимум, основната цел е да придвижим тялото напред.

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

Нека анализираме опростения процес на фигурата по-долу:



Пример за прост цикъл на ходене: тялото е леко повдигнато етапи на трансфер.

Обърнете внимание как ръцете се движат в противоположни посоки на краката; и когато тялото се повдига нагоре в етапа на замах, единият крак е изправен.

Сега запълваме празнините с допълнителни фази и завършваме основния цикъл на разходка в анимацията:



Различни видове ходене и бягане

Както споменах, в анимацията (и в живота) има различни разходки и те могат да се използват за предаване на желаните чувства и желания на героите. Различните шаблони предават това:



Известни шаблони за анимация: Те са базирани на книгата Cartoon Animation на Престън Блеър. Сигурен съм, че сте запознати с тези снимки от различни анимационни филми.

Пример темпо на ходене: тялото се движи нагоре и надолу през цялото време.

Разлики в ходенето на четириноги

Четириножното движение е по-сложна тема, защото трябва да следите движението на предните и задните крака. Плавността на движението ще усложни работата ви, но има смисъл да я изучавате с примери за движения в реалния живот.

Походката на анимационно животно е опростена интерпретация на това, което се случва в реалния животински свят. Мускулите и ставите заемат различни позиции в зависимост от фазата на движение на тялото:



Вижте по-горе как се държат предните и задните крака етапи на трансфертяло: главата леко надолу, когато задният крак е изнесен напред. Обратното се случва по време на прехвърлянето на предната лапа.

В анимацията има и други видове разходки с животни, които следват собствения си ритъм. Нека разгледаме два от тях по-долу:



Упражнение. Опитайте се да намерите пътищата на движение в чертежите по-горе. Също така имайте предвид, че галопът е брилянтен пример за използването на компресия и разтягане.

Пример за анимиран галоп. Предните лапи инициират движението и задават необходимия импулс.

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

Рисуването на ходене и бягане е доста сложна тема, която заслужава отделен курс, посветен само на нея. Някои животни, като конете, имат различна анатомия, което кара краката им да се движат по различен начин. Вижте моя раздел "Копитни животни" за повече подробности. Ако искате да разгледате по-задълбочено движенията на коня, вижте Моника Загробелная.

Събирайки всичко заедно

Преди да приключим, начертах анимационна последователност, в която събрах примери за няколко от техниките, обсъдени по-горе. Можете ли да разберете кой се използва?


Край!

Ролята на традиционната анимация в изкуството на 21 век се обсъжда активно днес. Съвременните анимационни студия като Pixar или Dreamworks все още използват поне 90% от описаните по-горе техники. Способността да оживявате рисунка – независимо дали чрез пинап, комикси или анимационни филми – е нещо прекрасно. Ако успеем да накараме дете да повярва, че едно животно може да говори и да се държи като човек, това е невероятно. Когато емоциите се събуждат у зрителя, с думи не могат да се изразят чувствата, които художникът изпитва в този момент.

Карлос Гомес Кабрал

Аз съм продукт от лудостта на 80-те, живея в град Рио де Жанейро (Бразилия). Обичам изкуството, комиксите и музиката от дете, посвещавам се на няколко проекта едновременно и мразя да седя неподвижно. С бакалавърска степен по ИТ в момента работя за технология компания за мобилност. Аз също съм влюбен в графиката за движение, HTML5, уеб дизайна и тенденциите в UX. Можете да ме намерите в Twitter (@cgcabral).

Зареждане...Зареждане...