ЛАБОРАТОРНАЯ РАБОТА № 3
Формирование основной части курса
с использованием пакета Authorware
Цель занятия:
Приобретение практических навыков работы с пакетом Authorware при формировании основной части курса
1. Основная часть курса
Основная часть курса состоит из шести разделов, входящих в общую систему навигации (рис. 3.25):
q Меню,
q Основание СПб;
q Начало строительства;
q Защитные сооружения;
q Тест;
q Выход (этот раздел на рисунке не показан, чтобы увидеть его на схеме, требуется прокрутить вниз список кадров).
Каждому из этих разделов соответствует в схеме курса отдельный кадр. В рассматриваемом примере все разделы реализованы на основе кадра типа Map, хотя это необязательно (о том, почему в данном случае потребовался кадр именно типа Map, будет сказано ниже). Объединение всех шести разделов в единую систему навигации обеспечивает кадр типа Framework, которому на схеме присвоено имя Список разделов.
Собственно механизм навигации (то есть средства перехода между разделами) включен в раздел Меню. Работа этого механизма будет рассмотрена в следующем разделе — «Создание системы навигации».
Основная часть курса
Рис. 3.25. Кадр типа Framework позволяет объединить разделы курса в одну навигационную структуру
Кадры Основание СПб, Начало строительства и Защитные сооружения содержат собственно учебный материал курса.
Кадр Тест обеспечивает запуск теста. Процедура его создания описана в разделе «Создание подсистемы тестирования».
Кадр Выход обеспечивает завершение работы приложения по желанию обучаемого. Поскольку процедуру выхода можно считать частью навигационной системы, то соответствующие вопросы также вынесены в раздел «Создание системы навигации».
Таким образом, в рамках данного подраздела будут затронуты всего два вопроса, относящихся к построению основной части курса:
§ группирование кадров;
§ включение кадров в систему навигации.
Группирование кадров
Группирование кадров выполняется с целью повышения компактности и «читабельности» схемы курса. Для визуального представление в схеме сгруппированных кадров служит кадр типа Map. Другими словами, такой кадр играет как бы роль контейнера (или папки, если угодно), в который помещаются группируемые кадры. Сгруппирована может быть только непрерывная последовательность кадров. Например, мы могли бы сгруппировать четыре первых кадра курса, относящихся к вводной части.
Сгруппировать кадры можно двумя способами:
q объединив ранее созданную последовательность кадров в кадр Map;
q поместив в окно кадра Map новую последовательность кадров.
Чтобы воспользоваться первым способом необходимо:
1. Нажать на клавиатуре клавишу <Shift> и, удерживая ее, выбрать щелчком мыши все кадры, подлежащие группированию.
2. В меню Modify выбрать команду Group (Группировать).
3. Для автоматически включенного в схему кадра Map ввести подходящее имя.
Например, на рис. 3.26 показано, как могла бы выглядеть после группирования вводная часть создаваемого курса.
Рис. 3.26. Пример группирования кадров
Чтобы «заглянуть внутрь» кадра Map, достаточно дважды щелкнуть мышью на его значке. Интерфейс открывающегося при этом окна полностью идентичен интерфейсу окна схемы курса.
Обратите внимание, что фрагмент курса, помещенный в кадр Map, теперь относится к уровню иерархии, на один ниже, чем основная схема и сам кадр Map.
Чтобы создать новую группу без объединения существующих кадров, необходимо:
1. В окне проектирования щелкнуть в той точке направляющей, куда требуется вставить группу.
2. Перетащить мышью с панели кадров в окно проектирования значок кадра Map, Authorware автоматически поместит его на направляющую в позицию вставки и назначит новому кадру имя Unfilled.
3. Заменить имя кадра на более подходящее.
4. Дважды щелкнуть на значке кадра, чтобы открыть окно схемы следующего уровня.
5. Поместить в открывшееся окно требуемые кадры.
Вы можете использовать в созданной группе те или иные кадры, имеющиеся в основной схеме или в других группах. Для этого можно либо воспользоваться стандартными командами редактирования Windows, выполняемыми через буфер обмена, либо просто перетащив мышью нужный кадр в окно кадра Map.
Для создания разделов разрабатываемого курса мы воспользуемся именно вторым из рассмотренных способов, то есть сначала поместим в схему требуемое число кадров Map, а затем заполним их. Однако прежде вернемся к кадру Framework и покажем, как с его помощью создается «каркас» системы навигации.
Включение кадров в систему навигации
Кадр Framework, подобно кадру Map, служит контейнером, который содержит другие кадры. Однако, в отличие от кадра Map, он изначально не является пустым. Если вы поместите в схему новый кадр Framework и откроете его окно (дважды щелкнув мышью на значке кадра), то увидите схему, приведенную на рис. 3.27.
Рис. 3.27. Стандартная схема навигации, реализуемая кадром Framework
Эта схема представляет собой стандартный (для Authorware) вариант схемы навигации, реализуемой кадром Framework. Каждый из восьми кадров типа Navigate, имеющихся в этой схеме, обеспечивает выполнение определенной операции перехода. Например, первый кадр — Go Back — позволяет вернуться на шаг назад.
Чтобы лучше понять, о чем идет речь, поместите кадр Framework в создаваемую нами схему курса (ниже четвертого кадра) и воспроизведите курс. После щелчка на кнопке Дальше... вы увидите, что в окне представления появилась своеобразная панель навигации (рис. 3.28).
Рис. 3.28. Панель навигации, формируемая по умолчанию кадром Framework
Эта панель содержит восемь кнопок, то есть ровно столько, сколько кадров Navigate в схеме кадра Framework. Особенность панели навигации, создаваемой кадром Framework, состоит в том, что область ее действия ограничена кадрами, присоединенными в схеме курса к кадру Framework. Следовательно, до тех пор, пока в схеме отсутствует хотя бы один кадр, присоединенный к кадру Framework, кнопки панели навигации будут щелкать «вхолостую».
Таким образом, поместив в схему курса кадр Framework и присоединив к нему информационные кадры, вы получаете готовую систему навигации по соответствующему фрагменту курса.
Однако, это еще не все достоинства кадра Framework. Дело в том, что он обладает скрытыми возможностями: вы можете полностью заменить стандартную панель навигации, и при этом кадр Framework останется работоспособным. Следует отметить, что это весьма распространенный способ создания системы навигации.
Именно такой прием используем и мы: поместим в схему кадр Framework, «вычистим» его, и затем создадим на его основе собственную систему навигации. Для решения указанной задачи выполните следующие действия:
1. Поместите кадр Framework в схему курса и переименуйте его в Список разделов.
2. Откройте окно кадра Framework (дважды щелкнув на его значке) и удалите кадры Gray Navigation и Panel Navigation hyperlinks (рис. 3.29); при удалении второго из них на экране появится информационное окно с сообщением о том, что кадр типа Interaction может быть удален только вместе со всеми присоединенными к нему кадрами; подтвердите свое намерение, щелкнув на кнопке Select All Attached Icons (Выбрать все присоединенные кадры) (рис. 3.30).
3. Закройте окно кадра Framework.
4. Перетащите мышью с панели кадров в окно проектирования значок кадра Map таким образом, чтобы он оказался справа от значка кадра Framework, и отпустите кнопку мыши; Authorware автоматически создаст горизонтальную направляющую, поместит на нее кадр Map и назначит новому кадру имя Unfitted.
5. Переименуйте кадр в Меню.
6. Повторите шаги 4 и 5 для остальных пяти разделов курса.
Рис. 3.29. Чтобы создать собственную панель навигации, необходимо удалить эти кадры
Рис. 3.30. Для удаления присоединенных кадров щелкните на кнопке Select All Attached Icons
В результате выполнения описанной выше процедуры схема курса должна выглядеть примерно так, как было показано на рис. 3.25.
«Каркас» для системы навигации готов. Теперь займемся ее наполнением.
Создание системы навигации
Для перемещения между разделами курса мы используем вместо навигационной панели меню.
Меню будет состоять из двух частей:
q переходы между тремя информационными разделами реализуем в виде «горячих зон», щелчок на каждой из которых обеспечивает вызов соответствующего раздела;
q пункты меню, обеспечивающие вызов теста и выход из приложения, создадим в виде кнопок (рис. 3.31).
Схема такого меню показана на рис. 3.32.
Как видно из рисунка 3.32, в схеме меню использованы кадры двух типов:
Interaction и Navigate.
Рис. 3.31. Представление меню в окне просмотра
Рис. 3.32. Схема меню, которое предстоит создать
Кадр Interaction позволяет описать расположение, размер и некоторые другие визуальные атрибуты элементов меню, а кадры Navigate предназначены для описания ссылок и механизма взаимодействия пользователя с элементами меню.
Рассмотрим порядок создания такого меню.
Разработка основного меню
В соответствии с реализуемым проектом, основное меню курса должно обеспечивать переход на информационные разделы курса, на начало теста, а также на кадр завершения работы.
Для создания такого меню выполните следующие действия:
1. Откройте окно кадра Меню, дважды щелкнув на его значке в схеме курса.
2. Перетащите в окно Меню с панели кадров значок кадра Interaction; Authorware поместит его на направляющую и назначит новому кадру имя Untitled; замените имя кадра на Выбор.
3. Перетащите в окно Меню с панели кадров значок кадра Navigate таким образом, чтобы он оказался справа от значка кадра Выбор, и отпустите кнопку мыши; Authorware при этом выполнит два действия: свяжет новый кадр с кадром Выбор и выведет на экран диалоговое окно Response Type (Вид реакции), как показано на рис. 3.33.
4. В диалоговом окне Response Type установите переключатель вида реакции в положение Hot Spot (Горячая зона) и щелкните па кнопке ОК; перед вами предстанет фрагмент схемы, соответствующий меню с единственным пунктом (рис. 3.34).
5. Щелкните дважды на значке кадра Navigate.
6. В открывшемся окне установки параметров кадра укажите направление перехода и название кадра; чтобы указать направление перехода, выберите соответствующий пункт в списке Page (Страница) (для первого пункта меню—это Основание СПб), как показано на рис. 3.35;при этом в поле названия кадра появится надпись Navigate to "Основание СПб"; вы можете скорректировать ее, введя русскоязычный вариант (например, на «Основание СПб»); щелкните на кнопке ОК.
7. Перетащите в окно Меню с панели кадров значок кадра Navigate таким образом, чтобы он оказался справа от значка кадра на «Основание СПб», и отпустите кнопку мыши; Authorware свяжет новый кадр с кадром Выбор, но диалоговое окно Response Type в этом случае не откроет: дело в том, что по умолчанию все пункты меню получают тот же тип, который был установлен для первого пункта.
8. Щелкните дважды на значке нового кадра Navigate и в открывшемся окне установки параметров кадра укажите направление перехода и название кадра.
9. Выполните шаги 7 и 8 для остальных четырех пунктов меню.
Рис. 3.33. Вид окна Authorware после вставки в схему первого кадра Navigate
Рис. 3.34. Схема меню с единственным пунктом
Рис. 3.35. Окно установки параметров кадра Navigate
В результате схема меню должна выглядеть приблизительно так, как было показано на рис. 3.32.
Обратите внимание, что после установки параметров кадра Navigate его значок в схеме выглядит не так, как до указания направления перехода (сравните рисунки 3.32 и 3.33). О том, что направление перехода указано, свидетельствует маленький квадратик внутри значка кадра.
Теперь вернемся к незаслуженно забытому нами кадру Выбор (то есть Interaction). Как было сказано выше, именно этот кадр обеспечивает визуальное представление пунктов меню в окне просмотра. Чтобы убедиться в этом, щелкните в схеме курса на значке этого кадра. Вид открывшегося окна просмотра показан на рис. 3.36.
Рис. 3.36. Представление горячих зон меню в окне просмотра
В режиме редактирования в окне просмотра видны и границы горячих зон, и их названия. Если же вы перейдете в режим воспроизведения кадра (щелкнув кнопку Play на панели управления), то горячие зоны станут невидимы.
Чтобы предоставить обучаемому возможность выбрать в режиме воспроизведения тот или иной пункт меню, требуется «наполнить» каждую горячую зону каким-либо содержанием. Самый простой вариант—поместить в нее текст, например название соответствующего раздела курса. Для этого выполните следующие действия:
1. Откройте окно просмотра кадра Выбор в режиме редактирования (или вернитесь в этот режим, щелкнув кнопку Pause на панели управления).
2. На панели инструментов щелкните в поле Text и затем введите в окне просмотра название раздела.
3. Выровняйте текстовое поле относительно горячей зоны; чтобы изменить размеры горячей зоны, достаточно щелкнуть на ней мышью и затем перетащить мышью один из выделяющих маркеров; чтобы переместить горячую зону, следует подвести указатель мыши к ее границе, нажать кнопку мыши и перетащить контур зоны.
Выполните описанные действия для первых трех пунктов меню. В результате окно просмотра должно выглядеть примерно так, как показано на рис. 3.37.
Рис. 3.37. Вид окна просмотра после ввода названий разделов
Замечание
Пусть вас не беспокоит, что пока остались невидимы два последних пункта меню - Тест и Выход. К ним мы вернемся немного позже.
Нетрудно заметить, что созданные нами пункты меню пока далеки от совершенства:
q во-первых, будучи помещены на цветной фон окна просмотра, они некрасиво выделяются на нем своей белизной;
q во-вторых, выровняв текст пунктов меню относительно горячих зон, мы не позаботились о выравнивании текстовых полей относительно друг друга.
Хотя устранение указанных недостатков не связано непосредственно с созданием меню, мы уделим этим вопросам некоторое время и место, чтобы впоследствии к ним не возвращаться.
Чтобы сделать фон текстового поля прозрачным (то есть совпадающим по цвету с фоном окна), необходимо:
1. На панели инструментов щелкнуть в поле Text и выделить текст в том поле, которое должно стать прозрачным.
2. В меню Window открыть каскадное меню Inspectors (Инспекторы) и выбрать в нем команду Modes (Режимы).
3. В открывшейся панели режимов (рис. 3.38) щелкнуть в поле Transparency (Прозрачность).
Выполните описанные действия для первых трех пунктов меню. В результате окно просмотра при воспроизведении кадра должно выглядеть примерно так, как показано на рис. 3.39.
Чтобы произвести автоматическое выравнивание полей в кадре, необходимо:
1. Нажать клавишу <Shift> и, удерживая ее, выбрать все поля, подлежащие выравниванию.
2. В меню Modify выбрать команду Align... (Выровнять).
3. В открывшейся панели выравнивания щелкнуть на тех кнопках, которые соответствуют требуемому способу выравнивания (например, чтобы выровнять текстовые поля по левому краю, требуется щелкнуть на верхней левой кнопке).
Рис. 3.38. Панель режимов Рис. 3.39. Вид окна просмотра
после установки прозрачности
текстовых полей
Теперь вернемся к двум оставшимся пунктам меню, которым предстоит перевоплотиться в кнопки.
Чтобы преобразовать в кнопку пункт Тест, выполните следующие действия:
1. Закройте окно просмотра и в схеме меню щелкните дважды на узле соединения кадра с горизонтальной направляющей (рис. 3.41).
2. В открывшемся окне установки типа реакции (рис. 3.42) выберите в списке Type пункт Button (Кнопка).
3. В поле Label введите метку кнопки (например, Проверь себя) и щелкните на кнопке ОК.
Выполните аналогичные действия для пункта меню Выход.
Рис. 3.40. Панель выравнивания Рис. 3.41. Элемент схемы, позволяющий
изменять тип пункта меню
Откройте окно просмотра кадра Выбор в режиме редактирования. Оно должно выглядеть примерно так, как показано на рис. 3.43.
С помощью мыши перетащите поочередно кнопки в те позиции, где они должны находиться в соответствии с рисунком 3.31 и, при необходимости, скорректируйте их размеры.
До сих пор при создании меню вы работали (по замыслу автора) с окном представления единственного кадра - Выбор. Если теперь вы воспроизведете весь курс с самого начала, то может оказаться, что его заголовок «наползает» на пункты меню (или наоборот). Чтобы устранить этот недостаток, перейдите в режим редактирования и выровняйте поля заголовка и пунктов меню относительно друг друга.
Рис. 3.42. Установка параметров кнопки
Рис. 3.43. Вид окна просмотра после преобразования двух пунктов меню в кнопки
Все. Работа по созданию основного меню практически завершена. Осталось добавить один небольшой штрих. Речь идет вот о чем. Обучаемый, впервые начиная работать с курсом, не очень четко представляет себе особенности его интерфейса (несмотря на всеобщее стремление к стандартизации). По крайней мере, ему будет достаточно сложно отличить «обычный» статичный текст от интерактивного (то есть от пунктов меню или гиперссылок). Один из общепринятых способов помощи в такой ситуации — заставить изменяться указатель мыши. когда он находится над интерактивным элементом кадра.
Чтобы назначить форму указателя для пункта меню (для горячей зоны, кнопки или любого другого типа), необходимо:
1. В схеме меню щёлкнуть дважды на узле соединения кадра Navigate с горизонтальной направляющей (см. рис
2. В открывшемся окне Response щелкнуть на кнопке, входящей в группу Cursor (рис. 3.44).
Рис. 3.44. Выбор формы указателя для пункта меню
3. В диалоговом окне Cursors выбрать наиболее подходящую, на ваш взгляд, форму указателя и щелкнуть на кнопке ОК; выбранный указатель появится вместо слова None (Никакой) в поле Cursor окна Response.
4. Щелкнуть на кнопке ОК в окне Response. Выполните описанную выше процедуру для всех пунктов основного меню.
Чтобы убедиться, что вы все сделали правильно, воспроизведите кадр Выбор, щелкнув кнопку Play на панели управления.
Если вас не устраивает ни одна из стандартных форм указателя, представленных в окне Cursors, вы можете щелкнуть в этом окне на кнопке Add (Добавить) и выбрать файл с подходящим изображением указателя.
