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

Educational Technology & Society 11(3) 2008

ISSN 1436-4522

Технология создания анимации в электронном учебнике

по химии

Е.А. Райлян, преподователь, докторант,

Государственный Университет Молдовы [email protected]. md

А. И. Кривощапова, факультет математики и информатики, студентка 5 курса, Государственный Университет Молдовы [email protected]

АННОТАЦИЯ

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

In this work is analyses the stages and proccsscs of the elaboration the animation in the electronic textbook of chemistry. The work describes the results of the research of the processes of elaboration the animations in Flash technology.

Ключевые слова

электронный учебник, интерактивность, анимация; electronic textbooks, interactivity, animation

Введение

Использование информационных технологии и технологий мультимедиа в образовании способно радикально изменить систему обучения. Современный электронный учебный курс - это целостная дидактическая система, состоящая из различных электронных учебных материалов, использующая компьютерные технологии и возможности сети Интернет и обеспечивающая обучение и управление процессом обучения студентов по индивидуальным и оптимальным учебным программам. Ключевым словом электронного учебного курса является интерактивность. Интерактивность это “постоянное систематическое взаимодействие учителя и учащихся и учащихся между собой в учебном процессе” (Полат, 2004), а также взаимодействие учащихся с контекстом (Adascalitei, 2007).

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

Мультимедиа - это совокупность компьютерных технологий, одновременно использующих в интегрированном представлении несколько информационных сред: графику, текст, видео, фотографию, анимацию и звуковые эффекты. Создание дидактических программ использующие мультимедийнные ресурсы делится на два больших блока: создание дизайна (подбор цветов, шрифтов, графики, общее оформление и стиль написания текста) и создание медиа-компонентов (подбор и разработка видео, аудио, презентации, анимация, схемы, графики, рисунки, автоматические тесты.). Мультимедийнные обучающие системы предоставляют обучаемому текст (.doc, .html), изображения (.gif, .bmp, .jpeg), анимированные картинки (.fla, .gif), аудиокомментарии (.wav), цифровое видео (.avi, .mpeg) в

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

Мултимедийнные технологии как возможность создания интерактивности

Для создания интерактивности используются Macromedia Flash. Flash позволяет сочетать четкость и гибкость векторной графики с растром, звуком, анимацией и богатыми интерактивными идеями. Технология DreamViewer - вставка изображений Импорт изображений с одной программы в другую Поддержка Java Script вставка анимации

Файлы, хранящие изображения Flash очень компактны. Это результат публикации Flash-изображения при котором создается компактный файл формата Shockwave/Flash с расширением .swf, аналог исполняемого файла обычной программы. Этот файл впоследствии может быть загружен и просмотрен с помощью специального проигрывателя Flash. Интерактивность Flash-фильма обеспечивается за счет сценариев, которые представляют собой набор инструкций.

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

1. Применение графики позволяет иллюстрировать текстовые материалы создавать красочные и вызывающие определенное настроение фоны, задавать изощренное форматирование материала недостижимое чисто текстовыми средствами.

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

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

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

- движущийся текст трудно читать;

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

-конкурирующие стимулы затрудняют восприятие информации.

Особенности изучения химии

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

В настоящее время электронные учебники по химии стали необходимым атрибутом изучения химии. В Интернете есть много электронных учебников, например www.alhimic.ru,chemistry.r2.ru, khimia.h1.ru chem4you.boom.ru. Сравнительная характеристика этих и других сайтов приведена в книге Е. С. Полата “Теория и практика дистанционного обучения”. Как следует из приведенного анализа, вопрос о процессе создания интерактивной анимации окончательно не

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

Покадровая анимация в химии 10 класса

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

Так как электрон движется вокруг атома в произвольном порядке, пошаговая анимация дает возможность описать каждый шаг. Для начала задаем частоту кадров, для чего в меню Modify выбираем пункт Document, вводим в поле ввода Frame Rate диалогового окна Document Properties число 50 и нажимаем кнопку ОК. Теперь будущая анимация будет двигаться со скоростью пятьдесят кадров в секунду. Щелкнув правой кнопкой мышки в ячейке второго кадра, в контекстном меню выбираем команду Insert Keyframe; при этом кадр будет сразу помечен как ключевой, поскольку для него наследуется изображение из предыдущего кадра. Перемещаем изображение электрона. Щелкнув правой кнопкой мышки в ячейке третьего кадра и выбрав в контекстном меню вновь команду Insert Keyframe; новый кадр также будет помечен как ключевой, и для него сохранится предыдущее изображение. Перемещаем изображение электрона. Создав последующие кадры и выбирая в контекстном меню команду Insert Keyframe, перемещаем электрон.

Для того чтоб анимация двигалась без остановки, т.е. прокручивалась бесконечно, её нужно зациклить следующим образом: включить пункт-выключатель Loop Playback в меню Control. Для прерывания движения надо нажать клавишу <Enter> или <Esc> или выбирать пункт Stop в меню Control.

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

Выбираем Window —Development Panels -—Actions. В появляющемся панели Actions Frame задаем действия кнопкам используя Action Script чтобы при нажатии на кнопку Play, электрон начнет вращаться вокруг ядра а при нажатии на кнопку Stop электрон остановился (рисунок 1).

Рис. 1. Положение электрона на десятом кадре Одна из разновидностей покадровой анимации это вансформационная анимация. В нашем случае вансформационная анимация необходима для того, чтобы анимировать процесс соединения 8- орбиталей и р- орбиталей.

Процесс создания вансформационной анимации аналогичен предыдущему случаю. Сначала необходимо создавать новый документ задавать параметры и количество кадров в секунду. Для создания символа выбираем Movie Clip. В случае создания вансформационной анимации необходимо помнить, что при анимации несколько элементов, их необходимо разместить на различных слоях. Чтобы добавить новый

слой на панели инструментов используется Insert Layer или кнопку Для создания анимации необходимо использовать временную шкалу. Временная шкала представляет собой длинную последовательность кадров. Первый ключевой кадр Flash создает автоматически. Для создания второго ключевого кадра на временной шкале выделяется пустое место, где должно закончиться движение фигур (например кадр 15). Создаём новый ключевой кадр, выбрав пункт Keyframe в меню Insert или Insert Keyframe в контекстном меню выделенного пустого места на временной шкале. Первый ключевой кадр тотчас “растянется”, чтобы заполнить все свободное пространство от начала последовательности до второго ключевого кадра. Создав ключевой кадр, выделяем его и перемещаем элементы на встречу друг к другу (рисунок 2).

Jiшш у ■■ □ ; А J t я . Jli- 1 + + D щ !■

hibridi/ali-sp

Рис. 2. Второй кадр вансформационной анимации Трансформационная анимация в химии 10 класса

Трансформационная анимация это построение анимации на основе изменения формы, местоположения, внешнего вида или цвета. Здесь задается только два ключевых кадра. В нашем случае, используя трансформационную анимацию нужно показать изменение валентности. Для этого стрелка перемещается из одного изображения в другое по некоему пути, к примеру, по кривой прямой используя направляющие слои Guide layers. Направляющие слои служат для задания траекторий и параметров анимации. Чтобы получить такой слой и привязать к нему анимированный элемент, необходимо выделить слой, содержащий этот анимированный элемент, и выбрать пункт Motion Guide в меню Insert или выбрать пункт Add Motion Guide в контекстном меню. Созданный слой появится над выделенным и будет иметь имя вида "Guide: <имя выделенного слоя>" (рисунок 3).

» Guide: Стр_С * * □

U? Стр_С * * ■

Рис. 3. Слой-направляющая

Процесс создания трансформационной анимации состоит из несколько этапов:

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

2. Изображение конвертируется в символ.

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

4. Все изображения конвертируется в символах.

5. Рисуется путь, используя инструменты "карандаш", "перо", "линия", "прямоугольник", эллипс" или "кисть". На слое-направляющей не должно быть никакой графики, кроме пути (рисунок 4).

s р

•V. |t It It И №

F |t И It t F

о |t It t t 0

V |t t t t У

2 С

t в If t в

ь И Be

и t Li

Valenta real a

ИИ МИ

И И и t t +

I + t

Valent a posibila

Рис. 4. Направляющий путь

6. Нарисовав путь нужно добавить анимированный элемент. Для этого

выделяется анимированный элемент и перемещается так, чтобы его точка фиксации "приклеилась" к линии пути. Также это можно сделать, поставив галочку в поле Snap в редакторе свойств (рисунок 5).

Рис. 5. Точка фиксации анимированного элемента к линии пути

7. Для того чтобы скрыть слой-направляющую, нужно щелкнуть мышью по точке, находящейся во второй колонке списка слоев (рисунок 6).

'' * Guide: C... X * □

D стр_с • * ■

Рис. 6. Скрытие изображение

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

* * ■ : rfi

X - a . >

* * ш * >. і .&

* йи CipJ * ’ H *

< + я * j* 4- * .31

■"» Gufe CrpjC Ї ¥

- * ■ . L

U J □* 1 і :W і A

Рис. 7. Временная шкала трансформационной анимации

Первый слой является основным и на нем расположено главное изображение. Во время составления анимации на него добавляются числа (валентности). Слой “Стр С” принадлежит первой стрелке и показывает её движение по направляющему слою, который находиться выше и имеет имя “Guide: Стр С ”. Слой “Стр_В” принадлежит второй стрелке и показывает её движение по

направляющему слою, который находиться выше и имеет имя “Guide: Стр_В”. Слой “Стр_Ве” принадлежит третьей стрелке и показывает её движение по направляющему слою, который находиться выше и имеет имя “Guide: Стр_Ве”. Слой “Layer 8” принадлежит кнопке, к которой присвоена операция языка ActionScript.

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

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

Для создания образца необходимо нарисовать на рабочем листе графический элемент, превратить его в образец и поместить в библиотеку (рисунок 8).

Рис. 8. Графический элемент, который будет преобразован в образец

После того, как созданный образец будет добавлен в библиотеку, графический элемент, на основе которого он был создан, станет его экземпляром. Чтобы посмотреть на созданный образец, нужно открыть окно библиотеки Window Library. Окно библиотеки разделено на две части. В нижней части находится список уже созданных образцов, их можно выбирать, щелкая мышью по их именам. Левее имен в этом списке находятся небольшие изображения, обозначающие тип образца. В верхней части находится панель предварительного просмотра, где отображается содержимое образца, выбранного в нижней части окна. Если на экране открыто окно библиотеки, можно просто перетаскивать из него выделенные образцы. Получаем начальное изображение анимации (рисунок 9).

Рис. 9. Начальное изображение анимации

В данной анимации необходимо заменить один экземпляр на другой, основанный на другом образце, сохранив при этом все преобразования, выполненные над этим экземпляром. Для такого случая в редакторе свойств расположена кнопка Swap. При нажатии на нее на экране появляется диалоговое окно Swap Symbol. В списке перечислены все образцы. Образец, на основе которого был создан выделенный на листе экземпляр, помечен заметной черной точкой. Выбираем нужный образец. В небольшом поле предварительного просмотра, расположенном левее и выше списка, показано его содержимое. Новый экземпляр унаследует все преобразования старого. Поэтому, если старый экземпляр был повернут, новый тоже будет повернуты После смены экземпляров, изображения меняют местоположения, при этом изменяется их размер и угол поворота (рисунок lO).

Рис. 10. Трансформация движения в одном кадре

Полноценно трансформация движения поддерживается только для экземпляров. В конечном результате добавляем прямые (в данном примере оси) на новый слой (рисунок 11).

Рис. ll. Конечный результат

Для задания внешнего вида проведенных линий можно воспользоваться редактором свойств. Он предоставляет соответствующие элементы управления, если на рабочем листе выделена линия или контур. С помощью большого раскрывающегося списка можно выбирать стиль линии: тонкая, толстая, штриховая, неровная, точечная и др. Левее него расположено поле ввода толщину линии в пунктах. Устанавливаем нужные параметры, следя за выбранной на рабочем листе линией. Создаем кнопку для управления анимации и вводим операцию языка ActionScript в панель Actions.

Возможные ошибки

Во время создания анимации могут происходить ошибки. Вставка нового ключевого кадра в середину последовательности сложнее, чем просто добавить в конец последовательности новый ключевой кадр. Для этого нужно сначала освободить для него место в последовательности кадров, перетащив все кадры, расположенные правее точки вставки, вправо на нужное количество кадров. Flash "растянет" предыдущий кадр, добавив к нему несколько промежуточных кадров. Кадры можно превратить в ключевые, выделив их и используя Insert Keyframe.

Преобразовать промежуточный кадр в ключевой можно и другим способом. Для этого следует выделить нужный кадр и выбрать пункт Convert to Key Frames. Кадр преобразуется в ключевой кадр и копирует в него изображение из растянутого кадра. Также возможно обратное преобразование — из ключевого кадра в промежуточный, (то есть, можно удалить ключевой кадр, сделав его частью растянутого кадра). Для этого выделив нужные ключевые кадры и выбрав пункт Clear Keyframe.

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

Сохранение Flash-анимации для просмотра в плеере

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

распространяемых форматов, его нужно экспортировать. Flash может экспортировать анимацию различных форматов - GIF (обычный и анимированный), (.gif) JPEG (.jpg, jpe, .jpeg), Macromedia Shockwave/Flash (.swf), WAV (только звук) (.wav), Метафайлы Windows (.wmf), AVI (.avi) и многие другие. Экспорт это просто создание файла фильма в одном из вышеперечисленных форматов или создания Web-страниц для его вывода самостоятельно. Для того чтобы экспортировать анимацию Flash, нужно выбрать: File -— Export -— Export Movie. Если анимация создана в более новой версии Flash, а сохранена в более старой, то некоторые особенности могут быть потеряны из-за того, что более старая версия их не поддерживает.

После того как все анимации были созданы, их нужно опубликовать и внедрить в Web-страницу уже созданного электронного курса. Публикацией в терминологии Flash называется сохранение готовой графики в одном из форматов, пригодных для ее распространения. В случае анимированной графики таких форматов три: распространяемая графика Shockwave/Flash, QuickTime и анимированный GIF. При публикации Flash создает webстраницу, содержащую весь HTML-код, необходимый для проигрывания вашего фильма в Web-обозревателе. Эта страница содержит теги HTML <OBJECT> и <EMBED>, которые обеспечивают вывод фильма с заданными вами при публикации параметрами. При публикации анимации можно также создать файлы форматов GIF, JPEG или PNG, содержащие статичное представление первого кадра фильма. Это полезно тогда когда на компьютерах не установлен проигрыватель Flash.

Основным форматом Flash-анимации, который обеспечивает его просмотр с помощью Flash-плеера (либо автономно, либо через окно Web- браузера), является формат SWF. Это единственный формат, который поддерживает все интерактивные возможности фильма. Тем не менее, во многих случаях при размещении Flash-фильма на сервере SWF-файл должен быть дополнен и другими файлами. Прежде всего, это файл HTML-документа, посредством которого производится загрузка SWF-файла в браузер: сначала в браузер загружается HTML-файл, содержащий вызов Flash-плеера, а тот, в свою очередь, уже открывает SWF-файл. В ситуацию отсутствия Flash-плеера полноценную анимацию можно заменить последовательностью изображений в графических форматах, поддерживаемых браузером (JPEG, PNG или анимированным GIF).

Чтобы создать все файлы, необходимые для размещения фильма на Web-сервере, выбираем Publish из меню File. Она обеспечивает конвертирование исходного FLA-файла не только в формат SWF, но и в альтернативные графические форматы. Кроме того, с помощью этой команды генерируется и HTML-документ, предназначенный для запуска фильма с заданными параметрами.

При публикации анимации с помощью команды Publish используются параметры публикации, установленные по умолчанию. Чтобы установить собственные значения этих параметров, следует воспользоваться командой Publish Settings из меню File. Выбор данной команды приводит к открытию диалогового окна, с помощью которого и выполняются требуемые изменения.

Анализ и оценка разработки Процесс внедрения Flash-анимации в HTML-документ

Парный тег <OBJECT> служит для помещения на Web-страницу компонентов ActiveX. В том числе, с его помощью можно поместить на Web-страницу проигрыватель Flash, оформленный в виде компонента ActiveX, и загрузить в него нужный фильм. Тег <OBJECT> содержит довольно много атрибутов. С их помощью задаются, в частности, размеры внедренного компонента ActiveX на Web-странице (атрибуты WIDTH и HEIGHT) и Интернет-адрес его дистрибутива (атрибут CODEBASE). Таким образом, если нужный компонент на клиентском компьютере не установлен, Web-обозреватель может самостоятельно его загрузить и установить. Внутри тега <OBJECT> помещается набор тегов <PARAM>, с помощью которых задаются различные параметры компонента ActiveX. Для каждого компонента этот

набор параметров свой. В случае проигрывателя Flash мы можем задать имя загружаемого файла Shockwave/Flash (параметр "MOVIE") и качество графики (параметр "QUALITY"). Имя параметра задается атрибутом NAME тега <PARAM>, а значение — атрибутом VALUE.

Парный тег <EMBED> служит для помещения на webстраницу модулей расширения Web-обозревателя. В том числе, с его помощью можно поместить на Web-страницу проигрыватель Flash, оформленный в виде модуля расширения. В отличие от тега <OBJECT>, здесь все необходимые параметры задаются в самом теге <EMBED>. Здесь указываются размеры внедренного модуля на Web-странице (атрибуты WIDTH и HEIGHT), имя проигрываемого файла Shockwave/Flash (атрибут SRC), путь к дистрибутиву модуля расширения (атрибут PLUGINSPAGE) и качество воспроизведения (атрибут QUALITY). Никакие дополнительные теги в этом случае не нужны. На практике, для решения проблем с совместимостью между разными программами Web-обозревателей теги <OBJECT> и <EMBED> используются совместно. Созданный код HTML вписывается в код страницы (рисунок 12).

Рис. 12. Пример страницы с анимацией Публикация Flash-анимации в формате GIF

Если все же предусмотреть ситуацию отсутствия Flash-плеера, полноценную анимацию можно заменить последовательностью изображений в графических форматах, поддерживаемых браузером (JPEG, PNG или анимированным GIF). Рассмотрим один из этих форматов и опубликуем анимацию анимированным GIF. Если на вкладке Formats диалогового окна Publish Settings включен флажок GIF, то соответствующая вкладка становится доступной (рисунок 13).

Рис. 13. Содержимое вкладки GIF

Рассмотрим только элементы управления, задающие настройки анимации. Группа переключателей Playback позволяет выбрать между созданием статичного и анимированного изображения GIF. Если выбран переключатель Static, будет создано статичное изображение, если выбран переключатель Animated — анимированное.

Если в группе Playback включен переключатель Animated, становится доступной еще одна группа переключателей, задающая параметры "зацикливания" фильма. При включении переключателя Loop Continuously, фильм будет проигрываться непрерывно, пока не будет остановлен. Если же включен переключатель Repeat, вы сможете задать количество его повторений в расположенном правее поле ввода (рисунок 14).

Рис. 14. Вид анимации опубликованной форматом анимированным GIF

Заключение

Информационные и мультимедийнные технологии позволяют решать множество проблем, в том числе проблему обучения. Особый интерес представляют вопросы, связанные с информатизации обучения, поскольку «ручные методы» без использования технических средств давно исчерпали свои возможности. Анимации должны сопровождать разделы, которые трудно понять в обычном изложении. Это позволяет разгрузить учителя, увеличить заинтересованность учащихся в предмете за счет более наглядной подачи материала. Эмоционально составляющая увеличивает темп урока на 10-15%.

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

Для написания действий во Flash используется объектно-ориентированный язык сценариев Flash-фильмов - ActionScript. Действия могут быть как простыми (например, переход к определенному кадру и его воспроизведение, кнопки), так и сложными (выполнение вычислений и принятие решений на основе полученного результата).

Литература

[Уотролл. Э., Гербер Н., 2GGG] Уотролл. Э., Гербер Н., Эффективная работа Flash MX., Москва, 2000

[Уотролл. Э., Гербер Н., Дронов В. А., 2GG3] Уотролл. Э., Гербер Н., Дронов В. А., Macromedia Flash MX, Санкт-Петербург, 2003

[Полат Е.С., 2GG4] Полат Е.С., Теория и практика дистанционного обучения, Москва, 2004

Технология Flash, www.flashzone.ru PLATO Learning, www.plato.com Учебный курс Flash 4, www.flash.polarcom.ru

t>