В этой статье я расскажу, как решить одну из часто обсуждаемых проблем: "Как избавиться от белого стартового экрана и черной кнопки Play при просмотре курсов, собранных в Adobe Captivate и просматриваемых на мобильном устройстве?" Когда вы публикуете курсы в HTML, Captivate отключает функцию AutoPlay. Это связано с тем, что большинство мобильных устройств не разрешают автоматическое проигрывание контента в браузере. Если же публиковать курс в SWF, то есть возможность включить автоматическое воспроизведение, однако это не лучшая мысль: если у вас в самом начале курса есть видео, звук или анимация, то пользователь может их не увидеть, да и вообще автозапуск — плохой тон. Однако Adobe, закрыв доступ к автозапуска, не предусмотрел никакого инструмента для оформления стартового экрана, видимо посчитав, что белый экран с чёрным треугольником в чёрной окружности — прекрасная заставка, которая понравится всем. Сама кнопка — это просто png размером 96х96 пикселей с прозрачным фоном.
Давайте заменим эту кнопку и фоновое изображение, чтобы они соответствовали дизайну вашего проекта.
Фоновая картинка
Чтобы избавиться от белого экрана на заставке курса, необходимо создать свой фон. Это обычное статическое изображение, желательно того же разрешения и размера, что и проект. В проектах со статичными размерами, которые в дальнейшем были конвертированы в Responsive, фоновое изображение автоматически будет увеличено или уменьшено до размеров экрана курса.
Чтобы установить картинку в качестве фона, зайдите в Preferences — Project, Start and End: отключите Auto Play (если он не был отключён) и выберите изображение, нажав Browse под строкой Auto Play.
Убираем кнопку Play
Чтобы не нужно было заменять стандартную кнопку Play каждый раз, можно поступить следующим образом:
- Создаём копию файла, отвечающего за кнопку Play. Он расположен тут: C:\Program Files\Adobe\Adobe Captivate 2017x64\HTML\assets\htmlimages\PlayI_icon.png и редактируем его таким образом, чтобы получилось пустое прозрачное изображение.
- Переименовываем оригинальный файл и подставляем программе нашу пустышку с именем Play_icon.png.
- Теперь при разработке проектов достаточно на фоновом изображении, которое мы прикрепляли к проекту в предыдущем разделе "Фоновая картинка", изобразить в нужном месте кнопку, запускающую курс.
- Эта "кнопка" должна быть тех же размеров, что и прозрачное изображение Play_icon.png и должна быть отцентрирована по горизонтали и вертикали.
Получается тускло?
Если теперь загрузить опубликованный проект, то мы обнаружим, что фоновая картинка на заставке будет тусклой. Это связано с тем, что в настройках у неё установлена прозрачность 70%.
Чтобы сделать её контрастной, откройте в любом текстовом редакторе файл CPM.js, который располагается в опубликованном проекте в папке \assets\js.
Теперь найдите строку:
cp.autoplayImage.style.opacity=0.7
И замените значение прозрачности с 0.7 на 1.
Идея статьи подсказана Lieve Weymeis и Mark Sabrento.
