Тло анімації. Керування кольором
Нова українська школа
Урок 12
Інформатика 7
teach-inf.com.ua
за підручником
Бондаренко О.О. та ін.
Тло анімації. Керування кольором
В анімації з прикладу кидання м’яча нерухомі трикутник і прямокутник з’являються лише на початку руху «м’яча», а потім зникають. Їх слід перенести на особливий шар – тло.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Тло анімації. Керування кольором
Розгляньмо, як можна задати або змінити кольори об’єктів анімації.
TupiTube підтримує кілька видів тла зі списку режимів модуля Анімація, які можна використовувати одночасно.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Керування кольорами об’єктів
Змінити кольори штриха та заповнення векторних об’єктів, доданих до сцени, можна на панелі Колірна палітра.
кнопка відкриття панелі Колірна палітра
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Керування кольорами об’єктів
зразок кольору заповнення
зразок кольору тла
список палітр
поточна палітра
основні кольори
зразок кольору штриха
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Керування кольорами об’єктів
кнопка для обміну кольорів
кнопки для скидання кольорів до початкових значень
коди кольорів
«піпетки» для взяття кольорів із робочого поля
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Керування кольорами об’єктів
Рівень прозорості (0 – повна прозорість, 255 – повна непрозорість) задають регулятором Щільність.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Керування кольорами об’єктів
Зорієнтуватися, які саме кольори штриха й заповнення вибрано, можна за їх зразками, наведеними в рядку стану модуля Анімація.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Керування кольорами об’єктів
Змінити кольори об’єктів, які додано раніше, допоможе інструмент Заповнення.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Керування кольорами об’єктів
Якщо на панелі Колірна палітра клацнути зразок кольору штриха, а потім об’єкти, їхні штрихи набуватимуть вибраного кольору.
Якщо клацнути зразок кольору заповнення, то інструмент впливатиме на колір заповнення об’єктів.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Векторне тло дає змогу малювати векторні об'єкти інструментами TupiTube. Ці інструменти подібні до інструментів відомого вам векторного графічного редактора Inkscape.
Статичне тло – зображення на тлі, яке упродовж перегляду анімації залишається нерухомим.
На статичному тлі розміщують зображення пейзажу чи інтер'єру, де відбувається дія анімаційного фільму, а також окремі об’єкти, які мають залишатися нерухомими.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Перенесемо нерухомі об’єкти на статичне векторне тло:
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Перейшовши в модуль Програвач, побачимо, що тепер трикутник і прямокутник розташовані на нерухомому (статичному) тлі і не зникають протягом перегляду всієї анімації.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Динамічне тло – зображення на тлі, яке під час перегляду анімації прокручується в певному напрямку.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Щоб додати до анімації рухоме тло з векторними об’єктами, слід увімкнути режим динамічного векторного тла і побудувати потрібний малюнок.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Елементами керування, що з’явилися над робочим полем, можна задати:
напрям руху
величину зміщення тла на 1 кадр
щільність (поле ; 0 – повністю прозоре,
1 – повністю непрозоре)
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Створимо тло для зимової анімації з зображенням нерухомого снігового покриву та рухомих хмар. Для цього:
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Продовження…
виберемо світло-сірий колір для штриха й заповнення;
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Наша анімація має один кадр, тому в модулі Перегляд побачимо нерухому картинку.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Додаймо до анімації кадри (зважаючи, що частота кадрів 24 кадри/с): прокрутімо донизу список кадрів на панелі Розкадрування і клацнімо прямокутник навпроти номера 100 — тепер проєкт має 100 кадрів.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Тепер у модулі Перегляд видно анімацію тривалістю приблизно 4 с (оскільки 100:24≈4).
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Векторне тло
Рухоме тло дозволяє створити ілюзію руху інших об’єктів. Наприклад, внаслідок руху тла із зображенням дороги здається, що рухається (насправді, нерухоме) зображення автомобіля.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Растрове тло
У режимах статичного й динамічного растрового тла відкривається вікно, в лівій часині якого розташована панель Властивості пензля.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Растрове тло
Кнопки з назвами наборів пензлів угорі панелі
відкривають відповідні набори, з яких можна вибрати потрібний пензель.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Растрове тло
Додамо до попереднього проєкту зображення сонця. Для цього:
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Растрове тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Растрове тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Растрове тло
Щоб унесені зміни додати до проєкту та повернутися в головне вікно, слід вибрати команду меню Файл ⇒ Вийти з растрового режиму (або натиснути Ctrl + Q).
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Динамічне растрове тло
Робота в режимі динамічного растрового тла не відрізняється від роботи зі статичним растровим тлом. Над робочим полем у цьому режимі (як і в режимі динамічного векторного тла) з’являється поле для введення величини зміщення тла на
1 кадр.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Динамічне растрове тло
Додамо до проєкту рухоме зображення клаптів снігу. Для цього:
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Динамічне растрове тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Динамічне растрове тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Динамічне растрове тло
Продовження…
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Динамічне растрове тло
Переглянемо результат: небом пливуть хмари і падає сніг.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Упорядкування шарів тла
Одночасно використовуючи різні види тла, можна досягти цікавих ефектів.
Кнопкою поряд зі списком режимів модуля Анімація відкривається вікно для задання параметрів режимів.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Упорядкування шарів тла
Тут можна змінити розташування різних шарів тла відносно глядача / глядачки.
Перший у списку шар розміщується найдалі від глядача, а кожен наступний – ближче.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Упорядкування шарів тла
Кнопкою Перемістити режим угору вибраний шар переміщують у списку вгору (тобто від глядача)
Кнопкою Перемістити режим униз вибраний шар переміщують у списку униз (тобто до глядача).
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Упорядкування шарів тла
Кнопки Видимість режиму перемикає видимість відповідного шару.
Щоб підтвердити зміни в налаштуваннях, необхідно натиснути кнопку Застосувати.
Кнопкою Скасувати вікно закривається без внесення змін до проєкту.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Питання для самоперевірки
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Розгадайте ребус
«Ребуси українською» © rebus1.com
Тло
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Домашнє завдання
Проаналізувати
с. 57-63
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Працюємо за комп’ютером
Сторінка
63
© Вивчаємо інформатику teach-inf.com.ua
Розділ 2
§ 10
Дякую за увагу!
Нова українська школа
Урок 12
Інформатика 7
teach-inf.com.ua
за підручником
Бондаренко О.О. та ін.