Статья «Технология создания интерактивных программ к уроку математики в среде Macromedia Flash»

§ 1. Краткий обзор программы Macromedia Flash MX 2004

1.1. Знакомство с программой
Среда разработки Flash состоит из нескольких окон и рабочего поля. Наиболее важные панели: панель инструментов, панель свойств, панель цветов, панель действий и временная шкала (рис. 1).
В панели инструментов находятся: основные и дополнительные инструменты, их настройки, цвет для рисующих инструментов, а так же некоторые операции (рис. 2).
1.2. Слои в Macromedia Flash
Пожалуй, лучшая метафора системы слоёв в Macromedia Flash - это бутерброд. Кусочки общей картины, расположенные на разных слоях, показываются как одно целое (рис. 3). Слои удобны для создания сложных изображений, поскольку на фигуры, расположенные на разных слоях, не распространяется, так называемый, принцип липкости.
Преимущество слоёв хорошо видно при попытке разделить фигуры. Слева это сделано без использования слоёв (все фигуры на одном слое), справа - с использованием слоёв (все фигуры на разных слоях) (рис 4).
Панель со списком слоёв всегда находится в левом верхнем углу рабочей области (рис. 5).
• чтобы выбрать слой, необходимо щелкнуть мышью по его имени;
• чтобы добавить новый слой, необходимо нажать на кнопку ;
• чтобы удалить выбранный слой, необходимо нажать на кнопку ;
• чтобы переименовать слой, необходимо дважды щёлкнуть мышью по его имени;
• чтобы включить/выключить видимость слоя, необходимо щёлкнуть мышью по точке, расположенной напротив имени слоя, под кнопкой ;
• чтобы включить/выключить доступность слоя для изменений, необходимо щёлкнуть мышью по точке, расположенной напротив имени слоя, под кнопкой ;
• чтобы включить/выключить контурный режим показа слоя, необходимо щёлкнуть мышью по точке, расположенной напротив имени слоя, под кнопкой .
Используя вышеупомянутые кнопки с изображением глаза, замочка, и прямоугольника, можно включать/выключать видимость, доступность для редактирования и контурный режим показа для всех слоёв сразу.
Чем выше в списке находится слой, тем он ближе расположен к нам. Самый верхний слой в списке, находится поверх остальных слоёв, самый нижний - позади.
Чтобы изменить положение слоя в списке, необходимо захватить имя слоя мышью и перетянуть в нужное место (drag'n'drop) (рис. 6).
Чтобы узнать, что находится на слое в данный момент, необходимо выключить видимость всех слоёв, кроме одного, с тем, чтобы посмотреть, что остаётся. Можно поступить и по-другому: выключить видимость искомого слоя с тем, чтобы посмотреть, что исчезает (рис. 7).

1.3. Временная шкала
Временная шкала (Timeline) – панель, отображающая последовательность кадров и иерархию слоев. Временная шкала выглядит как таблица: строками являются слои, а столбцами – номера кадров (рис. 8).
Во Flash кадр содержит то, что должно быть проиграно на данном слое в соответствующий отрезок времени. Кадры пронумерованы, их количество не ограничено. Скорость прокрутки кадров определяется с помощью свойства «Frame Rate» (частота кадров) временной шкалы. Диалоговое окно включается двойным нажатием на окошко, по умолчанию содержащее надпись «12.0 fps» - 12 кадров в секунду.
Во Flash различают три типа анимации:
1) покадровая;
2) автоматическая;
3) программная.
Покадровая анимация реализуется последовательной прорисовкой каждого кадра. Для такой анимации нужно, чтобы каждый кадр был ключевым. Вставка ключевого кадра, следующего за выделенным, осуществляется нажатием клавиши «F6». Для просмотра анимации в среде Flash используется клавиша «Enter».
Запуск анимации во встроенном проигрывателе осуществляется нажатием кнопок «Ctrl + Enter».

1.4. Рабочее поле в клеточку

Во Flash предусмотрена возможность автоматического создания сетки на рабочем поле (рис. 9).
Чтобы показать / скрыть сетку, следует выбрать
Вид>Сетка>Сетка (View>Grid>Show Grid).
Скрыть/показать сетку можно также комбинацией клавиш
CTRL+' (апостроф).
У сетки свой магнит, обеспечивающий "прилипание" фигур и их частей к узлам и линиям сетки при перетаскивании и модификации. Чтобы включить / выключить магнит сетки, следует выбрать Вид>Сетка>Прировнять к сетке (View>Grid>Snap To Grid). Включить/выключить магнит сетки можно также комбинацией клавиш CTRL+SHIFT+' (апостроф). Размеры клеток сетки можно настроить в окне настройки параметров сетки. Чтобы вызвать окно параметров сетки, следует выбрать Вид>Сетка>Правка сетки... (View>Grid>Edit Grid...) (рис. 10).
1.5. Дополнительные инструменты
Для того, чтобы инструменты "Вращение" и "Масштабирование" стали доступны, фигуру или её часть нужно выделить. После этого можно выбрать один из дополнительных инструментов.
Если выбрать инструмент "Вращение", то появятся четыре маркера в форме кружков. Чтобы повернуть выделенное, необходимо потянуть мышью за один из угловых маркеров, а затем отпустить (drag'n'drop) (рис. 11).
Если же ухватиться за один из срединных маркеров, потянуть и отпустить (drag'n'drop), то выделенное будет не повернуто, а скошено по вертикали или по горизонтали, в зависимости от маркера (рис. 12).
У инструмента "Масштабирование" маркеры выполнены в форме прямоугольников. Если схватиться за один из срединных маркеров, потянуть и отпустить (drag'n'drop), то будет выполнено масштабирование выделенного по горизонтали или по вертикали, в зависимости от маркера. Если же использовать угловые маркеры, то масштабирование по ширине и высоте будет производиться пропорционально. Если потянуть за один из срединных маркеров в сторону, противоположную увеличению, и как бы "перекрутить" выделенное, то будет произведено симметричное отображение выделенного по горизонтали или по вертикали в зависимости от маркера. Симметричное отображение производится относительно вертикальной или горизонтальной линии, на которой расположен маркер. Аналогичным способом можно симметрично отобразить относительно точки. Для этого следует воспользоваться угловым маркером.
Делая вывод из всего вышесказанного, отметим сильные и слабые стороны программы Macromedia Flash MX.
К достоинствам можно отнести:
1) сочетание мощного редактора векторной графики, анимации, Интернет - технологий и языка программирования;
2) возможность сохранения результатов работы и ведения электронного журнала на сервере;
3) возможность создания эффективного интерфейса для различных типов математических задач.
Недостатками являются:
1) ограниченная возможность записи на жесткий диск результатов работы;
2) менее мощный язык программирования, в сравнении с объектно-ориентированными языками.

§ 2. Технология создания интерактивных разработок к уроку в среде
Macromedia Flash (на примере нескольких программ)

2.1. Алгоритм создания игрового тренажера
«Иван-царевич и Василиса Прекрасная»
Тренажер «Иван-царевич и Василиса Прекрасная» предназначен для отработки навыков нахождения точки на координатной плоскости по заданным координатам. В нашем случае координаты явно не заданы. Их нужно найти, посчитав значение выражения. Таким образом, наш тренажер помогает так же развитию вычислительных навыков. Суть задания заключается в следующем: ученик, вычислив координаты точки, должен перетянуть в эту точку соответствующий «оберег». В каждом задании необходимо разложить по своим местам семь «оберегов», после чего нажать кнопку «Готово». Если задание выполнено верно, то появится сообщение о том, что ловушка пройдена, если хотя бы один «оберег» лежит не на своем месте, то появится сообщение об ошибке: «Иван-царевич попал в ловушку».
Этапы создания тренажера:
1) создаем на первом кадре статистическое текстовое поле (Statik Text) и записываем в нем текст задания (рис. 13). В нашем случае это сказка;
2) на первом кадре пишем код: stop();
3) добавляем кнопку перехода на следующий кадр. Для этого нужно:
• нарисовать кнопку любой формы (например стрелку);
• выделить её;
• щелкнуть по ней правой кнопкой мыши;
• в выпавшем окне выбрать команды: Convert to Symbol -> Button;
• выделить полученную кнопку и написать код:
on (release) {nextFrame();} – при нажатии перейти на следующий кадр.
Код для любого символа в Macromedia Flash записывается в панели Action Frame (рис. 14):
4) оформление первого кадра выполняется по желанию. Если вы хотите вставить какой то рисунок, то это можно сделать с помощью обычных команд – «Копировать» - «Вставить» или выбрать команду File -> Import.
5) на втором кадре располагается само задание. Чтобы создать второй (и все последующие) кадр нужно на временной шкале выделить соответствующий кадр, щелкнуть по нему правой кнопкой мыши и выбрать команду Insert Keyframe (рис. 15).
После этой операции все содержимое первого кадра скопируется на второй кадр. Все лишнее со второго кадра мы можем удалить и поместить туда нужную нам информацию. Если не выполнить описанную операцию, то изменения, произведенные на втором кадре, автоматически произойдут и на первом кадре.
Итак, на втором кадре мы помещаем координатную плоскость, причем рисуем мы ее на втором слое (создание слоев описано в предыдущем параграфе).
Координатная плоскость, в нашем случае, нарисована с помощью инструмента «прямая» (LineTools) (рис 16), рисуем одну линию с зажатой клавишей Shift, копируем её (Ctrl+C) и вставляем (Ctrl+V) на нужном расстоянии. Затем можно скопировать уже две прямых и т.д. Получив необходимое количество прямых, копируем их все, вставляем и, выбрав команду «свободная трансформация» (Free Transform Tool) (рис. 16), поворачиваем наши прямые на 90 градусов. Таким образом, мы получаем сетку нужного нам размера (рис. 17).
Сетку можно получить и другим способом, но нам было удобнее воспользоваться именно нарисованной вручную сеткой, так как с ней проще в дальнейшем работать.
6) координатные оси изображаем на слое 3;
7) координаты точек записываем с помощью уже знакомого текстового поля – Statik Text, «обереги» рисуем с помощью инструментов рисования. Все это выполняем на слое 1;
8) копируем изображение оберегов с первого слоя и помещаем на третий (рис. 18);
9) каждый оберег преобразуем в клип:
• выделить нужный оберег;
• щелкнуть по нему правой кнопкой мыши;
• в выпавшем окне выбрать команды: Convert to Symbol -> Movie Clip;
• каждому клипу дать имя: Оbereg1, Оbereg2,…, Оbereg7 (рис. 19).
10) для каждого клипа записываем следующий код:

on (press) { x0=this._x; y0=this._y;
this.startDrag(false);}
on (release) {this.stopDrag();
if (x0==this._x and y0==this._y){ this._rotation+=45; }}

11) на слое 1 в точках, соответствующих записанным координатам помещаем небольшие кружочки (по цвету совпадающие с цветом фона, чтобы ученик не видел, куда нужно передвинуть оберег);
12) каждый рисунок преобразуем в клип (рис. 20).
13) каждому клипу даем имя: Lov1, Lov2, … , Lov7 (от слова «ловушка»). Номер ловушки должен соответствовать номеру оберега, который учащийся с помощью мышки будет передвигать в точку с нужными координатами.
14) на любой из слоев добавляем текстовое поле Dynamik Text и задаем ему имя: text1 (рис. 21).
15) размещаем на форме кнопку «Готово» (рис. 22). Кнопку добавляем так же, как и в пункте 2;
16) для этой кнопки пишем следующий код:
on (press) {
if ((ober1.hitTest(lov1)) and (ober2.hitTest(lov2))
and (ober3.hitTest(lov3))and ( ober4.hitTest(lov4))
and ( ober5.hitTest(lov5))and ( ober6.hitTest(lov6))
and ( ober7.hitTest(lov7))) {
nextFrame();
} else {
text1.text = "Иван Царевич попал в ловушку"; }}
17) на следующем кадре создаем сообщение о прохождении ловушки (рис. 23). Можно добавить какой-нибудь рисунок.
18) для кнопки «Далее» записываем код : on (release) { nextFrame();}
19) для кнопки «Меню» - on(release) {loadMovie ("имя файла.swf", _level0);}
Если ученик нажимает кнопку «Далее», то он переходит на следующий кадр (рис. 24). На этом кадре нужно переместить, в соответствии с новыми координатами, клипы: Lov1, Ljv2,…,Lov7. Если учащийся проходит все ловушки (в нашем случае их 7), то на экране появляется заключительный кадр (рис. 25).
20) для кнопки «Снова» записываем код: on (press) {gotoAndPlay(1);}
21) чтобы при запуске программы картинка открывалась во весь экран на первом кадре нужно написать код: fscommand("fullscreen",true);
22) компиляция программы – клавиши: Ctrl + Enter;
23) на любой кадр добавляем картинки по желанию – программа готова.

2.2. Алгоритм создания теста «Определение координат»

«Определение координат» - это тест на проверку умения находить координаты по точке координатной плоскости. По заданной на плоскости точке нужно определить ее координаты и записать их в соответствующие окошечки (рис. 26).

Этапы создания теста:
1) на первом слое, которому можно дать имя «сетка», нарисуйте координатную сетку (можно скопировать сетку из предыдущего задания);
2) на втором слое «оси» нарисуйте оси координат, добавьте обозначения осей и точку, координаты которой нужно найти (в нашем случае это точка А). Обозначение точки будет меняться на каждом слое;
3) на втором слое добавьте два текстовых поля (Statik Text). В одном запишите «Абсцисса точки А», в другом – «Ордината точки А»;
4) создайте слой 3 и назовите его «координаты»;
5) на этом слое создайте два текстовых поля (Input Text) и назовите их korx (координата х) и kory (координата y);
6) разместите эти поля напротив соответствующих полей «абсцисса» и «ордината»;
7) создайте динамическое текстовое поле (Dynamik Text), и назовите его «rez» (результат) (рис. 27);
8) создайте кнопку перехода на следующий кадр: Запишите код: on (release) {_root.nextFrame(); }
9) создайте кнопку «готово» или «проверить». При нажатии этой кнопки программа проверяет правильность введенных учеником координат. Если координаты указаны верно, то программа выдает сообщение «Правильно», если нет – «Неправильно». Код для этой кнопки будет меняться в зависимости от расположения точки на координатной плоскости.
on (press) {
if ((krx.text == "5") and (kry.text == "4")) {sum++;
rez.text = "Правильно";
} else { rez.text = "Не правильно"; }}
10) если вы хотите отследить время, затраченное ребенком на выполнение теста, то можно создать таймер: (рис. 28)
11) для подведения итогов теста на первом кадре любого слоя надо записать следующий код:
stop();
var n = 10; // количество вопросов
var time = 0;
var sum = 0; // количество правильных ответов
function tiktak() {
time++;}
timer = setInterval(tiktak, 1000); // таймер

12) далее нужно создать второй ключевой кадр и изменить в нем необходимые параметры:
• расположение и обозначение точки на координатной плоскости;
• обозначение точки в поле «абсцисса точки_» и «ордината точки_»;
• в коде кнопки «готово» указать новые координаты точки.
13) повторяем все описанные шаги нужное количество раз (зависит от количества вопросов в тесте, в нашем случае – 10 раз);
14) после последнего вопроса необходимо создать ещё один ключевой кадр (кадр с результатами теста):
• создайте на этом кадре текстовое поле (Statik Text) с надписью «Результаты:» или «Оценка:» (рис. 29);
• создайте динамическое текстовое поле и назовите его text;
• на итоговом кадре напишите следующий код:
clearInterval(timer);
stop();
{if (sum==10) { ozenka.text="Отлично";}
if ((sum==9) or (sum==8)) { ozenka.text="Хорошо";}
if ((sum==7) or (sum==6)) { ozenka.text="Тройка";}
if ((sum==5) or (sum==4) or (sum==3 )
or (sum==2) or (sum==1) or (sum==0)) { ozenka.text="Двойка";}}
15) для того чтобы была возможность выполнить этот тест ещё раз (если вы хотите предоставить ученикам такую возможность), создайте кнопку «Снова»;
16) напишите для этой кнопки код:
on (press) {gotoAndPlay(1);}

2.3. Алгоритм создания презентации «Построение фигур в координатной плоскости»

Данная презентация предназначена для объяснения хода построения фигуры на координатной плоскости по заданным координатам ее ключевых точек. В ней рассматривается два способа построения фигуры по точкам:
1) сначала мы отмечаем все точки, затем последовательно их соединяем;
2) каждую последующую точку сразу соединяем с предыдущей.
Этапы создания:
1) создайте два ключевых кадра;
2) на каждом кадре разместите изображение координатной плоскости и текст задания;
3) на первом кадре напишите код: stop(); fscommand("fullscreen",true);
4) координатную плоскость преобразуйте в клип (пункт 3.1 шаг 6);
5) в режиме редактирования клипа (для вызова дважды щелкните по клипу) создайте второй слой, на котором будут появляться точки;
6) чтобы точки начали появляться не сразу при запуске клипа – первые 30 кадров оставьте без изменения (рис. 30):
7) далее через каждые семь кадров создайте ключевой и добавьте на него по одной точке фигуры (рис. 31):
8) после этого, так же через 7 кадров, начинаем добавлять соединительные линии (рис. 32):
9) на последнем кадре напишите код: stop();
10) перейдите в режим редактирования сцены (двойной щелчок мимо клипа) и на первом кадре создайте кнопку перехода на следующий кадр: on (release) {nextFrame();};
11) на втором кадре, в режиме редактирования клипа, создаем второй и третий слои. На втором слое будут появляться точки, на третьем отрезки;
12) создаем последовательность кадров (рис. 33):
13) на последнем кадре пишем код: stop();
14) возвращаемся в режим редактирования сцены и добавляем кнопку перехода на предыдущий кадр.

Желаю успехов в создании собственных разработок!
Полный текст материала Статья «Технология создания интерактивных программ к уроку математики в среде Macromedia Flash» смотрите в скачиваемом файле.
На странице приведен фрагмент.