1 of 44

Інтерфейс редактора двовимірної анімації

Нова українська школа

Урок 11

Інформатика 7

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.

2 of 44

Повторюємо

На уроках інформатики ви вже створювали рухомі зображення – анімацїі.

У середовищі Scratch за допомогою команд руху ви змушували окремі об’єкти рухатися відповідно до задуму. Ви знаєте, що процес просувається швидше, якщо перед цим продумати сценарій анімації, докладно описавши поведінку всіх об’єктів.

Розділ 2

§ 9

3 of 44

Повторюємо

Працюючи в редакторі презентацій, ви додавали анімаційні ефекти до об’єктів, розташованих на слайді. Один об’єкт може мати кілька ефектів:

Шляхи переміщення

Вхід

Виокремлення

Вихід

Анімації в презентаціях запускаються клацанням або виконуються автоматично (почергово чи одночасно).

Розділ 2

§ 9

4 of 44

Повторюємо

Вам стануть у пригоді вміння користуватися інструментами графічного редактора Inkscape.

Розділ 2

§ 9

5 of 44

Запитання

Поясніть, що таке анімація.

Які команди дають змогу рухати об’єкти в Scratch?

Для чого складають сценарій анімаційного фільму?

Як в презентаціях використовують анімаційні ефекти?

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

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

Розділ 2

§ 9

6 of 44

Принцип анімації.�Редактор двовимірної анімації TupiTube

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

Розділ 2

§ 9

7 of 44

Принцип отримання анімаційного ефекту

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

Розділ 2

§ 9

8 of 44

Принцип отримання анімаційного ефекту

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

Вимірюють її в кадрах на секунду (кадр/с; англ. frames per second, fps).

Розділ 2

§ 9

9 of 44

Принцип отримання анімаційного ефекту

У перших фільмах застосовували частоту від 16 до 24 кадрів/с. Останнє значення стандартне для кінотеатрів із 1930-х років. У різних системах телебачення воно становить 24, 25 і 30 кадрів/с. Комп’ютерні програми дають змогу створювати, а обладнання – відтворювати відео з різною частотою кадрів.

Розділ 2

§ 9

10 of 44

Принцип отримання анімаційного ефекту

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

Так, перший український анімаційний фільм «Казка про солом’яного бичка» створив 1927 року в Одесі В. Левандовський. У ньому замість малюнків було використано плоскі маріонетки.

Розділ 2

§ 9

11 of 44

Принцип отримання анімаційного ефекту

Існує низка різних анімаційних програм:

Adobe Animate

Blender

Animation Desk

Animaker

Розділ 2

§ 9

12 of 44

Редактор двовимірної анімації TupiTube

Із розробкою простих анімацій ви ознайомитеся в середовищі вільного редактора двовимірної анімації з відкритим кодом TupiTube.

tupitube.com

Розділ 2

§ 9

13 of 44

Редактор двовимірної анімації TupiTube

Розгляньмо головне вікно програми TupiTube.

Його вигляд залежить від використовувано-го модуля (на рисунку — модуль Анімація).

Розділ 2

§ 9

14 of 44

Редактор двовимірної анімації TupiTube

верхня панель

вкладки модулів

список режимів модуля

рядок меню

панель команд модуля

панель параметрів інструментів

Розділ 2

§ 9

15 of 44

Редактор двовимірної анімації TupiTube

розкривна панель

права панель

лінійки

панель інструментів

робоче поле

ліва панель

рядок стану

нижня панель

Розділ 2

§ 9

16 of 44

Редактор двовимірної анімації TupiTube

Верхня панель містить кнопки команд:

створити новий проєкт

відкрити наявний проєкт

зберегти проєкт

зберегти копію проєкту під іншою назвою

Розділ 2

§ 9

17 of 44

Редактор двовимірної анімації TupiTube

Верхня панель містить кнопки команд:

закрити проєкт

перейти на сайт програми

Розділ 2

§ 9

18 of 44

Редактор двовимірної анімації TupiTube

Як ми вже наголошували, засоби розроблення анімації зібрано в модулі Анімація.

Модуль Програвач дає змогу переглядати створену анімацію в різних режимах.

Розділ 2

§ 9

19 of 44

Створення проєкту

Щоб розпочати розробку проєкту, потрібно запустити програму TupiTube і натиснути кнопку Новий проєкт.

А потім у діалоговому вікні ввести його параметри.

Розділ 2

§ 9

20 of 44

Створення проєкту

Якщо зі списку Профілі вибрати один із варіантів

То буде автоматично заповнено поля для розмірів

(X – ширина,

Y – висота)

І частоти кадрів (кадрів/с).

Розділ 2

§ 9

21 of 44

Створення проєкту

Якщо клацнути прямокутник із написом Тло.

То відкриється діалогове вікно, де можна вибрати колір тла для кадрів анімації.

Розділ 2

§ 9

22 of 44

Створення проєкту

Після підтвердження налаштувань кнопкою відкриється вікно програми з модулем Анімація.

Розділ 2

§ 9

23 of 44

Додавання геометричних фігур

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

Розділ 2

§ 9

24 of 44

Додавання геометричних фігур

Інструменти групи Фігури, список

Яких розкривається кнопкою на панелі інструментів поруч із кнопкою групи

На кнопці групи показано вибраний інструмент.

Розділ 2

§ 9

25 of 44

Додавання геометричних фігур

Щоб побудувати фігуру, слід виконати перетягування в робочому полі.

Розділ 2

§ 9

26 of 44

Додавання геометричних фігур

Побудована фігура має центральний маркер для переміщування

Та зелені кутові маркери для змінення розмірів.

Розділ 2

§ 9

27 of 44

Додавання геометричних фігур

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

Розділ 2

§ 9

28 of 44

Додавання геометричних фігур

Створимо анімацію кидання м’яча. Для цього:

запустимо редактор анімацій і створимо проєкт із профілем 640x480 – 24;

Розділ 2

§ 9

29 of 44

Додавання геометричних фігур

Продовження…

додамо декілька фігур, у нашому випадку – прямокутник, трикутник і еліпс;

Розділ 2

§ 9

30 of 44

Додавання геометричних фігур

Продовження…

виберемо інструмент Анімація переміщення

на панелі параметрів інструментів уведемо назву анімаційного ефекту (наприклад, стрибок)

Розділ 2

§ 9

31 of 44

Додавання геометричних фігур

Продовження…

і натиснемо Створити нову анімацію

з’являться назви режимів подальшої роботи

Розділ 2

§ 9

32 of 44

Додавання геометричних фігур

Продовження…

клацнемо (виберемо) еліпс і перейдемо в режим Задати шлях

Розділ 2

§ 9

33 of 44

Додавання геометричних фігур

Продовження…

побудуємо шлях, яким рухатиметься еліпс, клацнувши над трикутником, а потім праворуч від нього

Розділ 2

§ 9

34 of 44

Додавання геометричних фігур

Продовження…

перетягнемо білі маркери на кінці кожного з відрізків, щоб отримати криву лінію

Розділ 2

§ 9

35 of 44

Додавання геометричних фігур

Продовження…

збережемо анімацію, клацнувши кнопку Зберегти анімацію

Розділ 2

§ 9

36 of 44

Додавання геометричних фігур

Продовження…

перейдемо до модуля Програвач, щоб побачити результат роботи.

Розділ 2

§ 9

37 of 44

Додавання геометричних фігур

Після додання до еліпса анімаційного ефекту можна помітити, що на розкривній панелі на вкладці Сцена 1 у стовпці Шар 1 з’явилися позначки кадрів.

Розділ 2

§ 9

38 of 44

Додавання геометричних фігур

Якщо проєкт не зберегти на початку роботи, то час від часу з’являтиметься вікно з нагадуванням. Зміни, зроблені після збереження проєкту, зберігатимуться автоматично.

Розділ 2

§ 9

39 of 44

Додавання геометричних фігур

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

Розділ 2

§ 9

40 of 44

Питання для самоперевірки

Поясніть принцип отримання анімаційного ефекту.

Що таке частота кадрів?

Яке призначення застосунку TupiTube?

Значення яких параметрів задають при створенні проєкту?

Яке призначення маркерів у об’єктів, побудованих інструментами групи Фігури?

Що потрібно зробити, щоб під час роботи не з’являлося вікно з нагадуванням про збереження проєкту?

Розділ 2

§ 9

41 of 44

Розгадайте ребус

Анімація

Розділ 2

§ 9

42 of 44

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

Проаналізувати

с. 50-56

Розділ 2

§ 9

43 of 44

Працюємо за комп’ютером

Сторінка

56

Розділ 2

§ 9

44 of 44

Дякую за увагу!

Нова українська школа

Урок 11

Інформатика 7

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.