12 мин. на чтение (слов - 2440)

Как создать обучающую игру «Семь чудес света»

Обучающая игра «7 чудес света» будет создаваться в ActivePresenter 7. В этой статье рассмотрим все необходимые этапы для ее создания.

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

В проекте игры два слайда. Рассмотрим каждый из них.

Правила игры

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

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

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

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

Создание слайда начального экрана игры

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

Создание кнопки воспроизведения

Существует два способа создания кнопки. Первый – вставить кнопку как интерактивный объект (вкладка «Взаимодействия» > «Кнопка»). Второй – вставить фигуру (вкладка «Аннотации» > «Фигуры») и добавить в нее события и действия.

Этап 1: создаем кнопку «Играть».

Кнопка «Играть» направляет пользователей к следующему слайду. Другими словами, когда пользователь нажимает на нее, игра начинается. Чтобы это произошло, вставьте кнопку и сделайте ее интерактивной, добавив действие «Перейти вперед: 1 слайд» к событию «По щелчку».

ActivePresenter 7 содержит новую функцию под названием «Состояние объекта», что позволяет изменять вид объекта при наведении на него или нажатии. Поскольку в этой игре состояние кнопки не нужно, можно использовать второй способ создания кнопки «Играть». Для этого вставьте фигуру и назовите ее «Кнопка_Играть», добавьте к ней событие «По щелчку», затем добавьте действие «Перейти вперед: 1 слайд».

Этап 2: анимация кнопки воспроизведения.

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

Создание анимированных облаков

Давайте создадим несколько фигур облаков (вкладка «Аннотации» > «Фигура»). Заполните их белым цветом и оживите, заставляя плавать по экрану, как в небе. На этом этапе используйте функцию множественной шкалы времени, которая поможет легко управлять анимацией.

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

Этап 1: добавьте одну интерактивную шкалу времени для анимации фигур облаков.

Щелкните список «Шкала времени» и выберите «Добавить шкалу времени». Необходимо назвать шкалу Облако или что-то в этом роде, чтобы потом можно было понять, за что отвечает данная шкала времени.

Этап 2: добавьте анимацию в фигуры облаков и заставьте их двигаться, пока пользователи не нажмут кнопку «Играть».

Добавление анимации к объектам на интерактивной шкале времени похоже на добавление анимации на основной шкале времени. Просто выберите фигуры облаков, откройте вкладку «Анимации» и выберите один вариант из списка анимаций.

Можно нарисовать пользовательский путь (например, волнистый путь) с помощью функции «Свой путь», что делает облако более естественным. После этого измените путь так, чтобы фигуры облаков вернулись в исходное положение (щелкните правой кнопкой мыши путь > «Обратное направление пути»).

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

Этап 3: сделайте, чтобы шкала времени «Облако» запускалась при начале показа слайда.

Чтобы это сделать, добавьте действие «Запуск шкалы времени» для события «При загрузке» слайда. После этого выберите шкалу времени «Облако» для воспроизведения.

Этап 4: вставьте интерактивный объект, чтобы продолжить игру после окончания слайда.

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

Связанные статьи для создания фигур облаков и кнопки «Играть»:

Создание игрового слайда

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

Процедура создания второго слайда состоит из пяти больших этапов:

  1. Вставка вопросительных знаков и создание для них шкалы времени.
  2. Работа с кистью и лупой.
  3. Добавление действий к лупе.
  4. Работа с семью изображениями чудес света.
  5. Работа с перекрывающей фигурой и целью перетаскивания каждого изображения чуда света.

1. Вставка вопросительных знаков и создание для них шкалы времени

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

Этап 1: вставьте несколько вопросительных знаков (можно использовать текстовые надписи), затем установите их первоначально скрытыми (щелкните правой кнопкой мыши и выберите «Изначально скрыто» из контекстного меню). Надписи будут скрыты, пока их не вызовет действие (например, «Запуск шкалы времени: Вопрос»).

Этап 2: добавьте шкалу времени для вопросиков и переименуйте ее в Вопрос. Это поможет выбрать правильную шкалу времени при добавлении шкалы времени начала действия.

Этап 3: добавьте анимацию к ним и пусть они показываются до конца слайда (щелкните правой кнопкой мыши на шкале времени анимации > «Показать до конца слайда»).

  • Эффект входа: «Возникновение».
  • Акцент и путь движения: «Качка».

2. Работа с кистью и лупой

Эта сцена появляется сразу после нажатия пользователями кнопки воспроизведения. Два источника перетаскивания (кисть и лупа) с короткими заставками для каждого. Только когда пользователи закрывают заставку лупы, появляется заставка кисти. После закрытия второй заставки пользователи могут начать перетаскивать оба источника перетаскивания.

Этап 1: вставьте объекты Кисть и Лупа, затем установите их в качестве источников перетаскивания (выберите объекты > «Источник перетаскивания» на панели «Свойства»).

Не забудьте выбрать опцию «Вернуться», чтобы лупа и кисть вернулись в исходное положение, когда пользователи перестанут их перетаскивать.

Этап 2: создайте две фигуры (назовите их Текст_Лупа и Текст_Кисть), содержащие текст с информацией о том, что нужно сделать, чтобы найти расположение чудес света. Затем вставьте иконку закрытия в каждую фигуру (Закрыть_Лупа и Закрыть_Кисть). Сгруппируйте пары фигур для кисти и лупы в одну группу (щелкните правой кнопкой мыши объекты > «Группировать»), чтобы закрытие одного объекта закрывало всю группу. Назовите группы Заставка_Лупа и Заставка_Кисть.

Этап 3: установите начальное состояние фигуры Заставка_Кисть, чтобы она была скрыта (щелкните правой кнопкой мыши фигуру > «Изначально скрыто»). Это скроет фигуру, пока не будет использовано действие.

Этап 4: добавьте события и действия к иконке закрытия фигуры Заставка_Лупа, чтобы при нажатии на нее фигура скрывалась, а фигура Заставка_Кисть показывалась.

Для этого добавьте событие «По щелчку» для иконки закрытия (Закрыть_Лупа), а затем добавьте два действия:

Этап 5: установите события и действия для иконки закрытия фигуры Заставка_Кисть, чтобы при нажатии на нее фигура скрывалась и показывались вопросительные знаки.

После добавления события «По щелчку» добавьте два действия:

3. Добавление действий к лупе

Когда пользователи начнут перетаскивать лупу, все вопросительные знаки будут скрыты, а шкала времени «Вопрос» будет приостановлена. Для этого вставьте событие для лупы «В начале перетаскивания». Затем добавьте «Пауза шкалы времени: Вопрос» и другие действия, чтобы скрыть все вопросительные знаки:

4. Работа с семью изображениями чудес света

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

Выполните следующие действия:

Этап 1: поместите на холст изображение чуда света и отправьте его на нижний слой (правая кнопка мыши > «Порядок показа» > «На задний план». Это скроет изображение до тех пор, пока действие не вызовет его.

Этап 2: вставьте фигуру, содержащую знак вопроса внутри, чтобы перекрыть изображение чуда света. «Перекрытие» не обязательно означает, что фигура может буквально перекрывать изображение чуда света. Когда пользователи перетаскивают кисть на эту перекрывающую фигуру, она исчезает и одновременно показывается изображение чуда света.

Здесь также необходимо добавить действия. О них чуть ниже.

Этап 3: вставьте надпись «Подробнее...» и установите для нее события и действия.

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

Этап 4: создайте информационную доску для каждого изображения чуда света.

Создание доски с закрывающим значком для каждого чуда света похоже на создание заставки для лупы и кисти.

  1. Вставьте изображение в виде доски и две текстовых надписи (одна для названия чуда света, другая для подробного объяснения).
  2. Вставьте изображение чуда света, поместите его в левую часть доски, рядом с полем ввода текста.
  3. Вставьте иконку закрытия (красный крестик) и поместите ее в правом верхнем углу доски.
  4. Сгруппируйте два текстовых поля, изображение и иконку закрытия в одну группу (щелкните их правой кнопкой мыши > «Группировать»). Поскольку объекты находятся в одной группе, щелчок по иконке закрытия будет означать закрытие всей группы.
  5. Добавьте события и действия для иконки Закрыть_Колизей, чтобы при нажатии на нее информационная доска исчезала:

5. Работа с перекрывающей фигурой и целью перетаскивания каждого изображения чуда света

Как было сказано ранее, каждое изображение чуда света имеет перекрывающую фигуру и цель перетаскивания. Цель перетаскивания с событиями вызывает действие показать фигуру перетаскивания, когда пользователи перетаскивают изображение лупы над ним. Затем перекрывающая фигура с событиями в свою очередь вызывает действие показать изображение чуда света, показать надпись «Подробнее...» и воспроизвести звук, когда пользователи перетаскивают изображение кисти над ним.

Этап 1: установите события и действия для перекрывающей фигуры.

Сначала добавьте событие «При входе» в перекрывающую фигуру. Затем добавьте действия, чтобы воспроизвести звуковое сопровождение, показать изображение чуда света и надпись «Подробнее...» Наконец, добавьте условия к действиям. Условие «ЕСЛИ Источник перетаскивания равно Кисть» означает, что это действие может произойти, только если пользователь перетащит кисть в цель перетаскивания.

Этап 2: создайте цель перетаскивания для каждого изображения чуда света.

Вставьте фигуру, сделайте ее невидимой (без заливки, ширина сплошной линии = 0 px) и поместите ее в местоположение изображения чуда света. После этого сделайте ее целью перетаскивания.

В «Списке принятого» снимите все отметки, чтобы объект перетаскивания не принимал источник перетаскивания (лупу и кисть). Чтобы открыть список, выберите цель перетаскивания, в разделе «Перетаскивание» на панели «Свойства» нажмите кнопку рядом со «Список принятого».

Этап 3: добавьте события и действия к цели перетаскивания.

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

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

Не забудьте выбрать «Бесконечно» в списке «Приняты» цели перетаскивания. Это позволяет пользователям делать столько попыток, сколько они захотят.

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

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

Экспорт проекта в HTML5

Предварительный просмотр проекта перед экспортом

Перед экспортом проекта рекомендуется предварительно просмотреть его в HTML5. Это позволяет узнать, как игра будет выглядеть в браузере. Можно просмотреть игру на этапе редактирования проекта, избегая ошибок, исправлять которые будет уже слишком поздно.

Для предварительного просмотра проекта откройте вкладку «Экспорт» или «Главная», щелкните «Предварительный просмотр HTML5» и выберите один из четырех режимов. Однако имейте в виду, что демонстрационный режим не позволяет взаимодействовать с контентом.

Экспорт проекта

Наконец, когда закончите с созданием, можно экспортировать проект в HTML5 (вкладка «Экспорт» > «HTML5»).

В окне «Экспорт в HTML5» выберите режим экспорта игры. Можно выбрать любой режим. Но не экспортируйте проект в режим демонстрации, так как он не позволяет взаимодействовать между пользователями и игровым контентом. Иными словами, используя этот режим, пользователи смогут только просматривать игру, а не играть в нее.

Есть много вариантов и гибких настроек для экспорта HTML5, и настройка проигрывателя является одной из них. ActivePresenter позволяет изменить внешний вид плеера, а также различные свойства. Все эти настройки можно выполнить в окне настроек плеера (вкладка «Экспорт» > «Настройки плеера»).

Если нужно загрузить игру для электронного обучения в LMS, экспортируйте проект в SCORM или xAPI и загрузите его в LMS.


Как работать с мышью в ActivePresenter 7
Как настроить параметры проигрывателя HTML5

Читайте также:

 

Комментарии

Нет комментариев. Будь первым, кто оставит комментарий.
Уже зарегистрированы? Войти на сайт
Гость
21.08.2019