Меняем стандартную заставку плеера Adobe Captivate на мобильных устройствах

В этой статье я расскажу, как решить одну из часто обсуждаемых проблем: «Как избавиться от белого стартового экрана и черной кнопки 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 2017×64\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.

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

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

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

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