Преди да започнем нашата първа анимация, Bouncing Ball, искам първо да направя един технически предизвикателство: Текстът трябва да бъде изчертан, точно както когато се пише на ръка. Fig Leaf Rag има красиво въведение с акцент в края, където ще поставим точката на удивително знак.

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


Стъпки 1–10

Стъпка 1

Искам текстовият слой да бъде премахнат и вместо това да бъде създаден композиционен слой, нормален пикселен слой, на който да рисувам. Текстът трябва да бъде в слоя. Създавам подкомпозиция с помощта на Ctrl+Shift+C или от Слой>Създаване на подкомпозиция. Това наричам "Typo_Intro".

Анимацията става лесно: линейна анимация

Стъпка 2

Атрибутите са запазени, включително и Турбулентно преместване.

Тъй като не искам това, щраквам върху Турбулентно преместване, натискам Ctrl+X и поставям целия ефект на една композиция по-горе ("Fig Leaf Rag").

Анимацията е лесна: анимация на линий.

Стъпка 3

Връщаме се в "Typo_Intro" композицията. Тук сме разкрили текста и можем да направим анимацията.

Първият вариант е чрез Пътища. Вземам Инструмент за рисуване и пратичната първа линия на буквата А. След това прекъсвам и щраквам с натиснат Ctrl някъде навсякъде и така завършвам текущия път преди да нарисувам втората линия на А.

Пак прекъсвам, щраквам с натиснат Ctrl някъде навътре и след това вървя на следващата линия и така нататък, докато целият текст бъде нарисуван.

Анимацията става лесно: анимация на линии

Стъпка 4

Сега аз прилагам ефект. Можем да го намерим като Контур във версията CC при Създаване. До CS6 се наричаше Ефект на линии.

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

Анимацията е лесна: линеен анимационен филм.

Стъпка 5

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

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

Анимацията лесно направена: Анимация на чертица.

Стъпка 6

Хубавото тук е, че имам Начало- и Край- сайдъри: Премествам го от начало до край и така рисувам целия текст.

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

Анимация с лекота: Линейна анимация.



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

Стъпка 7

В този случай аз предпочитам малко по-бързия метод с Четка.

Обаче тази Четка не може да бъде използвана на текстови слоеве. И така трябва отново да създадем подкомпозиция и да я наречем "Typo_Statisch". Можем да работим директно в тази подкомпозиция.

Анимацията е лесна: линейна анимация

Стъпка 8

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

Имаме и два нови панела: Четка и Рисуване. В Четка-полето на управление можем да настроим размера, твърдостта и други настройки на четката.

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

Правя една линия, след това още една и дори още една - но след като завърша с една линия, тя изчезва неочаквано.

Анимацията става лесно: анимация с чертица

Стъпка 9

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

Анимация по лесен начин: анимация с линии.

Стъпка 10

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

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

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

Анимацията става лесно: анимация на линии

Продължавайки напред: Стъпки 11–20

Стъпка 11

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

Отново рисувам нова линия и когато сте в режим на слоеве, виждате полето. Това е това, което се запазва.

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

Анимация направена лесно: Анимация с чертица

Стъпка 12

Искам също да нарисувам текста, защото това е най-бързият начин да анимирам нещо такова.

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

Анимация, лесно направена: анимация на линия.

Стъпка 13

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

Ако натисна U, отново виждаме всички ключови кадри.

Анимацията става лесно: анимация на линии

Стъпка 14

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

Анимацията става лесно: Анимация на линия.

Стъпка 15

Нека го пуснем да се изпълни.

Междувременно: Ако сте случайно натиснали бутона Caps Lock, After Effects не се актуализира. Тогава ще видите съобщението Деактивирайте Caps Lock, за да актуализирате изгледа.

Когато го пуснем сега, After Effects започва да рисува всички букви едновременно. Обаче трябва да започне отпред и да продължи натам. И точно тук е проблемът. За да направя това така, както искам, трябва да поставя всеки крак с ръка - един след друг. Това е голямо усилие. Искам да направя това по-бързо.

В следващата стъпка ще ви обясня как точно - но преди това трябва да маркираме всички линии.

Анимация, лесно направена: странична анимация

Стъпка 16

Затова взимам скрипт за това, който разполага с тези ключови кадри един след друг.

Този скрипт аз сам съм го написала и разбира се, го давам на вас. Ще го намерите в папка Скриптове с името Последователни кракове. Който е гледал филм "Последователни слоеве от After Effects" може да се сети приблизително какво прави този скрипт.

Отварям скрипта в Extend Script и го изпълнявам.

Анимацията е лесна: анимация с чертило

Стъпка 17

Сега имаме практически стълб от ключови кадри и текстът се рисува стъпково. Все още обаче бавно.

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

Вече става много по-бързо.

Анимация направена лесно: Анимация с линии



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

Стъпка 18

Искам да говоря за отместването. То влияе на преходите между ключовите кадри:

Ако гледаме текущите преходи между ключовите кадри, следващият винаги започва точно там, където завършва предишния (a).

Ако не искам това и например предпочитам два кадъра пауза между две линии, поставям 2 в отместването.

Разбира се, трябва отново да избера всички четки, преди да активирам скрипта. С Ctrl+A мога да ги избера всичките едновременно.

Анимацията лесно направена: Линейна анимация



Или ако искам кадрите да се застъпват, тогава в отместването поставям стойност -2. Тогава винаги би връщал на два кадъра назад от реалния край. Все пак, ако сте го зажегнали толкова бързо, както тук, това няма смисъл. Аз съм доволен от постъпката и я оставям на 2.

Стъпка 19

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

Затова са ми нужни музиката и в композицията. Затова отивам в раздела "Fig Leaf Rag" и копирам файла.

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

Анимацията лесно направена: анимация на линии

Стъпка 20

Сега ще видим къде са двата позиции, които са ни необходими. За целта използвам числовата клавиатура и натискам бутона Кома-, за да създам преглед. Натискам звездичката * върху числовата клавиатура, за да поставя маркер. При устройства без числова клавиатура, особено на Mac, използвам cmd+Кома за преглед и cmd+8 за маркер.

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

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

Поставям помощната линия върху първия маркер и преминавам към композицията "Typo_Statisch". Там премествам този кадър върху помощната линия, който показва линията на удивителния знак (2).

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

Анимацията е лесна: чертожна анимация.

Последните стъпки

Стъпка 21

Бих искал страната на удивителния знак да бъде рисувана по-бавно от писмото преди това, така че да имаме акцента напълно при удивителния знак (1).

И писмото трябва да бъде завършено малко по-бързо. Следователно маркирам всичко преди това (2) и го премествам назад малко (3).

Така времената се падат перфектно.

Анимация лесно направена: Анимация на линии

Стъпка 22

Ние направихме писмото върху текста и в момента ще направим още няколко промени.

Първо дублирам слоя "Typo_Statisch" и премахвам ефекта на Писане-.

Анимацията се прави лесно: чертожна анимация

Стъпка 23

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

В долния слой имаме обикновения бял текст.

Ако изберем опцията Рисуване с прозрачност в горния слой, ще останат само червените черти.

Анимацията лесно се прави: анимация на линии

Стъпка 24

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

Ако маската не се покаже, просто щракнете в долната част на Активиране/Деактивиране на режими на превключване, за да се покаже маската Движеща маска BewMas.

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

Анимацията става лесно: анимация на линията



Всъщност нещо се обърка, защото веднага в началото вече е А.

Стъпка 25

И така, най-добре избираме всички Четки от долу нагоре с Правоъгълно-маркиране (1), но после избираме само двата кадъра на удивителния знак с Shift+маркиране (2). Двете вече са перфектно позиционирани по време.

След това преместваме първия кадър надолу малко надясно, така че A все още не е видимо в началото.

Сега перфектно.

Анимацията е лесна: анимация с линии

Стъпка 26

Ние направихме това в подкомпозиция, тук все още имаме ефекта Турбулентно разхлабване.

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

Анимацията е лесна: анимация с линии.

Стъпка 27

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

Анимация лесно направена: Анимация на чертица



Така че първите 4 секунди от трейлъра са готови и отново ще се срещнем в следващата част на урока, заедно с Bouncing Ball.