Уроки по созданию учебного мультимедийного курса на базе eLearning Office 3000

Часть 4

Александр Прохоров

Изменение структуры учебника

Создание дополнительного раздела

Наполнение раздела

Создание гипертекстовых связей внутри страниц

Вставка рисунков, видео и звука

Программирование на языке скриптов

Написание простейшей программы для кнопки

Написание простейшей программы для окна кадра

Управление мультимедийным объектом

Изменение шаблона учебника

 

Продолжаем цикл статей, в которых рассказывается, как создать мультимедийный электронный учебник. Предыдущие уроки были посвящены разработке мультимедийных приложений с помощью программ eAuthor и ePublisher, которые входят в состав программного пакета eLearning Office 3000, разработанного компанией «ГиперМетод». Мы рассмотрели, как с помощью программы eAuthor создать учебник (в виде набора лекций), включающий терминологический словарь и систему тестов; лекции, сопровождаемые графикой, видео и звуковыми фрагментами. Кроме того, речь шла о том, как с помощью второй составляющей программного пакета eLearning Office 3000 — ePublisher — заполнять раздел «Библиотека» своего основного учебного курса, быстро преобразовывать материалы в электронный формат и создавать полноценные электронные книги, включающие систему поиска по всему материалу и раздел «Словарь».
Темой четвертого урока будет внесение дополнительных изменений в контент и в структуру учебника.

Программы eAuthor и ePublisher построены на основе шаблонов и предлагают жестко заданную структуру учебника. В случае если пользователь желает расширить рамки создаваемого учебника, а именно создать свой оригинальный шаблон или ввести дополнительные разделы, — можно обратиться к совместимому eAuthor- и ePublisher-конструктору — HyperMethod 3.5, который представляет собой уникальный инструмент для создания сложных мультимедийных продуктов.

К отличительным особенностям конструктора можно отнести наличие развитых средств расширения заложенных в программе возможностей за счет встроенного языка скриптов, а также автоматическую расстановку гиперсвязей с учетом словоформ, поддержку мультимедийных функций, совместимость с HTML и целый ряд других характеристик. Благодаря встроенному языку программирования программа позволяет создавать системы с обратной связью — с проверкой знаний пользователя. HyperMethod 3.5 — более сложная в управлении программа по сравнению с eAuthor и ePublisher, но она также не требует специальных навыков программирования, имеет интуитивно понятный русскоязычный интерфейс.

HyperMethod 3.5 полностью совместим с программами eAuthor и ePublisher и может использоваться для расширения создаваемого учебника. Таким образом, после данного урока читатель сможет научиться создавать электронные приложения, которые не являются шаблонными решениями, а представляют собой оригинальную разработку профессионального уровня.

 

Рис. 1. Программный продукт HyperMethod 3.5

Изменение структуры учебника

С помощью HyperMethod 3.5 вы можете внести дополнения в структуру созданного учебника. Предположим, помимо разделов «Словарь» и «Библиотека» вы желаете включить в учебник раздел «Библиография» или «Даты». Для этого вам необходимо выстроить новый раздел, а затем наполнить его информацией.

В начало В начало

Создание дополнительного раздела

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

Для того чтобы создать дополнительный раздел, запустите HyperMethod 3.5 и загрузите ранее созданный учебник командой главного меню Коллекция => Открыть (рис. 2).

 

Рис. 2. Открытие коллекции (ранее созданного учебника)

 

Появится стандартное для Windows-приложений окно открытия документа. Выберите необходимый файл и откройте его (рис. 3).

 

Рис. 3. Выбор файла

 

Далее создайте кадр коллекции — это будет первая страница нового раздела учебника. Для этого выполните команду Кадр => Открыть (рис. 4).

 

Рис. 4. Открытие кадра (страницы раздела)

 

После этого на экране появится новое окно кадра — наберите в нем название раздела (рис. 5).

 

Рис. 5. Окно кадра

 

Любой текст в окне кадра может быть оформлен с помощью различных шрифтов, размеров, цвета, заливки и с помощью других текстовых атрибутов. Вы можете изменить шрифт набранного текста с помощью команды Формат => Шрифт (рис. 6).

 

Рис. 6. Меню «Формат»

 

При выполнении команды Формат => Шрифт появляется стандартное диалоговое окно «Шрифт» (рис. 7).

 

Рис. 7. Диалоговое окно «Шрифт»

 

Чтобы установить цвет фона кадра, выберите команду Формат => Оформление (см. рис. 6). При этом появляется диалоговое окно «Оформление» (рис. 8).

 

Рис. 8. Диалоговое окно «Оформление»

 

Если необходимо установить фоновый рисунок, вам придется выбрать рисунок с изображением фона нажатием кнопки «Пролистать» (рис. 8). При этом появится второе диалоговое окно «Импорт Изображения», в нем перейдите в каталог, где находятся файлы. Изображения должны быть в формате bmp. В диалоговом окне «Окно» (рис. 9) отключите все параметры группы «Атрибуты», установите необходимые атрибуты и нажмите OK.

 

Рис. 9. Диалоговое окно «Окно»

 

Сохраните кадр с помощью команды Кадр => Сохранить. При этом появится диалоговое окно «Сохранить кадр как...» — наберите в нем имя кадра, например «Биографии», и нажмите ОК.

В начало В начало

Наполнение раздела

Теперь необходимо наполнить раздел информацией. Это могут быть страницы, соединенные гипертекстовой связью. Например, если это раздел «Биографии», то второй страницей будет перечень имен; с этой страницы пойдут гиперссылки на отдельные описания биографий каждого лица. Вторую страницу можно условно назвать «Оглавление».

Для того чтобы установить связь, выделите название раздела в первом кадре и создайте гипертекстовую связь командой Связь => Новая (рис. 10).

 

Рис. 10. Меню «Связь»

 

При этом появляется диалоговое окно «Связать с…», в котором нужно ввести имя кадра «Оглавление» (так как этого кадра еще нет, HyperMethod 3.5 создаст его автоматически), а затем нажать кнопку ОК (рис. 11).

 

Рис. 11. Диалоговое окно «Связать с кадром»

 

После этого появится окно нового кадра, с которым установлена гипертекстовая связь от названия раздела «Биографии» к кадру «Оглавление».

В окне кадра «Оглавление» наберите текст и измените шрифт по вашему усмотрению. Далее поместите окно кадра на место второй страницы и установите фон кадра командой Формат => Оформление (аналогично тому, как с кадром «Биографии»).

Сохраните кадр с именем и закройте его. Далее повторите эти действия для создания всех других страниц раздела по усмотрению.

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

 

Рис. 12. Диалоговое окно «Связать с…»

 

Проверьте установленные вами гипертекстовые связи. Для этого перейдите в режим просмотра с помощью команды Вид => Просмотр, со страницы «Биографии» перейдите на страницу «Оглавление» и проверьте все гиперсвязи. Для дальнейшей работы по созданию коллекции перейдите в режим правки с помощью команды Вид => Правка (рис. 13).

 

Рис. 13. Меню «Вид»

 

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

В начало В начало

Создание гипертекстовых связей внутри страниц

Вы можете создать переход между страницами внутри самих страниц. Для этого откройте первый кадр и вставьте в него кнопку, выбрав инструмент «Кнопка» на вертикальной панели инструментов в правой части программы (рис. 14).

 

Рис. 14. Панель инструментов

 

Выберите вставленную кнопку щелчком мыши по ней и перетащите ее в правый нижний угол кадра (рис. 15).

 

Рис. 15. Пример расположения кнопки

 

Двойным щелчком по кнопке перейдите в диалоговое окно «Элемент ”Кнопка” Properties» (рис. 16).

 

Рис. 16. Диалоговое окно «Элемент “Кнопка” Properties»

 

Введите в поле «Надпись»: «Следующая >>» и нажмите ОК.

Установите связь от этой кнопки к следующей странице с помощью команды Связь => Новая (см. рис. 10). При выполнении этой команды появится диалоговое окно «Связать с кадром» (см. рис. 11) — нажмите в нем кнопку «Выбрать». При этом появится второе диалоговое окно «Связать с…» (см. рис. 12), в котором нужно выбрать необходимый кадр. Затем нажмите ОК сначала в первом, а затем во втором окне. После этого будет установлена связь двух кадров. Сохраните установленные связи командой Кадр => Сохранить в главном меню.

Таким образом, можно связать все страницы. При обратном переходе между страницами надпись на вставляемых кнопках меняется на «<<Предыдущая».

Аналогично тому, как создаются связи между страницами книги, устанавливаются гипертекстовые связи от каждой страницы к странице «Оглавление».

Перейдя в режим просмотра, полистайте созданный вами раздел.

В начало В начало

Вставка рисунков, видео и звука

Для вставки рисунка создайте новый кадр или откройте уже существующий (см. рис. 4) и выполните команду Вставить => Рисунок (рис. 17).

 

Рис. 17. Меню «Вставить»

 

В появившемся диалоговом окне «Импорт изображений» (рис. 18) выберите нужный каталог и файл рисунка, затем нажмите кнопку OK.

 

Рис. 18. Диалоговое окно «Импорт изображений»

 

В HyperMethod 3.5 существуют три способа взаимодействия текста и вставляемых в кадры рисунков или любых других объектов. В первом случае рисунок располагается поверх текста кадра, закрывая его собой. Во втором случае рисунок разрывает текст кадра так, что строчки текста могут находиться выше или ниже его, но не слева или справа от него. При третьем способе строчки текста огибают рисунок со всех сторон. Для изменения параметров рисунка выполните команду Формат => Рисунок (рис. 19).

 

Рис. 19. Диалоговое окно «Рисунок»

 

В диалоговом окне «Рисунок» установите необходимые параметры. Измените масштаб рисунка. В пункте «Масштаб» установите 50% для параметров «Ширина» и «Высота», а затем нажмите кнопку OK.

По аналогичной схеме происходит работа с видео и звуковыми фрагментами. Для вставки фрагментов используется меню «Вставить» (см. рис. 17), для простого форматирования — меню «Формат» (см. рис. 6).

В начало В начало

Программирование на языке скриптов

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

В начало В начало

Написание простейшей программы для кнопки

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

Для начала попробуем переопределить поведение кнопки таким образом, чтобы она немного «ожила». Например, когда мы будем подводить к ней курсор мыши, то текст на ней должен измениться на текст «Нажми на меня!». Если мы нажали на кнопку, то на ней появится «Спасибо!», а если курсор мыши переместили с кнопки, не нажав на нее — «Жаль!».

Для этого проделайте следующее: в кадр вставьте кнопку, сделайте ее текущим объектом и выполните команду Скрипт => Объекта... (рис. 20).

 

Рис. 20. Меню «Скрипт»

 

В появившемся диалоге (рис. 21) вы увидите описание поведения кнопки по умолчанию, то есть ее стандартное поведение.

 

Рис. 21. Диалоговое окно «Скрипт для объекта»

 

Кнопка умеет обрабатывать по умолчанию различные события:

· MouseSetFocus — событие наступает, когда к кнопке подводится курсор мыши;

· Click — событие наступает, когда по кнопке производится щелчок левой кнопкой мыши;

· MouseKillFocus — событие наступает, когда курсор мыши отводится от кнопки.

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

Для того чтобы надпись на кнопке изменилась, нам необходимо для сообщения MouseSetFocus доопределить поведение кнопки. Поэтому выберем сообщение MouseSetFocus и в окне редактирования скрипта допишем следующее:

//On MouseSetFocus

Caption = "Нажми на меня!"

Символы «//» означают, что далее в строке находится комментарий. Здесь и в дальнейшем первой строкой в программе будет идти название того сообщения, для которого пишется программа в качестве комментария (//On MouseSetFocus). Слово Caption является именем свойства кнопки. Это свойство содержит текст, отображаемый на кнопке.

Подставить в текст скрипта имена функций и методов также можно, используя кнопку «Выбрать» (см. рис. 21). Затем в появившемся перечне выберите раздел «Свойства объекта» и строку Caption (рис. 22). В окне редактирования появится строка Caption. После знака равенства введите текст, который должен появиться на кнопке, — «Нажми на меня!».

 

Рис. 22. Диалоговое окно «Выбрать», меню «Скрипты для объекта»

 

Аналогичные операции выполните для сообщений MouseKillFocus и Click. Добавьте строчки Caption= "Жаль!" и Caption= "Спасибо!" в соответствующие описания.

Для проверки правильности написания нажмите кнопку «Проверить» (см. рис. 21). Если скрипт обработки сообщения синтаксически верен, то рядом с кнопкой «Проверить» появится сообщение «Script OK». Если допущена ошибка, то вы получите сообщение о ней с указанием места, где она допущена.

Проверим скрипты в работе. Перейдем в режим просмотра (клавиши Ctrl+F1) и подведем курсор мыши к кнопке. Название кнопки должно измениться на «Нажми на меня!». После нажатия левой кнопкой мыши название кнопки изменится на «Спасибо!». Когда курсор мыши уберут с кнопки, появится надпись «Жаль!».

В начало В начало

Написание простейшей программы для окна кадра

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

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

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

Для этого в языке скриптов определена процедура CloseThisChunk, и в указанном случае скрипт будет выглядеть следующим образом:

//On KillFocus

CloseThisChunk

//End KillFocus

С помощью языка скриптов можно не только закрывать кадры, но и открывать их. В HyperMethod существуют две основные возможности открытия кадров с помощью скриптов. Первая из них используется по умолчанию, когда создается любая гипертекстовая связь. В момент создания связи, например от текста, создается текстовый якорь. Он является объектом кадра, таким же, как рисунок или кнопка, и обладает собственным скриптом.

Текстовый якорь можно создать и без связи — с помощью команды Вставить => Текстовый якорь (см. рис. 17).

Автоматически созданный скрипт, который можно просмотреть или модифицировать с помощью команды Скрипт => Объект (см. рис. 21), содержит процедуру перехода по связи ActivateCurLink. Эта процедура активизирует переход по связи, которая установлена от якоря, будь он текстовым, графическим или каким-либо другим.

Какой именно переход (существует два их варианта — Ссылка и Замена) будет осуществлен, определяется параметром, задаваемым при установке связи командой Связь => Новая (см. рис. 10).

Если необходимо активизировать какой-либо конкретный тип перехода, то можно воспользоваться следующей процедурой:

ActivateLink 1 — для ссылки;

ActivateLink 2 — для замены.

Этот способ перехода предполагает, что связь, по которой будет осуществлен переход, была ранее проставлена. Но что делать в случае, если то, куда переходить, выясняется лишь в момент запуска этой связи? Или если необходимо перейти по связи, но нет никакой возможности создать якорь в кадре? Для этого в языке скриптов реализована процедура OpenChunk #. Номер, передаваемый в качестве параметра процедуры, является уникальным числовым системным идентификатором кадра в коллекции, который присваивается кадру автоматически в момент его создания. Узнать номер кадра можно с помощью команды Кадр => Свойства (рис. 23).

 

Рис. 23. Диалоговое окно «Свойства кадра»

 

Вызов этого кадра с помощью данной процедуры можно осуществить, написав в «Скрипт для объекта» (см. рис. 21) OpenChunk 3.

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

//On Init

n = GetActiveChunk( )

s = GetChunkName( n )+ «: Биография»

OpenChunk FindChunk( s )

или то же самое, только без переменных:

//On Init

OpenChunk FindChunk(GetChunkName(GetActiveChunk( )) + «: Биография»)

В начало В начало

Управление мультимедийным объектом

К основным методам элемента «Мультимедиа» относятся методы Run и Stop, запускающие воспроизведение видео или звука и их остановку.

Для иллюстрации возможностей управления объектом приведем небольшой пример:

if( NumberOfChanel == 1 )

FileName = "video1.mov"

endif

if( NumberOfChanel == 2 )

FileName = "video2.avi"

endif

if( NumberOfChanel == 3 )

FileName = "video3.mpg"

endif

if( NOT Run() )

MessageHelp "File "+ FileName +" not found !"

endif

Такой скрипт запускает один из видеофайлов, сначала присваивая переменной FileName соответствующее значение. Видеофайлы должны быть помещены в каталог МMEDIA.

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

В начало В начало

Изменение шаблона учебника

С помощью HyperMethod 3.5 можно изменить шаблон созданного ранее в eLearning Office 3000 учебника. Для этого необходимо подготовить графические файлы, из которых будет состоять новый шаблон. Рисунки должны быть в формате BMP. Затем эти файлы необходимо поместить в папку Images созданного ранее электронного учебника, удалив оттуда остальные файлы.

Далее следует открыть учебник в HyperMethod 3.5 (см. рис. 2). После замены файлов в папке Images картинки старого шаблона учебника автоматически заменятся на новые. Далее вы можете выделять части шаблона и перемещать их по странице в соответствии с задуманным вами дизайном шаблона. Таким образом, вы создадите оригинальный собственный шаблон учебника.

Вы можете, например, загрузить в HyperMethod 3.5, как шаблон, рисунок целой страницы и разбить его на зоны, соответствующие разделам вашего учебника. Этот механизм называется созданием активных зон. Активная зона — это выделенная область, которая выполняет роль опорного фрагмента. Активные зоны могут иметь различную форму: прямоугольника, эллипса, закругленного прямоугольника, многоугольника.

Для того чтобы осуществить разметку активных зон на OLE-, OCX-объектах и рисунках, в текущем кадре сначала выделите объект, а затем выберите в главном меню команду Вставить => Активную зону (рис. 24).

 

Рис. 24. Меню «Вставить»

 

Появится диалоговое окно «Редактор активных зон» (рис. 25).

 

Рис. 25. Диалоговое окно «Редактор активных зон»

 

Выберите, например, команду Зона => Закругленный прямоугольник. Появится диалоговое окно «Атрибуты зоны» типа «Закругленный прямоугольник» (рис. 26), в котором определяются размеры активной зоны, тип линии активной зоны, ее толщина и цвет (рис. 27).

 

Рис. 26. Диалоговое окно «Атрибуты зоны типа “Закругленный прямоугольник”»

 

Рис. 27. Выделение активной зоны

 

Затем установите связь выделенной активной зоны с соответствующим разделом или страницей книги по вышеописанному механизму.

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

В начало В начало

КомпьютерПресс 10'2003


Наш канал на Youtube

1999 1 2 3 4 5 6 7 8 9 10 11 12
2000 1 2 3 4 5 6 7 8 9 10 11 12
2001 1 2 3 4 5 6 7 8 9 10 11 12
2002 1 2 3 4 5 6 7 8 9 10 11 12
2003 1 2 3 4 5 6 7 8 9 10 11 12
2004 1 2 3 4 5 6 7 8 9 10 11 12
2005 1 2 3 4 5 6 7 8 9 10 11 12
2006 1 2 3 4 5 6 7 8 9 10 11 12
2007 1 2 3 4 5 6 7 8 9 10 11 12
2008 1 2 3 4 5 6 7 8 9 10 11 12
2009 1 2 3 4 5 6 7 8 9 10 11 12
2010 1 2 3 4 5 6 7 8 9 10 11 12
2011 1 2 3 4 5 6 7 8 9 10 11 12
2012 1 2 3 4 5 6 7 8 9 10 11 12
2013 1 2 3 4 5 6 7 8 9 10 11 12
Популярные статьи
КомпьютерПресс использует