Эффект мерцания в Articulate Storyline

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

Каким образом можно реализовать такой функционал, учитывая, что по умолчанию он в Storyline не представлен?

Есть вариант создать зацикленную gif-анимацию, но для этого потребуется дополнительный софт и наличие умения с ним работать.

В этой статье мы пойдём другим путём и создадим эффект бесконечного мерцания кнопки средствами Articulate Storyline. Ниже приведён пример, который мы и воспроизведём за несколько простых шагов.

Для начала создадим кнопку. Я использовал стандартные фигуры из набора Storyline, расположенные во вкладке Insert — Shapes.

Далее дублируем нашу кнопку и переносим на задний план получившийся объект, чтобы эффект применять на нём. Так мы сможем получить плавный эффект. Почему? Смотрите далее и всё встанет на свои места. К фоновому объекту применим эффект свечения. Для этого выбираем объект, переходим на вкладку Format — Shape Effect — Glow и выбираем нужный цвет и размер подсветки.

Чтобы получить плавный эффект, добавим к фоновому объекту анимацию входа и исчезновения. Для анимации входа перейдём на вкладку Animation и выберем Fade. Анимация входа отображается зелёным цветом.

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

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

Поэтому нам потребуется нечто, что будет прятать и показывать наш подсвеченный фон. Для этого можно использовать дополнительный анимированный объект, у которого мы будем отслеживать окончание анимации и менять состояние нашего фона. Если вы ничего не поняли, нестрашно 🙂 Сейчас мы на практике разберём, как это реализовать.

Создадим любой объект, например, прямоугольник. Перейдём на вкладку Animation и добавим анимацию движения, нажав Add Motion Path (когда придёт время, мы просто уберём объект за слайд, и пользователи его не увидят).

Справа, там, где расположены триггеры, вы увидите, что появился новый триггер, сообщающий, что наш служебный квадратик начнёт двигаться, как только будет показан слайд. Теперь мы должны заставить его двигаться вечно. Для этого добавим к служебному квадратику новый триггер: Move (выбираем название анимации, в нашем случае Line Motion Path 1) при условии, что Animation completes (ниже снова выбираем ту же анимацию). Таким образом, наш квадратик теперь начинает двигаться как только перестал двигаться. Это нам и было нужно.

Теперь привяжем к анимации служебного квадратика появление и исчезновение фона с подсветкой. Для этого создадим триггер, который будет менять состояние объекта (Change state of), то есть прятать его (Hide), как только анимация квадратика завершиться. Делаем это при условии (On condition), если фон не спрятан (то есть его состояние Normal).

Теперь сделаем так, чтобы фон появлялся. Для этого создадим похожий триггер (Change state of), но состояние выбираем Normal. Выполняться триггер будет при условии, если фон уже был спрятан (State is Hidden).

Вот и всё! Осталось убрать за пределы слайда служебный анимированный квадратик и совместить кнопку и фон. Если вы всё сделали верно, то при просмотре увидите, как кнопка плавно подсвечивается, затем подсветка плавно пропадает, а затем всё повторяется вновь.

Чтобы настроить скорость мигания, поиграйте со временем анимации квадратика и скоростью эффекта появления и исчезновения фона.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.