Разработка учебных материалов с использованием 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 Общие сведения о языке программирования
Action Script 2.0
- это язык программирования, используемый
программой Flash MX. По сравнению с главной временной шкалой, позволяющей
создавать лишь линейную анимацию, ActionScript расширяет возможности
программирования. При помощи ActionScript ваш ролик будет реагировать,
например, на выбор, делаемый пользователем, или на другие события. ActionScript
позволяет управлять элементами, которые видит пользователь, и вместо простой
анимации показывать нелинейные презентации, интерактивные приложения или игры.
Инструмент для работы с ActionScript реализован
в виде диалоговой панели Actions (Действия), внешний интерфейс которой ничем не
отличается от других панелей Flash MX. Однако при более близком знакомстве с
ней оказывается, что это самый настоящий редактор для создания сценариев на
ActionScript. Причем работать он может в двух режимах: обычном (то есть предназначенном
для «обычных» пользователей) - Normal, и в экспертном (для «продвинутых»
пользователей) - Expert.
В первом случае пользователю предлагается как бы
визуальный режим работы и доля ручного кодирования сведена к минимуму, либо
вообще равна нулю. Во втором режиме пользователь получает большую свободу
действий, но при этом лишается некоторых вспомогательных средств. В качестве
предварительной иллюстрации к сказанному на рисунке 9 и рисунке 10 показаны оба
формата панели применительно к одному и тому же «мини-сценарию», состоящему из
единственной инструкции.
Рисунок 9 - Обычный формат панели Actions
Рисунок 10 - Экспертный формат панели Actions
позволяет создавать сценарий для клипа, кнопки
или кадра. Каждый такой сценарий (то есть фактически программа на языке
ActionScript) жестко связан с соответствующим элементом фильма. При публикации
фильма текст сценария, как и другие элементы фильма, экспортируется в SWF-файл.
Тем не менее, при желании вы можете сохранить его в отдельном файле с
расширением .as (это обычный текстовый файл), чтобы впоследствии использовать в
каком-либо другом фильме (или подарить другу).
Простейшими командами управления фильмом
являются запуск и прерывание его воспроизведения. Эти команды реализуются с
помощью предопределенных действий Play и Stop. Процедуру назначения этих
действий двум кнопкам рассмотрим на примере фильма, в котором шарик
передвигается по заднему фону (рисунок 11). В качестве кнопок используем экземпляры
символов из общей библиотеки Buttons.
Рисунок 11 - Окно фильма после добавления кнопок
Итак, для включения в фильм интерактивных кнопок
необходимо выполнить следующие действия:
) Добавьте в фильм новый слой, который будет
использоваться в качестве дополнительного фона; именно в фоновый слой следует
добавить кнопки, чтобы они присутствовали на сцене на всем протяжении
Flash-фильма.
) Щелкните мышью в ячейке первого ключевого
кадра в «кнопочном» слое.
) Перетащите поочередно из окна библиотеки на
стол две кнопки, которые вы решили использовать в фильме; в результате окно
Flash будет выглядеть примерно так, как показано на рисунке 11.
) Выберите первую из кнопок, с помощью которой
фильм должен приостанавливаться.
) С помощью инспектора свойств кнопки откройте
панель Actions и щелкните в списке Actions Toolbox на значке раздела Actions.
) Откройте подраздел Movie Control, отыщите в
нем действие Stop и дважды щелкните на нем мышью; в результате в окне сценария
появится текст сценария, содержащий обработчик on (release); он обеспечивает
инициализацию действия stop() при наступлении события release (то есть при
щелчке на кнопке); пустые скобки после имени процедуры означают, что данная
процедура используется без параметров; соответствующее сообщение выводится и в
окне параметров, как показано на рисунке 12.
) Не закрывая панель 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 позволяет выполнить действие,
когда пользователь нажал клавишу на клавиатуре. Следует учитывать, что клавиша
<Esk> не работает в качестве управляющей клавиши; не поддерживаются
комбинации нескольких клавиш (кроме использования клавиши <Shift< для изменения
регистра); если Flash-фильм отображается в браузере, то перед распознаванием
нажатий клавиш он должен получить фокус. Для этого пользователь должен щелкнуть
мышью на доступном участке фильма внутри браузера. События Key Press
чувствительны к регистру клавиатуры
Формат обработчика событий для экземпляров
кнопок:
(событие)
{
действия
}
Пример(release)
{ ._x = mc1._x + 10
}
При отпускании кнопки экземпляр некоторого
видеоклипа с именем mc1 сместится на 10 px вправо.
Ниже приведены действия ActionScript, наиболее
часто применявшиеся при разработке курса.
Действие if обеспечивает выполнение
некоторых инструкций в случае, если выполняется определённое условие.
Формат:
(условие)
{ действия1 }
{ действия2 }
(Условие) - выражение логического типа. Блок
else необязателен.
Действия while и do..while, или цикл с
неизвестным числом итераций, обеспечивают выполнение блока действий, пока
условие истинно.
Формат:
(условие)
{ действия }
Действие for обеспечивает выполнение
цикла с известным числом итераций.
Формат:
(начальное значение; условие; изменение)
{ действия }
Действия play и stop. При выполнении
действия play Flash начинает последовательно воспроизводить содержимое всех
кадров, расположенных на текущей временной шкале. Действие stop останавливает
воспроизведение фильма или клипа.
Действие GoTo (перейти к) заменяет
текущий кадр фильма на кадр, указанный в установочных параметрах действия goto.
Существует две разновидности действия goto: gotoAndStop(frame=«номер кадра»)
заменяет текущий кадр на заданный и затем останавливает воспроизведение фильма,
gotoAndPlay(frame=«номер кадра») заменяет текущий кадр на заданный и затем
выполняет действие play (воспроизвести).
Способы указания целевого кадра:Number (Номер
кадра) - целевой кадр задаётся по номеру; Label (Метка кадра) - указывается
метка кадра (если она есть); (Выражение) - позволяет указать ключевой кадр с
помощью вычисляющего его выражения ActionScript; Frame (Следующий кадр) - в
качестве целевого кадра указывает кадр, следующий за текущим. Заменяет синтаксис
goto на nextFrame(); Frame (Предыдущий кадр) заменяет синтаксис goto на
prevFrame().
Нажатием кнопки можно не только управлять
Flash-фильмом и объектами, созданными на сцене, но и загрузкой в сцену внешних
объектов. Например картинок, swf роликов, текстовых файлов, а также web
страниц.
Чтобы создать кнопку, обеспечивающую переход по
заданному URL, требуется выполнить следующие действия:
) Добавьте в фильм новый «фоновый» слой.
) Поместите на него кнопку, которой будет
назначено действие getURL.
) Откройте панель Actions.
) В списке Actions Toolbox откройте раздел
Actions, затем - подраздел Browser/Network и дважды щелкните в строке getURL; в
результате в окне сценария появится соответствующая конструкция на языке
ActionScript, а в панели параметров - параметры действия getURL (рисунок 13).
Рисунок 13 - Панель Actions после назначения
кнопке действия getURL
) Введите требуемые значения параметров.
) По умолчанию действие getURL выполняется по
щелчку на кнопке событие (release); если требуется добавить или изменить
событие, щелкните в окне сценария в строке селектора и с помощью панели
параметров измените перечень событий.
Рассмотрим подробнее параметры действия getURL.
Параметр URL определяет адрес запрашиваемого
документа; значение параметра может быть задано в виде абсолютного или
относительного URL, либо в виде вычисляемого выражения.
При указании относительного URL для поиска
требуемого документа Flash перемещается по иерархии файлы/папки/каталоги и
обратно, начиная с того файла, в котором содержится процедура getURL.
Чтобы получить URL как результат вычисления
некоторого выражения, установите флажок Expression, расположенный справа от
поля URL, и введите требуемое выражение.
Параметр Window задает окно или фрейм, в который
должен быть загружен запрошенный документ. Значение параметра выбирается с
помощью раскрывающегося списка, который содержит следующие варианты (они
аналогичны значениям атрибута TARGET тэга <А> в языке HTML):
_self- документ будет загружен в текущее окно,
или фрейм.
_blank - документ будет загружен в новое окно.
_parent -- документ будет загружен в
родительский или текущий фрейм.
_top - документ будет загружен во фрейм более
высокого уровня иерархии или в текущее окно.
При необходимости значение данного параметра
может быть получено как результат вычисления выражения. В этом случае следует
установить флажок Expression, расположенный справа от списка Window.
Параметр Variables позволяет указать способ
пересылки данных по заданному URL. Значение параметра выбирается из
раскрывающегося списка, который содержит три варианта:
) Don't send (He отправлять) - пересылка данных
не требуется;
) Send using GET (Отправить, используя GET) -
для пересылки данных будет использован метод GET;
) Send using POST (Отправить, используя POST) -
для пересылки данных будет использован метод POST.
.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_1.onPress =
function(){(this);
}
_root.clip_1.onRelease =
function(){();
}
Данным способом мы глобально создали обработчик
событий нажатия и отпускания левой кнопки мыши над клипом с именем “clip_1”.
Не редко, у разработчиков, возникает потребность
доставать нефиксированное число объектов из библиотеки 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(){(this);
}
_root["clip"+i].onRelease
= function(){
stopDrag();
}
Функция attachMovie() достаёт из библиотеки
ролик с именем Clip, присваивает имя clip[i], где i-номер ролика (без квадратных
скобок), помещает этот ролик на текущий кадр на глубину i, в точку, заданную
координатами X[i],Y[i] (Массивы координат).
Таким образом можно создавать массивы
обработчиков событий, но при этом все осуществляемые действия должны иметь
относительные ссылки.
Не мало важный момент при создании
шаблонов - это использование текстовых файлов, что позволяет создавать и
отлаживать задания, не используя знания по программированию. Для загрузки
текстового файла можно воспользоваться функцией loadVariables(). При загрузке
текстовых файлов с помощью этой функции на сайте www.dl.gsu.by
<http://www.dl.gsu.by>, обращение к файлу в папке webfiles
производится следующим образом:
loadVariables(flashfiles+”text.txt”,_root);
Где text.txt - имя подгружаемого
файла. Далее по программному коду в пределах работы переменных подгружаемых из
файла необходимо писать следующую функцию:
_root.onData = function(){}
Так же можно воссоздать скроллинг
листа используя объекты Macromedia Flash. Для начала создадим заготовки для
кнопок скроллинга: вверх, вниз, ползунок. Это можно сделать, используя среду
векторной анимации самого Flesh, но можно и загрузить картинки соответствующих
кнопок. Так же необходим вид полосы по которой будет двигаться ползунок.
Ползунок - это ролик, состоящий из
2-ух кадров. На первом кадре обычный вид ползунка, на втором - нажатый. В
обработчик каждого кадра пишем процедуру stop(). Стрелки вверх вниз могут быть
кнопками. Полоса по которой движется ползунок должна быть конвертирована в
ролик. Присвоим имена роликам и кнопкам: кнопка вверх - vverh, вниз - vniz,
ролик ползунка - pol, ролик полосы - polosa.