Комплексы заданий развивающего обучения на базе Flash-технологий

Дипломная работа Комплексы заданий развивающего обучения на базе Flash-технологий

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

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

Память — это основа человеческого сознания. Уметь запоминать абсолютно все совершенно не обязательно, но хорошая память — верный помощник в жизни, а главное, в учебе. И чтобы развитие памяти у детей происходило успешно, важно научить ребенка правильно запоминать. Тут важную роль играет мотивация. Так новые знания должны иметь какое-то значение для ребенка. И чем больше они соприкасаются с его интересами, тем легче ему будет их запомнить. Также дети быстро и легко запоминают, если обучение происходит в игровой форме [2, c. 3].

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

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

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

1. Комплекс средств разработки шаблонов и задач с помощью технологии Flash

1.1 Применение технологий MACROMEDIA FLASH для создания шаблонов

Этот раздел посвящен приёмам работы в среде Action Script 2.0, которые использовались в данной дипломной работе. Ниже приведены действия ActionScript, наиболее часто применявшиеся при разработке шаблона.

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

Формат:

If (условие) { действия1 } else { действия2 }

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

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

Формат:

for (начальное значение; условие; изменение) { действия }

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

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

Не редко в работе часто приходиться работать с символами и их экземплярами. Символ — это объект (элемент фильма), который включен в библиотеку фильма и может быть неоднократно использован в этом же или в другом фильме. Экземпляр символа — это его копия, помещенная на стол или включенная в состав другого символа.

Символы могут создаваться двумя альтернативными способами: либо сначала создается некоторый объект, который затем преобразуется в символ, либо создается «пустая» заготовка символа, которая наполняется соответствующим содержимым.

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

а) Выбрать на столе объект (объекты), подлежащие преобразованию в символ.

б) В меню Insert (Вставить) выбрать команду Convert to Symbol… (Преобразовать в символ).

в) В открывшемся диалоговом окне Convert to Symbol указать параметры символа.

г) Щелкнуть кнопку ОК.

С помощью диалогового окна Convert to Symbol могут быть установлены следующие параметры символа:

— Name (Имя) — имя символа, под которым он будет включен в библиотеку фильма;

— Behavior (Поведение) — тип символа (клип, кнопка или графика);

— Registration (Регистрация) — положение регистрационной точки символа. Данное поле является интерактивным, и чтобы указать положение точки, следует щелкнуть мышью на соответствующем маркере (рисунок 1.1).

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

Кнопка Advanced (Дополнительно) обеспечивает переход в расширенный формат окна Convert to Symbol. В этом случае оно содержит две дополнительные группы элементов, которые применяются при связывании создаваемого символа с разделяемой библиотекой. Чтобы вернуться в сокращенный (основной) формат, следует щелкнуть на кнопке Basic (Основной), которая заменяет кнопку Advanced.

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

Для создания символа-кнопки необходимо выбрать соответствующий вариант в диалоговом окне Symbol Properties, Flash видоизменяет панель временной диаграммы. Дело в том, что кнопка во Flash представляет собой 4-кадровую анимацию, в которой первые три кадра соответствуют определенному состоянию кнопки: отжата (Up), находится под указателем (Over) или нажата (Down). Четвертый кадр (Hit) предназначен для описания активной области кнопки. Активная область — это пространство, щелчок внутри которого воспринимается Flash как щелчок на кнопке [5, c. 276].

Изображение может быть получено тремя способами: с помощью инструментов рисования; путем импорта или вставки через буфер обмена; на основе экземпляра одного из ранее созданных символов.

Для создания кнопки на основе пустого символа необходимо:

а) В одном из указанных выше меню выбрать команду New Symbol.

б) В диалоговом окне Symbol Properties ввести имя символа (например, Button1) и установить переключатель Behavior в положение Button (рисунок 1.2).

Рисунок 1.2 — Окно Symbol Properties

в) Поместить на стол или нарисовать изображение, представляющее кнопку в состоянии Up (Отжата). При этом первый кадр временной диаграммы автоматически становится ключевым, о чем говорит черная точка в ячейке кадра (рисунок 1.3).

Рисунок 1.3 — Изображение, представляющее кнопку в состоянии Up

г) В меню Insert выбрать команду Keyframe (Ключевой кадр). В результате ее выполнения считывающая головка на временной диаграмме переместится на следующий кадр — Over, и он будет помечен как ключевой. Для него по умолчанию наследуется изображение из кадра Up можно его модифицировать или заменить новым (рисунок 1.4).

Рисунок 1.4 — Изображение, представляющее кнопку в состоянии Over

д) Выполнить шаг 4 для кадров Down и Hit (рисунок 1.5).

Рисунок 1.5 — Изображение, представляющее кнопку в состоянии Hit

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

а) Выбрать в меню Window команду Library.

б) Установить указатель мыши на значок символа в списке элементов библиотеки и перетащить его на стол.

в) В меню Control (Управление) выбрать команду Enable Simple Button (Разрешить автономную проверку кнопки).

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

По завершении проверки следует выйти из режима тестирования. Для этого необходимо еще раз выбрать команду Enable Simple Button.

Чтобы создать новый клип, необходимо:

а) В меню Insert выбрать команду New Symbol.

б) В диалоговом окне Symbol Properties ввести имя символа и установить переключатель Behavior в положение Movie Clip.

в) Поместить на стол или нарисовать изображение, представляющее вид объекта в первом кадре клипа. При этом первый кадр временной диаграммы клипа автоматически становится ключевым.

г) Любым из наиболее подходящих способов создайте анимацию.

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

Во Flash предусмотрено три варианта редактирования символа:

— в режиме редактирования символа;

— в отдельном окне;

— в контексте сцены, то есть непосредственно на столе.

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

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

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

— Edit (Правка) — включение режима редактирования символа;

— Edit in Place (Правка по месту) — редактирование символа в контексте сцены;

— Edit in New Window (Правка в новом окне) — редактирование символа в новом окне.

В любом случае над панелью временной диаграммы появляется имя редактируемого символа, а на его изображении — отметка точки привязки в виде крестика. Кроме того, если символ является кнопкой или клипом, временная диаграмма фильма заменяется временной диаграммой символа [6, c. 302].

Для редактирования графического символа и кнопки могут применяться инструменты рисования и закрашивания (предварительно символ требуется выделить с помощью инструментов Arrow, Subselect, Free Transform или Lasso), а также средства трансформации изображения (поворот, наклон, отражение и т. д.) (рисунок 1.6).

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

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

Атрибуты экземпляра сохраняются вместе с ним. Если вы редактируете символ или связываете экземпляр с другим символом, все внесенные изменения атрибутов экземпляра остаются действительными.

Чтобы редактировать атрибуты экземпляра, необходимо использовать элементы управления, размещенные на панели инспектора свойств экземпляра. Формат панели зависит от типа экземпляра (графика, кнопка или клип), а также от того, какие именно изменения необходимо внести в параметры экземпляра. Общими для всех форматов являются:

— раскрывающийся список Symbol Behavior, который позволяет установить для данного экземпляра тот или иной тип символа. Список содержит соответствующие варианты (Movie Clip, Button и Graphic);

— текстовая область Instance of, в ней отображается имя символа, с которым связан данный экземпляр;

— кнопка Swap Symbol (Сменить символ). Щелчок на кнопке открывает диалоговое окно, которое позволяет связать редактируемый экземпляр с другим символом фильма;

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

От выбранного в списке пункта зависит формат связанной со списком группы элементов управления.

Список Color Styles и связанные с ним элементы управления обеспечивают изменение следующих визуальных атрибутов экземпляра: яркости (Brightness); оттенка цвета (Tint); прозрачности (Alpha). Каждому из них соответствует одноименный пункт списка. Кроме того, для создания более сложных цветовых эффектов может быть использован еще один пункт — Advanced (Продвинутый). В этом случае вы можете создавать новые цветовые оттенки, комбинируя их с прозрачностью экземпляра.

При выборе пункта Brightness на панели инспектора свойств экземпляра появляется единственный дополнительный элемент Brightness Amount (Регулятор яркости). Яркость устанавливается как относительная величина (в процентах) и может изменяться в диапазоне от — 100% (соответствует черному цвету) до 100% (соответствует белому цвету).

При выборе пункта Tint на панели инспектора свойств экземпляра отображается целая группа дополнительных элементов управления. Это обусловлено тем, что оттенок цвета определяется соотношением красного, синего и зеленого цветов (в системе RGB — Red, Green, Blue) при фиксированной насыщенности цвета. Значение кода для каждого из этих цветов устанавливается с помощью соответствующего регулятора. Значение может лежать в диапазоне от 0 до 256. Полученный оттенок тут же отображается на кнопке палитры. Насыщенность указывается в процентах (в диапазоне от 0 до 100).

Формат панели инспектора свойств экземпляра при установке прозрачности экземпляра (Alpha) аналогичен тому, который используется при установке яркости.

Прозрачность определяет степень «видимости» экземпляра на столе. Измеряется также в процентах и может лежать в диапазоне от 0% (абсолютная прозрачность) до 100%.

При выборе пункта Advanced на панели инспектора свойств появляется кнопка Settings (Установки), щелчок на которой открывает дополнительное диалоговое окно. С его помощью можно установить все перечисленные выше параметры цвета экземпляра [4, c. 351].

Часто объектам надо присваивать обработчики событий. Для этого делаем клип активным, нажимаем F9 на нем и записываем в открывшемся окне программный код. Но может возникнуть ситуация, когда на клипе неудобно писать программный код. Тогда сначала создаём объект на сцене (нарисуем его графически, или импортируем картинку в наш ролик). Затем преобразуем его в Movie Clip: нажатием клавиши F8 и выбором соответствующего пункта диалогового окна (рисунок 1.1). Затем присвоим этому клипу имя (рисунок 1.7).

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

_root.clip₁.onPress = function (){

startDrag (this);

}

_root.clip₁.onRelease = function (){

stopDrag ();

}

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

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

Рисунок 1.8 — Контекстное меню объекта в библиотеке Рисунок 1.9 — Окно связи объектов библиотеки и 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 (){}

Программный код с необходимыми комментариями разработанного шаблона «Круглая мозаика» можно просмотреть в Приложении А.

1.2 Общие принципы работы и описание параметров шаблона «Круглая мозаика»

В данном разделе приведена последовательность действий при работе с шаблоном «Круглая мозаика».

а) Скачиваем пример архива со страницы. В каталоге архива есть папка «webfiles». Внутри этой папки найти файл «per.txt». Открываем файл в блокноте. Файл имеет вид (рисунок 1.10).

Рисунок 1.10 — Вид файла per. txt

б) Переменные Mass1, Mass2, …, MassN — отвечают за длину каждой строки и цвет каждого сектора мозаики. Знак «_» формирует пустой сектор. Слова в массиве должны разделяться одним пробелом, в конце строки обязательно должна стоять точка. Внимание: каждая строка текстового файла должна начинаться и заканчиваться знаком «&» Знаки «_» удалять нельзя, можно только любые и них заменять на цифры в соответствии со схемой (рисунок 1.11).

Рисунок 1.11 — Схема цветов Цифры, стоящие в строке будут отвечать за цвет кружочка (соответствующего сектора мозаики).

в) С помощью параметра Diammalkr изменять диаметр сектора мозаики. Если указать значение параметра Ramka равным единице, то образец в задании будет изображен в черной рамочке. С помощью параметров Otstupv и Otstupl можно указать величину отступа мозаики сверху и слева соответственно. Величина отступа измеряется в диаметрах сектора мозаики (Diammalkr). Параметром Rasst задаем расстояние задания от образца (также измеряется в диаметрах сектора мозаики) Следует отметить, что для создания корректных заданий, если используются все 35 строк, не рекомендуется использовать значения параметра Diammalkr больше 11 и значения параметра Rasst больше 0. Изменили файл, сохранили его.

г) Затем в папке «webfiles» меняем имя файла с расширением swf. Подымаемся на каталог выше, находим файл task. asp, открываем его в

блокноте (рисунок 1.12).

Рисунок 1.12 — Вид файла task. asp

В строке «webfiles/Maztext.swf» вместо старого имени swf-файла пишем новое (которое изменили ранее). Сохраняем данные. Открываем файл Task. xml в блокноте (рисунок 1.13).

Рисунок 1.13 — Вид файла Task. xml

Описание переменных:

Name — В кавычках после знака равно записывается название задания, т. е. имя гиперссылки на сайте DL, которая переведёт учащегося на это задание.

Author — В кавычках после знака равно записывается имя автора и дата загрузки задания на DL.

Сохраняем изменения. Архивируем папку с файлами task и папкой webfiles и отправляем на DL.

1.3 Примеры созданных FLASH-заданий на основе шаблона «Круглая мозаика»

Ниже приведены примеры использования шаблона для создания реальных заданий.

В первом задании (рисунок Б.1) диаметр сектора мозаики равен 11. Значение параметра Ramka равно 0, значит, образец в задании будет изображен без рамочки. Значения параметров Otstupv и Otstupl равны 0, а следовательно отступа мозаики сверху и слева не будет. Расстояния задания от образца также не будет, т.к. параметр Rasst тоже задан равным нулю (рисунок 1.14).

Рисунок 1.14 — Вид файла per. txt задания 1

В итоге получаем задание, изображенное на рисунке Б.1.

Во втором задании (рисунок Б.2) диаметр сектора мозаики равен 20. Значение параметра Ramka равно 1, значит образец в задании будет изображен в черной рамочке. Значения параметров Otstupv и Otstupl равны 1, следовательно, отступ мозаики сверху и слева будет равен 20. А расстояние задания от образца равно 60, т.к. параметр Rasst задан равным 3 (рисунок 1.15).

Рисунок 1.15 — Вид файла per. txt первого задания В итоге получаем задание, изображенное на рисунке Б.2.

2. Разработка и создание развивающих мышление заданий в конструкторе

2.1 Общие приемы работы и возможности конструктора

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

Рисунок 2.1 — Общий вид конструктора Таким образом, в конструкторе присутствует:

1 — рабочая область, в которой происходит непосредственное конструирование заданий;

2 — две динамические панели (рисунок 2.2), которые перемещаются путём зажатия левой клавиши мыши над серым фоном полосы названия панели. Одна предназначена для добавления элементов для заданий, а другая для — настроек этих элементов. Подробное описание функциональных возможностей этих панелей будет описано ниже;

Рисунок 2.2 — Полоса перемещения панелей

3 — кнопка для сохранения созданного задания в виде текстового документа. При нажатии открывается диалоговое окно, в котором необходимо выбрать каталог для сохранения. В случае работы с конструктором локально, а не с сайта сохранять файл нужно в один каталог с плеером. Имя файла должно быть неизменным Position. txt (рисунок 2.3);

Рисунок 2.3 — Диалоговое окно сохранения заданий

4 — кнопка для загрузки ранее созданного задания в конструктор для редактирования. При нажатии открывается диалоговое окно, в котором необходимо выбрать каталог с заданием с именем Position. txt, которое будет редактироваться (рисунок 2.4). Не загружаются таким образом задания, которые содержат картинки не из базы;

Рисунок 2.4 — Диалоговое окно открытия заданий

5 — кнопка перевода конструктора в полноэкранный режим работы. При открытии окна загрузки файлов в конструктор полноэкранный режим сбивается. При переходе в полноэкранный режим панели добавления и настройки элементов смещаются за область формирования задания, а сама область смещается в левый верхний угол экрана (рисунок 2.5). При возвращении в обычный режим панели вносятся в область видимости (рисунок 2.1). Выход из полноэкранного режима происходит по повторному нажатию кнопки 5 или по нажатию клавиши Esc;

Рисунок 2.5 — Полноэкранный режим работы конструктора

6 — сетка на фоне конструктора, которая помогает выровнять элементы (рисунок 2.6). Убрать сетку привязки можно повторным нажатием на кнопку 6;

Рисунок 2.6 — Сетка привязки элементов

7 — кнопка «Чёрные под цветные». Позволяет автоматически поставить чёрные таны ровно под цветные. Данная функция облегчает работу расстановки танов;

8 — палитра цветов;

9 — панель рисования;

10 — кнопка для работы со слоями;

11 — панель копирования;

12 — кнопка для создания таблиц;

13 — кнопка для создания линий;

14 — кнопка тестирования задания, не выходя из конструктора;

15 — кнопка обновления сцены. По нажатию происходит очищение рабочей области для создания нового задания;

16 — кнопка группировки элементов;

17 — панель конфигурации локальных баз;

18 — панель базы заданий;

19 — панель базы рисунков;

20 — панель базы фигур;

Подробное описание кнопок также будет представлено ниже.

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

Работать с конструктором можно в двух режимах:

1) на локальной машине. В этом случае перед началом работы необходимо скачать конструктор, плеер и локальные базы. Конструктор и плеер поместить в одну папку и подключить сохраненные базы, для этого необходимо нажать кнопку, изображенную на рисунке 2.7 и расположенную в нижнем правом углу конструктора. В результате откроется панель конфигурации локальных баз (рисунок 2.8).

В случае, если базы скачивались вместе с архивом разработчика, необходимо просто поставить галочки перед каждой строкой в квадратиках (рисунок 2.9) и нажать кнопку Сохранить, расположенную внизу панели (рисунок 2.10).

В противном случае необходимо изменить 3 пути к файлам конфигурации экспортированных баз, в зависимости от того, куда они были сохранены при скачивании с сайта. Причем, в конце пути в первой строке всегда будет записано ListFigure. txt, а во второй и третьей — Config.txt. Затем поставить галочки перед каждой строкой в квадратиках (рисунок 2.9) и нажать кнопку Сохранить, расположенную внизу панели (рисунок 2.10). В результате панель будет выглядеть, как на рисунке 2.11.

Рисунок 2.11 — Панель конфигурации после подключения локальных баз

Скрыть эту панель можно нажатием на кнопку Закрыть, расположенную внизу панели. В результате все локальные базы будут подключены и сохранены при закрытии и повторном открытии конструктора. Описание локальных баз будет приведено ниже.

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

Конструктор позволяет создавать задания нескольких типов:

— одиночное задание;

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

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

Для указания таких параметров задания служит панель настройки задания (рисунок 2.12)

Пункты настроек разворачиваются кликом по ним. Первый пункт, «Общие настройки», отвечает за параметры каждого задания, здесь можно изменить название задания, а также создание нового задания и установку его уровня подводящего (рисунок 2.13).

Также в данной панели находится один из общих параметров всего комплекса заданий — тестовый режим (рисунок 2.14).

Второй пункт, «Общие настройки задания» (рисунок 2.15), включает в себя следующие специальные настройки, которые могут быть использованы в зависимости от типа задания:

— Таймер — указываются минуты и секунды на выполнение задания. В режиме обучения по истечению времени таймер переводит задание на подводящее. В тестовом режиме выдаёт задания последовательно. Для установки таймера необходимо установить зелёную точку (ключ) напротив таймера.

— Жизни — устанавливается количество ошибочных кликов в задании. В режиме обучения по истечению количества жизней задание переводится на подводящее. В тестовом режиме выдаёт задания последовательно. Для установки жизней необходимо установить зелёную точку (ключ) напротив данного пункта.

— Принудительное удаление кнопок — соответствующий пункт блокирует кнопки в плеере.

— Мнимое задание — специальная настройка, для того чтобы задание не являлось выполнимым, а служило образцом для дальнейшего выполнения.

— Неоднозначность расстановки — позволяет в задании одинаковые пользовательские таны ставить на места друг друга.

Рисунок 2.15 — Общие настройки задания При нажатии на любой элемент он выделяется в фокус. В этот момент в панели настроек динамически появляется третий пункт настройки элементов, которые будут описаны ниже.

Для конструирования заданий конструктор содержит ряд элементов, которые добавляются с помощью панели добавления танов (рисунок 2.16).

flash шаблон мозаика конструктор Рисунок 2.16 — Общие настройки задания Все элементы перемещаются по рабочей области путём зажатия левой кнопки мыши над ним и перемещения курсора. Комплектные таны и картинки-таны поворачиваются на угол 22.5 градусов с помощью клавиш влево и вправо на клавиатуре. Клавиши действуют после нажатия курсором мыши над элементом. Кроме того, размер любого объекта можно пропорционально изменять с помощью вращения колёсика мыши над элементом. Клавишами «w», «a», «s» и «d» можно попиксельно подогнать любой элемент (передвижение тана на 1 пиксель). Удаление любого элемента, кроме комплектных танов происходит по нажатию клавиши Delete.

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

— комплектные таны. Добавить их позволяет кнопка Добавить комплект (рисунок 2.17).

Рисунок 2.17 — Кнопка Добавить комплект При нажатии на неё в верхнем левом углу экрана появится комплект танов (рисунок 2.18).

Рисунок 2.18 — Комплект танов У каждого тана есть чёрная и цветная копия. Черная копия отвечает за позицию тана на сцене в задании и находится первоначально ниже цветной (рисунок 2.19).

Рисунок 2.19 — Таны и их образы Панель настройки танов представлена на рисунке 2.20.

Рисунок 2.20 — Панель настройки классических танов Для установки какого-либо пункта настройки необходимо установить зелёную точку (ключ) напротив него:

— Прозрачность черного (рисунок 2.21) — чёрный тан на сцене станет прозрачным, а впоследствии для прохождения задания на него необходимо будет поставить цветной тан. Используется в заданиях на воображение или запоминание.

Рисунок 2.21 — Пункт настройки классических танов Прозрачность черного

— Удаление черного (рисунок 2.22) — отвечает за полное удаление чёрного тана со сцены в задании. После удаления чёрного тана соответствующий цветной станет неподвижным в задании и будет влиять на выполнение только в том случае, если его необходимо раскрасить.

Рисунок 2.22 — Пункт настройки классических танов Удаление черного

— Разрезание (рисунок 2.23) позволяет создать задание с вырезанием танов. Данная настройка распространяется только на чёрные таны. При вырезании в углах танов появляются пункты для отметки точками, если навести курсор на точку он изменит свой вид, нажатием на точку она выделяется, если следующей нажать на точку с которой можно соединить первую, то нарисуется линия. У данной настройки существует два режима:

1) Обычный — выделяются точки на чёрном тане;

2) Помощь — при наведении на тан, который необходимо разрезать он

станет немного прозрачным и покажет, где примерно надо искать следующую точку.

Рисунок 2.23 — Пункт настройки классических танов Разрезание

— Появление (рисунок 2.24) позволяет сделать настройку появления в задании чёрного или цветного тана (есть выбор). При этом можно настроить таймер (рисунок 2.25), который определит, через сколько секунд тан начнёт появляться. Кроме того можно настроить параметр блокировки (рисунок 2.26), который также в секундах укажет на сколько необходимо блокировать тан (параметры вступают в силу сразу же после запуска задания).

Рисунок 2.24 — Пункт настройки классических танов Появление

— Исчезновение (рисунок 2.27) позволяет сделать невидимым выбранный тан через некоторое время, а также показать тан на некоторое время. здесь можно выбрать с каким таном работаем (чёрным или цветным).

Три настройки таймеров:

Блокировка (сек) (рисунок 2.28) — указывает в секундах на сколько блокируется цветной тан с начала выполнения задания;

Показать через (сек) (рисунок 2.29) — изначально тан невидим, данный таймер указывает, через сколько секунд (с начала выполнения задания) он станет видимым для пользователя;

Показать сколько (сек) (рисунок 2.30) — начинает действовать после предыдущего таймера и показывает сколько секунд тан будет виден до начала исчезновения.

После того как тан полностью исчезнет со сцены он примет настройку верно поставлен и не будет влиять на выполнение задания.

Рисунок 2.27 — Пункт настройки Исчезновение Стоит отметить, что параметры появления и исчезновения могут помочь сделать очень сложные задания на запоминание.

— Раскрашивание элемента (рисунок 2.31) отвечает за настройку цвета и создание задания на раскрашивание тана. Настройка «Обычное» позволит раскрашивать элемент сразу после загрузки задания. Настройка с таймером на несколько секунд (сколько укажет автор) покажет цвет тана, затем его сотрёт, необходимо по памяти раскрасить элемент.

Рисунок 2.31 — Пункт настройки танов Раскрашивание

— картинки-таны. Добавить их позволяет кнопка Добавить картинку-тан (рисунок 2.32).

Рисунок 2.32 — Кнопка Добавить картинку-тан При нажатии на кнопку Добавить картинку-тан откроется диалоговое окно (рисунок 2.33)

Рисунок 2.33 — Диалоговое окно загрузки картинок При загрузке картинок стоит фильтр на следующие расширения: jpg, gif, png и bmp, но только картинки с расширением png могут стать адекватными танами… При этом в картинке белые пиксели вырезаются и становятся прозрачными. Но они присутствуют и при нажатии на вырезанные пиксели тан выделяется в фокус. Размер картинки не должен превышать 150 кб, а название должно быть записано латинскими буквами без пробелов.

У каждого такого тана есть чёрная и цветная копия (рисунок 2.34). Черная копия отвечает за позицию тана на сцене в задании и находится первоначально ниже цветной.

При нажатии на тан-картинку в панели настроек задания появляется пункт настройки размера тана-картинки (рисунок 2.35).

Рисунок 2.35 — Панель настройки размера тана-картинки Она позволяет вводить с клавиатуры значение ширины и высоты тана-картинки. Причем, если замочек находится в закрытом положении (рисунок 2.36), размер картинки изменяется пропорционально, если же замочек открыт (рисунок 2.37) (для этого достаточно кликнуть по нему) — размер можно задавать абсолютно произвольно.

Рисунок 2.36 — Замочек в закрытом положении Рисунок 2.37 — Замочек в открытом положении При нажатии на тан-картинку в панели настроек задания появляется пункт настройки тана-картинки (рисунок 2.38).

Рисунок 2.38 — Панель настройки картинок-танов Для установки какого-либо пункта настройки необходимо установить зелёную точку (ключ) напротив него:

— Удалить чёрный тан — чёрный тан невидим и цветной в задании не будет двигается;

— Прозрачность чёрного тана — чёрный тан на сцене станет прозрачным, а впоследствии для прохождения задания на него необходимо будет поставить цветной тан на свою позицию;

— Появление (рисунок 2.24) позволяет сделать настройку появления в задании чёрного или цветного тана (есть выбор). При этом можно настроить таймер (рисунок 2.25), который определит, через сколько секунд тан начнёт появляться. Кроме того можно настроить параметр блокировки (рисунок 2.26), который также в секундах укажет на сколько необходимо блокировать тан (параметры вступают в силу сразу же после запуска задания).

— Исчезновение (рисунок 2.27) позволяет сделать невидимым выбранный тан через некоторое время, а также показать тан на некоторое время. Здесь можно выбрать с каким таном работаем (чёрным или цветным).

Три настройки таймеров:

Блокировка (сек) (рисунок 2.28) — указывает в секундах, насколько блокируется цветной тан с начала выполнения задания;

Показать через (сек) (рисунок 2.29) — изначально тан невидим, данный таймер указывает, через сколько секунд (с начала выполнения задания) он станет видимым для пользователя;

Показать сколько (сек) (рисунок 2.30) — начинает действовать после предыдущего таймера и показывает, сколько секунд тан будет виден до начала исчезновения.

После того как тан полностью исчезнет со сцены он примет настройку верно поставлен и не будет влиять на выполнение задания.

— собственные таны. Для их создания необходимо воспользоваться панель рисования, которая открывается по кнопке, изображенной на рисунке 2.39 и расположенной внизу конструктора.

На сцене появится панель (рисунок 2.40)

Рисунок 2.40 — Панель рисования На рисунке 2.40 цифрами отмечены функциональные элементы панели:

1- Полоса перетаскивания панели по сцене (нажать на полосе левой кнопкой мыши, не отпуская кнопку перетащить панель в другое место, отпустить кнопку мыши);

2 — Кнопка сворачивания панели; 3 — Панель инструментов, описание которой приведено ниже; 4 — Область растягивания панели, если нажать кнопку мыши в правом нижнем углу и не отпускать её, то при движении панель будет растягиваться;

5 — Увеличение области рисования (не больше 1000%); 6 — Мелкость разбиения сетки привязки (значения в пикселях); 7 — Область, где рисуются таны.

На рисунке 2.41 приведены стандартные инструменты панели.

Рисунок 2.41 — Стандартные инструменты

1- Кнопка рисования фигур. Если зажать эту кнопку, то в области рисования танов можно будет рисовать фигуры (рисунок 2.42);

Рисунок 2.42 — Рисование танов Ключевые точки ставятся нажатием на области рисования. Если после того как нарисован контур нажать снова кнопку № 1, то откроется возможность редактировать фигуру на уровне ключевых точек (изменять положение углов и кривизну рёбер) (рисунок 2.43).

Рисунок 2.43 — Редактирование ключевых точек Кроме того для ключевых точек есть инструмент их удаления (он открывается при нажатии на точку) (рисунок 2.44).

Рисунок 2.44 — Удаление ключевой точки Если снова нажать на кнопку № 1, то продолжится рисование текущей фигуры, к последней точке можно присоединить ещё отрезки.

2 — Кнопка «Новая фигура». При нажатии на эту кнопку, нарисованная фигура будет помещена под сетку и залита белым цветом, после этого можно будет рисовать новую фигуру (кнопка № 1). Созданная фигура не лежит мёртвым грузом под сеткой. Если нажать на созданную фигуру, у неё откроется свой список инструментов (рисунок 2.45). (контур выделенной фигуры меняет цвет с чёрного на красный)

Рисунок 2.45 — Инструменты фигуры Инструмент a — удаляет фигуру из панели (безвозвратно). Инструмент b — позволяет редактировать выделенную фигуру (рисунок 2.46).

Рисунок 2.46 — Повторное редактирование С этим инструментом необходимо быть осторожным: две фигуры не могут быть редактируемыми одновременно и если вы нарисовали какую-то фигуру, не нажав кнопку «Новая фигура» (№ 2) выделили уже созданную и отправили её на редактирование, то вы потеряете контур, который рисовали перед этим (рисунок 2.47).

Рисунок 2.47 — Затирание фигур Инструмент с — Позволяет изменять глубину созданных фигур. На рисунке 2.48 Синий квадрат лежит под зелёным и красным, зелёный под красным, красный выше всех.

Рисунок 2.48 — Расположение фигур Если выделить синий квадрат и нажать стрелочку «Вверх», то зелёный будет лежать под синим и красным, а синий только под красным (рисунок 2.49).

Рисунок 2.49 — Изменение расположения фигур Глубина фигур мигрирует на сцену конструктора. Инструмент d — изменяет цвет заливки выбранной фигуры (цвет фигуры мигрирует на сцену конструктора) (рисунок 2.50).

Рисунок 2.50 — Изменение цвета фигуры

Кроме того если над фигурой зажать левую кнопку мыши и переместить её, то фигура переместиться за мышью (рисунок 2.51).

Рисунок 2.51 — Изменение положения фигуры в панели рисования

3 — Кнопка невидимости созданных фигур (и дальнейших создаваемых фигур) (рисунок 2.52).

Рисунок 2.52 — Невидимость фигур

4 — Кнопка добавления картинки на фон (рисунок 2.52) (добавлять можно картинки форматов jpg, png, bmp, gif).

Рисунок 2.53 — Добавление картинок

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

Рисунок 2.54- Работа с картинкой

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

Рисунок 2.55 — Перемещение сцены

6 — Кнопка блокировки перемещения созданных фигур и картинок. Удобна в использовании при редактировании ключевых точек, чтобы обводимая картинка или рядом стоящая фигура не сместились при неточном попадании по ключевой точке (рисунок 2.56).

Рисунок 2.56 — Блокировка перемещения фигур и картинок

7 — Кнопка импортирования созданных фигур на сцену конструктора. Фигура, которая находится в режиме создания, на сцену не попадёт. При импорте картинок на сцену, они удаляются из панели рисования. При импорте фигур на сцену сохраняется их местоположение, т. е. фигура, находящаяся на определённом расстоянии от начала координат в панели рисования, будет находиться на таком же расстоянии от начала координат в конструкторе. Начало координат — верхний левый угол (рисунок 2.57). Это позволяет точно копировать созданную композицию в панели рисования.

Рисунок 2.57 — Импорт фигур на сцену (создание танов)

8 — Инструмент выбора цвета линии при рисовании фигур. Данный инструмент полезен при обведении картинок, контур которых чёрный (рисунок 2.58).

Рисунок 2.58 — Цвет контура рисуемой фигуры На рисунке 2.59 приведена панель настройки области рисования.

Рисунок 2.59 — Настройки области рисования

1 — величина (в пикселях) ширины ячеек сетки на сцене (рисунок 2.60).

Рисунок 2.60 — Ширина ячеек сетки

2 — величина (в пикселях) высоты ячеек сетки на сцене (рисунок 2.61).

Рисунок 2.61 — Высота ячеек сетки Сетку можно использовать в качестве привязки к её узлам точек при создании и редактировании фигур. Эта сетка называется сеткой привязки.

3 — кнопка «Привязка к сетке». Если она зажата, то при создании фигур точки ставятся только в узлы сетки привязки (рисунок 2.62).

Рисунок 2.62 — Кнопка сетки привязки нажата Если кнопку «Привязка к сетке» «Отжать». То узловые точки фигуры не будут привязываться к сетке (рисунок 2.63).

Рисунок 2.63 — Кнопка сетки привязки не нажата

4 — кнопка «Скрыть сетку». Делает сетку привязки невидимой (рисунок 2.64). При этом если нажата кнопка «Привязка к сетке», то узловые точки фигуры всё равно будут привязываться даже к невидимой сетке.

Рисунок 2.64 — Скрытие сетки привязки

5 — поле масштабирования сцены в процентах (максимум увеличения — 1000%) (рисунок 2.65). Этот инструмент позволяет точно редактировать мелкие детали создаваемой фигуры.

Рисунок 2.65 — Масштабирование сцены Если взять разбиение сетки мельче, и поставить привязку ключевых точек, то фигура получится более точной. При введении в поле масштабирования 100% сцена стабилизируется и переходит в начало координат.

При редактировании точек кривых точка помеченная синим цветом (а при нажатии на неё — красным), называется узловой точкой фигуры (рисунок 2.66).

Рисунок 2.66 — Узловая точка фигуры Точки, помеченные зелёным меняют кривизну соответствующей линии и называются якорями (рисунок 2.67).

Рисунок 2.67 — Якорная точка фигуры При редактировании узловых точек фигуры, если якорная точка находится в центре соответствующей линии, за кривизну которой отвечает, то она и остаётся в центре, допустимая погрешность смещения якорной точки от центра — 5 пикселей по оси Х и 5 пикселей по оси У. Если якорная точка находится на большем расстоянии по осям Х или (и) У, то её положение не меняется при перемещении узловой точки. При импортировании фигуры на сцену конструктора если смещение всех якорных точек от центра не превышает 3 пикселя по каждой из осей координат, то фигура считается нарисованной прямыми линиями и никакой кривизны не будет.

Также есть возможность редактировать таны которые уже добавлены на сцену конструктора. Правой кнопкой мыши нажимаем над таном. В открывшемся контекстном меню выбираем пункт «Редактировать». Затем открываем панель рисования, там уже есть этот тан. Позиция тана на сцене конструктора мигрирует в панель рисования. Угол поворота тана на сцене, не мигрирует в панель рисования (рисунок 2.68).

Рисунок 2.68 — Повторное редактирование танов При нажатии на созданный тан в панели настроек задания появляется пункт настройки пользовательского тана (рисунок 2.69).

Рисунок 2.69 — Панель настройки пользовательских танов Для установки какого-либо пункта настройки необходимо установить зелёную точку (ключ) напротив него:

— Прозрачность чёрного — чёрный тан на сцене станет прозрачным, а впоследствии для прохождения задания на него необходимо будет поставить цветной тан поставить на свою позицию.

— Прозрачность фона черного — в задании заливка черного образа соответствующего цветного тана — прозрачна, виден только контур.

— Удаление чёрного — чёрный тан невидим и цветной в задании не будет двигается

— Появление (рисунок 2.24) позволяет сделать настройку появления в задании чёрного или цветного тана (есть выбор). При этом можно настроить таймер (рисунок 2.25), который определит, через сколько секунд тан начнёт появляться. Кроме того можно настроить параметр блокировки (рисунок 2.26), который также в секундах укажет на сколько необходимо блокировать тан (параметры вступают в силу сразу же после запуска задания).

— Исчезновение (рисунок 2.27) позволяет сделать невидимым выбранный тан через некоторое время, а также показать тан на некоторое время. Здесь можно выбрать с каким таном работаем (чёрным или цветным).

Три настройки таймеров:

Блокировка (сек) (рисунок 2.28) — указывает в секундах, насколько блокируется цветной тан с начала выполнения задания;

Показать через (сек) (рисунок 2.29) — изначально тан невидим, данный таймер указывает, через сколько секунд (с начала выполнения задания) он станет видимым для пользователя;

Показать сколько (сек) (рисунок 2.30) — начинает действовать после предыдущего таймера и показывает, сколько секунд тан будет виден до начала исчезновения.

После того как тан полностью исчезнет со сцены он примет настройку верно поставлен и не будет влиять на выполнение задания.

— Контур цветного — по умолчанию этот параметр установлен — отвечает за присутствие в задании контура цветного элемента.

— Заливка цветного — по умолчанию этот параметр установлен — отвечает за присутствие в задании заливки (фона) цветного элемента.

— Симметричность элемента (рисунок 2.70) имеет три возможных значения: 1 — не симметричная фигура, например, неправильный четырёхугольник; 2 — два раза симметрична, прямоугольник или параллелограмм; 4 — четыре раза симметричная, например, квадрат. Этот параметр необходим чтобы не было разницы сколько раз повернуть элемент, если он симметричен, и он в любом правильном случае встал на своё место.

Рисунок 2.69 — Настройка симметричности элементов

— Раскрашивание элемента (рисунок 2.31) отвечает за настройку цвета и создание задания на раскрашивание тана. Настройка «Обычное» позволит раскрашивать элемент сразу после загрузки задания. Настройка с таймером на несколько секунд (сколько укажет автор) покажет цвет тана, затем его сотрёт, необходимо по памяти раскрасить элемент.

— перечисляемые поля предназначены для выбора одного текстового варианта из нескольких путём кликов по элементу. Данный функциональный элемент только перемещается по сцене, но не поворачивается (рисунок 2.70).

Рисунок 2.70 — Перечисляемые поля Добавить их позволяет кнопка Добавить перечисляемое поле (рисунок 2.71).

Рисунок 2.71 — Кнопка Добавить перечисляемое поле При нажатии на перечисляемое поле в панели настроек задания появляется пункт настройки размера перечисляемого поля (рисунок 2.72).

Рисунок 2.72 — Панель настройки размера тана-картинки Она позволяет вводить с клавиатуры значение ширины и высоты перечисляемого поля. Причем, если замочек находится в закрытом положении (рисунок 2.36), размер поля изменяется пропорционально, если же замочек открыт (рисунок 2.37) (для этого достаточно кликнуть по нему) — размер можно задавать абсолютно произвольно.

Также при нажатии на перечисляемое поле в панели настроек задания появляется пункт настройки перечисляемого поля (рисунок 2.73). Для установки какого-либо пункта настройки необходимо установить зелёную точку (ключ) напротив него.

Рисунок 2.73 — Настройка перечисляемых полей

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

— Панель, изображенная на рисунке 2.74, также даёт возможность пропорционально уменьшить или увеличить перечисляемое поле, пользуясь специальными кнопками.

Рисунок 2.74 — Настройка размера перечисляемых полей

— Панель, изображенная на рисунке 2.75, позволяет задавать цвет текста перечисляемого поля и цвет самого перечисляемого поля. Также этот элемент можно красить с помощью палитры цветов.

Рисунок 2.75 — Настройка цвета перечисляемых полей

— Можно также поставить перечисляемое поле без заполнения параметров Все варианты и Верный вариант, тогда этот элемент может служить для обозначении цветов.

— Появление (рисунок 2.24) позволяет сделать настройку появления в задании перечисляемого поля. При этом можно настроить таймер (рисунок 2.25), который определит, через сколько секунд поле начнёт появляться. Кроме того можно настроить параметр блокировки (рисунок 2.26), который также в секундах укажет на сколько необходимо блокировать поле (параметры вступают в силу сразу же после запуска задания).