Как создавать интерактивные изображения с помощью ActivePresenter

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

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

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

Подготовка к созданию интерактивных изображений

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

1. Создадим 8 планет на орбите вокруг Солнца.
2. Заставим планету остановить свое движение и показать информацию о себе при наведении на нее курсора мыши.
3. Сделаем так, чтобы информация исчезла, а планета продолжала двигаться при отводе указателя мыши от нее.

Сначала подготовьте универсальное фоновое изображение и 8 отдельных изображений планет.

Затем откройте пустой проект ActivePresenter > вкладка «Аннотации» > «Изображение», чтобы добавить в проект подготовленные изображения.

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

Создание восьми планет на орбите вокруг Солнца​

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

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

Шаг 1: нажмите кнопку «Добавить шкалу времени» > «Переименовать шкалу времени...» > введите имя шкалы времени > OK.

Для получения дополнительной информации см. Использование нескольких шкал времени.

Шаг 2: создайте орбиту планеты, добавив к ней путь движения на шкале времени каждой планеты. Откройте вкладку «Анимации» > «Добавить анимацию» > выберите один из типов пути движения.

Шаг 3: отрегулируйте путь движения, перетащив опорные точки и контрольные точки. Чтобы искривить путь движения, щелкните правой кнопкой мыши черные точки и выберите «Точка сглаживания».

Шаг 4: заставьте планеты вращаться вокруг Солнца непрерывно.

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

Не забудьте повторить 4 описанных выше шага для всех объектов-планет.

Шаг 5: добавьте действие «Запуск шкалы времени» для события слайда «При загрузке». Это заставит планеты вращаться вокруг Солнца при старте проекта.

Информация о планетах

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

Шаг 1: откройте вкладку «Аннотации» > «Фигуры» > выберите одну фигуру из встроенного списка и введите в нее информационный текст.

Шаг 2: откройте вкладку «Формат», чтобы настроить стиль фигуры, цвет и т. д.

Шаг 3: перейдите на панель «Свойства» > «Размер и свойства» > «Расчет времени» > установите чекбокс «Изначально скрыто», чтобы скрыть объекты с информацией при запуске проекта.

Повторите вышеуказанные шаги с каждой планетой.

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

Создание расширенных действий

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

Шаг 1: нажмите кнопку «Расширенные действия» на вкладке «Взаимодействия» или панели «Свойства». Откроется диалоговое окно «Расширенные действия».

Шаг 2: создайте расширенное действие, чтобы заставить планеты останавливаться и показывать информацию при наведении на них указателя мыши:

• Назовите его «Остановка_движения».
• Добавьте два параметра с соответствующими типами.
• Добавьте действие «Приостановить шкалу времени» для параметра «Планета».
• Добавьте действие «Показать объект» для параметра «Информация».

• Нажмите кнопку «Сохранить».

Шаг 3: создайте расширенное действие для скрытия информации и продолжения движения планеты при отводе указателя мыши с планеты:

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

• Нажмите кнопку «Закрыть» диалогового окна «Расширенные действия».

Применение расширенных действий к событиям​

Шаг 1: выберите изображение планеты > на панели «Свойства» > «Взаимодействия» > «События и действия».

Шаг 2: добавьте событие «При наведении указателя» > «Добавить действие» > «Расширенные действия».

• Нажмите кнопку для редактирования.
• Выберите «Расширенные действия» «Остановка_движения».
• Выберите подходящее значение для параметров «Планета» и «Информация».

Шаг 3: добавьте событие «При отводе указателя» > «Добавить действие» > «Расширенные действия».

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

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