Как создать адаптивный дизайн в Adobe Captivate без использования Fluid Box

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

Как вы наверняка знаете компания Adobe уже давно внедрила в свое популярное приложение для разработки обучающего контента Captivate возможность создавать слайды с адаптивным дизайном. Разработчик мог выбирать 3 варианта вида слайда: десктоп, планшет и смартфон. Каждый элемент позиционируется на слайде в зависимости от размера экрана (разработчик переключаясь между видами, расставляет объекты нужным образом). В 2017 году Adobe пересмотрели свое отношение к адаптивной верстке и решили, что разработчику не нужно расставлять объекты 3 раза и внедрили абсолютно новый принцип верстки. Слайд делится на колонки или строчки наподобие таблицы, ячейкам задаются правила отображения в зависимости от разрешения экрана (они либо переносятся на другую строку, либо остаются в одной строке, либо просто не демонстрируются). Нововведение получило название Fluid Box. Оно действительно инновационное, однако все, кто хоть раз сталкивался с необходимостью быстро сверстать курс с применением Fluid Box, подтвердит — это очень сложно. Научиться верстать курсы таким образом можно, но это займет много времени, и результат применения Fluid Box не всегда предсказуем: на предпросмотре мы видим одно, а после публикации курса — другое.

Однако не стоит отказываться от Captivate (особенно если вы уже приобрели дорогостоящую лицензию). Выход есть. Adobe предусмотрела возможность сверстать responsive курс без применения Fluid Box, как мы делали это в Captivate 9 или более ранних версиях. Что для этого нужно сделать?

1. (Как это ни странно) Создаем новый Responsive проект.

2. Заходим в меню Project и выбираем Switch to Breakpoint Mode.

Переключаемся в режим Breakpoint Mode

3. Программа попросит сохранить все изменения. Делаем это. Затем видим такое вот сообщение:

Предупреждение об удалении Fluid Box

Здесь сообщается, что все ваши Fluid Box’ы пропадут. Но нам это и нужно, поэтому нажимаем Ок.

4. Вот, собственно, и все! Теперь перед нами режим Breakpoint Mode, в котором мы можем довольно быстро и предсказуемо верстать проекты с адаптивным дизайном, расставляя объекты на слайде как нам нужно, а не как программа сочтет верным.

Вот так выглядит режим десктопа.

Captivate Breakpoint Mode - desktop

Это режим планшета:

Captivate Breakpoint Mode - tablet

А это режим смартфона:

Captivate Breakpoint Mode - smartphone

Итак, сложность использования Fluid Box — это не повод отказываться от работы с Captivate, у которого есть много преимуществ по сравнению с другими приложениями для верстки электронных курсов.

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

комментария 2

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

    Дмитрий, а есть пример сверстанного адаптивного курса из Captivate?

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

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

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