Урок информатики на тему «Анимация. Создание GIF-анимации» (5–7 классы)

Методическая разработка урока по информатике

«Анимация. Создание GIF-анимации»

Автор: Гапонцева Татьяна Ивановна, учитель информатики и ИКТ.

Учебное заведение: МБОУ Школа №66 г.о.Самара

Предмет: Информатика и ИКТ.

Описание: Разработка урока информатики с получением информационного продукта в виде gif-анимации из 4 кадров, знакомство с технологией анимации, в т.ч. компьютерной, практическая работа в графическом редакторе MS Paint, освоение работы с online-сервисом вида Конструктор анимации. Приложение: 2 варианта анимации и карточка рефлексии.

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

Тип урока:

Урок комплексного применения знаний: выработка умений самостоятельно применять знания в комплексе, в новых условиях.

Форма работы: Фронтальная, индивидуальная, самостоятельная

Методы:

объяснительно-иллюстративный, словесный (беседа), практическая работа.

Применяемые технологии:

ИКТ-технологии, здоровье - сберегающая технология, личностно - ориентированный подход, поиск решения проблемы

Планируемые образовательные результаты:

1. Предметные:

знание особенностей работы в графическом редакторе, умение создавать несложные изображения

конструирование анимации в виде последовательности слайдов;

нахождение достаточного количества ключевых изображений для получения качественного файла с GIF-анимацией;

развитие представлений о компьютере как универсальном устройстве работы с информацией

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

2. Метапредметные:

планирование учащимися путей достижения целей урока на основе самостоятельного анализа условий и средств их достижения;

формирование мыслительных деятельности через анализ, синтез, сравнение, обобщение.

умение применять начальные навыки по использованию компьютера для решения простых информационных учебных задач

установление причинно-следственных связей при создании анимации;

3. Личностные:

формирование и развитие учебно-познавательного интереса учащихся к новому учебному материалу;

формирование потребности к самосовершенствованию в информационных технологиях;

адекватное использование речевых средств для решения различных коммуникативных задач;

адекватное и критическое оценивание учащимися самих себя и одноклассников в учебной деятельности;

Цели урока

Создание условий для:

ознакомления учащихся с online-сервисами сети Интернет вида Конструктор анимаций и создания анимации из набора графических файлов

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

осознания учащимися практической значимости умений создания и редактирования графических изображений и способов использования Буфера обмена

обеспечения развития у учащихся умений планировать свою деятельность, искать и использовать необходимые средства и способы их достижения

осмысления и нахождения способов использования программы MS Paint для создания кадров анимации

содействия развитию умения самостоятельно и аргументировано оценивать свои действия и действия одноклассников, строить логическое рассуждение, включая установление причинно-следственных связей

Задачи урока

Образовательная:

формировать представления о создании анимации и компьютерной gif-анимации

совершенствовать навыки работы с графическим редактором Paint для создания и редактирования изображений;

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

Развивающая:

развивать навыки работы на компьютере,

формировать умение выбирать вид компьютерной графики для определенных целей

развивать познавательный интерес, творческую активность учащихся;

развивать дружеское и деловое общение учащихся в совместной работе.

Воспитательная:

воспитывать интерес к предмету, аккуратность, внимательность, дисциплинированность, умение работать в команде.

Опорные термины:

Растровый графический редактор

Форматы графических файлов

Анимация

GIF-анимация

GIF-файл

Веб-сервисы (online-сервисы)

Технические средства обучения:

компьютеры учителя и учеников,

мультимедиапроектор,

экран

Программное обеспечение и материалы к уроку:

ОС MS Windows,

MS Paint, Браузер, online-сервисы

Файлы с изображением для создания анимации

Задание для практической работы,

Карточка рефлексии.

 

Ход урока

1. Организационный момент (2 мин)

Ученики сидят за партами (компьютерными столами).

Приветствие учащихся.

Проверка наличия отсутствующих в классе.

2. Проверка знаний по теме «Растровая графика» (5 мин)

Сначала мы вместе восхитимся нашими глубокими знаниями о графических изображениях. А для этого проведем маленький устный опрос.

Давайте вспомним, какие виды графических изображений вы уже знаете?

(Растровые и векторные)

Что представляет собой растровое изображение?

(Растровое изображение — изображение, представляющее собой сетку пикселей — цветных точек (обычно прямоугольных) на мониторе, бумаге и других отображающих устройствах)

С помощью какого программного обеспечения редактируют растровую графику?

(Растровую графику редактируют с помощью растровых графических редакторов.)

Какие растровые графические редакторы вы знаете?

(MS Paint, PhotoShop)

Какие форматы растровых графических файлов вы знаете?

(BMP, PNG, JPEG, GIF)

Какой из этих форматов имеет наилучшее качество изображения? Почему?

(BMP) (Используется максимальное количество цветов)

В каком формате обычно сохраняются файлы, полученные на цифровых фотоаппаратах?

(JPEG, jpg)

Почему выбран именно этот формат графических файлов, а не формат BMP?

(Изображение в формате JPEG уменьшается примерно в 8-10 раз за счет сжатия для экономии памяти фотоаппарата)

Какой вы знаете недостаток у формата JPEG?

(Качество изображения при сжатии снижается)

В каком формате не следует сохранять цифровое изображение, полученное с помощью цифрового фотоаппарата?

(GIF – слишком плохое качество, т.к. используется всего 256 цветов)

И все же, если у формата GIF такое плохое качество, где же он тогда используется?

(GIF-анимации небольшого размера)

3. Постановка цели урока (2 мин)

Кто из вас знает, что такое анимация?

(Ученики отвечают)

А как делаются мультфильмы?

(Ученики отвечают)

Я предлагаю вам посмотреть на экране небольшую демонстрацию.

(на экране демонстрируется файл с анимацией)

Скажите, как можно назвать это изображение? Правильно, это анимация, файл в формате GIF. Можно ли точно сказать, из какого количества изображений состоит этот файл?

(Больше, чем из одного)

Можно ли сделать анимацию своими руками?

(нарисовать на бумаге)

Можно ли каким-то образом автоматизировать этот процесс?

(ученики предлагают свои варианты)

Как вы думаете, какова будет тема сегодняшнего урока?

(ученики предлагают свои варианты)

Правильно! Сегодня на уроке мы познакомимся с GIF-анимацией более подробно и научимся ее создавать.

4. Объяснение нового материала (10 мин)

(ученики делают записи в тетрадях)

Анимация – создание иллюзии движения (не обязательно на экране монитора). Эффект анимации является результатом быстрой смены изображений немного отличающихся друг от друга.

В технологии анимации используется быстрая смена кадров, которую глаз человека воспринимает как непрерывное движение. Увеличение скорости смены кадров приводит к более полной иллюзии движения. Количество кадров за 1 секунду должно быть не меньше 24.

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

Какое же программное обеспечение необходимо для создания анимации?

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

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

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

GIMP — бесплатная

Pivot Stickfigure Animator — бесплатная (https://pivotanimator.net/ )

Stykz — бесплатная (http://www.stykz.net/ )

Synfig — бесплатная (http://synfig.org )

Чтобы не устанавливать на компьютер программу – Конструктор анимаций, можно использовать online-сервисы, расположенные в сети Интернет:

5. Практическая работа: Создание GIF-анимации (18 мин)

Варианты сценария для анимации из 4 кадров см. в Приложении 1.

Цель работы:

научиться создавать кадры для анимации с помощью программы MS Paint

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

Ход работы:

Создайте в папке своего класса в своей личной папке папку Анимация.

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

Установите размеры рисунка 150×150 точек.

Нарисуйте первый кадр анимации и сохраните файл в папке Анимация в формате PNG под именем Кадр1.

Создайте копию этого файла и внесите изменения в изображение. Сохраните второй кадр под именем Кадр2.png.

Создайте таким же образом еще 2 файла: Кадр3.png и Кадр4.png.

Закройте программу MS Paint.

Запустите программу веб-браузер через Главное меню или с помощью ярлыка на Рабочем столе или на Панели задач.

Для запуска online-сервиса введите в адресной строке браузера адрес http://gifovina.ru/ и нажмите клавишу Enter.

Найдите свою папку Анимация и выберите (укажите) все созданные вами кадры для анимации (Кадр1.png, Кадр2.png, Кадр3.png, Кадр4.png). Кадры можно добавлять по одному или сразу всей группой.

Установите длительность кадров 0,3 сек (перемещением бегунка или написать).

Эффекты не добавляем! Нажмите кнопку Готово.

В окне Результат можно увидеть полученную анимацию. Если результат вас устраивает, то нажмите кнопку Скачать и сохраните полученный файл в свою папку Анимация. Для редактирования анимации закройте окно Результат и измените те параметры, которые вам не понравились: скорость (длительность кадров), размер, количество кадров.

Откройте полученный файл с помощью браузера.

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

Результат работы в online-сервисе http://gifovina.ru/ см. Приложение 2.

6. Рефлексия (5 мин) и выставление оценок

Учитель задает вопросы:

Что мы умели до сегодняшнего урока?

Рисовать (создавать изображения) в графическом редакторе MS Paint.

Сохранять файлы в формате (по умолчанию) bmp и в других графических форматах.

Что мы сегодня на уроке узнали и чему научились?

Мы узнали, что такое анимация и GIF-анимация и как можно самостоятельно создать компьютерную анимацию.

Ученики заполняют карточки рефлексии. (см. Приложение 3)

Учитель проверяет анимации учеников и просматривает записи в тетрадях.

Выставление оценок.

7. Домашнее задание (2 мин)

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

Прислать прямую ссылку на анимацию или письмо с вложенным файлом анимации на почту учителя.

Всем спасибо за прекрасные анимации!

С нетерпением жду ваши новые работы!
 

Приложение 1

Вариант сценария Смайлик

Для Смайлика рекомендуется установить конечные параметры:

Размер 50×50. Длительность кадров 0 сек

Вариант сценария Котик

Базовый набор кадров:

Полный сценарий:

Приложение 2

 

Приложение 2