Учебно-исследовательская работа "Живая картинка"

XVI муниципальный конкурс

учебно-исследовательских работ учащихся

Естественно-математическое                

«Живая» картинка

Работу выполнила:
Гилёва Алена Васильевна,
ученица 5А класса МСОШ №8 Руководитель:
Гилёва Ирина Ивановна,
учитель информатики МСОШ №8

Красновишерск, 2012

Оглавление

Введение

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

В этом году я решила серьёзно заняться созданием мультфильмов. Вроде это просто! Но оказалось… создание мультфильмов - дело сложное и кропотливое. Для начала я решила просто научиться оживлять картинки.

Проблема: Как «оживить» нарисованную картинку с помощью компьютера?

Гипотеза: Мы предполагаем, что существуют специальные программы, позволяющие «оживить» картинки, и думаем, что среди них есть программы, которые могут освоить ученики 5 класса.

Цель: Создание «живой» картинки.

Задачи:

1. Разобраться, что значит «живая» картинка.
2. Найти программы, с помощью которых можно создавать «живые» картинки. Выбрать из них самую простую и понятную.
3. Научиться работать в этой программе.
4. Создать коллекцию «живых» картинок.

Методы исследования:

1. анализ информационных источников;
2. сравнение;
3. компьютерный эксперимент.

Глава I

Использование компьютерных программ

для создания движущихся объектов

1. Основы классической мультипликации.

Когда мы говорим «живая» картинка, что мы подразумеваем под словом «живая»? И может ли нарисованная картинка быть «живой». Ответим на эти вопросы.

Мы смотрим на неподвижный предмет, например, камень,  и думаем, что он неживой. Но стоит только камню пошевелиться, самому, без посторонней помощи, и мы сразу удивляемся: «Камень живой!». Получается жизнь - это движение! Вернее признаком жизни является движение. А что такое движение?

В новой иллюстрированной энциклопедии [3] понятие «движение» рассматривается только в рамках геометрии. Самое общее определение движения мы нашли в словарях Яндекс: «движение» – это всякое изменение вообще [2] и  «движение» есть перемещение, передвижение [1]. Значит, для того чтобы создать видимость движения картинки, надо перемещать, изменять некоторые элементы изображения. Получим движение и картинка «оживет»!

Мультфильмы – это тоже движущиеся объекты. Искусству мультпликации уже более 100 лет. Мультфильм создается из следующих друг за другом картинок (кадров). За секунду, как правило, просматривается 12-30 кадров, каждый из которых немного отличается от предыдущего. За счет этого создается видимость движения. Чем больше кадров в секунду, тем более плавное движение, чем меньше, тем более прерывистое.

2. Особенности формата gif.

Есть много компьютерных программ для создания мультфильмов. Самые популярные из них Adobe Flash, Toonz, Toon Boom Studio, Adobe After Effects, Anime Studio [4]. Эти программы используются для профессионального создания мультфильмов. В таких программах может быть набор персонажей и декораций, возможность добавлять звук и звуковые эффекты, различные дополнительные приемы, которые нам не понятны.

Тем не менее в Интернете очень много движущихся картинок, самых разных, есть движущийся текст – баннеры. Все эти объекты имеют расширение gif. Что же такое gif-анимация?

Формат GIF (Graphics Interchange Format — формат графического файла) предназначен для сохранения растровых изображений с количеством цветов не более 256. Просматривать gif-анимацию можно с помощью браузера. В настоящее время существуют две версии формата — GIF87a и GIF89a. Имена файлов этих форматов имеют расширение gif. Первая версия была разработана в 1987 г., а вторая — в 1989 г. В формате GIF89a можно сохранить не только одно, а несколько изображений, которые браузер показывает друг за другом с заданными частотой и временем задержки. В результате возникает эффект анимации — движущейся картинки [5].

3. Обзор программ, используемых для «оживления» картинок.

Рассмотрим программы, которые имеются в Интернете и с помощью которых можно создавать кадры и соединять их в единый gif-файл.

Для создания кадров можно использовать любые графические редакторы. Самый простой и популярный – это графический редактор Paint (рис.1). Он входит в стандартное программное обеспечение любого компьютера и им могут пользоваться даже самые маленькие пользователи.

Рис. 1 Интерфейс графического редактора Paint

Посложнее программы PhotoShop (рис. 2) и CorelDraw (рис. 3). Для использования этих программ нужны умения и знания, опыт и сноровка. Кадры будут получаться хорошего качества, и изменять детали кадров, особенно в CorelDraw быстро и просто.

Рис. 2 Интерфейс графического редактора PhotoShop

Рис. 3 Интерфейс графического редактора CorelDraw

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

Для создания gif-анимации есть много программ.

Aesop GIF Creator (рис. 4) - редактор для создания анимации в формате gif, является мощным инструментом для создания баннеров, иконок, кнопок и логотипов. Возможности Aesop GIF Creator: создание gif-анимации; создание иконок; наличие красивых эффектов; инструменты для работы с палитрой. Удобство этого редактора в том, что он сочетает в себе средства рисования кадров с последующим их соединением в ряд.

Рис. 4 Интерфейс gif-аниматора Aesop GIF Creator

GIF Movie Gear (рис. 5) "умеет" собирать gif-файлы из нескольких картинок самого разнообразного формата; сжимать и оптимизировать полученную готовую анимацию; можно изменять время смены кадров и т.д.

Рис. 5 Интерфейс gif-аниматора GIF Movie Gear  

Для нас неудобство этих двух gif-аниматоров заключается в том, что интерфейс англоязычный.

Gif Animator (рис. 6) удобная и очень простая в использовании программа с русскоязычным интерфейсом. Она предназначена для создания Gif-анимации, баннеров, позволяет зацикливать анимацию, использовать спецэффекты при переходах между кадрами.

Рис. 6 Интерфейс gif-аниматора Gif Animator  

Выводы по I главе

Таким образом, для «оживления» картинки  мы будем использовать программы Paint (для прорисовки кадров) и программу Gif Animator для соединения кадров в единый gif-файл. На наш взгляд, это самые простые из рассмотренных программ и доступны для исследования учениками пятых классов.

При создании gif-анимации необходимо соблюдать следующую технологию:

1. Продумать последовательность кадров, их содержание.
2. Создать каждый кадр в программе Paint и сохранить в одной папке.
3. Соединить кадры в единое целое с помощью программы Gif Animator.

Глава II

Технология создания «живой» картинки

2.1. Сценарий движения

Любое, даже самое незначительное движение, требует сценария. Необходимо продумать последовательность кадров. Различие между кадрами должно быть минимальное. Лучше, если перед началом работы на компьютере, мы схематично нарисуем кадры на бумаге и определим  очередность их появления на экране.

2.2. Прорисовка кадров в Paint

Все кадры должны быть одного размера и детали, прорисованные на кадрах должны совпадать. Чтобы добиться этого мы использовали следующий алгоритм работы, который придумали сами:

1. Открыть программу Paint.
2. Установить размер листа по размеру предполагаемого кадра.
3. Нарисовать кадр 1.
4. Сохранить файл под номером 1 (Файл – Сохранить как …)
5. Изменить рисунок в соответствии с замыслом, чтобы получился кадр 2.
6. Сохранить рисунок под номером 2 (Файл – Сохранить как …).
7. Снова изменить немного свой рисунок.
8. Сохранить рисунок под номером 3 (Файл – Сохранить как …).
9. И так далее, пока не получиться 12-30 кадров, а может и более, если анимация длинная.

2.3. Создание gif-анимации с помощью программы GifAnim

Для создания gif-анимации с помощью программы GifAnim мы тоже разработали  алгоритм работы:

1. Запустить программу Gif-аниматор.
2. Нажать кнопку Ok.
3. Чтобы добавить кадр в  открывшемся окне нажать кнопку  «открыть», указать путь к своей папке на рабочем столе и выбрать рисунок с номером 1.
4. Снова добавить кадр, теперь  с номером 2.
5. Продолжать добавлять кадры в соответствии со сценарием.
6. Когда все кадры добавлены, просмотреть анимацию нажав кнопку «плэй».
7. Если анимация слишком быстрая, то можно, дублируя кадры, её замедлить. Например, два кадра с номером 1, потом два кадра с номером 2 и т.д.
8. Сохраните анимацию (Файл – сохранить …)
9. Закрыть программу GifAnim.

2.4. Использование GifAnim для создания баннеров

В переводе с английского баннер (banner) имеет несколько значений, это знамя или флаг и заголовок, лозунг или девиз. Баннер может представлять собой полотно с нанесенным на него текстом или изображением. Интернет-баннер представляет собой рекламную площадь с текстом и/или изображением, которая размещается на странице сайта [6].

С помощью программы GifAnim можно создавать простые баннеры, которые называются «бегущая строка».

Рис. 7 Вид окна Banner программы GifAnim

Алгоритм создания баннера:

1. Нажать кнопку  «баннер».
2. Написать текст в строку «Текст» (рис. 7),
3. установить шрифт (кнопка Шрифт),
4. Установить дополнительные параметры баннера

1.  тень,
2. бордюр,
3. анимацию: количество кадров (чем больше кадров, тем медленнее и плавней будет движение текста, ширина и высота поля баннера),
4. цвет текста, фона, тени.

5. Ok
6. Просмотреть баннер.
7. Сохранить (Файл – Сохранить - …).

2.5. Коллекция «живых» картинок.

Коллекция созданных мною «живых» картинок включает разнообразные gif-анимации и баннеры:

1. Можно использовать на уроках русского языка. (Кадры прорисовывались в Paint)

2. Эти восьмерки можно использовать на школьном сайте к различным праздникам. (Кадры прорисовывались в Paint)

3. Название моей работы для презентации. (НадписьWordArt скопирована из Word в Paint и там прорисованы кадры)

4. Для создания игр. Например, угадай пословицу. (Исходный рисунок взять с Интернета, затем выделен фрагмент – яблоко, и изменено его положение)

5. Физкультминутка для уроков, или просто мультик. (Кадры сфотографированы, сжаты для web-страниц)
6. Баннеры (к сожалению, в Word не отображаются).

Выводы по II главе

Таким образом, используя программы Paint и GifAnim, мы не только создали коллекцию gif-анимаций и баннеров (Приложение 1), но и разработали алгоритмы  их создания. Дополнительно было создано методическое пособие по созданию «живых» картинок (Приложение 2), которое может быть использовано на уроках информатики в пятых классах.

Заключение

«Оживлять» картинки оказалось увлекательным и полезным делом. Мы рассмотрели много разных программ и выбрали самые понятные. Самое главное, мы разработали технологию создания «живых» картинок и можем поделиться своими знаниями со всеми.

Наша гипотеза подтвердилась – есть простые программы, позволяющие «оживить» картинки. Это Paint и Gif Anim. С помощью них мы и создали «живые» картинки.

Нами создано методическое пособие по работе с этими программами. В него мы включили алгоритмы, разработанные нами. Это методическое пособие можно использовать на уроках информатики при изучении компьютерной графики.

Теперь я умею создавать движущиеся картинки и баннеры, это пригодится мне при создании презентаций. Я уже научила свою сестрёнку Василису «оживлять» картинку, делать маленькие мультфильмы.

Информационные источники

1. http://lingvo.yandex.ru
2. http://slovari.yandex.ru
3. Новая иллюстрированная энциклопедия. Кн.3. Ге – Жа. – М.: Большая Российская энциклопедия, ООО «ТД «Издательство Мир книги», 2007.
4. http://www.toondra.ru/sozdanie-animacii.htm
5. http://www.pervyiurok.ru/
6. http://propel.ru/slovar/banner.php

Приложение 1

Содержание диска

1. Презентация «Коллекция живых картинок», где собраны все работы (анимация работает только в режиме «Показ слайдов»).
2. «Живые» картинки: Петя, сердечко, солдат, глазки, заголовок, яблоня, танец.
3. Баннеры: баннер1, баннер2, баннер3.
4. Папки с файлами кадров: кадры_Петя, кадры_яблоня, кадры_восьмёрочки, кадры_танец, кадры_живая.
5. Папка !Gifаниматор, содержащая GifAnim (загрузочный файл wwwgifa, установка не требуется!).

Примечание: анимацию можно просмотреть с помощью любого браузера или через показ презентация «Коллекция живых картинок».

Приложение 2

Методическое пособие

В данном пособии представлена технология создания «живых» картинок с помощью программ Paint и GifFnim, которая разработана нами и включает в себя алгоритмы создания кадров, оживления. Просим соблюдать наши авторские права и не использовать методическое пособие без разрешения автора.