Используем Web Object в Articulate Storyline

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

Есть хороший способ, который позволит вам сократить время разработки курса — использовать готовые html-файлы, которые вставляются в слайд. Ниже вы видите пример того, как работают вставленные в Storyline готовые html-файлы с интегрированными интерактивными элементами, написанными на JavaScript и CSS. В примере 4 слайда.

Для того, чтобы создать подобные элементы не требуется знания языков программирования (хотя это было бы еще лучше, однако вы вряд ли бы заинтересовались этой статьей). Достаточно зайти на любой сайт, где есть готовые примеры веб-элементов, например, сюда. Далее копируем исходный код (на сайте, где я брал примеры, нужно нажать «Learn How To», а затем «Try It Yourself»), вставляем в любой текстовый редактор, например, Блокнот или Notepad++ (для MacOS подойдет TextWrangler). В коде ищем строчки, где требуется заменить дефолтный текст.

<button class="accordion">Section 1</button>
<div class="panel">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

В примере выше текст заменяем между тегами <p>…</p>, то есть «Lorem ipsum dolor sit amet… и т.д.»

Если же вы хоть чуть-чуть разбираетесь в HTML, то для вас не составит труда поменять цвета элемента и пр.

Далее сохраняем файл с именем index.html (это важно!) в отдельную папку (тоже важно!). Если в элементе задействованы картинки, вы также должны сохранить их в корне той же папки, что и index.html.

После этого заходим в Articulate Storyline — Insert — Web Object. Рядом со строкой Address нажимаем значок «Открыть файл» в виде желтой папки, находим папку (!), где лежит index.html и нажимаем Выбор папки. Проверьте, чтобы в настройках стояло Display in slide и Load web object automatically. Жмем ОК.

К сожалению при предпросмотре Web Object, как и JavaScript, недоступен. Поэтому для того, чтобы насладиться результатом, придется опубликовать проект.


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

Вам может также понравиться...

1 комментарий

  1. Олег Буйлов:

    Да, веб-объекты — это очень важная функциональность. Можно еще добавить, что с веб-объектами можно настроить обмен переменными через Javascript.

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

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

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