Розробка уроку — практичної роботи

Тема: створення коротких анімаційних фільмів у середовищі GIMP.

Мета: навчити учнів створювати анімаційні фільми у середовищі GIMP.

Обладнання: комп’ютер з установленими ОС і GIMP.

Структура уроку
  1. Організаційний момент.
  2. Актуалізація опорних знань.
  3. Вивчення нового матеріалу.
  4. Інструктаж з ТБ.
  5. Закріплення вивченого матеріалу.
  6. Підбиття підсумків уроку.
  7. Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань

  1. Які інструменти розташовано на Панелі інструментів GIMP?
  2. Яким чином змінюють властивості інструментів?
  3. Як створити новий шар у середовищі GIMP?
  4. Як змінити видимість шару в середовищі GIMP?
  5. У яких форматах передбачено збереження зображень у середовищі GIMP?

3. Вивчення нового матеріалу

Мотивація навчання
Анімовані зображення привертають увагу до презентацій чи web-cторінок. Тому вміння створювати хоча б нетривалі анімаційні фільми істотно підвищує компетентність спеціаліста з інформаційних технологій.

Розглянемо процес створення анімованих зображень у середовищі GIMP. Для створення нового документу (зображення) скористаємося вказівкою меню Файл / Створити... або натиснемо клавіші Ctrl + N.

Зверніть увагу: вибираємо саме Створити... з трьома крапками. Отримаємо вікно діалогу Створення нового зображення. У цьому вікні натискаємо кнопку Гаразд, підтверджуючи прийнятність для нас запропонованих величин параметрів зображення. Інакше перед натисканням кнопки Гаразд ці величини потрібно змінити.

У програмному вікні помітимо прямокутник (білого кольору) для створеного зображення.

Зазвичай ліворуч від програмного вікна розташована Панель інструментів.

Зазвичай праворуч від програмного вікна розташована панель Шари, Канали, Контури, Вернути.

Намалюємо золоту рибку:

  1. Вибираємо інструмент Пензель з Панелі інструментів (одним клацанням лівою кнопкою миші).

  2. Вибираємо різновид пензля. Ггодитися маленький кружечок Circle (05) 7×7 з вкладки Пензлі внизу панелі Шари, Канали, Контури, Вернути (одним клацанням лівою кнопкою миші).

  3. На Панелі інструментів натискаємо кнопку вибору зміни кольору переднього плану (клацати по прямокутнику вгорі-ліворуч) для виклику вікна діалогу Зміна кольору переднього плану.









  4. В лінійці кольору виберемо бажаний. У вікні відтінків встановлюємо бажану яскравість і насиченість. Натискаємо кнопку Гаразд вікна діалогу Зміна кольору переднього плану.

  5. Малюємо... змінюємо пензель та колір і малюємо ... поки не отримаємо зображення риби — малюнок у одному шарі з назвою Тло.

Наша мета — змусити рибку плавати, рухатися, тобто змінювати своє положення в просторі. Для цього нам знадобиться велика кількість шарів. Чому? У фільмі кадри змінюють послідовно зі швидкістю 24 кадри на секунду для стрічкового кіно, або 25 (у Європі) чи 30 (у США) — для телебачення. Найменша достатня швидкість, виходячи з фізіологічних особливостей людського зору, становить 8 кадрів на секунду. GIMP для відтворення анімації пропонує як усталено затримку кожного шару (картинки, кадру) 100 мілісекунд. Інакше кажучи, 10 кадрів на секунду. Таким чином, сцена у чотири секунди потребує 40 кадрів — шарів.

Шари бувають кольорові та прозорі. За тло сцени зручно викорстати кольоровий шар. А рухомой персонаж зобразимо у прозорому шарі.

Складемо сценарій.

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

Рухомі об'єкти:

  1. Рибка, рухається від середини праворуч до стінки, розвертається, рухається ліворуч, розвертається, доходить до початкового положення, кінець циклу. Цикл повторюється багаторазово.

  2. Бульбашки повітря, піднімаються з дна постійно.

Використавши вказівку меню Файл / Створити..., створимо новий документ і намалюємо на тлі підводний світ. Для цього зробимо таке:

  1. Вибираємо інструмент Градієнт з Панелі інструментів.

  2. Змінюємо колір переднього плану на синій, натиснувши на Панелі інструментів кнопку вибору зміни кольору переднього плану.

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

  4. Утримуючи ліву кнопку миші, проводимо курсором згори вниз поля малювання, відпускаємо кнопку і одержуємо потрібну градієнтну заливку.

  5. Вибираємо інструмент Пензель з Панелі інструментів (одним клацанням лівою кнопкою миші).

  6. Вибираємо різновид пензля (годитися маленький кружечок Circle (15) 17×17 з вкладки Пензлі внизу панелі Шари, Канали, Контури, Вернути (одне клацання лівою кнопкою миші).

  7. Вибираємо жовтий колір переднього плану, а колір тла рожевий.

  8. Змінюємо властивості Пензля: вибираємо Тремтіння (Ступінь — 3,02) і Використати колір з градієнта (див. малюнок вище).

  9. Проводимо Пензлем у нижній частині вікна малювання.

  10. На панелі Параметри інструментів натискаємо кнопку праворуч від слова Пензель для отримання можливості вибору різновиду пензля.

  11. Змінюємо різновид пензля на Vine (див. вказівник миші на малюнку вище).

  12. Змінюємо властивості Пензля: відмовляємося від Тремтіння й Використати колір з градієнта.

  13. Малюємо водорості.

  14. Використаємо вказівку меню Шар / Створити шар...

    або натискаємо клаввіші Shift + Ctrl + N, щоб викликати вікно діалогу Створення нового шару.

    У цьому вікні вибираємо Прозорість для Типу заповнення шару і натискаємо кнопку Гаразд.

  15. На панелі Шари, Канали, Контури, Вернути закриваємо «око» клацанням по ньому лівою кнопкою миші у шарі Тло та активуємо створений прозорий шар (клацання лівою кнопкою миші по потрібному шару).

    Примітка (щодо закривання-відкривання «очей» і активації шарів). Ми бачимо шар з відкритим оком. Якщо є декілька таких непрозорих шарів, то видно лише верхній. Крізь прозорі шари видно той шар, що є під ним з відкритим «оком». Ми можемо одночасно бачити вміст прозорого верхнього та непрозорого нижнього шарів за умови, що «очі» обох відкриті. Активувати одночасно можна лише один шар. Будь які зміни можна виконувати саме в активованому шарі.

  16. Малюємо рибку у прозорому шарі.

  17. Відкриємо «очі» в обох створених нами шарах, щоб отримати таке зображення.

  18. Для подальшої роботи нам потрібно створити необхідну кількість шарів: 40 для 4 секунд фільму. Шари будемо створювати, дублюючи Тло, а потім почергово у створені однакові шари вкладатимемо рухомий обєкт — рибку, поступово переміщуючи її. Активуємо Тло та використовуємо сполучення клавіш Ctrl + Schift + D 40 разів.

  19. Закриваємо всі «очі».

  20. Вставляємо рибку. Для цього робимо таке.

    1. Активуємо прозорий шар, відкриваємо в ньому «око».

    2. На Панелі інструментів вибираємо інструмент Прямокутне виділення.

    3. Виділяємо рибку й копіюємо її у буфер обміну, натиснувши клавіші Ctrl + C, і закриваємо «око».

    4. Активуємо перший, тобто нижній видимий шар тла, відкриваємо в ньому «око».

    5. Вставляємо виділення, натиснувши клавіші Ctrl + V. Переводимо курсор на середину вставленого об'єкта, натискаємо ліву кнопку миші й пересуваємо об'єкт на потрібне місце. Деактивуємо інструмент Прямокутне виділення. Для цього переводимо курсор за межі вставленого об'єкта та, не рухаючи мишку, клацаємо.

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

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

    7. Після того, як рибка допливла до краю (акваріуму),

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

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









    9. Повертаємося до прозорого шару й за допомогою інструмента Дзеркало розвертаємо рибку в іншу сторону.

    10. Знову копіюємо та вставляємо. Закінчуємо розворот. Не забуваємо в кожному шарі малювати водорость, яку рибка обпливає тепер з іншого боку: спочатку малюємо водорость, потім всталяємо рибку.



    11. Рухаємо із зсувом аж до протилежного краю, після чого розворот за описаною методою. І далі — до положення першого шару, вірніше за один крок до нього. Рух рибки реалізовано повністю.

  21. Використаємо вказівку меню Фільтри / Анімація / Відтворення

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

  22. У прозорому шарі, що залишився, створимо малюнок: декілька повітряних бульбашок, а потім вставимо цей малюнок з вертикальним зсувом послідовно у всі шари.

  23. Використаємо вказівку меню Файл / Зберегти як для виклику вікна діалогу Збереження зображення. У цьому вікні вказуємо назву файлу й теку розташування (за вказівкою вчителя) і натискаємо на хрестик ліворуч від напису Вибрати тип файла (за розширенням).

  24. У переліку типів, що з'явиться, виберемо Зображення GIF і натиснемо кнопку Зберегти.

  25. У вікні діалогу Експорт файлу вибираємо Зберегти як анімацію і натискаємо кнопку Eкспорт.

  26. У вікні діалогу Збереження як GIF вибираємо Нескінченний цикл і натискаємо кнопку Зберегти,

    після чого закриваємо програмне вікно GIMP.

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

4. Інструктаж з ТБ

5. Закріплення вивченого матеріалу
Створити короткий анімаційний фільм «Фізична вправа» (ходьба, присідання, підтягування, стрибки тощо), у якому частини людей подавати схематично фігурами, обмеженими відрізками прямих і дугами кіл.

6. Підбиття підсумків уроку
Виставлення оцінок.

7. Домашнє завдання
Ознайомитися з принципами анімації, розробленими Уолтом Діснеєм (див., наприклад, Рекомендації щодо підготовки до олімпіади з інформаційних технологій у номінації «комп'ютерна анімація»). Використовуючи набуті знання, створити анімаційний фільм, у якому реалізовано якомога більше принципів анімації. Наприклад, на мотив одного з віршів з умови завдань олімпіади 2012 року.


Текст упорядкував Яскевич Олександр Миколайович, учитель cпеціалізованої школи № 271 Подільський району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 29 жовтня до 28 грудня 2012 року.