Илюстриран урок по анимация за Интернет. Електронно училище macromedia flash mx ii курс: основи на създаването на анимация в macromedia flash mx module iii: анимация тип фигура, анимация за точкуване Анимирани форми
Методът за апликиране на форми ви позволява да трансформирате една фигура в друга, променяйки нейния размер, позиция и цвят. Когато създавате анимации на формуляри, имайте предвид, че Flash не може да изпълнява такива анимации върху групи, символи, текстови блокове и растерни изображения.
Анимирането на формата на фигурите ви позволява да създадете ефект на метаморфоза, когато една форма се превръща в друга. За управление на тези промени се използват специални идентификатори на фигури (намеци за фигури), които ви позволяват да създавате сложни промени и да трансформирате отделни части от оригиналната форма в нови. Идентификаторите на фигури маркират отделни точки върху фигура преди и след промяна на формата.
Всеки от тях е обозначен с буква от латинската азбука, което ви позволява да зададете до 26 идентификатора. По този начин можете да създадете промяна в изражението на нарисуваните лица, превръщането на едни животни в други и т.н. За фигури със сложни форми е препоръчително да зададете междинни състояния под формата на допълнителни ключови кадри, които ще позволят вие да контролирате фазите на трансформация. Най-добре е да поставите всички анимирани форми на отделни слоеве, въпреки че можете да анимирате едновременно на слой, съдържащ няколко форми наведнъж.
Ориз. 4.15. Преобразуване на формуляри: автоматично и с помощта на идентификатори
За да приложите анимация с междуформатни фигури към групи, символи, текстови блокове и растерни изображения, те първо трябва да бъдат преобразувани с командата Промяна > Разделяне(Редактиране > Разделяне на части). Тази команда прекъсва връзката между екземпляра и символа, превръщайки екземпляра в колекция от несвързани линии и форми, позволявайки му да бъде променян, без да засяга други екземпляри. Промените в символа в бъдеще също няма да засегнат този екземпляр.
Нека разгледаме последователността от действия при създаване на анимация на формуляр:
- Изберете слоя и върху него празен ключов кадър, от който ще започне анимацията.
- Нека създадем обект за първия кадър от поредицата, като използваме произволен инструмент за рисуване.
- Нека изберем необходимия последен кадър от поредицата и да го превърнем в ключов кадър.
- Ние създаваме нов обектв тази рамка, в която оригиналният обект трябва да бъде преобразуван.
- Да изпълним командата Прозорец > Панели > Рамка(Прозорец > Панели > Рамка), за да отворите панела Кадър(Кадър).
- От падащия списък Туининг(Изчисление) изберете стойността Форма(Формуляр).
- Нека зададем стойността Облекчаване(Гладкост) варира от -100 до 100, определяйки скоростта на промяна във времето. Отрицателните стойности съответстват на бавни промени в началото и бързи промени в края. Положително - бързо в началото и забавяне към края на анимацията. По подразбиране скоростта е постоянна. Корекцията се извършва с помощта на плъзгач, който се отваря с щракване върху стрелката.
- В падащия списък Смесете(Отидете) изберете стойност Разпределителен(Разпределени) - за гладки междинни форми или стойност Ъглова(Остри) - за поддържане на остри ъгли и прави линии в междинни форми. Последната стойност се отнася само за форми, които имат остри ъгли и прави линии, в противен случай стойността автоматично ще бъде зададена на Разпределителен(Разпространено).
Ориз. 4.16. Задаване на опции за анимация на формуляр
За контролиране на сложни трансформации на форми се използват идентификатори на форми (намеци за фигури). Те определят точки, които трябва да съответстват една на друга в началната и крайната форма.
Подсказките за форма, обозначени с буква от азбуката, са представени с жълто в началния ключов кадър и зелено в крайния ключов кадър. Червеният цвят на идентификатора означава, че той не се намира на кривата и не може да участва в трансформацията. Има няколко правила, които трябва да следвате, когато използвате идентификатори на формуляри:
- Идентификаторите се поставят върху фигурата в определена последователност, например обратно на часовниковата стрелка, започвайки от горния ляв ъгъл на обекта.
- Редът на идентификаторите трябва да се запази както в началната позиция на формата, така и в крайната позиция, така че логическата им последователност да не се нарушава (например, ако има abc на първия ключов кадър, не трябва да има на следващия acb).
- За фигури със сложна форма се създават допълнителни ключови кадри, които определят етапите на състоянието на фигурата, с изчисляване на междинни кадри между тях.
Ориз. 4.17. Промяна на цвета на идентификаторите, когато са поставени правилно
За да използвате идентификатори на формуляри, направете следното:
- Изберете първия ключов кадър в последователността и изпълнете командата Модифициране > Трансформиране > Добавяне на подсказка за фигура(Редактиране > Трансформиране > Добавяне на ID). Първият червен идентификатор с буква вътре ще се появи на обекта.
- Идентификаторът се премества до точката от очертанията на фигурата, която искат да маркират.
- Избира се последният ключов кадър от поредицата, на който червеният идентификатор се задава на точката от контура на фигурата, до която трябва да премине началният, а идентификаторът променя цвета си на зелен.
- Прегледайте филма, за да се уверите, че формата се променя по желания начин. В противен случай преместете идентификатора, за да настроите фино промяната на формата.
- Повторете процеса, като добавите нови идентификатори ( b, cи т.н.).
Ако идентификаторите на формуляра не се показват на екрана, изпълнете командата Изглед > Показване на съвети за фигури(Преглед > Показване на идентификатори на фигури), който е наличен, ако избраният слой и ключов кадър съдържат идентификатори на фигури.
Използването на идентификатори на формуляри ви позволява не само да анимирате формуляра, но и да създавате допълнителни ефекти като ротация.
Допълнителен идентификатор на формуляр, поставен върху фигура, може да бъде премахнат, като щракнете с десния бутон върху него и изберете командата от контекстното меню Премахване на съвета(Премахване на ID). Това трябва да се направи на първия ключов кадър от поредицата. За да премахнете всички идентификатори на формуляри, просто изпълнете командата Модифициране > Трансформиране > Премахване на всички съвети(Редактиране > Трансформиране > Премахване на всички идентификатори).
Както беше отбелязано, когато Flash създава анимация на формата, той не може да я изчисли за групи, символи, текстови блокове и растерни изображения. В тези случаи трябва да използвате анимация стъпка по стъпка (кадър по кадър), което значително увеличава размера на крайния файл, но дава поле за въображение и ви позволява да извършвате всякакви трансформации, като използвате последователност от изображения.
Ориз. 4.18. Пример за анимация кадър по кадър с помощта на чертежи
Практическа работа № 2:
Създайте анимация на фигура за числото "1", което постепенно се трансформира в числото "2". За да направите това, създайте анимация на формата за обекта на първия и последния кадър. Използвайте числата като обекти, персонализирайте ги външен вид(размер, цвят, позиция, използване на набор от свойства на съответния панел).
За да създадете анимация на формата на текстов обект на първия и последния ключови кадър, числата трябва да бъдат „разделени“ - преобразувани от текст в графика. Това става по следния начин - командата split се прилага към избрания обект (режим на менюто "Модификация" - "Разделяне").
Практическа работа № 3:
Получената анимация в предишната задача може да не ни подхожда поради „грозното“ „преливане“ на обектни точки на първия кадър в определени обектни точки на последния кадър. За да се подобри реализма на трансформирането на един обект в друг, е необходимо да се посочи към коя точка от обекта в последния кадър ще „тече“ избраната точка от обекта в първия кадър.
За да направите това, изпълнете следните стъпки (използвайки анимацията от предишната работа):
Примери за създаване на анимации на форми са дадени в папка "Анимация" - "Анимация на форми".
Кратко резюме на лекцията:
В допълнение към анимация, която променя свойствата на обект (позиция, размер, ротация, прозрачност и т.н.), можете да създадете анимация, при която формата на обекта се променя.
За да анимирате формата на текстов обект на първия и последния ключови кадър, текстът трябва да бъде "разбит" на графики.
За да се подобри реализма на трансформирането на един обект в друг, е необходимо да се посочи към коя точка от обекта в последния кадър ще „тече“ избраната точка от обекта в първия кадър. За да направите това, използвайте опорни точки (намеци за криви).
Ако приложите анимация на фигури към форми с различни цветове, цветът ще се промени по време на трансформацията.
Ключови термини
- Анимация на формата
- Разделяне на текст
- Хинт крива
Комплект за упражнения:
- За кои обекти е възможно да се създаде класическа анимация на формата?
- Възможно ли е да промените цвета на анимиран обект, когато създавате анимация на форма?
- Присвояване на опорни точки (подсказки за криви) при създаване на анимация на форма?
- Какво се има предвид под графично представяне на текстов обект?
- Може ли анимация на формата да се приложи към текстов обект? Какви трансформации трябва да се направят в текстовия блок за това?
Упражнения
- Създайте анимация на дим.
- Анимирайте движението и формата на облак в небето.
- Създайте анимация на пламъка, променящ формата си.
- Създайте анимация на развяващ се от вятъра банер.
В този урок искам да кажа на тези, които започват да учат Flash, как да направят красива анимация на фигури, използвайки числа като пример. Урокът е направен в Macromedia Flash 8.
Да започнем с най-важното - анимацията на формата ще работи само ако работите с графични обекти.
Тези. След като създадете необходимите, в нашия случай текстови, обекти в необходимите ключови кадри, те трябва да бъдат превърнати в графични. И така, да започваме.
Създайте нов документ, задайте необходимите параметри (размер, цвят на фона, честота на кадрите). В моя пример размерът е 200x200, цветът на фона е бял, честотата на кадрите е 12.
Веднага посочваме, че формата ще бъде анимирана в първия кадър: в раздела Свойства, в падащия списък Tween изберете Анимация на фигура. В първия кадър, използвайки Text Tool, бутон T, пишем цифрата 1. За да започнете, за да ви е по-лесно, изберете sans-serif шрифт, Arial, Tahoma, Verdana. След това отидете на 30-ия кадър, натиснете F6, т.е. създайте ключов кадър и редактирайте нашия номер 1, променете го на номер 2.
Тук има и тънък момент, ако просто изтриете номер 1 и напишете номер 2, тогава трябва да зададете координатите на номер 2 да бъдат същите като номер 1, така че анимацията да създаде ефекта на обръщане на числата от едно към друг. Ако по-нататък създадете числото 3, 4, 5 и т.н., тогава съответно координатите на всички числа трябва да са еднакви. Приключихме с писането на числата, сега те трябва да бъдат превърнати в графични обекти.
Избираме всеки номер на свой ред и, като извикате контекстното меню с десния бутон на мишката, изберете елемента Разбиване, можете също да натиснете клавишната комбинация ctrl+B или да изберете елемента Разделяне от менюто Промяна, което от двете е повече удобно за вас. Превърнахме числата в графични обекти.
Сега можете да пуснете получената анимация, като използвате клавишната комбинация ctrl+Enter или просто плъзнете плъзгача по времевата линия. Но нашата анимация не е много красива, преобразуването на числата от едно в друго е някак „тромаво“. Нека подобрим ситуацията. За тази цел Flash има Shape Hint - това са ключовите точки на даден обект, използвани в анимацията.
Те могат да бъдат вмъкнати чрез извикване на менюто Modify – Shape – Add Shape Hint или използване на клавишната комбинация ctrl+shift+H. Точките се вмъкват като малки червени кръгчета с букви в центъра. Наименувани са по азбучен ред: a, b, c, d и т.н. Те се вмъкват по подразбиране в центъра на обекта. Колкото повече точки зададете, толкова по-плавна анимация ще получите. Като щракнете върху точка с десния бутон на мишката, можете да добавите нова точка - Add Hint, да премахнете допълнителна точка - Remove Hint и да изтриете всички точки - Remove All Hint.
Ако сега отидете на втория ключов кадър с номер 2, ще видите точно същите червени точки със същите букви в центъра.
Сега трябва да ги инсталираме. Предлагам моя собствен вариант, но вие можете да го направите по различен начин, защото... Няма окончателни препоръки, вие ги задавате според собственото си усещане и вкус.
Значението на точките е следното: поставяте точка а на някое място от първия обект, отивате до втория обект и също задавате точка а на правилното място. По време на анимацията тези точки ще „преливат“ една в друга. Ако всичко е направено правилно, точката на първия обект ще стане жълта, а на втория зелена. Екранната снимка показва разположението според моите разбирания. Извършваме същата операция за 2-ри, 3-ти обект и т.н. Ще има много точки, внимавайте, не се бъркайте.
Всъщност, ако всичко е направено правилно, тогава възпроизвеждаме получената анимация, като използваме клавишите ctrl+Enter или просто плъзгаме плъзгача по времевата линия и се наслаждаваме на резултата. Можете да го използвате където и както желаете, само помнете – работи само с графични обекти. Изходният и полученият swf файл са прикачени.
Метод за изчисляване на междинни рамки ( форми-tweened) ви позволява да трансформирате една форма в друга, като същевременно променяте нейния размер, позиция и цвят. Когато създавате анимации на формуляри, имайте предвид, че Flash не може да изпълнява такива анимации върху групи, символи, текстови блокове и растерни изображения.
Анимирането на формата на фигурите ви позволява да създадете ефект на метаморфоза, когато една форма се превръща в друга. За да управлявате тези промени, използвайте специални идентификатори на формуляри ( съвети за формата), които ви позволяват да създавате сложни промени и трансформации на отделни части от оригиналната фигура в нови. Идентификаторите на фигури маркират отделни точки върху фигура преди и след промяна на формата. Всеки от тях е обозначен с буква от латинската азбука, което ви позволява да зададете до 26 идентификатора. По този начин можете да създадете промяна в изражението на нарисуваните лица, превръщането на едни животни в други и т.н. За фигури със сложни форми е препоръчително да зададете междинни състояния под формата на допълнителни ключови кадри, които ще позволят вие да контролирате фазите на трансформация. Най-добре е да поставите всички анимирани форми на отделни слоеве, въпреки че можете да анимирате едновременно на слой, който съдържа множество форми.
Ориз. 4.15. Преобразуване на формуляри: автоматично и с помощта на идентификатори
За да приложите анимация на формата ( форми-tweened) към групи, символи, текстови блокове и растерни изображения, те първо трябва да бъдат преобразувани с командата Промяна › Break Apart(Редактиране › Разделяне на части). Тази команда прекъсва връзката между екземпляра и символа, превръщайки екземпляра в колекция от несвързани линии и форми, позволявайки му да бъде променян, без да засяга други екземпляри. Промените в символа в бъдеще също няма да засегнат този екземпляр.
Нека разгледаме последователността от действия при създаване на анимация на формуляр:
- Изберете слоя и върху него празен ключов кадър, от който ще започне анимацията.
- Нека създадем обект за първия кадър от поредицата, като използваме произволен инструмент за рисуване.
- Нека изберем необходимия последен кадър от поредицата и да го превърнем в ключов кадър.
- Създаваме нов обект в този кадър, в който оригиналният обект трябва да бъде преобразуван.
- Да изпълним командата Прозорец › Панели › Рамка(Прозорец › Панели › Рамка), за да отворите панела Кадър(Кадър).
- От падащия списък Туининг(Изчисление) изберете стойността Форма(Формуляр).
- Нека зададем стойността Облекчаване(Гладкост) варира от - 100 до 100, определяйки скоростта на промяна във времето. Отрицателните стойности съответстват на бавни промени в началото и бързи промени в края. Положително - бързо в началото и забавяне към края на анимацията. По подразбиране скоростта е постоянна. Корекцията се извършва с помощта на плъзгач, който се отваря с щракване върху стрелката.
- В падащия списък Смесете(Отидете) изберете стойност Разпределителен(Разпределени) - за гладки междинни форми или стойност Ъглова(Остри) - за поддържане на остри ъгли и прави линии в междинни форми. Последната стойност се отнася само за форми, които имат остри ъгли и прави линии, в противен случай стойността автоматично ще бъде зададена на Разпределителен(Разпространено).
Ориз. 4.16. Задаване на опции за анимация на формуляр
За да контролирате сложни трансформации на формуляри, използвайте идентификатори на формуляри ( съвети за формата). Те определят точки, които трябва да съответстват една на друга в началната и крайната форма.
ID на формуляри ( съвети за формата), обозначени с буква от латинската азбука, са представени с жълто в началния ключов кадър и зелено в крайния ключов кадър. Червеният цвят на идентификатора означава, че той не се намира на кривата и не може да участва в трансформацията. Има няколко правила, които трябва да следвате, когато използвате идентификатори на формуляри:
- Идентификаторите се поставят върху фигурата в определена последователност, например обратно на часовниковата стрелка, започвайки от горния ляв ъгъл на обекта.
- Редът на идентификаторите трябва да се запази както в началната позиция на формата, така и в крайната позиция, така че логическата им последователност да не бъде нарушена (например, ако има abc на първия ключов кадър, не трябва да има acb на следващия ).
- За фигури със сложна форма се създават допълнителни ключови кадри, които определят етапите на състоянието на фигурата, с изчисляване на междинни кадри между тях.
Графиките с фигури са в тенденция през последните няколко години. Голямата му популярност обаче крие усърдната работа по анимирането на всеки елемент в работното пространство.
Ако никога преди не сте правили анимация на фигури, сега е моментът!
Избрахме 30, които ще ви помогнат да овладеете принципа на анимацията на формата и също така ще ви научат как да създавате и експортирате векторни илюстрации, подходящи за по-нататъшна анимация.
Animação Feliz de Shapes com Textos
Последователна анимация – Урок за Adobe After Effects
Shape Layer Repeater (радиален) – урок за Adobe After Effects
Урок – Бързи съвети 03 – 2D кръгове и пунктирана линия
Анимирана инфографична сцена Епизод 1 After Effects
Часът на Земята Урок След ефекти
Създаване на анимирани модели с помощта на повторител на слоеве с форми в After Effects
Summit 1.2 – Въведение в Motion Graphics – After Effects
Как да импортирате и анимирате векторен файл в After Effects
Представяме ви Anchor Point. Анимация на дланта
Как да създадете зъбни колела?
Преход на формата Radial Wipe
Обратно броене и обратно броене в Adobe After Effects
Работа със скрипта Lines Creator
Кръговете са нашето всичко! Урок 1. Създайте интро
Кръговете са нашето всичко! Урок 2. Цикълни форми
Кръговете са нашето всичко! Урок 3. Избор на цветове в Adobe Kuler
Кръговете са нашето всичко! Урок 4. Работа с тире
Ефект на разпръскващ кръг
Анимация на формата
Създаване на видеоклип с проста форма
Създаване на оформена анимирана икона
Създаване на проста интро форма
Ефектна анимация с форма на смартфон
Невероятна анимация на формата
Създаване на проста трансформация на форма
Форми! Създаване на анимирани модели с помощта на Shape Layers Repeater
Стилна анимация на формата
Как да направите анимиран банер с форма
