Практическа работа „Създаване на анимация на фигура във Flash“ Методическо помагало „Учим се да създаваме анимация в уроците по информатика. Илюстриран урок за анимация за Интернет Основни видове действия

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

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

Създайте нов документ, посочете необходимите параметри (размер, цвят на фона, честота на кадрите). В моя пример размерът е 200x200, цветът на фона е бял, честотата на кадрите е 12.

Веднага показваме, че анимацията на формата ще се проведе в първия кадър: в раздела Свойства, в падащия списък Tween изберете Анимация на формата. В първия кадър, използвайки Text Tool, бутон T, изписваме числото 1. Първо, за да го улесните, изберете безсерифен шрифт, Arial, Tahoma, Verdana. След това отидете на 30-ия кадър, натиснете F6, т.е. създайте ключов кадър и редактирайте нашия номер 1, променете го на номер 2.

Тук има и тънък момент, ако просто изтриете числото 1 и напишете числото 2, тогава трябва да зададете координатите на числото 2 като числото 1, така че анимацията да създаде ефекта на превръщането на числата в един друг. Ако продължите да създавате числото 3, 4, 5 и по-нататък, тогава, съответно, координатите на всички числа трябва да бъдат еднакви. Приключихме с писането на числата, сега те трябва да бъдат превърнати в графични обекти.

Изберете всяка цифра на свой ред и извикайте контекстното меню с десния бутон на мишката, изберете елемента Break Apart, можете също да натиснете клавишната комбинация ctrl + B или да изберете елемента Break Apart от менюто Modify, което е по-удобно за вас. Превърнахме числата в графични обекти.

Сега можете да възпроизведете получената анимация, като използвате клавишната комбинация ctrl + Enter или просто като плъзнете плъзгача по времевата линия. Но нашата анимация не е много красива, преобразуването на числата от едно в друго е малко "тромаво". Да подобрим ситуацията. За това Flash има подсказка за форма - това са ключовите точки на обекта, използван в анимацията.

Те могат да бъдат вмъкнати чрез извикване на менюто Modify - Shape - Add Shape Hint или чрез клавишната комбинация ctrl + shift + H. Точките се вмъкват като малки червени кръгове с букви в центъра. Именуват се по азбучен ред: a, b, c, d и т.н. Те се вмъкват по подразбиране в центъра на обекта. Колкото повече точки зададете, толкова по-гладка ще получите анимацията. Като щракнете върху точка с десния бутон на мишката, можете да добавите нова точка - Добавяне на намек, премахване на допълнителна точка - Премахване на подсказка и изтриване на всички точки - Премахване на всички подсказки.

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

Значението на точките е следното: поставяте точка a на някое място на първия обект, отивате на втория обект и също така задавате точка a на правилното място. По време на анимацията тези точки ще се "преливат" една в друга. Ако всичко е направено правилно, точката на първия обект ще стане жълта, а на втория зелена. Екранната снимка показва разположението според мен. Правим същата операция за 2-ри, 3-ти обект и т.н. Ще има много точки, внимавайте да не се объркате.

Всъщност, ако всичко е направено правилно, тогава пускаме получената анимация с помощта на клавишите ctrl + Enter или просто плъзгаме плъзгача по времевата линия и се наслаждаваме на резултата. Можете да го използвате навсякъде и по всякакъв начин, само запомнете - работи само с графични обекти. Източникът и полученият swf файл са прикачени.

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

Ако никога преди не сте правили анимация на фигури, сега е моментът!

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

Animação Feliz de Shapes com Textos

Анимация на последователност - урок за Adobe After Effects

Повторител на слоя на форми (радиален) - урок за Adobe After Effects

Урок - Бързи съвети 03 - 2D кръгове и пунктирана черта

Анимационна инфографична сцена, епизод 1 After Effects

Урок за след ефекти за Часа на Земята

Създаване на анимирани шаблони с помощта на повторител на слоеве на фигури в After Effects

Summit 1.2 – Въведение в Motion Graphics – After Effects

Как да импортирате и анимирате векторен файл в After Effects

Запознаване с Ancor Point. Анимация на палми

Как да създам зъбни колела?

Преход във формата на радиално изтриване

Отброяване и обратно отброяване в Adobe After Effects

Работа със скрипта Lines Creator

Кръговете са нашето всичко! Урок 1. Създайте въведение

Кръговете са нашето всичко! Урок 2. Обратни фигури

Кръговете са нашето всичко! Урок 3. Съвпадение на цветовете в Adobe Kuler

Кръговете са нашето всичко! Урок 4. Работа с тирета

Ефект на плаващи кръгове

Анимиране на форми

Създаване на видео с проста форма

Създаване на оформена анимирана икона

Създаване на въведение с проста форма

Ефектна анимация на формата на смартфон

Зашеметяваща анимация на формата

Създаване на проста форма на морф

Форми! Създаване на анимирани шаблони с помощта на повторител на слоеве на фигури

Стилна анимация на формата

Как да направите оформен анимиран банер

Практическа работа No1

Практическа работа №2:

Анимирайте формата на числото "1", плавно превръщайки се в числото "2". За да направите това, анимирайте обекта в първия и последния кадър. Използвайте числата като обекти, персонализирайте ги външен вид(размер, цвят, позиция, като се използва набор от свойства на съответния панел).

За да създадете анимация на формата на текстов обект в първия и последния ключов кадър, числата трябва да бъдат "разделени" - преобразувани от текст в графика. Това става по този начин - командата split се прилага към избрания обект (режим на менюто "Модификация" - "Разделяне").

Практическа работа №3:

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

За да направите това, ще извършим следните действия (използвайки анимацията на предишната работа):

Примери за създаване на анимация на фигура са дадени в папката "Анимация" - "Анимация на фигура".

Кратко резюме на лекцията:

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

За да анимирате формата на текстов обект в първия и последния ключов кадър, текстът трябва да бъде „разделен“, като се преобразува в графика.

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

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

Ключови термини

• Анимация на формата
• Разделяне на текст
• Подсказка за крива

Комплект за упражнения:

• За кои обекти е възможно да се създаде класическа форма на туининг?
• Възможно ли е да промените цвета на анимиран обект при създаване на анимация на фигура?
• Задаване на опорни точки (подсказки за крива) при създаване на атракцион на фигура?
• Какво се разбира под графично представяне на текстов обект?
• Приложимо ли е заобикалянето на формата към текстов обект? Какви трансформации трябва да направите с текстовия блок за това?

Упражнения

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

• Изчислена анимация от типа Shape
• Звукови формати
• Звукова анимация

Изчислена анимация от типа Shape

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

Когато използвате този тип анимация, трябва да запомните, че Flash ще работи само с графични примитиви (линии и запълвания) и не може да анимира групи, символи, блокове от текст или растерни изображения. За да продължите да използвате тези елементи в работата си, ще трябва да ги разбиете на части (примитиви) с помощта на командата Modify> Break Apart.

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

В първия кадър на видеоклипа използвайте инструмента Овал в горната част на сцената, за да нарисувате кръг. След това отидете на рамка 20 и я направете ключ. В долната част на сцената, в рамка 20, нарисувайте квадрат с инструмента Rectangle и изтрийте кръга, като го изберете с инструмента Arrow. Квадратът, който рисувате, трябва да е по-голям от кръга. Изберете сами цветовете на кръга и квадрата; можете да зададете фигурите на една и съща вертикала с помощта на палитрата Информация.

След като изиграете всички тези моменти, върнете се към 1 кадър и, като се позовавате на палитрата Properties, в секцията Tween, задайте стойността на Shape. Забележете, че пространството на слоя в палитрата Timeline между кадри 1 и 20 е запълнено със светла салатна боя и от кадър 1 до 20 се разтяга стрелка. Ако вместо стрелка в палитрата има пунктирана линия, това означава, че сте направили нещо нередно, например, не сте използвали графични примитиви в работата си, а група или символи ...

Тествайте филма си, като използвате командата Control> Test Movie.

Експериментирайте с палитрата Timeline. Можете да контролирате характера на движението, като използвате раздела Лекота, който вече ви е познат от материала на предишната лекция, както и да определите характера на начина на трансформация на формата в процеса на нейната метаморфоза. За да направите това, ще трябва да се обърнете към раздела Смесете(преход), тук ще ви бъдат предложени две опции:

Разпределителен(размазана) - Очертанията на линиите и запълванията в междинните рамки ще бъдат изгладени.

Ъглова (ъглова)- очертанията на линиите и запълванията в междинните рамки ще запазят очевидни ъгли и прави линии.

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

бележки:
В тази работа честотата на кадрите е 24 кадъра в секунда!

Анимацията е придружена от звук. За да накарам многократното му повторение да не изглежда като агресивна звукова атака, при публикуване нарочно махнах отметката от квадратчето в секцията Loop на раздела HTML. Това беше направено, за да може браузърът да пусне видеото само веднъж! Ако искате да гледате видеоклипа отново, използвайте лентата с инструменти на браузъра и опреснете страницата. И за в бъдеще използването на звукови хапки във вашите видеоклипове трябва да се приема много сериозно.

Първо: звукът "тежи" много. Второ: ако не можете да контролирате звука програмно, тоест не предоставяте на потребителя възможност да изключи или включи звука по всяко време, тогава изобщо не трябва да го използвате в зациклени видеоклипове, например в рекламни банери. Въпреки това, анимацията и някои интерактивни елементи са просто немислими без звук. Ето защо, в рамките на тази лекция, ще се спрем на това по-подробно, но засега, моля, имайте предвид, че за звуковия фрагмент е избран отделен слой в палитрата Timeline.

В това видео има още един слой - фон (долен слой), на този слой има статични елементи - декорации.

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

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

Точките за закрепване са обозначени на изображението с малки кръгове с букви. Писма (от апреди z) се използват като имена (идентификатори) на опорни точки. Всяка точка на закрепване на изходното изображение трябва да съответства на точка със същото име на полученото изображение. Общо за една фигура могат да се използват не повече от 26 точки за закрепване (според броя на буквите от азбуката). Точките за закрепване на оригиналното изображение са оцветени в жълто, на полученото изображение са оцветени в зелено.

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

• Щракнете с левия бутон на мишката в рамката, съответстваща на оригиналното изображение.
• Обърнете се към менюто Промяна> Форма> Добавяне на намек за форма(modify> shape> add anchor point) в резултат на това на сцената във вашата рамка ще се появи "празно" от първата точка на закрепване - червен кръг с буква а.
• Преместете го с мишката с помощта на инструмента стрелка с активиран модификатор Snap to Objects до точката в изображението, която искате да маркирате като котва.
• Щракнете с левия бутон върху рамката, съответстваща на полученото изображение; на сцената също ще има червен кръг със същата буква като в оригиналната рамка.
• Преместете кръга до точката на изображението, която трябва да съответства на тази, отбелязана в оригиналната рамка, след като преместите кръгът ще промени цвета си на зелен.
• Върнете се към първия кадър и се уверете, че цветът на точката на закрепване се променя на жълт.

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

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

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

Добавете намек(добавяне на точка за закрепване) - когато командата се изпълни, на сцената се появява празно място за нова опорна точка. Премахване на намек(изтриване на точка на закрепване) - точката на закрепване, върху която сте щракнали с десния бутон, за да отворите менюто, ще бъде изтрита.
Премахване на всички съвети(изтриване на всички опорни точки) - изтрива всички опорни точки.
Покажи съвети(покажи опорни точки) - този режим се използва по подразбиране (има отметка до името на командата). Ако го изберете отново, опорните точки ще станат невидими. Тази опция трябва да се използва само след постигане на желания резултат, тъй като за да се върнете към режима на показване на опорни точки, ще трябва отново да отидете в менюто Modify> Shape> Add Shape Hint.

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

Звукови формати

Звукът е еластични вълни, които се разпространяват в газове, течности и твърди тела и се възприемат от ухото на хората и животните. Човек чува звук с честоти от 16 Hz до 20 kHz. Звук с честоти до 16 Hz се нарича инфразвук, 2 · 10 4 - 10 9 Hz - ултразвук, а 10 9 - 10 13 Hz - хиперзвук. В процеса на цифровизиране на звука се записват всички негови вълнови характеристики. Този запис се нарича импулсно-кодова модулация и представлява последователен запис на дискретни стойности. Капацитетът на устройството, изчислен в битове, показва колко стойности едновременно в един записан дискретен фрагмент се приема звукът. Колкото по-висока е битовата дълбочина, толкова повече звукът съответства на оригинала. Всеки звуков файл може да се разглежда като база данни. Той има собствена структура, чиито параметри обикновено са посочени в началото на файла. След това идва структуриран списък със стойности за конкретни полета. Понякога вместо стойности има формули за намаляване на размера на файла.

Нека разгледаме по-отблизо форматите за аудио данни, които най-често ще използваме при презапис на видеоклипове в Macromedia Flash.

WAV (форма на вълната)- дискретен формат за съхранение и предаване на аудио сигнали в цифров вид, характеризиращ се с висока степен на качество и, за съжаление, невероятен размер. Форматът wav може да съхранява стерео или моно файлове с бит за семплиране от 8 или 16 бита. В допълнение към обичайните дискретни стойности, битност, брой канали и стойности на нивото на силата на звука, много повече параметри могат да бъдат посочени в wav: позиционни знаци за синхронизация, общият брой дискретни стойности, ред на възпроизвеждане на различни части от звука файл, а има и място, където можете да поставите, има текстова информация.

MP3 (MPEG Layer3)- Форматът за поточно предаване за съхранение и предаване на аудио в цифрова форма е много компактен. Използва се главно за аудио в реално време по мрежови канали и за кодиране на CD аудио. Терминът "стрийминг" означава, че предаването на данни се осъществява като поток от независими отделни блокове данни - кадри. За това оригиналният сигнал по време на кодиране се разделя на секции с еднаква продължителност, наречени кадри и кодирани отделно. При декодиране сигналът се формира от поредица от декодирани кадри. Битрейтът при кодиране на сигнал, подобен на CD Audio (44.1kHz 16Bit Stereo) показва общото количество на потока - количеството информация, предавана за единица време. Тази стойност варира от 320 kbs (320 килобита в секунда, известни също като kbs, kbps или kb / s), до 96 kbs и по-ниски.

Звукова анимация

За да добавите звук към филма си, изпълнете следните стъпки:

Импортирайте един или повече звукови файлове във формат wav или mp3 във вашия филм. За да направите това, отидете в менюто Файл> Импортиране. Файловете автоматично ще бъдат поставени в библиотеката на вашия филм като символи. Отворете библиотеката с филми с помощта на менюто Window> Library и я проверете.

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

Отидете до първия кадър на звуковия слой и се обърнете към секцията палитра Properties Звук(звук). Ако вашата библиотека съдържа няколко звукови фрагмента, тогава с помощта на падащия списък на този раздел можете по всяко време да замените звука, който сте избрали с друг. В долната част на палитрата можете да видите оригиналните параметри на звуковия фрагмент: честотна лента, моно / стерео, битова дълбочина, продължителност, заето място в паметта.

Падащо меню Синхронизиране(синхронизиране) изберете начин за синхронизиране на звука:

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

Започнете(старт) - този метод се различава от предишния по това, че при следващо възникване на дадено събитие започва да се възпроизвежда нов екземпляр на звук, дори ако възпроизвеждането на предишния все още не е приключило.

Спри се(стоп) - Посоченият звук спира да се възпроизвежда.

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

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

Можете да зададете звукови ефекти, които влияят на силата на звука. Предварително подготвените настройки се избират от падащия списък Ефект(ефектът):

Нито един- няма ефекти, този елемент трябва да бъде избран, ако не харесвате ефектите, които сте избрали.

Ляв канал- стартира звук само в левия канал.
Десен канал- стартира звук само в десния канал.
Избледняване отляво надясно- плавен преход на звука между каналите отляво надясно.
Избледняване отдясно наляво- плавен преход на звука между каналите от дясно наляво.
Избледнява- постепенно увеличаване на амплитудата на звука.
Отминава- постепенно намаляване на амплитудата на звука.

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

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

Други контроли са само за удобство. Така че можете да промените мащаба на времевата ос, като използвате бутоните Увеличаване и Намаляване. Можете да промените начина, по който се показва времевата линия, като използвате бутоните Секунди(секунди) и Рамки(рамки).

Ако нямате собствена звукова библиотека, можете да използвате библиотеката Macromedia Flash, като отидете на Window> Common Libraries> Sounds.

Звукозапис и корекция

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

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

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

В тези програми звукът се представя графично под формата на вълна. Ето защо тук можем с хирургическа прецизност да отрежем частите, от които не се нуждаем. Добавете различни ефекти, например "A la Masyanya", превърнете женския глас в мъжки и като цяло мечтайте за ваше удоволствие.

Домашна работа: Основна анимация в Macromedia Flash MX

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

Второ, да създадете видео, което ви позволява да илюстрирате прекрасните редове от стихотворение на Сергей Александрович Йесенин:

А, и аз самият съм в често звънене
Вчера видях в мъглата:
Червено месечно жребче
Впрегнати в нашата шейна...

Общо: имате четири файла във формат fla (ако общият размер на файла надвишава 150 Kb, моля, опаковайте файловете в архив) и ги изпратете на учителя.

Пожелавам ви успех в самостоятелното изучаване на Macromedia Flash MX!