CC BY
40
ОБРАЗОВАНИЕ
Мазин Максим Александрович, Парфенов Владимир Глебович, Шалыто Анатолий Абрамович
анимация. flash-технология. автоматы
введение
В настоящее время интерактивная анимация широко используется в различных приложениях, таких как веб-дизайн, электронные обучающие пособия и т. д.
Создание такой анимации возможно при непосредственном программировании на различных языках, например, C++ или Java. В этой области традиционно применяются графические библиотеки, из которых наиболее распространены OpenGL [1] и DirectX [2]. Первая характеризуется независимостью от платформы, а вторая, кроме средств работы с графикой, предоставляет также широкий спектр других средств разработки мультимедийных приложений.
Существуют средства, позволяющие ускорить процесс создания анимации за счет использования редакторов трехмерной графики, например, пакет 3D-Max [3]. Обычно такие пакеты применяются совместно с указанными выше графическими библиотеками.
Однако если необходимо разрабатывать приложения для сети Интернет, то наиболее предпочтительным оказывается использование пакета Macromedia Flash [4], являющегося основой Flash-технологии. Большая популярность этой технологии в мире [5] объясняется рядом ее достоинств, среди которых следует отметить ее поддержку большинством современных браузеров и компактность исполняемого файла.
Как правило, содержание анимации задается ее сценарием. Различают линейные и нелинейные сценарии.
Если для реализации линейных сценариев, в которых отсутствуют разветвления, достаточно средств встроенного редактора Macromedia Flash, то для нелинейных сценариев, отличающихся наличием разветвлений, дополнительно применяется язык ActionScript [6]. В интерактивной анимации, в отличие от мультфильмов, обычно используются нелинейные сценарии.
Язык ActionScript в основном применяется для реализации достаточно простых нелинейных сценариев. В более сложных случаях его традиционное применение затруднительно. Так, например, интерпретатор не сообщает об использовании в выражениях не инициализированных переменных, что приводит к тому, что ошибку в имени переменной можно искать часами.
S1 Нас&л&щее иНЛергкЛибнл^
широка исшма^ееися 6 feojMttftux прмафеШ&х...
Авторами предлагается применять автоматную парадигму для формализации перехода от заданного сценария к коду программы на языке АсйопЗспрХ. Это позволяет устранить указанные недостатки.
разработка интерактивной анимации
Разработка анимации предполагает решение четырех подзадач:
- создание сценария;
- формализация сценария;
- «рисование»;
- программирование.
Решать указанные подзадачи будем на основе ^1ТСИ-технологии [8, 9], базирующейся на парадигме автоматного программирования, которая называется также программированием с явным выделением состояний.
По вербальному заданию (тексту сценария) строится его математическая модель в виде графа переходов конечного автома-
Фесиа&ъ срсаулЯЯш nof-jof/izic ёе^лм. ocfofie.
SWITCH
та. Для этого сюжет разбивается на сцены - статические изображения. В каж-, ' дой сцене присутствуют элементы управления, с помощью которых пользователь осуществляет ввод данных. Каждая сцена определяет состояние автомата, в котором указанное изображение формируется как выходное действие.
При этом пользовательский ввод генерирует входные переменные и порождает события, с которыми вызывается автомат. В зависимости от типа события и от значений входных переменных, вызываемый автомат может осуществлять переходы.
Анимация, связанная с задачей, составляет совокупность дополнительных выходных действий, которые выполняются при переходах автомата.
Кроме того, при переходах выполняются выходные действия, связанные с управлением средой исполнения, например, таким действием является завершение работы флэш-плеера.
Изложенное позволяет построить схему связей автомата, которая описывает его интерфейс. При этом автомат управляет статическими изображениями, анимацией и средой исполнения.
По построенному графу переходов формально и изоморфно строится текст подпрограммы, который реализует его на основе конструкции switch языка ActionScript. Функции входных переменных и выходных действий на этом этапе заменяются функциями-заглушками. Обработчики событий выделяют из потока обрабатываемые события и вызывают с этими событиями автомат, который, в зависимости от своего текущего состояния и значений входных переменных, может осуществлять переходы и выходные действия.
После реализации графа переходов программист пишет программные модули, соответствующие входным переменным, обработчикам событий и выходным действиям. В то же время, руководствуясь схемой связей автомата, художник «рисует» статические изображения и выполняет раскадровку анимации.
Тем самым создает -
ся программа, состоящая из обработчиков событий, конструкции switch и функций, вызываемых из нее.
Отладка программы в рамках предлагаемого подхода осуществляется с помощью протоколов (логов), для построения которых вводятся функции протоколирования, вызываемые из конструкции switch, функций выходных действий, входных переменных и обработчиков событий.
пример
Рассмотрим предлагаемый процесс на примере разработки интерактивной задачи по физике. В качестве основы для сценария используем упражнение из задачника [7]: «Ученик заметил, что палка длиной 1.2 м, поставленная вертикально, отбрасывает тень длиной 0.8 м. А длина тени от дерева оказалась в это же время равной 9.6 м. Какова высота дерева?»
Создадим по формулировке задачи сценарий. Так как в древней Греции геометрическая оптика получила особенное развитие, в сценарии будут использованы древнегреческие образы: Старец в тоге, древнегреческий храм, кипарис, высоту которого измеряем в задаче, и Гелиос на колеснице.
Приведем неформальный текст сценария.
Ландшафт, на заднем плане - дерево. Стоит Старец. Появляется надпись: «Как можно измерить вы1соту дерева, используя за-коны1 геометрической оптики?»
Старец берет палку, втыкает ее в землю. Появляется надпись «Запиши в тетрадь значение дли-ны1 палки». Рядом с палкой появляется линейка. Крупные метки на линейке позволяют зафиксировать ее длину. Метка, соответствующая длине палки, окрашивается в другой цвет.
...хууофШж «рисуей» айа&игеские иуобрафеШя и рассарробку лШмасуш...
В тетради (на пергаменте) появляется надпись «Длина палки к = _локтей». Тетрадь выполнена из пергаментных листов. Шрифт надписи должен быть стилизован. Если пользователь ввел неверный ответ, то появляется надпись: «Неверно! Попробуй еще раз».
При верном ответе Старец обращает внимание ученика на тени. Это выражается в том, что он показывает рукой на тени и предлагает измерить длину теней - от дерева и от палки.
Появляется надпись: «Посмотри на тени. Измерь и занеси их длины в тетрадь».
В тетради появляются надписи: «Длина тени палки I =_локтей», «Длина тени дерева =___локтей». Если
пользователь ввел неверные длины теней, то появляется надпись «Измерь точнее длины теней».
Если пользователь ввел верный ответ, появляется надпись: «Теперь у тебя есть все данные, чтобы вычислить высоту дерева». В тетради появляется окно для
сценарии бурфй итольуо&али фребнегрегесхие обрамь
... ¿орала ¿атусаае&с& с Но&ими ¿НагеНфми
ввода ответа «Высота дерева И =
локтей». Если введен неправильный ответ, то появляется подсказка.
Подсказка: наблюдаем геометрическое построение (на пергаменте) - два подобных треугольника. Вертикальные стороны этих треугольников составлены для большего треугольника - из дерева, а для меньшего - из палки. Появляется надпись: «Неверно! Посмотри чертеж. Обрати внимание, что лучи от солнца параллельны».
Если пользователь опять вводит неправильное число, то выводится решение -описанный чертеж и вывод формулы для вычисления высоты дерева. Возникает надпись: «В решении этой задачи используется правило подобия треугольников».
Перейдем к формализации сценария. Первоначально введем элементы управле-
... (¿¿обращение Теммса, аересекоощего НебосклоН.
ния, а также выделим входные переменные, события и выходные действия.
Для управления анимацией введем следующие кнопки и поля:
- кнопка «Выход» - по ее нажатию флэш-плеер прекращает работу;
- кнопка «Следующая задача» - по ее нажатию начинается загрузка следующей задачи. В примере рассматривается одна задача, и поэтому следующей задачей также является рассматриваемая;
- кнопка «Повторить задачу» - по ее нажатию задача запускается с новыми значениями величин, фигурирующих в ее условии, например, новыми длиной палки и высотой дерева;
- четыре текстовых поля для ввода длины палки, длин теней палки и дерева, а также высоты дерева. В тексте сценария полям соответствуют подчеркнутые пробелы;
- кнопка «Готово» - пользователь нажимает эту кнопку после окончания ввода ответа в соответствующие поля. По ее нажатию проверяется правильность введенных значений;
- кнопка «Дальше» - ее нажатие инициирует переход от одной статической сцены к другой.
Несмотря на то, что при запуске автомат уже находится в начальном состоянии, его необходимо инициализировать событием е0, для того чтобы автомат смог сформировать статическое изображение в начальном состоянии.
Во время загрузки файла с анимацией - для комфорта пользователя - на экран выводится «предзаг-рузчик» (короткая циклическая анимация) — изображение Гелиоса, пересекающего небосклон.
Выделим сцены, каждой из которых присвоим номер, соответствующий вершине графа переходов. Переходы обозначим двойным номером (¡, у), где «¡» - номер сцены, из которой осуществляется переход, а «у» -сцена, в которую осуществляется пе-
реход. Введем также обозначение событий «е», инициирующих переходы. Входные переменные обозначим «х», если условием перехода является истинное значение переменной, и «!х» - в противном случае. Кроме того, введем обозначения выходных действий, которые могут быть трех типов: статические изображения «гз», анимация «га» и системные действия «г». При этом статические изображения формируются в вершинах, а анимация и системные действия - на переходах.
Приведем формальный текст сценария.
0. Предзагрузчик: Гелиос пересекает небосклон на колеснице (&0).
(0, 1) По завершении загрузки (е3) появляется надпись: «Как можно измерить высоту дерева, используя законы геометрической оптики?» (га0), происходит инициализация значений начальных условий задачи (г2).
1. Ландшафт, на заднем плане - дерево. Стоит Старец (гз1).
(1, 2). При нажатии кнопки «Дальше» (е2) Старец берет палку и втыкает ее в землю. Появляется надпись: «Запиши в тетрадь значение длины палки» (га1).
2. Рядом с палкой появляется линейка. Крупные метки на линейке позволяют зафиксировать ее длину. Метка, соответствующая длине палки, окрашивается в красный цвет. В тетради (на пергаменте) появляется надпись «Длина палки /г
=___локтей». Шрифт надписи
стилизован - используется шрифт «капитальное письмо» (гз2).
(2, 2). Если пользователь ввел (е1) неверный ответ (!х1), то появляется надпись: «Неверно! Попробуй еще раз», Старец мотает головой (га3). Ответ вводится в поле «Длина
палки к = _». Для подтверждения
ввода пользователь нажимает кнопку «Готово».
(2, 3). В случае ввода (е1) верного ответа (х1) появляется надпись: «Посмотри на тени с линейками. Измерь и занеси их длины в тетрадь» (га2).
3. Старец в тоге обращает внимание пользователя на тени. Это выражается в том, что он показывает рукой на тени и предлагает измерить длину теней - от дерева и от палки. В тетради появляются надписи: «Длина тени палки I =_локтей», «Длина тени дерева L = _локтей» (гя3).
(3, 3). Если пользователь ввел (е1) неверный ответ - ошибочные значения длин теней (!х2), то появляется надпись «Измерь точнее длины теней» (га4).
(3, 4). Если пользователь ввел (е1) верный ответ (х2), появляется надпись: «Теперь у тебя есть все данные, чтобы вычислить высоту дерева», Старец кивает (га5).
4. В тетради возникает окно для ввода ответа «Высота дерева Н =_локтей» (гз4).
(4, 5). В случае ввода (е1) неправильного ответа - высота дерева введена ошибочно (!х3), появляется надпись «Неверно! Посмотри чертеж. Обрати внимание, что лучи от солнца параллельны» (га6).
(4, 7). Если пользователь ввел (е1) верный ответ (х3), появляется надпись об успешном решении задачи: «Задача решена», Старец поднимает руку (га7).
5. Подсказка: «Чертеж на пергаменте - два подобных прямоугольных треугольника. Катет одного из треугольников
Фа кнопка «^щоу»,
Нафа&хе На ко&орфл ^аёермаеЛ- рабо&у фл&м-плеера.
Рисунок 1. Изображение после перехода из состояния 4 в состояние 5
составлен из дерева, а второго - из палки (1я5).
(5, 6). Если опять вводится (е1) неверный ответ (!х3), то появляется надпись: «В решении этой задачи используется правило подобия треугольников». Старец сердится (кл8).
(5, 7). Если пользователь ввел (е1) верный ответ (х3) после подсказки, появляется надпись об успешном решении задачи. Старец поднимает руку (1а7).
6. Выводится верное решение. Оно представляет собой описанный выше чертеж с треугольниками, но дополнительно к нему приводится процесс получения ответа. Возникает кнопка «Дальше» (156).
(6, 7) Нажав на кнопку «Дальше» (е2), переходим к заключительной сцене.
Рисунок 2. Структурная схема программы.
7. Заключительная сцена: «Ответ получен». Старец улыбается. Появляются кнопки «Следующая задача», «Повторить задачу» (zs7).
(7, 0) Нажатие на кнопку «Следующая задача» (e5) приводит к выгрузке текущей задачи и загрузке следующей (z1).
(7, 1) При нажатии на кнопку «Повторить задачу» (e6) генерируются новы1е значения начальные условий (z2). Вновь выводится надпись: «Как можно измерить высоту дерева, используя законы1 геометрической оптики?» (za0).
Замечание: на экране постоянно присутствует кнопка «Выход», нажатие на которую (e4) завершает работу флэш-плеера.
В качестве примера приведем изображение, формируемое выходным действием zs5 в состоянии 5 и выходным действием (za6) при переходе из состояния 4 в состояние 5 (рисунок 1).
Для написания программы проведем дальнейшую формализацию задачи. Построим схему связей автомата, определяющую его интерфейс (рисунок 3).
Граф переходов, построенный с помощью шаблона (stencil), описанного в работе [10], приведен на рисунке 4.
Обратим внимание, что граф переходов является не «картинкой», а математической моделью, по которой текст фрагмента программы, реализующего логику задачи, строится формально и изоморфно.
Для окончательного построения программы, реализующей автомат, необходимо разработать тексты подпрограмм входных переменных, обработчиков событий и выходных действий. Так как в перечисленных подпрограммах практически отсутствует логическая обработка, они реализуются традиционным путем.
Пользователь АО
Введена верная высота палки? х1 280
Введены верные длины теней? х2 281
Введена верная высота дерева? х3 282
283
284
285
286
287
Система
Инициализировать автомат е0 2а0
Окончание загрузки задачи е3 2а1
2а2
2а3
2а4
2а5
2а6
Кнопки 2а7
Нажатие кнопки «Готово» е1 2а8
Нажатие кнопки «Дальше» е2
Нажатие кнопки «Выход» е4 20
Нажатие кнопки «Следующая задача» е5 21
Нажатие кнопки «Повторить задачу» е6 22
Статические изображения
Заставка учебника: «Гелиос пересекает небосклон на колеснице».
Ландшафт, на заднем плане - дерево. Стоит Старец.
Рядом с палкой появляется линейка. Метка, соответствующая длине палки, окрашивается в красный цвет. В тетради появляется надпись: «Длина палки И = ... локтей»._
Старец в тоге показывает рукой на тени от дерева и от палки и предлагает измерить их длину. В тетради появляются надписи: «Длина тени палки I = ... локтей», «Длина тени дерева 1_ = ... локтей».
В тетради возникает окно для ввода ответа: «Высота дерева Н = локтей».
Старец хмурится. Подсказка: «Чертеж на пергаменте - два подобных прямоугольных треугольника. Катет одного из треугольников составлен из дерева, а второго - из палки».
Выводится верное решение: описанный выше чертеж с треугольниками. Дополнительно к нему приводится процесс получения ответа. Возникает кнопка «Дальше».
Заключительная сцена: «Ответ получен, Старец улыбается». Появляются кнопки «Следующая задача», «Повторить задачу».
Анимация
Титр: «Как можно измерить высоту дерева, используя законы геометрической оптики?»_
Титр: «Запиши в тетрадь значение длины палки». Старец берет палку и втыкает ее в землю.
Титр: «Посмотри на тени с линейками. Измерь и занеси их длины в тетрадь».
Титр: «Неверно! Попробуй еще раз». Старец мотает головой.
Титр: «Измерь точнее длины теней».
Титр: «Теперь у тебя есть все данные, чтобы вычислить высоту
дерева».
Старец кивает.
Титр: «Неверно! Посмотри чертеж. Обрати внимание, что лучи от солнца параллельны»._
Титр: «Задача решена». Старец поднимает руку.
Титр: «В решении этой задачи используется правило подобия
треугольников».
Старец очень раздражен.
Среда исполнения
Завершить работу флэш-плеера.
Выгрузить текущую задачу. Загрузить следущую.
Генерировать значения начальных условий задачи.
Рисунок 3. Схема связей, описывающая интерфейс автомата
Структурная схема программы приведена на рисунке 2.
Обработчик системного события запускается в связи с этим событием, например, от устройства «мышь» или клавиатуры, вы-
деляет это событие и вызывает с ним (в качестве аргумента) автоматную функцию.
Из изложенного следует, что при применении предлагаемого подхода логика, в отличие от традиционного подхода, не рас-
е0
Рисунок 4. Граф переходов, реализующий логику задачи.
средоточена по обработчикам событий, а централизована, что резко упрощает отладку, которую в работе [9] предлагается проводить с помощью протоколирования, выполняемого в терминах автоматов. Этот модуль, вызываемый из автомата обработчиков событий и функций выходных действий для упрощения структурной схемы на рисунке 2 не показан. При отладке возможен вывод протоколов на экран (рисунок 5). Для отключения и включения вывода протоколов на экран используется флажок в левом нижнем углу экрана.
Рисунок 5. Вывод протоколов на экран.
Л*.««!
заключение
Подход, предлагаемый в настоящей работе, позволяет использовать автоматы при спецификации, в тексте программы и при протоколировании.
Таким образом, в настоящей работе предложена новая технология программирования анимации на языке ксйопЗспрХ.
Литература.
Листинги программ приведены в Приложении на диске к журналу, а исходные тексты и исполняемый файл - на сайте http://is.ifmo.ru в разделе «Статьи».
Работа выполнена при поддержке Российского фонда фундаментальных исследований по гранту №02-07-90114 «Разработка технологии автоматного программирования».
1. Тарасов И.А. Основы программирования в OpenGL. M.: Горячая линия - телеком, 2001.
2. Гончаров Д., Салихов Т. Книга DirectX 7.0 для программистов. СПб.: Питер, 2001.
3. Маэстри Дж. Компьютерная анимация персонажей. СПб.: Питер, 2001.
4. Рейнхардт Р., Ленц Дж. Flash 5. Библия пользователя. M.: Вильяме, 2001.
5. Туйкин М. CeBIT 2002 // Программист, 2002, № 4.
6. Сандерс Б. Flash ActionScript. СПб.: Питер, 2001.
7. Степанова Г.Н., Степанов А.П. Сборник вопросов и задач по физике. СПб.: Основная школа, 2001.
8. Шалыто А.А. SWITCH-технология. Алгоритмизация и программирование задач логического управления. СПб.: Наука, 1998.
9. Шалыто А.А., Туккель Н.И. SWITCH-технология — автоматный подход к созданию программного обеспечения «РЕАКТИВНЫХ» систем // Программирование. 2001, № 5. http://is.ifmo.ru. Раздел «Статьи».
10. Головешин А. Конвертер Visio2Switch. http://is.ifmo.ru. Раздел «Последователи».
Мазин Максим Александрович, студент кафедры1 «Компьютерные технологии» Санкт-Петербургского государственного института точной механики и оптики (технического университета) -СПбГИТМО (ТУ), Парфенов Владимир Глебович, д.т.н., профессор, декан факультета «Информационные технологии и программирование» СПбГИТМО (ТУ), Шалы1то Анатолий Абрамович, д.т.н., профессор кафедры1 «Компьютерные технологии» СПбГИТМО (ТУ).
© Наши авторы, 2003. Our authors. 2003.
