Разработка учебных материалов с использованием flash-технологий

ВВЕДЕНИЕ

С 2000 года на сайте Distance Learning Belarus (далее DL) ведётся разработка обучающего материала по различным курсам: программирования, математики, английского языка. Изначально теоретический материал предоставлялся пользователям с помощью обычных текстовых файлов. Проверочные задания — написаны на JavaScript (в этом случае пользователь должен изменить текущее состояние экрана), или представлены как текстовые задачи (здесь пользователь должен написать программу на подходящем языке программирования и отправить необходимый файл для проверки). Представление теоретического материала и проверочных заданий описанным образом сопровождаются определёнными неудобствами для пользователя: 1. Теорию необходимо искать на отдельных страницах сайта, а не там, где размещаются задания;2.При изучении теории отдельно пользователь не может тут же попробовать применить её на практике; 3. Задания написанные на JavaScript долго загружаются.

Эти недостатки можно ликвидировать, если для разработки лекций и заданий применять среду векторной анимации macromedia flash (далее MF). Она позволяет создавать динамические лекции, где обучающийся может не только прочитать теорию, но и увидеть, как эту теорию следует применять для решения практических задач. Также разработчик может предусмотреть ряд задач, которые он помещает как в лекцию, так и отдельно. Размер файлов с заданиями созданными в MF гораздо меньше размера файлов с заданиями созданными на JavaScript, следовательно они быстрее загружаются на DL, а так же они более содержательные.

Одной из первых нами была создана лекция об упрощении логических функций четырёх переменных с помощью карт Карно. Она была разбита на четыре части: «Создание карты Карно», «Заполнение карты», «Покрытие карты», «Написание упрощённой логической функции». Каждая часть размещалась на отдельных страницах сайта и содержала различные элементы управления, что усложняло работу обучающегося. Конечно данную лекцию можно было не разбивать на части, а делать одним Flash-фильмом (но тогда увеличился бы размер файла и обучающемуся пришлось бы долго ждать загрузку лекции), тогда элементы управления были бы неизменны (но у разных разработчиков разные элементы управления). Возникает вопрос «А можно ли стандартизировать лекции, разрабатываемые для DL?». Да такая возможность существует. Нами был создан шаблон лекций. Он позволяет пользователю создавать Flash-лекции без использования элементов управления (они уже включены в шаблон), также он позволяет объединять части лекций и загружает их последовательно, т. е. загрузил 1-ую лекцию, пока обучающийся её просматривает, шаблон загружает все остальные. Он анализирует текущее состояние лекции и выдаёт необходимые подсказки.

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

Шаблон «Найди отличия» позволяет преподавателю создавать задания, которые учат концентрировать внимание на общих и отличительных особенностях предметов в зависимости от их расположения. Экран делится на два прямоугольных поля. В них преподаватель загружает два независимых рисунка. На каждом из рисунков он указывает области, клики в которых (по одному в каждую область) считаются «правильными». Клики во всех других частях рисунков воспринимаются как неправильные ответы. Поддерживается автоматическое разбиение каждой из областей на квадратики и выделение (некачественное) сравниваемых квадратиков, перемещение фокуса (стрелочками вверх-вниз, вправо-влево) пары сравниваемых квадратиков.

В задании на аналогию необходимо по уставленному в образце существенному признаку расставить объекты в определённой последовательности. В шаблоне «Аналогия» экран делится на четыре прямоугольных области: соответственно слева представлены пример ввода и пример вывода — образец, а справа — пример ввода — исходные данные, пример вывода — область для ответов обучающихся. Задача — заполнить область справа внизу (пример вывода) по аналогии с тем, как это сделано слева. При этом существенен порядок размещения выходных данных в зависимости от исходных. В этом шаблоне при разработке задания преподавателю необходимо составить матрицы перемещения объектов. Эти матрицы позволяют шаблону «понять» правильность выбранной аналогии, а также «сориентироваться» на выбор подсказки.

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

1. ПРИМЕНЕНИЕ ТЕХНОЛОГИЙ MACROMEDIA FLASH

1.1 Общие сведения о языке программирования Action Script 2.0

ActionScript — это язык программирования, используемый программой Flash MX. По сравнению с главной временной шкалой, позволяющей создавать лишь линейную анимацию, ActionScript расширяет возможности программирования. При помощи ActionScript ваш ролик будет реагировать, например, на выбор, делаемый пользователем, или на другие события. ActionScript позволяет управлять элементами, которые видит пользователь, и вместо простой анимации показывать нелинейные презентации, интерактивные приложения или игры.

Инструмент для работы с ActionScript реализован в виде диалоговой панели Actions (Действия), внешний интерфейс которой ничем не отличается от других панелей Flash MX. Однако при более близком знакомстве с ней оказывается, что это самый настоящий редактор для создания сценариев на ActionScript. Причем работать он может в двух режимах: обычном (то есть предназначенном для «обычных» пользователей) — Normal, и в экспертном (для «продвинутых» пользователей) — Expert.

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

Рисунок 9 — Обычный формат панели Actions

Рисунок 10 — Экспертный формат панели Actions

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

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

Рисунок 11 — Окно фильма после добавления кнопок Итак, для включения в фильм интерактивных кнопок необходимо выполнить следующие действия:

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

2) Щелкните мышью в ячейке первого ключевого кадра в «кнопочном» слое.

3) Перетащите поочередно из окна библиотеки на стол две кнопки, которые вы решили использовать в фильме; в результате окно Flash будет выглядеть примерно так, как показано на рисунке 11.

4) Выберите первую из кнопок, с помощью которой фильм должен приостанавливаться.

5) С помощью инспектора свойств кнопки откройте панель Actions и щелкните в списке Actions Toolbox на значке раздела Actions.

6) Откройте подраздел Movie Control, отыщите в нем действие Stop и дважды щелкните на нем мышью; в результате в окне сценария появится текст сценария, содержащий обработчик on (release); он обеспечивает инициализацию действия stop () при наступлении события release (то есть при щелчке на кнопке); пустые скобки после имени процедуры означают, что данная процедура используется без параметров; соответствующее сообщение выводится и в окне параметров, как показано на рисунке 12.

7) Не закрывая панель Actions, выберите на столе вторую кнопку и назначьте ей действие play, повторив описанную выше процедуру.

В отличие от обычной анимации, протестировать многие сценарии в режиме редактирования невозможно. Чтобы проверить, как работают созданные кнопки, следует выбрать в меню Control команду Test Movie или Test Scene (тотже эффект даст сочетание клавиш Ctrl+Enter). В результате фильм будет Экспортирован в формат SWF и затем воспроизведен с помощью Flash-плеера. Чтобы вернуться в режим редактирования, достаточно просто закрыть окно плеера.

Рисунок 12 — Панель Actions после назначения кнопке действия stop

Также объект Button имеет ещё несколько событий:

? Press (нажатие). Однократный щелчок мышью можно разделить на две стадии: опускание кнопки (нажатие — press) и подъём кнопки (отпускание — release). Событие Press наступает, когда курсор находится над активной областью кнопки и кнопка мыши фиксируется в опущенном положении;

? Release (отпускание) — наступает, когда зафиксированы опускание и отпускание, т. е. полный щелчок мыши, и курсор находился при этом над активной областью кнопки;

? Release outside (отпускание за пределами) наступает в ответ на следующую последовательность движений мыши: нажатие над активной областью кнопки и отпускание вне её («прерванный» щелчок);

? Roll Over (Перемещение над) — происходит, когда курсор попадает в активную область кнопки, без нажатия кнопки мыши;

? Roll Out (перемещение за пределы) — происходит, когда курсор выходит из активной области кнопки, без нажатия кнопки мыши;

? Drag Over (Перетаскивание над) — наступает, если кнопку мыши нажимают, когда курсор находится вне активной области, а затем перемещают курсор в активную область кнопки;

? Drag Out (Перетащить за пределы) — наступает, если кнопку мыши нажимают, когда курсор находится над активной областью кнопки, а затем уводят курсор из активной области.

? Key Press позволяет выполнить действие, когда пользователь нажал клавишу на клавиатуре. Следует учитывать, что клавиша не работает в качестве управляющей клавиши; не поддерживаются комбинации нескольких клавиш (кроме использования клавиши

Формат обработчика событий для экземпляров кнопок:

on (событие)

{

действия

}

Пример

on (release)

{

mc1._x = mc1._x + 10

}

При отпускании кнопки экземпляр некоторого видеоклипа с именем mc1 сместится на 10 px вправо.

Ниже приведены действия ActionScript, наиболее часто применявшиеся при разработке курса.

? Действие if обеспечивает выполнение некоторых инструкций в случае, если выполняется определённое условие.

Формат:

if (условие)

{ действия1 }

else

{ действия2 }

(Условие) — выражение логического типа. Блок else необязателен.

? Действия while и do. while, или цикл с неизвестным числом итераций, обеспечивают выполнение блока действий, пока условие истинно.

Формат:

while (условие)

{ действия }

? Действие for обеспечивает выполнение цикла с известным числом итераций.

Формат:

for (начальное значение; условие; изменение)

{ действия }

? Действия play и stop. При выполнении действия play Flash начинает последовательно воспроизводить содержимое всех кадров, расположенных на текущей временной шкале. Действие stop останавливает воспроизведение фильма или клипа.

? Действие GoTo (перейти к) заменяет текущий кадр фильма на кадр, указанный в установочных параметрах действия goto. Существует две разновидности действия goto: gotoAndStop (frame="номер кадра") заменяет текущий кадр на заданный и затем останавливает воспроизведение фильма, gotoAndPlay (frame="номер кадра") заменяет текущий кадр на заданный и затем выполняет действие play (воспроизвести).

Способы указания целевого кадра:

Frame Number (Номер кадра) — целевой кадр задаётся по номеру;

Frame Label (Метка кадра) — указывается метка кадра (если она есть);

Expression (Выражение) — позволяет указать ключевой кадр с помощью вычисляющего его выражения ActionScript;

Next Frame (Следующий кадр) — в качестве целевого кадра указывает кадр, следующий за текущим. Заменяет синтаксис goto на nextFrame ();

Previous Frame (Предыдущий кадр) заменяет синтаксис goto на prevFrame ().

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

Действие getURL входит в подраздел Browser/Network. Это действие позволяет загрузить в броузер документ, расположенный по указанному URL, либо переслать значения некоторых переменных (например, данных из формы) в приложение, размещенное по определенному URL. При этом следует учитывать, что действие getURL обеспечивает пересылку данных только для текущего фильма.

Чтобы создать кнопку, обеспечивающую переход по заданному URL, требуется выполнить следующие действия:

1) Добавьте в фильм новый «фоновый» слой.

2) Поместите на него кнопку, которой будет назначено действие getURL.

3) Откройте панель Actions.

4) В списке Actions Toolbox откройте раздел Actions, затем — подраздел Browser/Network и дважды щелкните в строке getURL; в результате в окне сценария появится соответствующая конструкция на языке ActionScript, а в панели параметров — параметры действия getURL (рисунок 13).

Рисунок 13 — Панель Actions после назначения кнопке действия getURL

5) Введите требуемые значения параметров.

6) По умолчанию действие getURL выполняется по щелчку на кнопке событие (release); если требуется добавить или изменить событие, щелкните в окне сценария в строке селектора и с помощью панели параметров измените перечень событий.

Рассмотрим подробнее параметры действия getURL.

Параметр URL определяет адрес запрашиваемого документа; значение параметра может быть задано в виде абсолютного или относительного URL, либо в виде вычисляемого выражения.

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

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

Параметр Window задает окно или фрейм, в который должен быть загружен запрошенный документ. Значение параметра выбирается с помощью раскрывающегося списка, который содержит следующие варианты (они аналогичны значениям атрибута TARGET тэга <�А> в языке HTML):

_self— документ будет загружен в текущее окно, или фрейм.

_blank — документ будет загружен в новое окно.

_parent — документ будет загружен в родительский или текущий фрейм.

_top — документ будет загружен во фрейм более высокого уровня иерархии или в текущее окно.

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

Параметр Variables позволяет указать способ пересылки данных по заданному URL. Значение параметра выбирается из раскрывающегося списка, который содержит три варианта:

1) Don’t send (He отправлять) — пересылка данных не требуется;

2) Send using GET (Отправить, используя GET) — для пересылки данных будет использован метод GET;

3) Send using POST (Отправить, используя POST) — для пересылки данных будет использован метод POST.

1.2 Приёмы работы в Action Script 2.0

Этот раздел я хотел бы посвятить приёмам работы в среде Action Script 2.0, которые я использовал в своей работе. Не редко в своей работе мне приходилось создавать задания, в которых пользователь должен был перетаскивать различные объекты на сцене. Это можно осуществить по нескольким принципам. Например: создадим объект на сцене (нарисуем его графически, или импортируем картинку в наш ролик). Затем преобразуем его в Movie Clip: нажатием клавиши F8 и выбором соответствующего пункта диалогового окна (рисунок 14).

Рисунок 14 — Панель конвертирования объектов Flash

Следующий шаг: открыть панель Actions, нажатием клавиши F9, выбираем ролик, который только что создали и в поле Actions пишем следующий программный код (рисунок 15)

Рисунок 15 — Программный код динамического объекта Здесь событие press — отвечает за контроль нажатия левой клавиши мыши над объектом, release — контролирует отпускание левой клавиши мыши над объектом. Процедура startDrag () — позволяет перетаскивать объект, слово this в скобках процедуры startDrag () указывает на текущий объект, на котором написан программный код. Процедура stopDrag () прерывает перемещение объекта, т.к. объект не указан, то прерывается перемещение всех объектов на данной сцене.

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

Рисунок 16 — Поле присвоения имён Выделим теперь кадр на котором размещён данный клип, нажмём F9, откроется поле программного кода, туда запишем следующий код:

_root.clip₁.onPress = function (){

startDrag (this);

}

_root.clip₁.onRelease = function (){

stopDrag ();

}

Данным способом мы глобально создали обработчик событий нажатия и отпускания левой кнопки мыши над клипом с именем «clip₁».

Не редко, у разработчиков, возникает потребность доставать нефиксированное число объектов из библиотеки Flash и при этом создавать для них обработчики событий. Можно, конечно, предположить всевозможные варианты имён клипов и для каждого отдельно создать обработчик, но это не рационально. Будем работать со всеми подгружаемыми объектами как с массивом, и соответственно создадим массив обработчиков их событий. Итак, создадим клип в библиотеке, зададим ему имя для экспорта в Action Script (рисунок 17 — рисунок 18)

Рисунок 17 — Контекстное меню объекта в библиотеке Рисунок 18 — Окно связи объектов библиотеки и Action Script

Выделяем кадр, на который будет добавляться этот объект и открываем панель Actions (F9). Пишем следующий программный код:

for (i=1;i<=10;++i){

_root.attachMovie («Clip» ," clip" +i, i,{X[i], Y[i]});

_root[" clip" +i]. onPress = function (){

startDrag (this);

}

_root[" clip" +i]. onRelease = function (){

stopDrag ();

}

Функция attachMovie () достаёт из библиотеки ролик с именем Clip, присваивает имя clip[i], где i-номер ролика (без квадратных скобок), помещает этот ролик на текущий кадр на глубину i, в точку, заданную координатами X[i], Y[i] (Массивы координат).

Таким образом можно создавать массивы обработчиков событий, но при этом все осуществляемые действия должны иметь относительные ссылки.

Не мало важный момент при создании шаблонов — это использование текстовых файлов, что позволяет создавать и отлаживать задания, не используя знания по программированию. Для загрузки текстового файла можно воспользоваться функцией loadVariables (). При загрузке текстовых файлов с помощью этой функции на сайте www.dl.gsu.by, обращение к файлу в папке webfiles производится следующим образом:

loadVariables (flashfiles+"text.txt",_root);

Где text. txt — имя подгружаемого файла. Далее по программному коду в пределах работы переменных подгружаемых из файла необходимо писать следующую функцию:

_root.onData = function (){}

Так же можно воссоздать скроллинг листа используя объекты Macromedia Flash. Для начала создадим заготовки для кнопок скроллинга: вверх, вниз, ползунок. Это можно сделать, используя среду векторной анимации самого Flesh, но можно и загрузить картинки соответствующих кнопок. Так же необходим вид полосы по которой будет двигаться ползунок.

Ползунок — это ролик, состоящий из 2-ух кадров. На первом кадре обычный вид ползунка, на втором — нажатый. В обработчик каждого кадра пишем процедуру stop (). Стрелки вверх вниз могут быть кнопками. Полоса по которой движется ползунок должна быть конвертирована в ролик. Присвоим имена роликам и кнопкам: кнопка вверх — vverh, вниз — vniz, ролик ползунка — pol, ролик полосы — polosa. Размещаем все элементы на сцену. На кадре сцены пишем следующий код:

stop ();

Height = _root.fon._height //высота прокручиваемого листа fon.

_root.pol.onPress = function (){

this.startDrag (false, 388,18,388,348);//числа указывают прямоугольную область движения ползунка.

this.gotoAndStop (2);

}

_root.pol.onPress = function (){

stopDrag ();

this.gotoAndStop (1);

}

Создаём далее три пустых ролика из 2-ух кадров каждый: Analiz_vniz, Analiz_vverh, Analiz. На каждом кадре, которого пишем код:

1. _root.pol._y += 5;

2. _root.pol._y -= 5;

3. if (_root.pol._y>347){

_root.Analiz_vniz.stop ();

_root.pol._y = 348

}

if (_root.pol._y<19){

_root.Analiz_vverh.stop ();

_root.pol._y = 18

}

_root.fon._y = -(Height — 400)*(_root.pol._y — 18)/330;

//400 — высота рабочей области сцены

//18 — высота кнопки вверх

//330 — длина рабочей области ползунка

Analiz_vniz.stop ();

Analiz_vverh.stop ();

_root.vverh.onPress = function (){

If (pol._y>18){

_root.Analiz_vverh.play ();

}

If (pol._y<19){

pol._y = 18;

_root.Analiz_vverh.stop ();

}}

_root.vverh.onRelease = function (){

If (pol._y<19){

pol._y = 18;

_root.Analiz_vverh.stop ();

}}

_root.vniz.onPress = function (){

If (pol._y<347){

_root.Analiz_vniz.play ();

}

If (pol._y>347){

pol._y = 348;

_root.Analiz_vniz.stop ();

}}

_root.vniz.onRelease = function (){

If (pol._y>347){

pol._y = 348;

_root.Analiz_vniz.stop ();

}}

1.3 Взаимодействие FLASH и DL

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

Архив задачи должен иметь вид:

— task. out

— task. asp

— папка webfiles

Flash-фильм (расширение swf)

Файл

TYPE = USERS

CHECKER = 'D:DelTACheckersMathCheck.exe $SOLUTION$ task. out $MAXPOINT$'

CHECKFILES = {task.out}

CHECKSUBJECT = FILE

TEXTTYPE = 'Пользовательская'

Файл

Свойство author — необязательное. Все остальные необходимо указать. Свойство type — тип задачи; в данном случае type="10″. cost — максимальная оценка.

Файл task. out:

Первая строка файла должна быть одного из следующих видов:

countby=task (если балы даются за полностью решенную задачу);

countby=test (если балы даются за каждый верный ответ).

Далее идут блоки тестов. Каждый блок начинается со строки [N]

(где N — номер теста). Внутри блока необходимо указать правильные ответы: Код=Правильный ответ (Код — имя переменной). В конце блока теста следует количество баллов за тест: score[N]=баллов После всех тестов должна быть формула для вычисления баллов за всю задачу. В ней разрешено использовать операции сложения и умножения:

total=score[N1]+score[N2]*score[N3]. .

Операция сложения представляет собой «обычную» операцию сложения действительных чисел. Операция умножения действует иначе: результатом «перемножения» нескольких переменных будет 1, если больше половины «множителей» — единицы, 0 — если не менее половины «множителей» нули.

Вокруг знака «=» в строках вида score[1]=1 пробелы не ставятся. Вообще, все пробелы значимы. Например, если:

ans1=12 и ans2= 12, то правильным ответом для ans1 является «12», а для ans2 — «12» .

В случае нескольких правильных вариантов ответа достаточно перечислить в файле task. out все возможные варианты:

[1]

ans1=2*t

ans1=t*2

ans1=2t

score[1]=1

Файл task. asp:

<%flash(" адрес фильма" , количество переменных, ширина, высота)%>

где имя — имя фильма (например, «webfiles/12.swf»), количество переменных — количество переменных в ответе, ширина и высота — размеры кадра, в который загружается фильм.

Схема работы упражнения показана на рисунке 15.

Рисунок 15 — Схема работы упражнения При выборе пользователем той или иной задачи загружается файл task. asp, содержащий ссылку вызова фильма Flash. При загрузке task. asp генерируется страница, содержащая кадр фильма и (ниже) кнопку «Отправить». В кадр загружается фильм Flash.

Пользователь работает с фильмом. В результате этого переменные языка ActionScript, содержащие ответ задачи, принимают определённые значения. Эти значения передаются странице asp с помощью действия fscommand языка ActionScript. По нажатии кнопки «Отправить» они отправляются на сервер DL, где происходит их сравнение с эталоном.

Формат действия fscommand

fscommand («номер команды», переменная) где номер команды — натуральное число, взятое в кавычки. Команды нумеруются по порядку, начиная с единицы;

переменная — передаваемая переменная. Имена переменных в кавычки не заключаются.

Например:

fscommand («1», answer1)

fscommand («2», answer2)

Рисунок 16 — Программное соединение

Следует всегда помнить, что необходимо указывать полный адрес переменной. Так, если сценарий передачи ответа содержится в экземпляре видеоклипа, а область видимости переменной — основная временная шкала, действие примет вид: fscommand («1», _root.answer).

Для передачи ответа из Flash-фильма в документ asp обычно используется обработчик событий onClipEvent (x). Параметр x представляет собой некоторое событие ActionScript. Обычно это keyUp (отпускание клавиши клавиатуры), mouseUp (отпускание кнопки мыши) или mouseMove (движение мыши). Применяется следующая концепция: передача ответа должна автоматически происходить при всяком его изменении. Если в задаче следует ввести текстовый ответ, то изменение наступает при отпускании клавиши на клавиатуре. Если требуется что-то нарисовать, то изменение может произойти при отпускании кнопки мыши. (использование onClipEvent () означает, что сценарий передачи данных размещается в экземпляре видеоклипа. Значит, в фильме должен быть экземпляр видеоклипа…)

При всяком отпускании кнопки мыши выполняется функция makeAnswer (), а затем значение переменной a передаётся документу asp.

2. СРЕДСТВА СОЗДАНИЯ ЛЕКЦИЙ НА ПРИМЕРЕ ЛЕКЦИЙ «КАРТЫ КАРНО»

2.1 Последовательность шагов Лекцию по картам Карно можно разбить на четыре части. Первая часть служит вводной. Она помогает обучить преобразовывать исходный материал в необходимый нам вид, помогает понять принцип составления таблицы для заполнения. Вторая часть лекции объясняет учащимся принцип заполнения таблицы исходными данными. Третья часть — вводит понятие покрытия карты Карно, оптимального покрытия карты, склеенности краёв карты. Четвёртая часть — учит анализировать покрытую карту и составлять логическую функцию на основе этого анализа.

Для создания каждой лекции, необходимо разработать сценарий хода лекции. Во-первых, последовательность показа материала. Во-вторых, средства, которые будут использованы. В-третьих, систему контроля лекции со стороны пользователя. При разработке четырёх частей лекции по картам Карно в основном применялась покадровая анимация (рисунок 19).

Рисунок 20 — Покадровая анимация лекции С точки зрения контроля лекции использовался только стоп кадр и появлялась кнопка для продолжения проигрывания лекции (рисунок 20)

Рисунок 20 — Система контроля лекции Примерный сценарий работы каждой лекции: в начале показано название каждой части лекции, затем демонстрация исходных данных, далее принцип преобразования исходных данных в необходимый вид и в конце каждой лекции — контроль знаний (Рисунок 21).

Рисунок 21 — контроль знаний в третьей лекции

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

1. Переходим на панель Tools (рисунок 22)

Рисунок 22 — Панель Tools

2. Находим символ буквы А. Это кнопка для создания текстовых полей в среде Macromedia Flash.

3. Нажимаем эту кнопку и переходим на сцену.

4. На сцене чертим образ вводимого поля (рисунок 23)

Рисунок 23 — Текстовое поле

5. Теперь необходимо настроить это поле. Переходим на вкладку Properties (Рисунок 24)

Рисунок 24 — Вкладка Properties

6. На данной вкладке необходимо выбрать Input Text — тип данного текстового поля изменится на вводимый (рисунок 25)

Рисунок 25 Тип текстового поля

7. Далее сделаем так чтобы края нашего поля были всегда видны (рисунок 26)

Рисунок 26 — Рамка текстового поля

8. Осталось присвоить имя переменной которая будет отвечать за введённое значение в это поле (рисунок 27)

Рисунок 27 — Присвоение имени переменной После произведённых действий Action Script буде считать данное текстовое поле строковой переменной, у которой значение — пустая строка. Если пользователь введёт что-либо в эту строку, то программный код может обработать эту переменную.

Также вводимое текстовое поле имеет параметр ограничивающий ввод информации в это поле (рисунок 28)

Рисунок 28 — Характеристики вводимого текстового поля Вторым этапом было создание лекции по вводимым полям. Водимые поля в программах на сайте дистанционного обучения широко используются. Именно по этому я выделил данную тему на ряду с другими. Шаблон использовался аналогичный как и при создании лекции на тему «Создание кнопок».

Как и в предыдущей лекции — использовалась покадровая анимация, и непрерывная — метод motion. Данная лекция состоит из 926 кадров (рисунок 21).

Рисунок 21 — Анимация лекции Создание таких полей очень простое. На панели инструментов выбираем «текст», в свойствах ставим как input текст и вставляем его на рабочую область. Это основной алгоритм создание, но так же как и при создании кнопки, здесь есть много нюансов. Например: нужно дать имя данному полю, это необходимо для того, что бы «общаться» с ним, так же можно сделать так, что бы в данном поле вводились только латинские буквы, цифры, верхний или нижний регистр, либо только те, которые мы пропишем.

Рисунок 22 — Лекция на тему «Вводимые поля»

Данная лекция была прочитана студентам математического факультета 5 курса. Все недочёты были исправлены.

2.3 Лекция на тему «Анимация»

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

Flash анимация это анимация, применяемая в Web-технологиях, для разработки анимационных роликов, заставок, презентаций, рекламных блоков и т. д.

Распространенной средой разработки как флеш анимации так и анимированных приложений является программный продукт фирмы Macromedia — Macromedia Flash MX.

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

В данной лекции используется 1379 кадров. Анимация как покадровая, так и непрерывная — метод motion и shape (рисунок 23).

Рисунок 23 — Анимация лекции Данная тема одна из интереснейших в этом курсе. Здесь рассказывается какие методы используются во flash, какой анимацией удобнее пользоваться в различных случаях, покадровой или непрерывной. В данной теме я впервые использую начальное программирование кнопки и кадра. А именно где в кадре нужно прописать действие stop, как запрограммировать кнопку для проигрывания клипа (рисунок 24).

Рисунок 24 — Лекция на тему «Анимация»

2.4 Лекция на тему «Применение АS»

Если вы уже сталкивались с фильмами в формате Flash, то никак не могли обойтись без средств языка ActionScript. Скажем, кнопки Stop (Остановка) и Play (Воспроизведение) всегда связаны со сценариями ActionScript. Этот язык призван обслуживать потребности Flash, и все команды ActionScript связаны с соответствующими объектами фильмов Flash. В частности, команды Play и Stop соответственно обеспечивают воспроизведение и остановку клипа или киноленты (timeline). В других языках сценариев и в большинстве языков программирования упомянутые команды носят более общий характер и для их надлежащей реализации может потребоваться дополнительная информация. При использовании ActionScript в фильмах Flash команда Stop совершенно недвусмысленно предписывает необходимость остановить воспроизведение фильма на текущем кадре. Язык ActionScript настолько прост и универсален, что его можно использовать как бы исподволь, незаметно для себя, — это коренным образом отличает его от других языков сценариев и от языков программирования иного типа.

Познакомившись в общих чертах с простейшими командами ActionScript, вы поневоле должны задаться вопросом: «А что вообще можно сделать в формате Flash без сценариев ActionScript?» Ответ: «Почти ничего (особенно если речь идет об интерактивных фильмах)». Разумеется, даже большой фильм можно сделать исключительно пассивным, лишив его обратной связи со зрителем. Но пассивные клипы хороши только для случайно заглянувших на ваш сайт зевак: они готовы просто посмотреть ваш фильм от начала до конца и им не придется к нему возвращаться.

Средства ActionScript позволяют предусмотреть в клипе возможность для принятия пользователем определенных решений, то есть сделать пользователя активным участником просмотра. Вы включаете в сценарий ряд условий, пользователь выбирает одну из предоставленных возможностей, а система воспроизведения Flash адекватно реагирует на его действия. Вы можете, к примеру, ввести в фильм сценарий ActionScript, который позволит пользователю сделать три попытки дать правильный ответ на поставленный вопрос. После третьей неудачной попытки сценарий автоматически отправит пользователя освежить память, перенося его к кадру Refresher-Course, — здесь находится кадр, содержащий информацию, относящуюся к текущему вопросу, Простейший механизм, пригодный для реализации системы вопросов с несколькими попытками дать ответ, — это цикл в кадре (frame loop), то есть последовательность команд сценария ActionScript, в которой обеспечивается подсчет количества попыток, произведенных пользователем. Когда максимальное число попыток исчерпано, пользователя следует отправить к кадру с именем RefresherCourse.

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

Если вы создаете фильмы главным образом для Web-страниц, сценарии Action-Script могут действовать также в качестве посредников. Когда пользователь в ходе работы с фильмом вводит какие-либо данные, они могут передаваться соответствующим Web-страницам и влиять на поведение последних. Возможна и обратная картина, когда информация Web-страницы передается фильму. Еще более важной является возможность получать с помощью сценариев Action-Script ту или иную информацию и передавать ее непосредственно серверу для сохранения и обработки в базе данных. Это обеспечит Web-сайт динамическим пользовательским интерфейсом на основе Flash.

Разработчики языков сценариев и языков программирования, как правило, бывают потрясены, когда узнают, что пользователи умудрились найти в том или ином языке больше возможностей, чем предусмотрено разработчиком. Язык ActionScript создавался прежде всего как средство, призванное обеспечить взаимодействие с пользователями фильмов в формате Flash; при этом конкретные виды и объем такого взаимодействия ограничены лишь рамками воображения автора.

Язык программирования во flash очень объёмный и в рамках лекции просто не возможно его охватить весь. Поэтому я показал только применение языка ActionScript на примере «танграм — задач». То есть использование передвижных фигурок. Данную систему я использовал во многих своих программах — это и танграм, и шаблоны flash&hlccad, winter.

Пользователю предлагается сделать самому программку, в которой можно было бы передвигать элементы, их нужно переместить в определённую область. В нашем случае это 3 фигуры: квадрат, треугольник и круг. На них нарисован вопросительный знак, когда же данная фигура передвинута в свою цветовую область — вопросительный знак меняется на надпись «OK». Таких областей три (рисунок 25). Довольно простая задача для первого опыта в создании flash-приложения.

Рисунок 25 — Пример программы Код кнопки:

on (press) { startDrag (this);

}on (release) { if ((_root.e1._x < 550) and (_root.e1._x > 288) and (_root.e1._y > 144) and (_root.e1._y < 270)) //переход на положение «OK»

_root.e1.gotoAndStop (2);

else //переход на положение «?»

_root.e1.gotoAndStop (1);

stopDrag ();

}

где x и у область в которую должен попасть элемент.

В рамках двух лекций студенты освоили данный принцип взаимодействии языка программирования и кнопки. Было Сделано дополнительное задание — при наведении на элемент, голосом произносился его цвет.

Лекция занимает 26 кадров, однако в каждом таком кадре есть свои кадры.

Рисунок 26 — Лекция на тему «Применение АS»

3. ЭТАПЫ СОЗДАНИЯ FLASH-ЛЕКЦИЙ НА ТЕМУ «ПАСКАЛЬ»

3.1 Очередь Первая лекция которая была сделана по Паскалю была на тему «Очередь» (рисунок 27)

Рисунок 27 — Flаsh-лекция В ней я попытался объяснить учебный материал на тему «Очередь», а так же внутри лекции сделал проверочные задания, для более полного понимания.

Лекция состоит из трёх уроков:

Рассказывается о ходах коня.

Здесь я проиллюстрировал всевозможные ходы коня, если он стоит в положении d4.

Разбор задачи о ходе коня.

Даны обозначения двух полей шахматной доски (например, A5 и C2). Найти минимальное число ходов, которые нужны шахматному коню для перехода с первого поля на второе.

Идея решения: очередь возможных ходов коня.

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

Более строгий алгоритм решения :

Помещаем в очередь исходное поле коня Пока (не нашли нужное число) Выбираем из очереди первый элемент — клетку X, Y

Если это элемент НЕ искомый то Клетки, достижимые из X, Y за ход коня если не конечные и еще не помеченные помещаем в очередь и помечаем Далее представлена главная часть программы, решающей данную задачу:

begin

StartProcess; { Начало работы }

StepNumber:=0; { Количество шагов — 0 }

Found := (Sx=Ex) and (Sy=Ey); { Признак завершения работы }

while (not Found) do { Пока не нашли }

begin

Get (x, y, StepNumber); {Взять координаты и номер шага}

Inc (StepNumber); { Увеличить номер шага }

PutAll (x, y, StepNumber, Found)

end;

writeln (StepNumber); { Вывод номера шага }

end.

3) Примеры.

В этой части лекции я попытался показать как работает алгоритм на тему очередь. (рисунок 28)

Рисунок 28 — Последний урок flash-лекции

3.2 Рекурсивные процедуры и функции Была поставлена задача сделать лекцию на тему: «Рекурсивные процедуры и функции». По ходу работу лекция разделилась на три части:

1) рекурсивное вычисление НОД.

2) Сумма M из N чисел.

3) Разбор задачи о Ханойской башне.

1) Рекурсивное вычисление НОД В первой части лекции надо было показать программу рекурсивного вычисления наибольшего общего делителя двух чисел a и b. (рисунок 29)

Рисунок 29 — Первая части лекции Следующий материал я попытался проиллюстрировать в лекции:

program euclid;

var

a, b: longint;

function NOD (a, b: longint):longint;

begin

if a>b

then NOD := NOD (a-b, b)

else

if a

then NOD := NOD (a, b-a)

else NOD := a;

end;

begin

readln (a, b);

writeln (NOD (a, b));

readln

end.

Эта программа основана на рекурсивном алгоритме Евклида вычисления НОД.

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

Вычисление НОД чисел 12 и 18 по алгориму Евклида:

НОД (12,18)=НОД (12,18−12)=НОД (12,6)=НОД (12−6,6)=НОД (6,6)=6

А теперь рассмотрим подробнее, как выполняет эту работу программа Euclid:

Тело главной программы содержит всего 2 строчки:

readln (a, b); {ввести числа, для которых ищем НОД}

writeln (NOD (a, b)); {вывести результат вычисления функции NOD}

В примере a=18 и b=12 и потому в теле главной программы вызывается функция NOD (18,12)

Основная работа выполняется рекурсивной функцией NOD:

function NOD (a, b: longint):longint;

begin

if a>b

then NOD := NOD (a-b, b)

else

if a

then NOD := NOD (a, b-a)

else NOD := a;

end;

Поскольку 18>12, то ВНОВЬ вызывается функция NOD, но уже с параметрами (18−12,12) то есть с параметрами (6,12).

Обратите внимание, что функция NOD, не завершив своей работы, САМА вызывает СЕБЯ, но уже с уменьшенным значением одного из параметров — (6,12) вместо (18,12). Такие функции и называются РЕКУРСИВНЫМИ. Необходимым условием корректной работы рекурсивных функций является также условие НЕРЕКУРСИВНОГО (то есть БЕЗ вызова функцией самой себя) вычисления результата, при определенных аргументах вызова. Например, в функции NOD (a, b) таким условием является условие a=b.

В нашем примере функция NOD вызовет себя вначале с параметрами (6,12), затем 6,6 — это и будет последним вызовом с ответом 6. После чего этот ответ будет последовательно передаваться вызывавшим функциям вплоть до главной программы.

Программу вычисления наибольшего общего делителя чисел a и b можно написать и нерекурсивно — например, так:

program euclid_n;

var

a, b: longint;

begin

readln (a, b);

while (a<>b) do

if a>b then a:=a-b else b:=b-a;

writeln (a);

readln

end.

2) Сумма M из N чисел В данной части лекции я показал сколькими способами можно составить сумму M из N чисел. (рисунок 30) Пусть нам требуется написать программу, которая вводит числа M, N и последовательность из N чисел a[i] и подсчитывает количество способов, которым из чисел a[i] можно составить заданную сумму M.

Рисунок 30 -Составление суммы M из N чисел

3) Разбор задачи о Ханойской башне В одной из древних легенд говорится следующее :

" … В храме Бенареса находится бронзовая плита с тремя алмазными стержнями. На один из стержней бог при сотворении мира нанизал 64 диска разного диаметра из чистого золота так, что наибольший диск лежит на бронзовой плите, а остальные образуют пирамиду, сужающуюся кверху. Это — башня Брамы. Работая день и ночь, жрецы переносят диски с одного стержня на другой, следуя законам Брамы :

Диски можно перемещать с одного стержня на другой только по одному;

Нельзя класть больший диск на меньший.

Когда все 64 диска будут перенесены с с одного стержня на другой, и башня, и храмы, и жрецы-брамины превратятся в прах и наступит конец света."

Программа рекурсивного решения задачи:

procedure Move (N:Nat;S1,Sw, SK: St);

begin

if N=1

then Step { Перенести 1 диск на крайний стержень }

else begin { }

Move (N-1,S1,SK, SW);{ Перенести N-1 диск на средний стержень }

Step; { Перенести 1 диск на крайний стержень }

Move (N-1,Sw, S1, SK);{ Перенести N-1 диск на крайний стержень }

end; end;

Рисунок 31 — Рекурсивное решение задачи о Ханойской башне

4. ОБЗОР СДЕЛАННЫХ FLASH-ПРИЛОЖЕНИЙ ДЛЯ САЙТА DL

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

4.1 Разработка игры-головоломки «Танграм»

Ши-Чао-Тю — китайское название игры-головоломки — комплекта из семи геометрических фигур — частей одного квадрата Любопытно, что если два самых малых треугольника (рисунок 32) считать первичными, как бы «атомами», то средний треугольник, квадрат и параллелограмм состоят из двух «атомов» каждый, 2 больших треугольника — из четырёх атомов. Весь квадрат, следовательно «шестнадцатиатомная» фигура.

Древние Греки и Римляне развлекались выкладыванием разнообразных форм из 14 фигурок, на которые был разрезан прямоугольник, по-видимому, ещё Архимедом.

В Европе и США Ши-Чао_Тю распространялась с начала 19 в., а к середине века приобрела название «Танграм», возможно, в честь древнекитайского учёного, имя которого Та-нг. Кажется именно ему обязана своим первым появлением эта увлекательная игра-головоломка.

Рисунок 32 — Танграм — квадрат и танграм — трапеция Суть головоломки в том, что бы выложить заранее задуманную фигуру — «танграм», используя всякий раз 7 частей танграма, названных «танами». «Тан» разрешается выкладывать как лицевой, так и обратной стороной. Многообразие и различная степень сложности геометрических конструкторов (рисунок 33) позволяет учитывать возрастные особенности детей, их склонности, возможности, уровень подготовки.

Рисунок 33 — Варианты сборки Танграма Нами была проведена работа по созданию и внедрению игры-головоломки «Танграм» в курс DL. (рисунок 34)

Рисунок 34 — Игра-головоломка «Танграма»

В марте 2006 года головоломка была успешно протестирована в рамках проведения конкурса GCSW 2006. На курс было подписано 36 человек, из них только один собрал все 200 предложенных фигурок.

В настоящее время функционирует отдельный курс «Игра-головоломка Танграм».

4.2 Оптимизация и внедрение Flash-шаблонов В 2006 году на сайте DL открылся новый курс — «Создание Flash заданий для DL» редактором которого являлась Бусел Светлана. Она же разработала Flash-шаблоны (рисунок 35), «программа» для проверки знаний учащихся. Где пользователю предлагается выбрать тот или иной вариант на заданный вопрос.

Рисунок 35 — Flash-шаблон Данный Flash-шаблон был доработан и оптимизирован под разные курсы, такие как «Английский для детей» (рисунок 36), «Деловой английский» (рисунок 37), «Проектирование цифровых устройств» (рисунок 38). Теперь пользователь не зная программы Macromedia Flash, сможет легко и быстро составлять задания для DL.

Рисунок 36 — Flash-шаблон — «Английский для детей Рисунок 37 — Flash-шаблон — «Деловой английский»

Рисунок 38 — Flash-шаблон — «Проектирование цифровых устройств»

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

4.3 Flash-шаблон по HLCCAD

Система высокоуровневого проектирования цифровых устройств HLCCAD — предназначена для автоматизации процесса проектирования цифровых систем и позволяет создавать модели цифровых устройств, моделировать созданные проекты устройств, анализировать результаты моделирования, генерировать модель на синтезируемом подмножестве VHDL, а также использовать модели процессоров в проектируемых устройствах.

Система позволяет разрабатывать сложные иерархически организованные проекты цифровых систем, состоящих из компонент различных уровней сложности от логических вентилей до ОЗУ, моделировать эти проекты, анализировать результаты, а для отлаженных проектов генерировать соответствующие синтезируемые VHDL — описания. Более того, разработана технология использования систем программирования высокого уровня для автоматизации создания моделей компонент сложных устройств — таких, например, как МП/МК.

На уроках информатики Михаил Семёнович проводил опрос о идеях улучшения изучения учебного материала и о тех заданиях которые бы хотели видеть на сайте дистанционного обучения. Все письменные ответы были прочитаны и одна из идей была о создании программы HLCCAD для DL.

Нами была проведена работа по созданию и внедрению в учебный процесс flash-шаблона для симуляции проектирования цифровых систем.

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

Рисунок 39 — Flash-шаблон для HLCCAD

В настоящее время flash-шаблон можно увидеть в различных курсах сайта DL, которые непосредственным образом относятся к изучению системы HLCCAD.

4.4 Flash-шаблон по WINTER

Нами была проведена работа по созданию flash-шаблона для проверки знаний учащихся.

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

Рисунок 40 — Flash-шаблон 1 для WINTER

Рисунок 41 — Flash-шаблон 2 для WINTER

В настоящее время flash-шаблон внедрён в учебный процесс.

4.5 Библиотека стандартных элементов «Standard.prj»

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

Рисунок 42 -Обучающая программа

4.6 Flash-презентации «Сезонных кубков»

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

Flash-презентации намного более динамичны, чем обычные презентации, и имеют ряд преимуществ:

1) легкое и простое восприятие — презентация на flash технологии может сопровождается не только текстовой, но и звуковой информацией.

2) интерактивность — зритель может выбирать вариант просмотра презентации по интересующим его направлениям, вступать в контакт с ее элементами, таким образом, изменяя сценарий презентации.