Материал: Разработка интерактивных компонентов для виртуальных лабораторных практикумов

Рис. 3.1. Рабочее пространство Adobe Flash.

Рабочее пространство находится в центре и является виртуальным холстом. На нем рисуются изображения, помещается текст и создаются объекты, которые перемещаются по экрану. Оно также является местом воспроизведения: при тестировании анимации, чтобы увидеть, нужны ли какие-либо доработки, она появляется именно на сцене (рис 3.2) [57].

Временная шкала предназначена для упорядочивания содержимого по времени и управления слоями и кадрами. Во Flash время делится на кадры, как на кинопленке. Основными компонентами временной шкалы являются слои, кадры и точка воспроизведения (рис. 3.3) [58]. Временная шкала отражает, в каком месте находится анимация, а также контуры движения. С помощью элементов управления в разделе слоев на временной шкале можно отображать и скрывать, блокировать и разблокировать слои, а также отображать их содержимое в виде контуров. Кадры можно перетаскивать в другое место в том же или в другом слое.

Рис. 3.2. Внешний вид панели «Сцена».

Рис. 3.3. Временная шкала

Библиотека документа Flash хранит ресурсы, которые могут быть как созданными в среде разработки Flash, так и импортированными для использования в документе (рис. 3.4). Векторные иллюстрации, текст и символы можно создавать непосредственно в Flash, а векторные и растровые изображения, видео и звук можно импортировать.

Символом в Flash называется любой объект, будь то изображение, кнопка, фрагмент ролика или текст, который достаточно создать единожды, чтобы потом использовать многократно. Для придания документам динамики, для добавления мультимедийного содержимого применяются сценарии ActionScript. В библиотеке также содержатся все компоненты, которые были добавлены в документ. Компоненты хранятся в библиотеке скомпилированными фрагментами. Все элементы библиотеки любого документа Flash, открытого в программе Flash, доступны из этого файла для текущего документа [59].

Рис. 3.4. Библиотека символов.

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

Панель инструментов содержит инструменты выбора, рисования и ввода текста, заливки и редактирования, навигации и элементы управления (рис. 3.6).

По умолчанию командой «Опубликовать» создается SWF-файл Flash и документ HTML, который вставляет содержимое Flash в окно обозревателя (рис. 3.7). Если изменить параметры публикации Flash, то эти изменения сохранятся вместе с документом. Чтобы проверить работу SWF-файла перед публикацией, используется команда тестирования ролика (меню «Управление» > «Тестировать ролик») (рис. 3.8). Анимация - это последовательный показ заранее подготовленных графических файлов, а также компьютерная имитация движения с помощью изменения и перерисовки формы объектов или показа последовательных изображений с фазами движения [60].

Рис. 3.5. Панель свойств.

Рис. 3.6. Панель инструментов.

Рис. 3.7. Публикация ролика.

Рис. 3.8. Тестирование ролика

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

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

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

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

При помощи языка сценариев ActionScript в приложение добавляются сложные функции интерактивности, отображения данных и управления воспроизведением. Использование ActionScript в среде разработки осуществляется на панели «Действия» (рис. 3.9), в окне «Сценарий» или при помощи внешнего редактора. ActionScript обладает собственным синтаксисом и зарезервированными ключевыми словами, дает возможность использовать переменные для хранения и извлечения информации. ActionScript содержит обширную библиотеку встроенных классов, с помощью которых можно создавать объекты для выполнения многих полезных задач.

Рис. 3.9. Панель «Действия»

В основе языка ActionScript 3.0 лежат объекты. Это его главный конструктивный материал. Любая объявленная переменная, написанная функция, каждый созданный экземпляр класса являются объектами. Программа, написанная на ActionScript 3.0, рассматривается как группа объектов, которые выполняют задачи, реагируют на события и взаимодействуют друг с другом.

Прослушиватели или обработчики событий - это функции, выполняемые Flash Player и AIR в ответ на конкретные события. Чтобы добавить прослушиватель, нужно, во-первых, создать метод функции или класса для Flash Player или AIR, который выполняется в ответ на появление события. Во-вторых, необходимо использовать метод addEventListener() для регистрации своей функции прослушивателя в цели события или любом объекте из списка отображения, который находится в соответствующем потоке событий [61].

Прослушиватель событий является экземпляром класса, реализующего интерфейс EventListener, тогда как функция прослушивателя является методом этого класса с именем handleEvent() [42].

this.addEventListener(MouseEvent.CLICK, clickHandler); clickHandler(event:MouseEvent):void { … }

Метод addEventListener() - это основополагающий компонент функций прослушивателя. Необходимо обязательно указывать параметры type и listener. Параметр type применяется для определения типа события. Параметр listener указывает на функцию прослушивателя, которая выполняется при наступлении события. Параметр listener может быть ссылкой либо на функцию, либо на метод класса [62].

На основе метода прослушивателя событий создан весь лабораторный практикум по дисциплине «Неорганическая химия». В AS3, при создании приложений в среде Flash, очень важно свойство отклика объекта класса на происходящее событие, потому основным элементом, которым необходимо было пользоваться при разработке программного кода, был слушатель событий (EventListener):

target.addEventListener(type, listener[, useCapture]); .addEventListener(type, listener[, useCapture, wantsUntrusted ]);

Параметры:

type:String - тип события;

listener:Function - функция прослушивателя, обрабатывающая событие.

Т.к. пользователь, в первую очередь, будет пользоваться исключительно мышью при работе с приложением, потому основная функция listener - это захват события кнопок мыши:

MouseEvent[func], где func - действие мыши, которое будет обрабатываться.

MouseEvent.MOUSE_DOWN - нажата;.MOUSE_UP - опущена.

При разработке практикума были использованы созданные ранее универсальные принципы работы лаборатории.

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

Реализация алгоритма программным кодом осуществляется следующим образом:

object1.addEventListener(MouseEvent.MOUSE_DOWN, takeObject);.addEventLiostener(MouseEvent.MOUSE_UP, stopTakeObject);takeObject(e:MouseEvent): void {.startDrag();

}stopTakeObject(e:MouseEvent): void {.stopDrag();(object1.hitTestObject(hitObject(Object2))) {

<…>

}{.x = object1.x0;1.y = object1.y0;

}

}

Далее для объекта создаются 2 слушателя событий: при нажатии на левую клавишу мыши и при её отпускании. Далее для каждого из слушателей описаны функции, которые управляют действием объекта.

Функция takeObject дает возможность объекту начать двигаться. Функция stopTakeObject останавливает передвижение объекта, одновременно проверяя его местоположение. Если объект вступил во взаимодействие с «объектом-точкой остановки», он ссылается на функцию, которая указывает объекту, что с ним должно происходить дальше. Если передвигаемый объект не выполнил запланированное взаимодействие, он возвращается на свои первоначальные координаты на сцене (x₀, y₀).

При перемещении объекта он взаимодействует с неким «объектом-точкой остановки». Это взаимодействие имеет свою природу и для каждого передвигаемого объекта оно своё собственное.

В принципе универсального взаимодействия объектов существуют следующие подпринципы:

Объект1 vs. Объект2 (OvO) - когда объект не несет в себе сложных операций, а просто перемещается относительно «объекта-точки остановки» (например, «пробка»);

Объект1Действие vs. Объект2 (ODvO) - когда объекту необходимо совершить какое-то действие с предметом, который является для него «объектом-точкой остановки» (например, «шпатель»);

Объект1Действие1 vs Объект2Действие2 (ODvOD) - когда при взаимодействии одного объекта с другим оба совершают какое-либо действие.

Реализация алгоритмов программным кодом осуществляется следующим образом:

Function OVO(x0, y0) {.x = x0 + object2.x;.y = y0 + object2.y;

}ODvO() {.Event.play();

}ODvOD() {.Event.play();.Event.play();

}(object1.Event == true) {(object2.Event == true) {();

}{();

}

}{(object1.x0, object1.y0);

}

В лабораторном практикуме встречаются 4 типа визуализации реакций: горение, выпадение осадка, изменение цвета, выделение газа. Реализация алгоритма программным кодом осуществляется следующим образом:

If (typeReaction == 1) { //реакция горения

Fire.x = x;.y = y;.play();

}(typeReaction == 2) { //реакция с изменением цвета.x = x;.y = y;.color = col;.play();

}

If (typeReaction == 3) { //реакция с выпадением осадка

Osadok.x = x;.y = y;.play();

}(typeReaction == 4) { //реакция с выделением газа.x = x;.y = y;.play();

}

На входе принципу передается номер типа визуализации (1 - горение, 2 - изменение цвета, 3 - выпадение осадка, 4 - выделение газа), координаты, где реакция должна происходить, и цвет, на который реакция должна измениться.

В составе лабораторного журнала приложения входит 2 типа тестовых заданий. В первом необходимо дописать продукты реакций и уравнять химические реакции, а во втором нужно вставить недостающие фразы. Происходит сравнение введенных данных с правильными, заложенными в состав лабораторной работы. Реализация проверки осуществляется таким образом:rez; //объявление переменной результата

var otvet = […]; //внесение вручную правильных ответов в массив

btn.addEventListener(MouseEvent.CLICK, btn_click);btn_click (event:MouseEvent):void {= 0;(i=1; i>Elements; i++) {(element(i)==otvet(i)) rez+=1;

}.text = String(rez) + “/” + String(otvet.);//вывод результата

}

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

3.2 Устранение недостатков, оптимизация кода, разработка компонентов

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

Кнопке переключения страниц добавлен единственный однозначный код, который отсылает на следующую страницу журнала, до тех пор, пока журнал не кончится. Таким образом, она работает исправно, а журнал перемещается на свое следующее состояние, которое представляет из себя кадр внутри объекта «журнал».

Рис. 3.10. Кнопка переключения страниц.

В предыдущих версиях лабораторного практикума текст был разбит на буквы, а буквы, в свою очередь, переведены из текстового формата в разбитые на пиксели фигуры (Рис. 3.11). Как после внесенных изменений выглядит текст, представлено на рисунке 3.12:

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

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

Рис. 3.11. Текст в предыдущих версиях лабораторного практикума.

Рис. 3.11. Текст в предыдущих версиях лабораторного практикума.

TLF-поля не поддерживаются в последних версиях Adobe Flash, с чем была связана необходимость замены их на классические текстовые поля. Также потребовалось внедрение шрифтов для корректного отображения индексов и самого текста на всех устройствах (Рис. 3.12).

Рис. 3.12. Внедрение шрифтов.

На рисунке 3.13 приведен пример кода, реализующего замену.

Рис. 3.13. Фрагмент кода замены.

Механизм преобразования текста в индексы реализуется с помощью так называемых тегов. Организуется макрозамена открывающего и закрывающего тега в тексте на теги, обозначающие стиль html-текста, размещенного внутри текстового поля.

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

Также программа была адаптирована под Android и протестирована на нескольких смартфонах и планшетах.

3.3 Разработка лабораторного комплекса

Разработанный лабораторный комплекс содержит 20 работ, которые объединяются в 6 блоков.

Блок 1. Определение состава кристаллогидрата

Здесь студент на основании массы взятого кристаллогидрата и полученной из него безводной соли, определяет содержание воды в кристаллогидрате и устанавливает его формулу. Обезвоживание кристаллогидрата проводят его нагревание. Чтобы убедиться в полноте обезвоживания соли, студент должен проводить прокаливание до тех пор, пока результаты двух последних взвешиваний соли не будут равны.

В данный блок входит 5 лабораторных работ:

·        Определение состава кристаллогидрата: CuSO₄;

·        Определение состава кристаллогидрата: FeSO₄;

·        Определение состава кристаллогидрата: CoCl₂;

·        Определение состава кристаллогидрата: KAl(SO₄)₂.

Блок 2. Приготовление раствора заданной концентрации

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