1 of 49

Тло анімації. Керування кольором

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

Урок 12

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

teach-inf.com.ua

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

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

2 of 49

Тло анімації. Керування кольором

В анімації з прикладу кидання м’яча нерухомі трикутник і прямокутник з’являються лише на початку руху «м’яча», а потім зникають. Їх слід перенести на особливий шар – тло.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

3 of 49

Тло анімації. Керування кольором

Розгляньмо, як можна задати або змінити кольори об’єктів анімації.

TupiTube підтримує кілька видів тла зі списку режимів модуля Анімація, які можна використовувати одночасно.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

4 of 49

Керування кольорами об’єктів

Змінити кольори штриха та заповнення векторних об’єктів, доданих до сцени, можна на панелі Колірна палітра.

кнопка відкриття панелі Колірна палітра

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

5 of 49

Керування кольорами об’єктів

зразок кольору заповнення

зразок кольору тла

список палітр

поточна палітра

основні кольори

зразок кольору штриха

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

6 of 49

Керування кольорами об’єктів

кнопка для обміну кольорів

кнопки для скидання кольорів до початкових значень

коди кольорів

«піпетки» для взяття кольорів із робочого поля

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

7 of 49

Керування кольорами об’єктів

Рівень прозорості (0 – повна прозорість, 255 – повна непрозорість) задають регулятором Щільність.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

8 of 49

Керування кольорами об’єктів

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

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

9 of 49

Керування кольорами об’єктів

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

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

10 of 49

Керування кольорами об’єктів

Якщо на панелі Колірна палітра клацнути зразок кольору штриха, а потім об’єкти, їхні штрихи набуватимуть вибраного кольору.

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

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

11 of 49

Векторне тло

Векторне тло дає змогу малювати векторні об'єкти інструментами TupiTube. Ці інструменти подібні до інструментів відомого вам векторного графічного редактора Inkscape.

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

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

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

12 of 49

Векторне тло

Перенесемо нерухомі об’єкти на статичне векторне тло:

  1. переконаємося, що активним є кадр 1 (на розкривній панелі на вкладці Сцена 1 у стовпці Шар 1 клацнемо його позначку);

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

13 of 49

Векторне тло

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

  1. інструментом Вибір об'єкта виберемо трикутник і прямокутник (два об’єкти разом можна вибрати їх клацанням з утримуванням клавіші Ctrl або перетягуванням);

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

14 of 49

Векторне тло

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

  1. виріжемо вибрані об’єкти, викликавши на них контекстне меню і вибравши команду Вирізати (або сполучення клавіш Ctrl + X);

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

15 of 49

Векторне тло

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

  1. перейдемо в режим статичного векторного тла і вставимо об’єкти командою контекстного меню Вставити (або сполучення клавіш Ctrl+V);

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

16 of 49

Векторне тло

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

  1. натисканням клавіш зі стрілками пересунемо об’єкти, якщо це потрібно.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

17 of 49

Векторне тло

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

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

18 of 49

Векторне тло

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

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

19 of 49

Векторне тло

Щоб додати до анімації рухоме тло з векторними об’єктами, слід увімкнути режим динамічного векторного тла і побудувати потрібний малюнок.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

20 of 49

Векторне тло

Елементами керування, що з’явилися над робочим полем, можна задати:

напрям руху

величину зміщення тла на 1 кадр

щільність (поле ; 0 – повністю прозоре,

1 – повністю непрозоре)

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

21 of 49

Векторне тло

Створимо тло для зимової анімації з зображенням нерухомого снігового покриву та рухомих хмар. Для цього:

  1. розпочнемо новий проєкт зі світло-синім кольором тла;

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

22 of 49

Векторне тло

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

виберемо світло-сірий колір для штриха й заповнення;

  1. на статичному векторному тлі інструментом Олівець намалюємо замкнену криву, що зображає сніговий покрив;

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

23 of 49

Векторне тло

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

  1. перейдемо в режим динамічного векторного тла і намалюємо у верхній частині кадру інструментом Еліпс декілька фігур – хмар;

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

24 of 49

Векторне тло

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

  1. задамо значення параметрів: напрям руху – праворуч; зміщення – 5; щільність – 1.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

25 of 49

Векторне тло

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

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

26 of 49

Векторне тло

Додаймо до анімації кадри (зважаючи, що частота кадрів 24 кадри/с): прокрутімо донизу список кадрів на панелі Розкадрування і клацнімо прямокутник навпроти номера 100 — тепер проєкт має 100 кадрів.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

27 of 49

Векторне тло

Тепер у модулі Перегляд видно анімацію тривалістю приблизно 4 с (оскільки 100:24≈4).

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

28 of 49

Векторне тло

Рухоме тло дозволяє створити ілюзію руху інших об’єктів. Наприклад, внаслідок руху тла із зображенням дороги здається, що рухається (насправді, нерухоме) зображення автомобіля.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

29 of 49

Растрове тло

У режимах статичного й динамічного растрового тла відкривається вікно, в лівій часині якого розташована панель Властивості пензля.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

30 of 49

Растрове тло

Кнопки з назвами наборів пензлів угорі панелі

відкривають відповідні набори, з яких можна вибрати потрібний пензель.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

31 of 49

Растрове тло

Додамо до попереднього проєкту зображення сонця. Для цього:

  1. перейдемо в режим статичного растрового тла;

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

32 of 49

Растрове тло

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

  1. виберемо з набору Класичний пензель pointy-ink;

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

33 of 49

Растрове тло

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

  1. кнопкою на лівій панелі відкриємо панель Колірна палітра і встановимо для штриха жовтий колір – тепер на статичному растровому тлі можна намалювати сонце

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

34 of 49

Растрове тло

Щоб унесені зміни додати до проєкту та повернутися в головне вікно, слід вибрати команду меню Файл Вийти з растрового режиму (або натиснути Ctrl + Q).

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

35 of 49

Динамічне растрове тло

Робота в режимі динамічного растрового тла не відрізняється від роботи зі статичним растровим тлом. Над робочим полем у цьому режимі (як і в режимі динамічного векторного тла) з’являється поле для введення величини зміщення тла на

1 кадр.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

36 of 49

Динамічне растрове тло

Додамо до проєкту рухоме зображення клаптів снігу. Для цього:

  1. перейдемо в режим динамічного растрового тла;

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

37 of 49

Динамічне растрове тло

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

  1. встановимо на панелі Колірна палітра світло-сірий колір штриха;

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

38 of 49

Динамічне растрове тло

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

  1. виберемо на панелі Властивості пензля з набору Класичний пензель dry-brush;

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

39 of 49

Динамічне растрове тло

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

  1. намалюємо в різних місцях полотна короткі штрихи;
  1. задамо для зміщення значення 1;
  1. виберемо команду Файл Вийти з растрового режиму

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

40 of 49

Динамічне растрове тло

Переглянемо результат: небом пливуть хмари і падає сніг.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

41 of 49

Упорядкування шарів тла

Одночасно використовуючи різні види тла, можна досягти цікавих ефектів.

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

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

42 of 49

Упорядкування шарів тла

Тут можна змінити розташування різних шарів тла відносно глядача / глядачки.

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

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

43 of 49

Упорядкування шарів тла

Кнопкою Перемістити режим угору вибраний шар переміщують у списку вгору (тобто від глядача)

Кнопкою Перемістити режим униз вибраний шар переміщують у списку униз (тобто до глядача).

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

44 of 49

Упорядкування шарів тла

Кнопки Видимість режиму перемикає видимість відповідного шару.

Щоб підтвердити зміни в налаштуваннях, необхідно натиснути кнопку Застосувати.

Кнопкою Скасувати вікно закривається без внесення змін до проєкту.

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

45 of 49

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

  1. Чому в анімації з попереднього параграфа нерухомі об’єкти зникають?
  1. Які види тла підтримує TupiTube?
  1. У чому різниця між статичним і динамічним тлом?
  1. У чому різниця між векторним і растровим тлом?
  1. Як збільшити швидкість руху динамічного тла?
  1. Як приховати один із шарів тла?

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

46 of 49

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

«Ребуси українською» © rebus1.com

Тло

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

47 of 49

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

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

с. 57-63

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

48 of 49

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

Сторінка

63

© Вивчаємо інформатику teach-inf.com.ua

Розділ 2

§ 10

49 of 49

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

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

Урок 12

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

teach-inf.com.ua

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

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