shkolakz.ru 1
кОМПЬЮТЕРНАЯ АНИМАЦИЯ



Капитонова Т.А., каф.математики и методики преподавания СГУ им. Н.Г. Чернышевского, Пуйшо Н.В., учитель информатики МОУ «СОШ № 52» г. Саратова


Пояснительная записка.

Данный элективный курс является предметным (по информатике) и предназначен для предпрофильной подготовки учащихся 9-х классов общеобразовательных школ. Курс рассчитан на 12 часов.

Элективный курс имеет своей целью знакомство учащихся с основами компьютерной анимации с использованием технологии Macromedia Flash.

В ходе изучения элективного курса будут решаться следующие задачи:


  • формирование у учащихся понимания, назначения и основ применения компьютерной анимации;

  • освоение специальной терминологии;

  • развитие творческих способностей учащихся;

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

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

Современные программные средства позволяют представлять информацию, включая учебную, на экране дисплея, как в статическом виде, так и в виде анимаций. Для анимированных изображений можно найти разнообразные применения: их можно использовать в презентации; анимированные изображения «оживят» теоретический материал, украсят страницу в Интернете. Практически в любую работу можно вставить собственную анимацию, что сделает ее динамичной и визуально привлекательной - ведь «лучше один раз увидеть, чем сто раз услышать».

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


Программа Macromedia Flash создана сравнительно недавно, но с каждым годом и с каждой новой версией завоевывает все большую популярность. Появление версии Flash MX ознаменовало для пользователей наступление веб-эпохи. Если для размещения в сети фильмов, созданных во Flash версий 4 и 5, требовались большие творческие способности, то Flash MX сделал этот процесс удобным, объединив превосходные возможности дизайна и программистскую основу.

Технология Flash основана на использовании векторной графики в формате Shockwave Flash (SWF). Создателям SWF удалось найти удачное сочетание между изобразительными возможностями графики, инструментальными средствами для работы с ней и механизмом включения результата в Web-страницы. Созданные на его основе изображения не только могут быть анимированы, но также дополнены интерактивными элементами и звуковым сопровождением.

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

Материал элективного курса предполагает наличие у учащихся элементарных навыков работы в среде ОС Windows и графическом редакторе (Paint).

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

Элективный курс завершается созданием учащимися собственной анимации (автоматической или покадровой) и защитой предоставленного проекта.


Содержательная часть.

Занятие 1. Введение в векторную графику. Интерфейс программы Macromedia Flash. Панель инструментов. Общий вид интерфейса. Панель инструментов. Рисование в программе Macromedia Flash. Цветовая палитра. Инструмент Линия (Line). Сохранение созданного рисунка. Инструмент Овал (Oval Tool). Инструмент Pencil (Карандаш). Инструмент Brush (Кисть). Редактирование нарисованной линии и фигуры Инструмент Eraser (Ластик). Выделение линий и фигур. Перемещение и копирование выделенных объектов. Изменение формы линий и фигур. Изменение размеров и вращение.

Занятие 2. Градиентная техника. Работа с текстом. Линейный градиент. Пример создания. Создание нового градиента. Добавление новых цветов в градиент. Добавление созданного градиента в палитру. Модификация линейной градиентной заливки. Направление линейного градиента. Работа с радиальными градиентами. Модификация радиального градиента. Применение программы Flash для обработки текстов. Панели форматирования текста Character и Paragraph.

Занятие 3. Покадровая анимация. Анимация во Flash. Покадровая анимация. Шкала времени - Time Line. Основные понятия. Работа с кадрами. Задание временных параметров фильма. Задание размеров рабочей области. Формирование оптимальной сцены анимации.

Занятие 4. Работа со слоями. Работа со слоями. Управление режимом редактирования фильма.

Занятие 5. Анимация движения. Задание скорости воспроизведения фильма. Твининг - анимация движения (Motion Tweening). Переименование слоя. Создание объекта в сцене. Направляющие слои. Преобразование анимации в символ типа movie clip.


Занятие 6. Анимация изменения формы и цвета объекта. Анимация - трансформация (Шейпинг, морфинг)(Shape tweening). Контрольные точки Удаление контрольных точек. Цветовые эффекты в Shape tweening (Анимация формы).


Учебно-тематический план.




п/п

Наименование разделов и тем программы

Всего

В том числе

Теория


Практика

1.

Векторная графика.

Интерфейс программы Macromedia Flash. Панель инструментов.

1

0,5

0,5

2.

Градиентная техника. Работа с текстом.

1

0,5

0,5

3.

Покадровая анимация.

3

1

2

4.

Работа со слоями.

1




1

5.

Автоматическая анимация.

1

1




6.

Анимация движения.

2




2

7.

Анимация изменения формы и цвета объекта.

2




2

8.

Защита творческой работы.

1




1




Итого:

12

3

9


Перечень знаний и умений учащихся по элективному курсу «Компьютерная анимация» представлен следующей таблицей




п/п

Учащийся должен знать

Учащийся должен уметь

1.

Основные возможности и функции программы Macromedia Flash.

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

2.

Основные термины.

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

3.

Основные принципы покадровой анимации.

Создавать простейшую покадровую анимацию.

4.

Принципы автоматической анимации.

Создавать автоматическую анимацию движения по заданным и произвольным траекториям.

5.

Технологию анимации трансформации.

Создавать анимацию изменения формы и цвета объекта.


При оценивании творческой работы учащихся учитывается:

  • качество исполнения проекта;
  • оригинальность проекта.



Литература, используемая при подготовке программы.

1. Т.Н. Боровская, Т.А. Капитонова. Интеграция математики и информатики при подготовке учителя в период педагогической практики. / Содержание и конструирование дисциплин в педвузе. Материалы научно-методической конференции. – Саратов: изд-во Саратовского педагогического института. 1998. - С. 167.

2. Информатика в школе: Приложение к журналу «Инфоматика и образование». № 3 - 2006. – М.: Образование и информатика. 2006.

3. А.В. Могилев, Н.И. Пак, Е.К. Хеннер. Информатика: Учеб. пособие для студ. пед. вузов. – М.: Изд. Центр «Академия». 2001.

4. Дж. МакДональд, К. Петерс, Т. Ярд и др. Flash MX Studio: Практ. пособие / Пер. с англ. - М.: Издательство «СП ЭКОМ». 2003.

5. Новые педагогические и информационные технологии в системе образования. / Под ред Е.С. Полат. - М.: Издательский центр «Академия». 2003.

6. ActionScript. Подробное руководство. – СПб.: Символ – Плюс. 2002.

7. «Основы создания анимации в программе Macromedia Flash». Дистанционный курс. Кафедра информатики ГОУ ДПО «СарИПКиПРО».

8. Л.М. Фридман. Наглядность и моделирование в обучении.- М.: Знание. 1984.


Литература, рекомендуемая для учащихся.

  1. П. Лапин. Самоучитель Flash5. Анимация и язык ActionScript. СПб.; Питер. 2001.

  2. Э. Уотролл, Н. Гербер. Эффективная работа: Flash MX. СПб.; Питер. 2003.

  3. Информатика в школе: Приложение к журналу «Инфоматика и образование». № 3 - 2006. – М.: Образование и информатика. 2006.


Образовательные диски.

    1. Лицензионный диск Macromedia Flash MX (с технической документацией).


Терминологический словарь.

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


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

Клип (Clip, или Movie clip) - это специальный тип символа. Он представляет собой как бы мини-фильм, для которого создается собственная временная диаграмма, и устанавливаются собственные параметры (например, частота смены кадров).

Ключевой кадр (Keyframe) - кадр, соответствующий изменению состояния экземпляра.

Символ (Symbol) - своеобразный шаблон объекта с определенным набором свойств.

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

Сцена (Scene) - определенное сочетание слоев.

Экземпляр символа (Instance) - каждая новая копия символа, помещенная в фильм.


Примерный список творческих работ.


  1. Разработать анимационный проект по теме:

  1. рост растения;

  2. движение планеты;

  3. движение заряженной частицы;

  4. колебания маятника;

  5. движение корабля;

  6. поздравительная открытка другу (подруге).

  1. Придумать анимацию на свободную тему (по любимому учебному предмету).


Примерный список тем рефератов.

  1. История создания программы Macromedia Flash.

  2. Векторные и растровые изображения: достоинства и недостатки.

  3. В чем преимущества компьютерной анимации от традиционной?

  4. Демонстрационная графика.

  5. Принципы формирования изображений на экране.


Методический материал.

Занятие 1. Векторная графика. Интерфейс программы Macromedia Flash. Панель инструментов.

Цель занятия: познакомить учащихся с векторной графикой, а также с возможностями и особенностями программы Macromedia Flash.


Задачи урока.


  • Образовательная задача: введение понятия «векторная графика»; изучение основных инструментов Macromedia Flash и формирование умений по работе с ними при создании графических объектов.

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

Ход занятия.

1. Векторная графика.

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

  • математические формулы, описывающие векторное изображение, занимают меньше места в памяти компьютера;

  • возможность масштабирования изображения без потери качества;

  • легкий перенос векторного изображения с одной платформы на другую.

У векторных изображений имеются и недостатки. Например, очень сложно представить компактно в векторном формате фотореалистичное изображение. В связи с этим уместно вспомнить, что самые удачные решения - компромиссные. Именно такое решение использовали и авторы Flash: при разработке Web-страниц с помощью этого инструмента можно импортировать и использовать не только векторные, но и растровые изображения.

2. Интерфейс программы Macromedia Flash MX. Инструменты рисования.

Общий вид интерфейса программы Macromedia Flash MX представлен на рисунке:






В состав интерфейса входят:

  • главное меню;

  • панель основных команд;

  • панель инструментов (Tools);

  • шкала времени (Timeline);
  • библиотека(Librari);


  • различные панели свойств;

  • рабочая область.

Программа Macromedia Flash допускает работу сразу с несколькими файлами. Каждому открытому файлу (Flash - фильму) соответствует свой рабочий стол. Если фильм развернут на весь экран, то переход к другому фильму осуществляется через пункт главного меню Window, если не развернут - можно перемещать графические объекты из одного фильма в другой перетаскиванием между окнами.

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

Tools (Инструменты), в которой собраны кнопки выбора конкретного инструмента. Эти инструменты делятся на два вида: инструменты выбора и инструменты рисования;

View (Вид) - содержит средства управления просмотром изображения, имеющегося на столе. В этом поле расположены две кнопки:

Hand Tool (Рука) - щелчок на кнопке включает режим, при котором рабочую область можно перемещать в любом направлении с помощью мыши, не пользуясь полосами прокрутки;

Zoom Tool (Масштаб) - щелчок на кнопке включает режим быстрого масштабирования изображения в рабочей области. При включении этого режима в поле Options появляются две дополнительные кнопки, позволяющие выбирать направление масштабирования (увеличение или уменьшение);

Colors (Цвета) – кнопки, которые обеспечивают раздельный выбор цвета контура и заливки объектов; подробнее их предназначение рассмотрено в разделе «Работа с цветом»;

Options (Параметры) - на которой представлены элементы установки дополнительных параметров выбранного инструмента; для инструментов, не имеющих дополнительных параметров, поле Options остается пустым.

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


Пользователь имеет возможность изменять форму линий и контуры фигур, созданных с помощью инструментов Pen, Pencil, Brush, Line, Oval или Rectangle. Редактирование может выполняться инструментами Arrow, Free Transform и Subselection, либо средствами оптимизации кривых. Чтобы изменить форму линии или контур фигуры, можно перетащить на новую позицию любую точку линии, «зацепив» ее инструментом Arrow. При этом указатель служит индикатором того, как будет изменяться линия и ограниченная ею заливка.

Упражнение. Нарисуйте с помощью основных инструментов следующие композиции:


  • «Избушка на курьих ножках»;

  • «Снеговик»;

  • «Новогодняя елка».


Занятие 2. Градиентная техника. Работа с текстом.

Цель занятия: знакомство учащихся с понятием «Градиент», приобретение навыков работы с текстом.

Задачи урока.

  • Образовательная задача: введение понятия «Градиент»; изучение основных приемов работы с текстом в Macromedia Flash.

  • Развивающая задача: Развитие творческих способностей, мышления, самостоятельности учащихся и формирование их эстетической культуры.

Градиентом называется плавный переход одного цвета в другой. Сложные градиенты могут содержать несколько таких переходов. В Macromedia Flash градиенты могут содержать до восьми цветов и быть:

- линейными (Linear);

- радиальными (Radial), или круговыми.

Цвета в градиентах могут быть непрозрачными, частично прозрачными и прозрачными.

В линейном градиенте полосы разных цветов параллельны друг другу а в круговом или радиальном - располагаются вокруг центра заливки в виде концентрических окружностей или овалов . После создания контуров любым из способов, их можно залить градиентом, используя палитру Fill (Заливка), инструмент заливки Paint Bucket (Заливка, Ведро) и его модификаторы.


Работа с текстом.

Если необходимо сделать текст частью анимации, например, чтобы буквы были движущимися объектами, или во Flash-ролике нужно вывести на экран пояснительные надписи, можно использовать возможности программы Flash по обработке текстов.

Текст вводится, размещается и обрабатывается в текстовом блоке. Блоки бывают трех типов. Первый, Static Text, используется как для создания объектов анимации, так и для вывода на экран текстового сопровождения. Второй, Input Text, предназначен для взаимодействия с пользователем, просматривающим анимацию: в этот блок можно вписывать ответы на задаваемые вопросы, различные анкетные данные. При этом введенный текст можно программно анализировать, чтобы, например, направить анимацию по тому или другому пути. Третий, Dynamic Text предназначен для отображения на экране результатов работы скриптовой программы, предусмотренной в Flash-анимации. Мы остановимся только на блоке типа Static Text.

Панели форматирования текста Character и Paragraph


Для выбора параметров текста предназначены перемещаемые панели Character (Знак) и Paragraph (Абзац), которые можно открыть из главного меню, выбрав последовательно команды Window (Окно) - Panels (Панели) - Character (Знак).



Инструмент Text (Текст). Ввод текста.


  1. В панели инструментов Tools (Инструменты) выберите инструмент Text (Текст) , нажав на него левой клавишей мыши.
  2. Выберите в панели Character (Знак) в поле Font (Шрифт) любой шрифт, содержащий кириллицу (попробуйте Arial Cyr).


  3. Щелкните мышкой на рабочем поле – создается текстовый блок шириной в один символ . Наберите фразу: Добро пожаловать на нашу страничку!

  4. При вводе текста длина строки будет увеличиваться, пока для перехода на новую строку не будет нажата клавиша Enter. Такой текстовый блок называется блоком фиксированный высоты и имеет отличительный знак – круглый белый маркер в правом верхнем углу.

  5. Ниже добавим другой текстовый блок. Для этого, нажав левую кнопку мыши, растяните рамку, в которую будет вписываться текст, причем сделайте ее короче предыдущей. Появившийся внутри блока слева текстовый курсор позволяет ввести текст: Добро пожаловать на нашу страничку!

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

  7. Для активизации текстового блока достаточно щелкнуть в области текста при выбранном инструменте Text (Текст) или двойным щелчком при выбранном инструменте Arrow (Стрелка) . При желании можно менять ширину и высоту блока. Потяните за круглый маркер – с изменением размера блока маркер превращается в квадратик. Потяните за квадратный маркер – меняется только размер блока. Дважды щелкните на квадратном маркере – текст вытягивается в одну строчку и маркер меняется на круг.
  8. Инструментом Text (Текст) следует пользоваться, когда нужно отредактировать или отформатировать сам текст. На панелях Character (Знак) и Paragraph (Абзац) расположены хорошо знакомые по текстовым редакторам кнопки форматирования.


  9. Инструмент Arrow (Стрелка) используется для выделения и перемещения текстовых блоков. При выделении текстового блока появляется возможность применять форматирование ко всему тексту.

  10. Выделенный текстовый блок можно поворачивать, масштабировать и искажать с помощью модификатора Scale (Размер) и Rotate (Вращение) инструмента Arrow (Стрелка) .

  11. Более точные параметры масштабирования и искажения можно задать на панелях Info (Информация) и Transform (Преобразование).




Пример. Создание эффекта тени.

  1. Создайте новый файл: File (Файл) - New (Новый) . Выберите инструмент Text (Текст) . Напечатайте букву А.
  2. Инструментом Arrow (Стрелка) выделите блок. Модификатор Scale (Размер) позволяет увеличить размер буквы.


  3. Для создания «тени», скопируйте получившийся текстовый блок: один щелчок инструментом Arrow (Стрелка) выделяет текстовый блок, при нажатой клавише CTRL и левой кнопке мыши перетащите рамку выделенного блока для получения копии.

  4. Измените цвет копии на серый (цвет «тени»).

  5. На панели Transform (Преобразование) задайте параметру Skew (Наклон) значение 68 и нажмите Enter.

  6. Переместите «тень» ближе к основной букве. Для более точного перемещения воспользуйтесь кнопками «стрелка Вниз», «стрелка Вверх», «стрелка Влево», «стрелка Вправо» клавиатуры.

  7. Так как «тень» была создана второй по порядку, она накладывается поверх основной буквы. Для изменения порядка используем команду меню Modify (Изменить) - Arrange (Расположение) - Send to Back (Переместить назад).

Упражнение.

  • Создать поздравительный текст с эффектом падающей тени (заданного цвета).

  • Разработать открытку классному руководителю (используя градиентную заливку и текст).



Практические задания к элективному курсу.

К занятиям 4-6. Покадровая анимация. Работа со слоями.

1. Нарисовать неподвижно сидящую лягушку и летающего вокруг нее комара (глаза лягушки поворачиваются за комаром).

2. Нарисовать «летающую тарелку» с мигающим прожектором.

3. Изобразить одно из созвездий северного полушария с мигающим названием.

К занятиям 7-11. Автоматическая анимация.

1. Изобразить движение яблока, падающего с дерева (на голову И. Ньютона).

2. Изобразить момент приземления НЛО.

3. Изобразить падающий снег.

4. Изобразить движение букв, появляющихся с разных сторон и образующих слово «Россия».

5. Создать анимацию превращения красного круга в синий куб.