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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вправи

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

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

Слід зазначити, що анімацію формозміни можна застосувати лише до фігур, але не можна застосовувати ні до груп, ні до екземплярів, ні до растрових зображень. Щоб застосувати до цих об'єктів анімацію формозміни, їх необхідно спочатку розбити (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, і отримаємо наступний фільм .

Рис. 5. Меню Blend, що випадає

Зверніть увагу на можливість вибору характеру анімації, яке задається у меню Blend (мал. 5). У даному меню можна вибрати два варіанти - Distributive, при якому проміжні фігури будуть гладкішими, і Angular, при якому фігури будуть незграбними.

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

У попередньому параграфі ми вивчали процес анімації формозміни, у якому яблуко перетворюється на грушу. Логічним був би процес морфінгу, при якому гілочка переходить у гілочку, а плід у плід, а програма генерує проміжні кадри перетворення, «нічого не знаючи» про будову яблук і груш. Тому, якщо ми хочемо зберегти деяку логіку морфінгу, необхідно вказати програмі, які області мають наслідувати. З цією метою у програмі 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. На основі мувікліпів «гілка» будується дерево

Рис. 41. Додавання на сцену екземплярів символу Symbol 1 copy

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

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

Рис. 43. Панель Duplicate Symbol

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

Метод розрахунку проміжних кадрів (shapes-tweened) дозволяє перетворювати одну форму на іншу, змінюючи при цьому її розмір, положення і колір. Під час створення анімації форми слід врахувати, що Flash не може виконати таку анімацію для груп, символів, текстових блоків та растрових зображень.

Анімація форми фігур дозволяє створити ефект метаморфози, коли одна форма перетворюється на іншу. Для управління цими змінами служать спеціальні ідентифікатори форми (shape hints), які дозволяють створювати складні зміни та перетворення окремих частин вихідної фігури на нові. Ідентифікатори форми відзначають окремі точки фігури до та після зміни її форми.

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

Рис. 4.15. Перетворення форми: автоматичне та з використанням ідентифікаторів

Для застосування анімації форми (shapes-tweened) до груп, символів, текстових блоків та растрових зображень їх попередньо слід перетворити командою Modify > Break Apart(Змінити > Розбити на частини). По цій команді розривається зв'язок між екземпляром та символом, перетворюючи екземпляр на набір незв'язаних ліній та фігур, що дозволяє змінювати його, не впливаючи на інші екземпляри. Зміни символу надалі також не впливатимуть на цей екземпляр.

Розглянемо послідовність дій під час створення анімації форми:

1. Виділимо шар та порожній ключовий кадр на ньому, з якого почнеться анімація.
2. Створимо об'єкт для першого кадру послідовності за допомогою будь-якого інструменту малювання.
3. Виділимо необхідний заключний кадр послідовності і перетворимо його на ключовий.
4. Створюємо новий об'єкт у цьому кадрі, якого має бути перетворений вихідний об'єкт.
5. Виконаємо команду Window > Panels > Frame(Вікно > Панелі > Кадр), щоб відкрити панель Frame(кадр).
6. З списку, що розкривається Tweening(Розрахунок) виберемо значення Shape(Форма).
7. Задамо значення Easing(плавність) в діапазоні від -100 до 100, визначаючи швидкість змін у часі. Негативні значення відповідають повільним змінам спочатку та швидким наприкінці. Позитивні - швидким спочатку і сповільнюється до кінця анімації. За замовчуванням швидкість постійна. Регулювання проводиться повзунком, що клацає на стрілці.
8. У списку, що розкривається Blend(Перехід) вибираємо значення Distributive(розподілений) - для гладких проміжних форм або значення Angular(Гострий) - для збереження чітких кутів та прямих ліній у проміжних формах. Останнє значення застосовується тільки до форм, що мають гострі кути та прямі лінії, інакше автоматично буде встановлено значення Distributive(розподілений).

Рис. 4.16. Встановлення параметрів анімації форми

Щоб контролювати складні перетворення форм, використовують ідентифікатори форми (shape hints). Вони визначають точки, які у вихідній та завершальній формах повинні відповідати один одному.

Ідентифікатори форми (shape hints), позначені буквою латинського алфавіту, представлені жовтим кольором у початковому та зеленим кольором у кінцевому ключових кадрах. Червоний колір ідентифікатора означає, що він розташований не на кривій і не може брати участь у трансформації. При використанні ідентифікаторів форми слід дотримуватись кількох правил:

• Ідентифікатори розташовують на фігурі певної послідовності, наприклад проти годинникової стрілки, починаючи з лівого верхнього кута об'єкта.
• Порядок ідентифікаторів повинен зберігатися як у початковому положенні фігури, так і в кінцевому положенні, щоб не порушувалася їхня логічна послідовність (наприклад, якщо на першому ключовому кадрі abc, на наступному не повинно бути acb).
• Для фігур складної форми створюються додаткові ключові кадри, що визначають етапи стану фігури з розрахунком проміжних кадрів між ними.

Рис. 4.17. Зміна кольору ідентифікаторів при правильному розміщенні

Щоб використовувати ідентифікатори форми, виконують такі дії:

1. Виділяють перший ключовий кадр у послідовності та виконують команду Modify > Transform > Add Shape Hint(Змінити > Трансформувати > Додати ідентифікатор). На об'єкті з'явиться перший ідентифікатор з літерою всередині.
2. Ідентифікатор переміщують у точку на контурі фігури, яку хочуть відзначити.
3. Виділяють кінцевий ключовий кадр послідовності, на якому ідентифікатор червоного кольору встановлюють точку на контурі фігури, в яку повинна перейти початкова, при цьому ідентифікатор змінює свій колір на зелений.
4. Виконують перегляд фільму, щоб переконатись, що форма змінюється бажаним чином. В іншому випадку ідентифікатор переміщують для більш точного налаштування зміни форми.
5. Повторюють процес, додаючи нові ідентифікатори ( b, сі т.д.).

Якщо ідентифікатори форми не відображаються на екрані, виконують команду View > Show Shape Hints(Вигляд > Показати ідентифікатори форми), яка доступна, якщо виділений шар та ключовий кадр містять ідентифікатори форми.

Використання ідентифікаторів форми дозволяє не тільки виконувати анімацію форми, але й створювати додаткові ефекти, наприклад, обертання.

Зайвий ідентифікатор форми, розміщений на фігурі, можна видалити, клацнувши по ньому правою кнопкою миші та вибравши з контекстного меню команду Remove Hint(Видалити ідентифікатор). Робити це слід першому ключовому кадрі послідовності. Для видалення всіх ідентифікаторів форми достатньо виконати команду Modify > Transform > Remove All Hints(Змінити > Трансформувати > Видалити всі ідентифікатори).

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

Рис. 4.18. Приклад покадрової анімації з використанням малюнків

Урок 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 (будь-яке) стор.

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

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

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

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

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

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

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

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

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

У цьому уроці я хочу розповісти початківцям вивчати Flash, як зробити красиву анімацію форми на прикладі цифр. Урок зроблено у Macromedia Flash 8.
Почнемо з найголовнішого – анімація форми працюватиме лише в тому випадку, якщо ви оперуєте графічними об'єктами.

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

Створюємо новий документ, вказуємо необхідні параметри (розмір, колір тла, частоту кадрів). У прикладі розмір 200х200, колір фону білий, частота кадрів 12.

Відразу вказуємо, що у першому кадрі відбуватиметься анімація форми: на вкладці Properties, у списку Tween, вибираємо анімацію форми – Shape. У першому кадрі за допомогою інструмента 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 є Shape Hint - це ключові точки об'єкта, що використовуються в анімації.

Їх можна вставити, викликавши меню Modify – Shape – Add Shape Hint або за допомогою комбінації клавіш ctrl+shift+H. Крапки вставляють у вигляді маленьких кружечків червоного кольору з літерами в центрі. Іменуються вони за абеткою: a, b, c, d і т.д. Вставляються вони за замовчуванням до центру об'єкта. Чим більше точок ви встановите, тим плавніша анімація у вас вийде. Натиснувши на точку праву кнопку миші, можна додати нову точку - Add Hint, видалити зайву точку - Remove Hint і видалити всі точки - Remove All Hint.

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

Сенс точок такий: ви встановлюєте точку a в якомусь місці першого об'єкта, переходите в другий об'єкт і так само виставляєте точку a в потрібному місці. При анімації ці точки «перетечуть» одна в одну. Якщо все зроблено правильно, то точка на першому об'єкті стане жовтою, а на другому зеленою. На скріні показано розміщення на мою думку. Ту ж операцію робимо для 2-го, 3-го об'єкта і т.д. Крапок буде багато, акуратно, не заплутайтеся.

Власне якщо все зроблено правильно, то програємо отриману анімацію за допомогою клавіш ctrl+Enter або просто простягнувши бігунок по таймлайн і насолоджуємося результатом. Застосовувати можна де і як завгодно, тільки пам'ятайте – працює лише з графічними об'єктами. Вихідник та результуючий swf-файл додаються.