Как создавать интерактивные изображения с помощью ActivePresenter
Из предыдущих статей вы узнали, как использовать ActivePresenter для создания большого количества интерактивного контента: игр, электронных карточек, вопросов и т. д. Из сегодняшней статьи вы узнаете, как легко создавать интерактивные изображения в ActivePresenter.
Интерактивное изображение – это картинка, при наведении на которую курсора мыши или щелчка по ней отображается информация, изменяется состояние, скрывается объект и пр. Таким образом, превращение обычных изображений в интерактивные сделает ваш курс живым, интересным и вдохновит обучающихся.
Например, предоставим обучающимся информацию о Солнечной системе, создав интерактивное изображение. Для этого необходимо использовать несколько шкал времени, события и действия и расширенные действия ActivePresenter.
Подготовка к созданию интерактивных изображений
Четкий план поможет ускорить процесс. Давайте составим план перед началом работы, определив задачи, которые необходимо выполнить для создания интерактивных изображений:
- Создадим 8 планет на орбите вокруг Солнца.
- Заставим планету остановить свое движение и показать информацию о себе при наведении на нее курсора мыши.
- Сделаем так, чтобы информация исчезла, а планета продолжала двигаться при отводе указателя мыши от нее.
Сначала подготовьте универсальное фоновое изображение и 8 отдельных изображений планет.
Затем откройте пустой проект ActivePresenter > вкладка «Аннотации» > «Изображение», чтобы добавить в проект подготовленные изображения.
Как видите, все планеты расположены на своей орбите. Теперь отрегулируйте размер каждого изображения, чтобы оно соответствовало размеру планеты.
Создание восьми планет на орбите вокруг Солнца
Первая задача – создание орбит планет и их обращение вокруг Солнца. Для этого воспользуемся функцией «Несколько шкал времени». Сначала нужно создать новую шкалу времени для каждой планеты, чтобы каждая планета работала независимо от других при наведении и отведении от нее мыши.
Выполните следующие действия:
Шаг 1: нажмите кнопку «Добавить шкалу времени» > «Переименовать шкалу времени...» > введите имя шкалы времени > OK.
Для получения дополнительной информации см. Использование нескольких шкал времени.
Шаг 2: создайте орбиту планеты, добавив к ней путь движения на шкале времени каждой планеты. Откройте вкладку «Анимации» > «Добавить анимацию» > выберите один из типов пути движения.
Шаг 3: отрегулируйте путь движения, перетащив опорные точки и контрольные точки. Чтобы искривить путь движения, щелкните правой кнопкой мыши черные точки и выберите «Точка сглаживания».
Шаг 4: заставьте планеты вращаться вокруг Солнца непрерывно.
На шкале времени можно дважды щелкнуть панель времени эффекта, чтобы открыть диалоговое окно, в котором можно изменить эффект. Здесь можно настроить время начала и продолжительность в соответствии со скоростью движения планеты. Выберите «Показывать до конца слайда», чтобы зациклить траекторию движения планеты. Затем нажмите кнопку ОК, чтобы применить.
Не забудьте повторить 4 описанных выше шага для всех объектов-планет.
Шаг 5: добавьте действие «Запуск шкалы времени» для события слайда «При загрузке». Это заставит планеты вращаться вокруг Солнца при старте проекта.
Информация о планетах
Изучая Вселенную, обучающиеся могут захотеть получить больше информации. Поэтому предоставим им такую возможность с помощью вставки соответствующих объектов с информацией о планетах:
Шаг 1: откройте вкладку «Аннотации» > «Фигуры» > выберите одну фигуру из встроенного списка и введите в нее информационный текст.
Совет: можно вставлять ссылки, изображения, видео и т. п.
Шаг 2: откройте вкладку «Формат», чтобы настроить стиль фигуры, цвет и т. д.
Шаг 3: перейдите на панель «Свойства» > «Размер и свойства» > «Расчет времени» > установите чекбокс «Изначально скрыто», чтобы скрыть объекты с информацией при запуске проекта.
Повторите вышеуказанные шаги с каждой планетой.
Создание интерактивности для планет
Создание расширенных действий
После создания орбит планет и предоставления информации по планетам, пришло время добавить к ним интерактивности. Действия по остановке движения планеты, показу информации, сокрытию информации и продолжению движения планеты будут применены ко всем планетам. Для этого нам понадобятся расширенные действия для быстрого создания интерактивных изображений.
Шаг 1: нажмите кнопку «Расширенные действия» на вкладке «Взаимодействия» или панели «Свойства». Откроется диалоговое окно «Расширенные действия».
Шаг 2: создайте расширенное действие, чтобы заставить планеты останавливаться и показывать информацию при наведении на них указателя мыши:
- Назовите его «Остановка_движения».
- Добавьте два параметра с соответствующими типами.
- Добавьте действие «Приостановить шкалу времени» для параметра «Планета».
- Добавьте действие «Показать объект» для параметра «Информация».
- Нажмите кнопку «Сохранить».
Шаг 3: создайте расширенное действие для скрытия информации и продолжения движения планеты при отводе указателя мыши с планеты:
- Добавьте расширенное действие «Скрыть_информацию».
- Добавьте два параметра, аналогичные шагу 2.
- Добавьте действие «Продолжить шкалу времени» для параметра «Планета».
- Добавьте действие «Скрыть объект» для параметра «Информация».
- Нажмите кнопку «Сохранить».
- Нажмите кнопку «Закрыть» диалогового окна «Расширенные действия».
Применение расширенных действий к событиям
Шаг 1: выберите изображение планеты > на панели «Свойства» > «Взаимодействия» > «События и действия».
Шаг 2: добавьте событие «При наведении указателя» > «Добавить действие» > «Расширенные действия».
- Нажмите кнопку для редактирования.
- Выберите «Расширенные действия» «Остановка_движения».
- Выберите подходящее значение для параметров «Планета» и «Информация».
Шаг 3: добавьте событие «При отводе указателя» > «Добавить действие» > «Расширенные действия».
- Нажмите кнопку для редактирования.
- Выберите «Расширенные действия» «Скрыть_информацию».
- Выберите подходящее значение для параметра «Информация».
Повторите описанные выше шаги для всех изображений планет. А затем нажмите кнопку «Предпросмотр HTML5», чтобы увидеть результат. Поверьте, вы будете удивлены тому, что создали!