Растрова та векторна анімації. Формати файлів комп'ютерної анімації.

Растрова та векторна анімації. Формати файлів комп'ютерної анімації.

Мета:

Освітня:

• познайомити з різними видами анімації;

• повторити і закріпити навички роботи з основними інструментами анімації в PowerPoint;

• навчити застосовувати різні прийоми ефектів для створення анімації за сюжетом.

Розвиваюча:

• розвивати пізнавальний інтерес, творчу активність учнів;

• розвивати навички роботи на комп'ютері, розвивати дружнє і ділове спілкування учнів у спільній роботі.

Виховна:

• виховувати інтерес до предмету, акуратність, уважність, дисциплінованість, вміння працювати в команді.

ХІД УРОКУ:

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

ІІ. Перевірка знань за допомогою тестів вправи на сайті  https://learningapps.org/3862549

Розгадування кросворду « Анімація»  https://learningapps.org/2316503

ІІІ. Постановка мети уроку

- Приступимо до вивчення нового матеріалу. Учні разом з вчителем виводять тему уроку за допомогою хмаринки слів.

ІV. Новий матеріал.

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

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

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

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

Растрова анімація

Особливості растрової анімації:

• можливість задання величини затримки появи кожного кадру;
• можливість задання кількості повторень послідовності кадрів;
• збільшення кількості кадрів у часовому проміжку анімації збільшує розмір файла

Векторна анімація

Flash-анімація як приклад векторної анімації

Особливості векторної анімації:

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

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

· растрові формати – призначені для зберігання растрових даних;

· векторні формати – призначені для зберігання векторних даних;

· метафайлові формати – можуть зберігати як растрові, так і векторні дані;

· формати сцени – містять додатково інструкції, що дозволяють програмі візуалізації відновити зображення цілком;

· формати анімації – прості дозволяють відображати зображення в циклі одне за іншим, а більш складні зберігають початкове зображення та різниці між двома зображеннями, які послідовно відображаються;

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

· тривимірні формати – містять опис форми і кольору об’ємних моделей.

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

Формат GIF (розширення імені файлу .GIF). GIF є растровим форматом і розроблявся для мереж з низькими швидкостями передачі даних. Він став першим графічним форматом, що підтримується Web. Анімаційні файли GIF дозволяють в одному файлі зберігати декілька зображень, які відтворюються послідовно. Його показують всі браузери. У нього є прозорий шар, тобто під картинкою буде видно фон, на якому вона лежить. Для анімації зберігає серію повноцінних картинок. Це мінус. Файл з 24 кадрами буде в 24 рази більше вихідного статичного. GIF показує тільки 256 кольорів.

APNG формат

Цей формат (Animated PNG) є розширенням поширеного формату PNG. Однак розробники останнього не включили це розширення в специфікацію. Вийшло, що мало хто програми можуть його правильно відображати. Більшість браузерів покаже перший кадр статичної картинкою, а про анімацію забуде.

WEBP формат

Цей формат з'явився в 2010 році. Розробник, компанія Google, позиціонує його як заміну GIF і інших форматів. WEBP має всі можливості GIF, але тільки в поліпшеному варіанті:

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

Формат підтримується ще не скрізь.

BPG формат

BPG - найновіший. Він був запропонований в кінці 2014 року. Формат позиціонується як заміна JPEG зі значними поліпшеннями. Стиснення зображення буде ефективніше, ніж у предка. З'явиться підтримка анімації (JPEG не вміє цього робити). Але формат тільки починає свій розвиток, рекомендувати його для використання ще не можна, а ось стежити за ним можна.

Фліки (розширення імені файлу .FLA; .FLI; .FLC; .FLH; .FLT; .FLZ). Фліки є форматами анімаційнихфайлів. Усідані в цих файлах групуються у фрейми (frame). Фрейм - це один кадр фільму. В основі дельта-стиску, щовикористовується у фліках, лежить ідея зберігати тільки відмінності одного кадру відіншого. Це дозволяє програвати файли навіть на повільних відеоадаптерах, тому що потрібно виводити тільки частину зображення. Самі дані стискаються за схемою RLE. Перший фрейм містить повне зображення, відносно якого і будуються відмінності іншихфреймів.

Сімейство фліків:

.FLI (розмір: до 320 ´ 200; палітра 256 кольорів);

.FLC (розмір: будь-який; палітра 256 кольорів);

.FLH (розмір: будь-який; колір: 15 біт на точку 5-5-5

розмір: будь-який; колір: 16 біт на точку 5-6-5);

.FLT (розмір: будь-який; колір: 24 біта на точку);

.FLZ (розмір: будь-який; колір: будь-який; замість RLE-компресії використовується LZW- компресія, як у ZIP).

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

На жаль, не існує універсального формату, який можнабуло б рекомендувати на всі випадки життя.

GIF-анімація - це послідовність растрових графічних зображень (кадрів). Весь набір кадрів зберігається в одному растровому графічному файлі в форматі GIF.

Використовується 2 види програмного забезпечення.

Створення набору кадрів можна виконувати в будь-якому растровому редакторі, наприклад, MS Paint, який входить в стандартний пакет ОС MS Windows. Можна використовувати і векторний графічний редактор.

Перетворення цього набору кадрів в GIF-анімацію - в спеціальному графічному редакторі Конструкторі анімацій:

GIMP - безкоштовна

PivotStickfigureAnimator - безкоштовна (https://pivotanimator.net/)

Stykz - безкоштовна (http://www.stykz.net/)

Synfig - безкоштовна (http://synfig.org)

Можна використовувати online-сервіси, розташовані в мережі Інтернет:

https://gifius.ru/

http://gifovina.ru/

https://ru.toolson.net/

Ці сервіси безкоштовні і не вимагають реєстрації.

V. Практична робота: Створення GIF-анімації

 Мета роботи: навчитися створювати кадри для анімації за допомогою програми MS Paint

 навчитися створювати GIF-анімацію з послідовності кадрів за допомогою online-сервісу Гіффовіна.

Хід роботи:

1. Створіть у папці свого класу в своїй особистій папці папку Анімація.

За допомогою Головного меню (Кнопка Пуск на панелі завдань) запустіть програму MS Paint.

Встановіть розміри малюнка 150 × 150 точок. Намалюйте перший кадр анімації і збережіть файл у папці Анімація в форматі PNG під ім'ям Кадр1.

Створіть копію цього файлу і внесіть зміни в зображення. Збережіть другий кадр під ім'ям Кадр2.png.  Створіть таким же чином ще 2 файли: Кадр3.png і Кадр4.png. Закрийте програму MS Paint.

2. Запустіть програму веб-браузер через Головне меню або за допомогою ярлика на Робочому столі або на панелі завдань.Для запуску online-сервісу введіть в адресному рядку браузера адресу http://gifovina.ru/ і натисніть клавішу Enter. Натисніть кнопку Додати кадри з комп'ютера (В лівому верхньому кутку вікна).  Знайдіть свою папку Анімація і виберіть (вкажіть) все створені вами кадри для анімації (Кадр1.png, Кадр2.png, Кадр3.png, Кадр4.png). Кадри можна додавати по одному або відразу всією групою. Встановіть розмір анімації 150 × 150.  Визначте кадрів 0,3 сек (переміщенням бігунка або написати).Ефекти не додаємо! Натисніть кнопку Готово.

В вікні Результат можна побачити отриману анімацію. Якщо результат вас влаштовує, то натисніть кнопку Завантажити і збережіть отриманий файл в свою папку Анімація. Для редагування анімації закрийте вікно Результат і змініть ті параметри, які вам не сподобалися: швидкість (тривалість кадрів), розмір, кількість кадрів.

 Відкрийте отриманий файл за допомогою браузера.

 Покажіть результат своєї роботи вчителя, після чого закрийте вікна всіх програм і папок.

VІ. Рефлексія і виставлення оцінок

Учитель задає питання:

Учитель перевіряє анімації учнів і переглядає записи в зошитах.

Виставляння оцінок.

7. Домашнє завдання

Повторити інформацію про кодування. Створити анімацію з 4-8 кадрів за допомогою online-сервісу https://ru.toolson.net/ (працює без реєстрації).