Storyline


Использование библиотеки GSAP в Articulate Storyline

О чем видео

Участник сообщества Алексей Миляев выпустил новое видео. В нем рассказывается про использование JS библиотеки GSAP в Articulate Storyline, которая позволяет создавать интересные кастомные анимации. В ролике разбирается базовая теория и добавлено 8 шаблонов анимации, которые можно скопировать и вставить в свой проект. Кажется, это будет полезно многим, поэтому выносим из сообщества на сайт.

Посмотреть, как работает проект, можно тут. А тут можно скачать исходник проекта.

Резюме обсуждения ролика в сообществе

За видео благодарю участника сообщества — Алексея Миляева.

Пропадает озвучка курса после просмотра видео без звука

Контекст

Есть курс, в котором зашита озвучка слайдов. Иногда в курсе есть слайды с видео. Видео вставлены на слайд и используют плеер Storyline. Пользователь убавляет громкость в плеере видео (или в плеере курса) в ноль или делает очень тихо.

voiceover in the course.png

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

Проблема

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

Storyline имеет встроенную переменную для управления громкостью фонового звука. Однако нет ни переменной, ни API для управления звуком на слайдах.

Решение

Есть три способа решения проблемы. По какому пути идти решать вам.

Простой

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

Технический

Вынести видео в веб-объект со своим плеером. Так настройки громкости в видео не будут влиять на громкость всего курса. Кнопку управления громкостью убираем из плеера курса.

Тоталитарный

Убираем плеер в видео и кнопку громкости из плеера курса.

Как поменять отступ у субтитров

Проблема

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

Если смотреть курс с компьютера, то все нормально. Стоит открыть курс с мобильного устройства то субтитры могут неудобно накладываться на плеер курса или еще какие-то сюрпризы выдавать.

sub.jpg

Решение проблемы

  1. Опубликуйте курс
  2. Откройте файл html5\data\js\frame.js
  3. Поиском найдите строку "placement":100
  4. Поменяйте значение в пределах 0-100.
    0 - верхняя граница слайда
    100 - нижняя граница слайда
  5. Упакуйте файлы курса в архив и загружайте в вашу СДО

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

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