Дистанционное обучение
  Вход  |  Карта сайта 

 
Главная >> Библиотека >> Пользовательские интерфейсы электронных учебников >> Динамические иллюстрации 
 




 

Динамические иллюстрации

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

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

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

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

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

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

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

Примеры

1. Логика изложения

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

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


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


1б. Другой пример на ту же тему, сочетающий иллюстрации и систематизирующую таблицу.
(Этот и последующие примеры – фрагменты курса "Проектирование операций точения, сверления и фрезерования", разработанного совместно с кафедрой «Инструментальная техника и технологии» МГТУ им. Н.Э.Баумана. Флэш-анимация выполнена студенткой Бауманки Еленой Мазуровой).


2. Заполняющиеся и раскрывающиеся таблицы

Здесь и далее к исходным кадрам флэш-анимации добавлены желтым номера кадров, поясняющие текст стрелки, линии и иконки


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

3. Моделирование движения

 
 

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


4. Идентификация формул
 
 

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

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


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





спонсоры проекта: Картинки скачать

  © Портал "Дистанционное обучение", 2006-2017.
Перепечатка и использование материалов допускается с условием размещения ссылки Портал "Дистанционное обучение".
Также мы будем очень благодарны, если вы просто разместите эту ссылку на своем сайте.
 
рекомендуемая ссылка: Держатели для ценника канцтовары Москва прозрачное акриловое стекло