Алгоритм создания игрового тренажера “Иван-царевич и Василиса Прекрасная”
Тренажер “Иван-царевич и Василиса Прекрасная” предназначен для отработки навыков нахождения точки на координатной плоскости по заданным координатам. В нашем случае координаты явно не заданы. Их нужно найти, посчитав значение выражения. Таким образом, этот тренажер помогает так же развитию вычислительных навыков. Суть задания заключается в следующем: ученик, вычислив координаты точки, должен перетянуть в эту точку соответствующий “оберег”. В каждом задании необходимо разложить по своим местам семь “оберегов”, после чего нажать кнопку “Готово”. Если задание выполнено верно, то появится сообщение о том, что ловушка пройдена, если хотя бы один “оберег” лежит не на своем месте, то появится сообщение об ошибке: “Иван-царевич попал в ловушку”.
Этапы создания тренажера:
1) создаем на первом кадре статистическое текстовое поле (Statik Text) и записываем в нем текст задания (рис. 13). В нашем случае это сказка;
2) на первом кадре пишем код: stop();
Рис. 13
3) добавляем кнопку перехода на следующий кадр. Для этого нужно:
- нарисовать кнопку любой формы (например стрелку);
- выделить её;
- щелкнуть по ней правой кнопкой мыши;
- в выпавшем окне выбрать команды: Convert to Symbol -> Button;
- выделить полученную кнопку и написать код:
- on (release) {nextFrame();} – при нажатии перейти на следующий кадр.
Код для любого символа в Macromedia Flash записывается в панели Action Frame (рис. 14):
Рис. 14
4) оформление первого кадра выполняется по желанию. Если вы хотите вставить какой то рисунок, то это можно сделать с помощью обычных команд – “Копировать” - “Вставить” или выбрать команду File —> Import.
5) на втором кадре располагается само задание. Чтобы создать второй (и все последующие) кадр нужно на временной шкале выделить соответствующий кадр, щелкнуть по нему правой кнопкой мыши и выбрать команду Insert Keyframe (рис. 15).
Рис. 15
После этой операции все содержимое первого кадра скопируется на второй кадр. Все лишнее со второго кадра мы можем удалить и поместить туда нужную нам информацию. Если не выполнить описанную операцию, то изменения, произведенные на втором кадре, автоматически произойдут и на первом кадре.
Итак, на втором кадре мы помещаем координатную плоскость, причем рисуем мы ее на втором слое (создание слоев описано в предыдущем параграфе).
Координатная плоскость, в нашем случае, нарисована с помощью инструмента “прямая” (LineTools) (рис 16), рисуем одну линию с зажатой клавишей Shift, копируем её (Ctrl+C) и вставляем (Ctrl+V) на нужном расстоянии. Затем можно скопировать уже две прямых и т.д. Получив необходимое количество прямых, копируем их все, вставляем и, выбрав команду “свободная трансформация” (Free Transform Tool) (рис. 16), поворачиваем наши прямые на 90 градусов. Таким образом, мы получаем сетку нужного нам размера (рис. 17).
Рис. 16
Сетку можно получить и другим способом, но нам было удобнее воспользоваться именно нарисованной вручную сеткой, так как с ней проще в дальнейшем работать.
Рис. 17
Рис. 18
6) координатные оси изображаем на слое 3;
7) координаты точек записываем с помощью уже знакомого текстового поля – Statik Text, “обереги” рисуем с помощью инструментов рисования. Все это выполняем на слое 1;
8) копируем изображение оберегов с первого слоя и помещаем на третий (рис. 18);
9) каждый оберег преобразуем в клип:
- выделить нужный оберег;
- щелкнуть по нему правой кнопкой мыши;
- в выпавшем окне выбрать команды: Convert to Symbol -> Movie Clip;
- каждому клипу дать имя: Оbereg1, Оbereg2,…, Оbereg7 (рис. 19).
Рис. 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; }}
Рис. 20
11) на слое 1 в точках, соответствующих записанным координатам помещаем небольшие кружочки (по цвету совпадающие с цветом фона, чтобы ученик не видел, куда нужно передвинуть оберег);
12) каждый рисунок преобразуем в клип (рис. 20).
13) каждому клипу даем имя: Lov1, Lov2,…, Lov7 (от слова “ловушка”). Номер ловушки должен соответствовать номеру оберега, который учащийся с помощью мышки будет передвигать в точку с нужными координатами.
14) на любой из слоев добавляем текстовое поле Dynamik Text и задаем ему имя: text1 (рис. 21).
Рис. 21
14) размещаем на форме кнопку “Готово” (рис. 22). Кнопку добавляем так же, как и в пункте 2;
Рис. 22
15) для этой кнопки пишем следующий код:
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 = "Иван Царевич попал в ловушку"; }}
16) на следующем кадре создаем сообщение о прохождении ловушки (рис. 23). Можно добавить какой-нибудь рисунок.
Рис. 23 Рис. 24
Рис. 25
17) для кнопки “Далее” записываем код : on (release) { nextFrame();}
18) для кнопки “Меню” - on(release) {loadMovie ("имя файла.swf", _level0);}
Если ученик нажимает кнопку “Далее”, то он переходит на следующий кадр (рис. 24). На этом кадре нужно переместить, в соответствии с новыми координатами, клипы: Lov1, Ljv2,…,Lov7. Если учащийся проходит все ловушки (в нашем случае их 7), то на экране появляется заключительный кадр (рис. 25).
19) для кнопки “Снова” записываем код: on (press) {gotoAndPlay(1);}
20) чтобы при запуске программы картинка открывалась во весь экран на первом кадре нужно написать код: fscommand("fullscreen",true);
21) компиляция программы – клавиши: Ctrl + Enter;
22) на любой кадр добавляем картинки по желанию – программа готова.
Алгоритм создания теста “Определение координат”
“Определение координат” - это тест на проверку умения находить координаты по точке координатной плоскости. По заданной на плоскости точке нужно определить ее координаты и записать их в соответствующие окошечки (рис. 26).
Рис. 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) создайте кнопку “готово” или “проверить”. При нажатии этой кнопки программа проверяет правильность введенных учеником координат. Если координаты указаны верно, то программа выдает сообщение “Правильно”, если нет – “Неправильно”. Код для этой кнопки будет меняться в зависимости от расположения точки на координатной плоскости.
Рис. 27
on (press) {
if ((krx.text == "5") and (kry.text == "4")) {sum++;
rez.text = "Правильно"; } else { rez.text = "Не правильно"; }}
10) для подведения итогов теста на первом кадре любого слоя надо записать следующий код:
stop();
var n = 10; // количество вопросов
var time = 0;
var sum = 0; // количество правильных ответов
function tiktak() {time++;}
timer = setInterval(tiktak, 1000); // таймер
11) далее нужно создать второй ключевой кадр и изменить в нем необходимые параметры:
- расположение и обозначение точки на координатной плоскости;
- обозначение точки в поле “абсцисса точки_” и “ордината точки_”;
- в коде кнопки “готово” указать новые координаты точки.
12) повторяем все описанные шаги нужное количество раз (зависит от количества вопросов в тесте, в нашем случае – 10 раз);
13) после последнего вопроса необходимо создать ещё один ключевой кадр (кадр с результатами теста):
- создайте на этом кадре текстовое поле (Statik Text) с надписью “Результаты:” или “Оценка:” (рис. 29);
- создайте динамическое текстовое поле и назовите его text;
- на итоговом кадре напишите следующий код:
Рис. 29
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="Двойка";}}
14) для того чтобы была возможность выполнить этот тест ещё раз (если вы хотите предоставить ученикам такую возможность), создайте кнопку “Снова”;
15) напишите для этой кнопки код: on (press) {gotoAndPlay(1);}
Алгоритм создания презентации “Построение фигур”
Данная презентация предназначена для объяснения хода построения фигуры на координатной плоскости по заданным координатам ее ключевых точек. В ней рассматривается два способа построения фигуры по точкам:
- сначала мы отмечаем все точки, затем последовательно их соединяем;
- каждую последующую точку сразу соединяем с предыдущей.
Этапы создания:
- создайте два ключевых кадра;
- на каждом кадре разместите изображение координатной плоскости и текст задания;
- на первом кадре напишите код: stop(); fscommand("fullscreen",true);
- координатную плоскость преобразуйте в клип (пункт 3.1 шаг 6);
- в режиме редактирования клипа (для вызова дважды щелкните по клипу) создайте второй слой, на котором будут появляться точки;
- чтобы точки начали появляться не сразу при запуске клипа – первые 30 кадров оставьте без изменения (рис. 30):
Рис. 30
- далее через каждые семь кадров создайте ключевой и добавьте на него по одной точке фигуры (рис. 31):
- после этого, так же через 7 кадров, начинаем добавлять соединительные линии (рис. 32):
- на последнем кадре напишите код: stop();
- перейдите в режим редактирования сцены (двойной щелчок мимо клипа) и на первом кадре создайте кнопку перехода на следующий кадр: on (release) {nextFrame();};
- на втором кадре, в режиме редактирования клипа, создаем второй и третий слои. На втором слое будут появляться точки, на третьем отрезки;
- создаем последовательность кадров (рис. 33):
- на последнем кадре пишем код: stop();
- возвращаемся в режим редактирования сцены и добавляем кнопку перехода на предыдущий кадр.
Желаю успехов в создании собственных работ!