Створення анімації форми tween shape. Електронна школа macromedia flash mx ii курс: основи створення анімації в macromedia flash mx модуль iii: анімація типу shape, озвучування анімації. Проект “Перетворення прямокутника на букву”

Практична робота №1

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

Створіть анімацію форми для цифри "1", що плавно трансформується у цифру "2". Для цього створіть анімацію форми для об'єкта на першому та останньому кадрах. Як об'єкти використовуйте цифри, налаштуйте їх зовнішній вигляд(Розмір, колір, положення, скориставшись набором властивостей на відповідній панелі).

Для створення анімації форми текстового об'єкта на першому та останньому ключових кадрах цифри необхідно "розбити" - перетворити з тексту на графіку. Це робиться таким чином – до виділеного об'єкта застосовується команда поділу (режим меню "Модифікація" - "Розділити").

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

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

Для цього виконаємо такі дії (використовуючи анімацію попередньої роботи):

Приклади створення анімації форми наведено в папці "Анімація" - "Анімація форми".

Короткі підсумки лекції:

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

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

Для покращення реалістичності перетворення одного об'єкта на інший необхідно вказати – в яку точку об'єкта на останньому кадрі "перетіче" обрана точка об'єкта на першому кадрі. Для цього використовують точки прив'язки (хінти кривої).

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

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

• Анімація форми
• Розбиття тексту
• Хінт кривий

Набір для практики:

• Для яких об'єктів можливе створення класичної форми анімації?
• Чи можна змінювати колір анімованого об'єкта під час створення анімації форми?
• Призначення точок прив'язки (хінтів кривої) під час створення анімації форми?
• Що розуміється під графічним поданнямтекстового об'єкту?
• Чи застосовується анімація форми до текстового об'єкта? Які перетворення для цього потрібно провести з текстовим блоком?

Вправи

• Створіть анімацію диму.
• Створити анімацію руху та зміни форми хмари в небі.
• Створіть анімацію зміни форми язика полум'я.
• Створіть анімацію полотна прапора, що розвівається на вітрі.

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

Якщо до цього ви ніколи не займалися шейповою анімацією, зараз - саме час!

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

Animação Feliz de Shapes com Textos

Sequence Animation – Adobe After Effects Tutorial

Shape Layer Repeater (radial) – Adobe After Effects tutorial

Tutorial – Quick tips 03 – 2D Circles & Dashed stroke

Animating infographic scene Episode 1 After Effects

Earth Hour Tutorial After effects

Робимо анімовані патерни, використовуючи Shape Layers Repeater в After Effects

Summit 1.2 – Intro to Motion Graphics – After Effects

Як імпортувати та анімувати векторний файл у After Effects

Ознайомлення з Ancor Point. Анімація долонь

Як створити шестерні?

Шейповий перехід Radial Wipe

Прямий та зворотний відлік у Adobe After Effects

Робота зі скриптом Lines Creator

Кола – наше все! Урок 1. Створюємо інтро

Кола – наше все! Урок 2. Закільцюємо шейпи

Кола – наше все! Урок 3. Підбір квітів у Adobe Kuler

Кола – наше все! Урок 4. Робота з Dashes

Ефект кіл, що розтікаються

Анімація шейпів

Створення простого шейпового відео

Створення шейпової анімованої іконки

Створення простого шейпового інтро

Ефектна шейпова анімація смартфона

Приголомшлива шейпова анімація

Створення простого шейпового морфінгу

Шейпи! Робимо анімовані патерни, використовуючи Shape Layers Repeater

Стильна шейпова анімація

Як зробити шейповий анімований банер

Урок 25: Анімація форми

Цілі уроку:

формувати вміння створювати анімацію форми;

розвивати культуру мови, зосередженість; розвивати пізнавальну та розумову діяльність учнів, логічне та алгоритмічне мислення;

виховувати самостійність, етику взаємин.

Тип уроку : урок засвоєння нових знань та умінь

Програмне та методичне забезпеченняуроку : редактор Flash, § 20 підручника, роздатковий матеріал.

План уроку:

Організаційний момент

Перевірка знань попереднього уроку.

Пояснення нового матеріалу.

Закріплення матеріалу.

Підбиття підсумків та рефлексія.

Дерево науки всім корінням сягає в практику.

А.Н.Несміянов

Хід уроку

Організаційний момент

Здрастуйте, хлопці!Перш ніж розпочати наш урок, я пропоную пройти невеликий тест на настрій. У мене ось таке гарний настрій(Смайлик на слайді 1 ). А зараз ви покажіть усім, яке у вас (для цього сядьте за комп'ютери та у Flash намалюйте свій настрій). Молодці! Збережіть ваш настрій. Мені дуже хотілося б, щоб до кінця або до кінця нашого уроку у всіх був гарний настрій.

Актуалізація знань

Фронтальна розмова з учнями з питань.

Хлопці, чим ми з вами займаємося вже протягом кількох уроків? (Вчимося створювати анімацію)

Яку анімацію ми навчилися створювати? У чому їхня різниця?

Чи завжди об'єкти рухаються прямою?

Наведіть приклади прямолінійного руху.

Як змінити назву шару?

Як вставити ключовий кадр?

Як імпортувати зображення до бібліотеки?

Як відкрити вікно бібліотеки?

Яка клавіша перетворює об'єкт на бібліотечний символ?

Яку анімацію ми створювали на минулому уроці?

Тепер, давайте згадаємо алгоритм створення анімації руху. Для цього розділимось на дві групи, кожна група отримує етапи (по одному на листочках). Ваше завдання: вишикуватися в порядку слідування дій.

Алгоритм створення анімації руху.

Намалювати або вставити об'єкт у 1 кадрі.

Перетворити об'єкт на бібліотечний символ (F8) або згрупувати.

Виділити на шкалі часу останній кадр анімації. Натиснути F6.

В останньому кадрі анімації змінити перенести об'єкт на нове місце.

Натиснути праву кнопку миші: Створити рух

Вивчення нового матеріалу (метод проблемного викладу)

Як ви вважаєте, чи є обмеження можливостей анімації руху?

Проблема: як можна анімувати перетворення одного об'єкта на інший (наприклад, яблуко на грушу).

Отже, тема нашого уроку –Анімація форми . Сформулюємо цілі та завдання нашого сьогоднішнього уроку.

Анімація форми (Shape Tween)дозволяє, як відомо з назви, анімувати зміна контуру зображення. Для її створення не потрібно, як під час створення Motion Tween, перетворювати малюнки на кліпи. Достатньо:

створити малюнок, який потрібно анімувати;

виділити кадр з малюнком клацанням лівою кнопкою миші по ньому та на панелі Properties (Властивості) у списку Tween вибрати тип Shape;

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

Анімація форми неприйнятнадо бібліотечних об'єктів типу символ та згрупованих об'єктів.

Анімація форми дозволяє:

• плавно трансформувати одну фігуру на іншу;

  плавно змінювати колір фігури;

  переміщати фігуру;

  комбінувати перелічені можливості.

Показати учням створення анімації форми з прикладу (відеоролик).

Алгоритм створення анімації форми.

Намалювати об'єкт у 1 кадрі.

Виділити на шкалі часу останній кадр анімації.

Натиснути F6.

В останньому кадрі анімації можна змінити форму об'єкта або намалювати новий об'єкт.

Виділити будь-який проміжний кадр.

На панелі Властивості Твін (Закрутка) вибрати: Форма (Shape) (Фігур)

Ctrl+Enter – переглянути анімацію.

Формування практичних умінь учнів (репродуктивний метод, індивідуальна формароботи)

Виконати завдання 1, 2, 3 на стор. 100-101 з робочого зошита. Додаткове завдання 4 (будь-яке) стор. 103.

Підбиття підсумків та рефлексія

Фронтальне опитування. Результати опитування повинні прояснити, які моменти викликають складнощі у учнів.

Запитання для опитування.

1. Що розуміють під анімацією форми?

2. Перерахуйте етапи створення анімації форми.

3. До яких об'єктів не застосовується анімація форми?

4. З яким настроєм ви йдете з уроку?

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

Дякую за урок!!!

Минулого уроку ми ознайомили вас з автоматичною анімацією руху (Motion Tween), а тепер продовжимо розмову про автоматичну анімацію та розглянемо автоматичну анімацію формозміни (Shape Tween). Слід зазначити, що термін Shape Tween у різних виданнях перекладають по-різному, зокрема, зустрічається назва «анімація заповнення кадрів зі зміною форми». Втім, точно перевести це поєднання дуже складно, оскільки tween – це скорочення від між (між). Таким чином, мається на увазі, щоданий вид

Слід зазначити, що анімацію формозміни можна застосувати лише до фігур, але не можна застосовувати ні до груп, ні до екземплярів, ні до растрових зображень. Щоб застосувати до цих об'єктів анімацію формозміни, їх необхідно спочатку розбити (break apart) на складові. Щоб розібратися у принципах створення автоматичної анімації формозміни, розглянемопростий приклад

, в якому яблуко буде перетворюватися на грушу. Намалюйте замкнутий контур із заливкою у формі яблука, як показано на рис. 1.

Мал. 1. Контур із радіальною заливкою Потім натисніть на ім'я шару намальованого об'єкта (вданому випадку

Ім'я шару за умовчанням прийнято Layer 1) - шар стане виділеним (мал. 2), а внизу в панелі Properties з'явиться віконце Tween, в якому потрібно вибрати пункт Shape.

Мал. 2. У меню Tween слід вибрати пункт Shape

Тепер додамо кінцевий кадр – нехай формозміна відбуватиметься за 30 кадрів. Вставте ключовий кадр у 30-й кадр і помістіть замкнутий контур у формі груші (рис. 3). Зверніть увагу, що в нашому прикладі початковий та останній кадр відрізняються не лише формою контуру, а й кольором заливки.

Мал. 3. Помістимо результуючу форму у 30-й кадр

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

Мал. 4. У вікні Ease задається режим прискорення/сповільнення анімації

Аналогічно тому, як це реалізовано в автоматичній анімації руху, автоматичної анімації формозміни можливе завдання анімації з уповільненням або прискоренням. Продемонструємо цю можливість на прикладі. Виділіть шар і натисніть на трикутник поруч із віконцем Ease (мал. 4), внаслідок чого з'явиться повзунок, який дозволяє встановити режим прискорення/уповільнення.

Щоб рух прискорився, необхідно ввести від'ємне число від –1 до –100, а для уповільнення процесу перетворення введіть позитивне число від 1 до 100. Задамо параметр Easing, наприклад, рівний +100, і отримаємо наступний фільм .

Використання хінтів в анімації форми

У попередньому параграфі ми вивчали процес анімації формозміни, коли яблуко перетворюється на грушу. Логічним був би процес морфінгу, при якому гілочка переходить у гілочку, а плід у плід, а програма генерує проміжні кадри перетворення, «нічого не знаючи» про будову яблук і груш. Тому, якщо ми хочемо зберегти деяку логіку морфінгу, необхідно вказати програмі, які області мають наслідувати. З цією метою в програмі Flashвикористовуються так звані хінти (shape hints) контрольні маркери, за допомогою яких можна керувати процесом формозміни. Хінтами відзначаються точки, які повинні переходити самі в себе в початковій та кінцевій фігурах. Хінти позначаються літерами (від "a" до "z").

Розглянемо як можна вдосконалити нашу анімацію за допомогою хінтів.

Виділимо перший ключовий кадр і виконаємо команду Modify => Shape => Add Shape Hint, в результаті виконання якої на фігурі з'явиться початковий хінт у вигляді червоного кружка з літерою "а". Пересунемо хінт у верхню точку гілочки (рис. 6).

Мал. 6. Процес установки хінту

Мал. 7. В останньому кадрі встановіть точку, в яку повинен переходити хінт

Перейдіть на останній ключовий кадр і виявите, що всередині контуру результуючої фігури з'явиться кінцевий хінт у вигляді зеленого кружка з літерою «a». Пересуньте хінт у точку, яка має відповідати першій зазначеній точці (рис. 7). Після того, як ви виставите на криву хінт в останньому кадрі, у першому кадрі хінт поміняє свій колір (з червоного на жовтий) - це означає, що встановлено відповідність між хінтами. Повторіть цей процес, додаючи нові хіти (рис. 8). Для отриманнянайкращих результатів

слід розміщувати хінти проти годинникової стрілки, починаючи з верхнього лівого кута фігури.

Мал. 8. Положення хінтів у результуючій фігурі

Мал. 29. Створення мувікліпу «гілка»

Оскільки нашим завданням є побудова анімованого дерева, яке, у свою чергу, складається з гілок, перетворимо створену нами гілку на мувікліп, виконавши команду Modify => Convert to symbol (рис. 29). Тепер можна із сукупності кліпів «гілка» побудувати дерево (рис. 30). Як видно із рис. 30, кліп «гілка» багаторазово застосовується з різними трансформаціями (поворот, дзеркальне відображення та масштабування).

Мал. 30. На основі мувікліпів «гілка» будується дерево

Дублювати символ можна і за допомогою його екземпляра. Продемонструємо це на тому ж прикладі. Виділимо екземпляр символу Symbol 1 на сцені та виконаємо команду Modify => Symbol => Duplicate Symbol (рис. 42).

Мал. 42. Дублювання символу на основі екземпляра

Мал. 43. Панель Duplicate Symbol

Після цього з'явиться ще один символ – Symbol1 copy 2 (рис. 43). Двічі клацніть на ім'я нового символу у вікні бібліотеки, що викличе вікно редагування нового символу. Поміняємо положення аркуша в останньому кадрі, перейдемо до основної сцени та додамо кілька екземплярів нового символу. В результаті ми отримаємо остаточну версію

Опис:

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

Обладнання та дидактичний матеріал:ПЕОМ, програма Flash, мультимедійний проектор, демонстраційний матеріал, електронна презентація, завдання.

Структура та хід уроку:

1. Організаційний момент.Перевірка учнів та його готовності до уроку.
2. Перевірка домашнього завдання

   Що таке анімація? Які види анімації ви знаєте, їх переваги та недоліки? Як виконується анімація руху?
   Минулого уроку ми познайомилися з анімацією руху. Сьогодні продовжимо вивчення анімації. Запишіть тему уроку: Створення анімації форми у Flash.

3. Цілепокладання.Формулюються цілі уроку

   (Демонструється файл – Створення анімації форми у програмі Flash.ppt –слайд 1).

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

   Анімація форми із заповненням першого та останнього ключового кадру Shape tweening.
   Заповнення кадрів із зміною форми використовується для трансформації мальованих фігур між початковими та кінцевими точками. Flash може виконати операцію заповнення кадрів зі зміною форми лише фігур. На одному шарі можна виконати заповнення кадрів для кількох фігур. Але для чіткої організації потрібно, щоб кожна фігура знаходилася на окремому шарі, якщо ви згодом повернетеся до цього анімаційного фрагменту, щоб внести певні зміни, то робота спроститься. (Демонструється файл слайд 2). Учні ведуть короткий конспект. (Далі всі операції відображаються на екрані за допомогою мультимедійного проектора.)
   Для створення розрахункової анімації форми необхідно виконати такі действия:
   1. Намалювати об'єкт у ключовому кадрі.
   2. Перебуваючи у першому кадрі, використовувати панель « Кадр», вибрати пункт Shapeзмінити ослаблення.
   3. Вказати кінцевий кадр та включити команду чистий ключовий кадрЦе можна зробити, клацнувши правою клавішею миші на кадрі, який і буде ключовим, з'явиться список, в якому і вибрати чистий ключовий кадр. У ньому розташувати зображення, потім програти анімацію. Для цього вибрати пункт меню Управління команда « Відтворення» або натиснути клавішу Enterна клавіатурі. Після цього анімація буде відтворюватися.
   Після того як у вас є два ключові кадри, ви робите активним перший з них (просто переходите на нього) і вибираєте на панелі « Кадр" в списку Tweeningрядок Shape:
   

   Кадри на тимчасовій шкалі повинні забарвитися в зелений колір і від першого кадру до другого повинна простягтися стрілочка.
   В результаті ви отримаєте ряд проміжних кадрів, які відображатимуть перехід від першої фігури до другої. (Демонструється файл – Створення анімації руху у програмі Flash.ppt –слайд 3):

   

   У цій анімації коло переходить у якусь подобу півмісяця. На першому ключовому кадрі намальовано коло, а на другому ключовому кадрі (це 10 кадр сцени) півмісяць. У панелі « Кадр» є два параметри Easing(Прискорення) та Blend(Перехід)

   

   Easing(Прискорення) задає зворотне експонентне прискорення. Розмір цього параметра може змінюватися від - 100 до + 100. Це означає, що якщо ви поставите негативний easing(прискорення), швидкість збільшуватиметься (Див. рис. 4). І навпаки, якщо easing(прискорення) буде позитивним, анімація сповільнюватиметься (див. рис. 5).

   

   Параметр Blend(Перехід) , визначає алгоритм переходу: Distributive(розподільний, загальний) та Angular(незграбний). Перший намагається максимально пом'якшити, згладити перехід від однієї фігури до іншої. Другий намагається зберегти пропорції кутів. Якщо перехід вас не задовольняє, можна експериментувати з цим параметром.

5. Закріплення пройденого матеріалу.

   (Демонструється файл – Створення анімації руху у програмі Flash.ppt –слайд 4).
   Створення анімації форми: "Нічна квітка"

   
6. Підбиття підсумків уроку.
   Діти, пропоную вам переглянути роботи один одного. Зверніть увагу на переваги та недоліки різних анімацій. Окремі анімації демонструються всім за допомогою проектора. Обговорюються позитивні моменти, помилки, недоліки, якщо є.
   Повторимо основні моменти уроку.
   З якою програмою ми сьогодні продовжили знайомство? Як створити анімацію форми? Яке розширення файлу анімації? Чи сподобалися вам можливості програми та де ви могли б їх використати?
   Аналіз відповідей учнів; аргументація та виставлення оцінок.
7. Домашнє завдання:конспект; продумати та підготувати матеріал для власної анімації

Список використаної літератури

1. Macromedia Flash 5/ Книга + Відеокурс: Навчальний посібник- М.: Кращі книги. За редакцією В.Б. Ком'ягіна.
2. Flash 8. Просто як 2х2. А.А. Борисенко
3. ІНТЕРНЕТ: www.flashblog.ru; www.adobe.com