Разработка ЦОР для ИД во Flash

«Разработка ЦОР для ИД во Flash»
Технология создания ЦОРа на установление
соответствия при помощи различного количества
линий. Метод drawLine
Данная технология позволяет освоить прием создания ЦОРа на
соединение объектов при помощи линий. При этом от одного объекта можно
провести одну, две и более линий (по желанию разработчика ЦОРа). В
отличие
от
урока,
опубликованного
ранее
(http://it-
n.ru/communities.aspx?cat_no=139369&d_no=221439&ext=Attachment.aspx?Id=
96513) в приеме для рисования линии используется метод drawLine.
Для того, чтобы провести линию необходимо от прямоугольной кнопки
протянуть курсор до одной из круглых кнопок.
Алгоритм разработки ЦОРа
1. Откройте новый документ Adobe Flash СS3 или более поздней версии.
При этом, если это CS4-CS5 выбираем Файл→Создать(Ctrl+N)→Файл
Flash (ActionScript2.0).
1
«Разработка ЦОР для ИД во Flash»
2. Рисуем прямоугольник. Выделяем его инструментом Выделение
Selection Tool (V) и преобразовываем в символ – тип клип. Задаем
созданному клипу имя (Instanse Name) buttons
3. Выделяем прямоугольник, преобразовываем его в символ – тип клип.
4. Двойным щелчком по клипу заходим внутрь символа. Копируем
содержимое первого кадра во второй и третий:
2
«Разработка ЦОР для ИД во Flash»
В первом кадре прописываем stop();
Во втором и третьем кадре слегка меняем цвет прямоугольника.
5. Выходим из символа, нажав синюю стрелку
6. Дублируем созданный прямоугольник, задав соответственно имена
(Instanse Name):
buttonINT
buttonFLOAT
7. Размещаем поверх клипов необходимые надписи. Выходим из символа,
нажав синюю стрелку.
8. Рисуем окружность и преобразовываем ее в символ тип – клип, задаем
имя (Instanse Name) answerButton_1
9. Копируем созданный символ и размещаем на сцене нужное количество
экземпляров, задав им соответственно имена (Instanse Name):
 answerButton_1
 answerButton_2
 answerButton_3
 answerButton_4
3
«Разработка ЦОР для ИД во Flash»
 answerButton_5 и т.д.
10.Импортируем необходимые изображения и размещаем их на рабочем
поле.
11.Добавляем поле с динамическим текстом и именем (Instanse Name)
result
12.Добавляем кнопку проверки со скриптом:
on (release) {
Проверка();
}
13.В кадр вставляем следующий скрипт:
//При изменении количества клипов в программе нужно менять только
первые строчки кода, которые выделены зеленым цветом.
var correctAnswers=[[1,3,7],[2,4,5,6]]; //Здесь задаются правильные
ответы в виде [[номера "кнопок до" для "кнопки от 1"],[номера
"кнопок до" для "кнопки от 2"]] Два одинаковых номера для
разных кнопок ставить нельзя
var
uncorrectAnswerText:String="<font
color='#ff0000'>Неверно!
Пробуй еще :)</font>"//Вывод сообщения Неверно! Пробуй еще :)
var
correctAnswerText:String="<font
:)</font>" //Вывод сообщения Верно! :)
//Кнопки ОТ
4
color='#00ff00'>Верно!
«Разработка ЦОР для ИД во Flash»
var
buttonsFrom:Array=[buttons.buttonINT,buttons.buttonFLOAT];
//Можно добавлять... Элемент должен лежать на поле с таким же
названием
//Кнопки ДО
var
buttonsTo:Array=[answerButton_1,answerButton_2,answerButton_3,
answerButton_4,answerButton_5, answerButton_6,
answerButton_7];
//Можно добавлять... Элемент должен лежать
на поле с таким же названием
//ДАЛЬШЕ ИДЕТ АЛГОРИТМ, КОТОРЫЙ ИЗМЕНЯТЬ НЕ НАДО
function associativeButton(button:MovieClip) {
button.selected=false;
button.onRollOver=function () {
this.gotoAndStop(2);
}
button.onPress=function () {
this.selected=true;
this.gotoAndStop(3);
}
button.onRelease=function () {
this.selected=false;
this.gotoAndStop(2);
}
button.onReleaseOutside=function () {
this.selected=false;
this.gotoAndStop(1);
5
«Разработка ЦОР для ИД во Flash»
}
button.onRollOut=function () {
this.gotoAndStop(1);
}
}
function selectiveButton(button) {
button.onMouseMove=function () {
if(drawFrom.x!=null&&drawFrom.y!=null) {
if(this.hitTest(this._parent._xmouse,this._parent._ymouse,true))
{
this.gotoAndStop(2);
}else{
this.gotoAndStop(1);
}
}else{
this.gotoAndStop(1);
}
}
}
buttons.buttonINT.n=1;
buttons.buttonFLOAT.n=2;
for (var asoc_buttons in buttonsFrom) {
buttonsFrom[asoc_buttons].n=asoc_buttons;
associativeButton(buttonsFrom[asoc_buttons])
}
for (var sel_buttons in buttonsTo) {
selectiveButton(buttonsTo[sel_buttons])
6
«Разработка ЦОР для ИД во Flash»
}
var graphs:MovieClip=createEmptyMovieClip("graphics",10);
buttons.swapDepths(15)
var drawList:Array=[];
var drawFrom={x:null,y:null,obj:null};
onMouseDown=function () {
var hitTestResult:MovieClip=getHitTest(buttonsFrom);
if(hitTestResult!=null) {
drawFrom={x:_xmouse,y:_ymouse,obj:hitTestResult};
var
graph:MovieClip=graphs.createEmptyMovieClip("graph"+drawList.len
gth,graphs.getNextHighestDepth());
drawList.push(graph);
//trace(hitTestResult)
}else{
drawFrom={x:null,y:null,obj:null};
}
}
onMouseUp=function () {
if(drawFrom.x!=null&&drawFrom.y!=null) {
var hitTestResult:MovieClip=getHitTest(buttonsTo);
if(hitTestResult!=null) {
if(hitTestResult.result==null) {
trace("hitTestResult.result is null")
hitTestResult.result={obj:drawFrom.obj.n,line_index:(drawList.length-1)}
drawLine(drawList[drawList.length1],drawFrom.x,drawFrom.y,hitTestResult._x,hitTestResult._y);
}else{
trace("hitTestResult.result not null");
7
«Разработка ЦОР для ИД во Flash»
removeLastLine(hitTestResult.result.line_index);
drawLine(drawList[drawList.length1],drawFrom.x,drawFrom.y,hitTestResult._x,hitTestResult._y);
hitTestResult.result={obj:drawFrom.obj.n,line_index:drawList.le
ngth-1}
}
trace("point num:
"+(hitTestResult._name.split("_")[1])+" set: "+drawFrom.obj.n+"
"+hitTestResult.result.obj)
}else{
removeLastLine();
}
//trace(hitTestResult);
drawFrom={x:null,y:null,obj:null};
}
}
function removeLastLine(index) {
if(isNaN(index)) {
trace("Remove Last Line")
drawList[drawList.length-1].removeMovieClip();
//drawList.pop();
}else{
trace("Remove Line At: "+index)
drawList[index].removeMovieClip();
//drawList.splice(index,1);
}
trace("l: "+drawList.length)
}
8
«Разработка ЦОР для ИД во Flash»
function getHitTest(array) {
for (var i in array) {
if(array[i].hitTest(_xmouse,_ymouse,true)) {
return array[i];
}
}
return null;
}
onMouseMove=function () {
if(drawFrom.x!=null&&drawFrom.y!=null) {
drawLine(drawList[drawList.length1],drawFrom.x,drawFrom.y,_xmouse,_ymouse)
}
}
function drawLine(obj,x1,y1,x2,y2) {
obj.clear();
var colors_array=[0xFF0000, 0xFF6600] //Здесь задается цвет
линий, которые будут рисоваться. Если будет третья группа
линий, то необходимо через запятую указать их цвет и т.п.
obj.lineStyle(4,colors_array[drawFrom.obj.n],100);
obj.moveTo(x1,y1);
obj.lineTo(x2,y2);
return obj;
}
9
«Разработка ЦОР для ИД во Flash»
function Проверка() { //Функция проверка
for (var i=0;i<correctAnswers.length;i++) {
for (var j=0;j<correctAnswers[i].length;j++) {
trace(i+"
"+(buttonsTo[correctAnswers[i][j]-
1].result.obj))
if(i!=buttonsTo[correctAnswers[i][j]-1].result.obj) {
result.htmlText=uncorrectAnswerText
return;
}
}
}
result.htmlText=correctAnswerText
}
9. Нажимаем Ctrl+Enter - тестируем проект!
10. Публикуем в формате swf или exe.
В качестве примера использования данного приема во второй сцене
увеличено количество кнопок ОТ и ДО на 1, однако если создавать разные
ЦОРы, то стоит пользоваться рекомендациями по изменению скрипта из
п.12.
Так как в примере я использую приём в одном ЦОРе, то для
работоспособности скрипта были внесены более существенные изменения:
1. На первой сцене кнопке Перехода на 2 сцену был добавлен
скрипт:
on (release) {
play();
buttons._visible=false;
}
2. На второй сцене были внесены следующие изменения в скрипт:
10
«Разработка ЦОР для ИД во Flash»
 Кнопки ОТ – созданы на рабочем поле заново, а в скрипте
переименованы:
var
buttons2From:Array=[buttons2.buttonXRAN,buttons2.buttonVVOD,buttons2.b
uttonOBR];
 Кнопки ДО – добавлена 8 кнопка:
var
buttons2To:Array=[answerButton_1,answerButton_2,answerButton_3,answerButt
on_4,answerButton_5, answerButton_6, answerButton_7,answerButton_8];
 Правильные ответы
var correctAnswers=[[1,3,4,6],[2,5,7],[8]];
 Во всем алгоритме buttons было заменено на buttons2
 Добавлен цвет линии для третьей группы
var colors_array=[0x660000, 0x660000, 0x660000]
Успехов коллеги!
11
«Разработка ЦОР для ИД во Flash»
Источники:
Руководство по работе с Adobe Flash CS4 на русском языке
http://flash-world.ru/flash_tutorial/7-download_flash_cs4_help.html
Справочник по Actionscript 3 на русском языке
http://flash-world.ru/flash_tutorial/15-skachat_flash_actionscript_3_book.html
http://stepanenkoo.ucoz.ru/
Фон http://i012.radikal.ru/0712/01/d36a9c090409.jpg
Внешний жесткий диск
http://www.techdigest.tv/philips_SPD5130_1tb_esata_usb_external_hard_drive.jpg
DVD диск http://oxion.ru/assets/images/dvd/dvd-r/DVD-R%20Rozi.jpg
Микрофон http://ancheiopossoallenare.com/contenuti/wpcontent/uploads/2008/06/microfono1.gif
Мышка http://www.a4tech.ru/images/products/img/jpg/s1t12281h.jpg
Принтер http://tonerdirect.bg/images/hpljp1006w.jpg
Флешка http://desc.allshops.ru/images/207779.jpg
Жесткий диск http://www.ferra.ru/images/144/144686.jpg
Джойстик http://procomposites.com/FreedomProject/08_Controls/Fabrication/genx500.jpg
Процессор http://www.microchoix.com/M_images/trait110485.jpg
Трекбол http://pan3.fotovista.com/dev/3/3/46410033/g_46410033.jpg
Сканер http://regmedia.co.uk/2007/08/16/v500.jpg
Клавиатура
http://www.pc.deal.pl/foto/klawiatura_chicony_kbp_0401_black_silver.jpg
Монитор http://alt-tab.com.ar/wp-content/uploads/LG_22.jpg
Графический планшет http://www.nejlevnejsipocitace.cz/shop/images/29858.jpg
Колонки http://www.vobis.pl/foto.ashx?w=350&s=881678
Вэб-камера
http://images.logicbuy.com/datastore/userdeals/634001140434506130LogitechC250.jpg
12