Руководство 3: добавление интерактивных наложений

Поиск

Изучая это руководство, вы будете работать с папкой CityGuide_Folio, которая расположена в папке TutorialAssets. Мы будем создавать интерактивные объекты прямо в InDesign. Ниже показан экран iPad с выведенной первой страницей основной статьи, которую вы создадите во время этого урока.

Законченное фолио, отображаемое на экране iPad

A. Альбомный (горизонтальный) вид. B. Книжный (вертикальный) вид. C. Гиперссылки. D. Наложения «Видео». 

Загрузите ресурсы руководства. См. раздел Установка руководства.

Импорт статей

На предыдущем уроке была создана статья путем открытия исходного документа и выбора «Добавить статью». Другой способ — импортировать статьи. Вы можете импортировать одну или несколько статей, используя требуемую структуру папок и имена файлов.

При импорте статьи укажите папку статьи. При импорте нескольких статьей укажите папку фолио.

  1. Прежде чем импортировать статьи, откройте исходные документы InDesign, расположенные в папке TutorialAssets > CityGuide_Folio, и убедитесь, что все ссылки обновлены и файлы сохранены.

  2. Перейдите в вид статей и выберите пункт «Импорт статьи» в меню палитры Folio Builder.

  3. Выберите «Импорт нескольких статей».

  4. Щелкните значок папки рядом с полем «Папка» и перейдите в папку TutorialAssets > CityGuide_Folio. Нажмите кнопку «Открыть».

    Выберите папку CityGuide_Folio, а не подпапку.

  5. Нажмите «ОК», чтобы импортировать статьи в папку CityGuide_Folio и отправить их на сервер.

  6. Перетащите статью WiFi Ad в конец списка.

    Палитра Folio Builder после импорта статей

Изменение свойств фолио

  1. Нажмите значок со стрелкой в палитре Folio Builder, чтобы вернуться в вид фолио. Выберите фолио City Guide, затем нажмите «Свойства фолио» в палитре Folio Builder.

  2. В поле «Имя публикации» введите City Guide Monthly.

    Назначение имени публикации отличается от назначения имени фолио. Имя публикации отображается в приложении просмотра. Имя фолио используется для внутренних целей, таких как создание ссылок и настройка воспроизведений.

  3. Если это еще не сделано, укажите Cover_v.jpg для вертикальной ориентации и Cover_h.jpg для горизонтальной ориентации, затем нажмите кнопку «ОК». Эти изображения обложки появляются в папке CityGuide_Folio.

    Изображения предварительного просмотра для обложки отображаются в библиотеке приложения Viewer. Они необходимы для публикации приложения.

    Диалоговое окно «Свойства фолио»

Добавление интерактивной гиперссылки

Теперь вы научитесь редактировать документы Enjoy, добавляя в них интерактивные объекты.

Программное обеспечение InDesign включает множество различных интерактивных функций. Однако с инструментами для цифровой публикации можно использовать только некоторые из них. В дополнение к поддерживаемым встроенным функциям в палитре Overlay Creator размещены интерактивные наложения, которые можно использовать только для инструментов цифровой публикации.

Сначала создадим объект гиперссылки для логотипа «D. I. Y. Meet».

  1. В палитре Folio Builder перейдите к виду макетов статьи Enjoy_Article и дважды щелкните «Портретный макет», чтобы открыть Enjoy_v.indd.

  2. Выберите инструмент «Прямоугольник» на панели инструментов. Затем перетащите прямоугольник на логотип D.I.Y. Meet на первой странице. Убедитесь, что прямоугольник не имеет обводки и заливки.

  3. Откройте палитру «Гиперссылки» («Окно» > «Интерактивные элементы» > «Гиперссылки»), затем в меню палитры выберите «Новая гиперссылка».

  4. В списке «Связать с» выберите значение «URL» и введите URL-адрес в соответствующее поле (в примере используется URL-адрес http://www.bikeworks.org/). Снимите флажок «Общая привязка гиперссылки». В разделе «Оформление» оставьте флажки «Прозрачный прямоугольник» и «Нет». Нажмите кнопку «ОК».

    Применение гиперссылки к прямоугольному фрейму

  5. В палитре Folio Builder дважды щелкните «Макет альбомной ориентации», чтобы открыть документ Enjoy_h.indd. Скопируйте объект гиперссылки из файла Enjoy_v.indd и вставьте его в файл Enjoy_h.indd. Перетащите объект на логотип D.I.Y. Meet.

  6. Для быстрого предварительного просмотра документа сохраните документ и выберите «Файл» > «Просмотр фолио». Щелкните гиперссылку. Затем закройте приложение Adobe Content Viewer.

По умолчанию гиперссылки открываются в приложении Viewer, а не в браузере мобильного устройства. Вы можете изменить в палитре Overlay Creator настройки таким образом, чтобы веб-сайт открывался в браузере Safari мобильного устройства. Более подробная информация о палитре Overlay Creator будет представлена далее.

Создание наложения видео

Видео, добавленное вами в документы InDesign, становится интерактивным при компоновке файлов. Вы научитесь добавлять видео, затем изменять его настройки с помощью палитры Overlay Creator. Добавим видео «cycling».

  1. В файле Enjoy_h.indd выберите «Файл» > «Поместить», найдите папку CityGuide_Folio > Enjoy_Article > Links и дважды щелкните файл cycling_432x234.mpg. Поместите видеофайл в правый верхний угол окна.

    Видеоизображение со значком видео указывает на то, что объект является интерактивным. Далее это изображение будет использоваться как постер.

  2. В палитре «Медиаданные» («Окно»> «Интерактивные элементы» > «Медиаданные») в раскрывающемся меню «Постер» выберите «Выбрать изображение». Дважды щелкните cyclist.jpg в папке CityGuide_Folio > Enjoy_Article > Links.

    На экране появляется новой постер. Теперь в палитре Overlay Creator определите способ воспроизведения видео.

  3. Выберите «Окно» > «Расширения» > «Overlay Creator», чтобы открыть палитру Overlay Creator.

  4. Не снимая выделение с видеообъекта, установите в палитре Overlay Creator флажок «Касание для просмотра контроллера».

    Использование Overlay Creator для изменения настроек видео

  5. С помощью инструмента «Выделение» скопируйте изображение, перейдите в файл Enjoy_v.indd и вставьте изображение. Переместите его на пустую область на первой странице и выровняйте относительно окружающих объектов.

  6. Для предварительного просмотра видео сохраните документ и выберите «Файл» > «Просмотр фолио». Нажмите на видео, чтобы воспроизвести его. Затем закройте приложение Adobe Content Viewer.

Создание наложения «Слайд-шоу»

Теперь создадим интерактивное слайд-шоу с помощью палитры «Состояния объектов». Изображения на вторую страницу файла Enjoy вертикальной ориентации уже были добавлены нами ранее. Переместим их в стек, преобразуем в объект с несколькими состояниями и создадим кнопки для навигации по слайдам.

  1. Откройте файл Enjoy_v.indd в InDesign и перейдите к странице 2.

  2. Выберите семь изображений между красными стрелками, затем нажмите кнопки «Выровнять по центру по горизонтали» и «Выровнять по центру по вертикали» на панели управления. Поместите изображения в центре между стрелками.

  3. Не снимая выделение с изображений, выберите «Окно» > «Интерактивные элементы»> «Состояния объекта», чтобы отобразить палитру «Состояния объекта». Нажмите кнопку «Преобразовать выделенные объекты в объект с несколькими состояниями».

    Изображения, объединенные в объект с несколькими состояниями

    Каждое изображение отображается как отдельное состояние в палитре «Состояния объекта».

  4. В палитре «Состояния объекта» измените имя объекта на Sea Slugs.

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

  5. Выберите «Окно» > «Интерактивные элементы» > «Кнопки» для отображения палитры «Кнопки». Затем выберите красную стрелку слева.

  6. Нажмите «Преобразовать объект в кнопку», затем выберите «Перейти в предыдущее состояние», нажав на значок «плюс» рядом с полем «Операции».

    Создание кнопок навигации

    Теперь настроим небольшое изменение оформления кнопки при касании ее пользователем.

  7. Щелкните [Нажать] в палитре «Кнопки», затем нажмите значок «Тень» на панели управления.

  8. Выберите красную стрелку справа, преобразуйте ее в кнопку и примените операцию «Перейти к следующему состоянию». Задайте тень для оформления [Нажать].

    Кнопки позволяют пользователям переходить от изображения к изображению с помощью касания. Теперь разрешим использовать для перехода между слайдами жест перелистывания.

  9. Выберите объект с несколькими состояниями. В палитре Overlay Creator выберите «Перелистывание для изменения состояния».

    Включите возможность перелистывания для слайд-шоу.

  10. Скопируйте стрелки и объект с несколькими состояниями из файла Enjoy_v.indd и вставьте их на страницу 2 файла Enjoy_h.indd. Для улучшения расположения переместите стрелки под объект с несколькими состояниями.

  11. Для предварительного просмотра слайд-шоу сохраните документ и выберите «Файл» > «Просмотр фолио». Для перехода между слайдами используйте кнопки навигации. Затем закройте приложение Adobe Content Viewer.

Создание наложения «Панорама»

Для создания панорамы требуется шесть изображений, каждое из которых представляет собой сторону куба.

  1. Откройте файл Enjoy_v.indd и перейдите к странице 3.

  2. Выберите инструмент «Прямоугольный фрейм» в панели инструментов и перетащите его, чтобы создать прямоугольник любого размера.

  3. В палитре Overlay Creator выберите пункт «Панорама».

  4. Щелкните папку с исходными файлами и в папке CityGuide_Folio > Enjoy_Article > Links выберите папку CourtyardPano. Нажмите кнопку «Открыть».

    Замещающий прямоугольник принимает форму панорамных изображений, но нам требуется уменьшить размер области для нажатий мышью.

  5. Удерживая Ctrl+Shift (Windows) или Command+Shift (Mac OS), перетащите маркер выделения, чтобы изменить размер объекта «Панорама» примерно до 400x400 пикселов.

    Создание наложения «Панорама»

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

  6. Скопируйте объект панорамы из файла Enjoy_v.indd и вставьте ее на страницу 3 файла Enjoy_h.indd.

  7. Сохраните и закройте файлы InDesign.

Предварительный просмотр фолио на устройстве iPad (только для Mac OS)

Далее будет использоваться функция «Просмотр на устройстве» для просмотра фолио. При использовании компьютера с ОС Windows перейдите к следующему шагу, чтобы узнать, как просмотреть фолио, используя операцию выгрузки и загрузки файлов.

  1. Если это еще не сделано, установите приложение Adobe Content Viewer из интернет-магазина App Store на iPad. В интернет-магазине App Store найдите приложение Content Viewer.

  2. Подключите устройство iPad к компьютеру под управлением Mac OS и запустите приложение Adobe Content Viewer.

  3. В палитре Folio Builder перейдите к только что созданному фолио City Guide.

  4. В нижней части палитры выберите «Просмотр» > «Просмотр на [имя устройства iPad]».

  5. Просмотрите фолио City Guide Magazine.

    • Поворачивайте устройство iPad, чтобы просмотреть и горизонтальную, и вертикальную версии файла.

    • Переходите от одной статьи к другой, перелистывая их пальцем влево и вправо. Читайте статью, перелистывая ее пальцем вверх и вниз.

    • Перейдите к статье Enjoy. Убедитесь, что интерактивные наложения работают.

    • Нажмите на неинтерактивную область для отображения панели навигации и нажмите на кнопку «Главная» для перехода к началу фолио. Нажмите кнопку «Оглавление» в левом верхнем углу для просмотра оглавления и миниатюр. Перетащите полосу прокрутки для просмотра изображений предварительного просмотра статей.

    Нажмите для отображения панелей навигации в Adobe Content Viewer

Отправка и предварительный просмотр файлов

Также можно просматривать фолио на устройстве iPad, войдя в палитру Folio Builder, отправив и затем загрузив фолио.

  1. В меню палитры Folio Builder выберите «Вход». Затем выполните вход с помощью идентификатора Adobe ID, утвержденного для работы с DPS.

    При наличии статуса участника Creative Cloud используйте учетные данные Creative Cloud. При отсутствии статуса участника Creative Cloud выполните вход в систему http://digitalpublishing.acrobat.com и следуйте инструкциям по проверке учетной записи.

  2. После входа выберите фолио City Guide в палитре, затем выберите «Отправить в Folio Producer» в меню палитры.

    Ресурсы фолио отправляются на сервер acrobat.com.

  3. Если это еще не сделано, установите на устройство iPad приложение Adobe Content Viewer из интернет-магазина App Store.

    Примечание.

    При наличии другого мобильного устройства, например планшета Android или Kindle Fire, приложение Adobe Content Viewer можно загрузить из интернет-магазина Google Play или Amazon Appstore.

  4. Запустите приложение Adobe Content Viewer на устройстве iPad.

  5. Если вы еще не вошли в систему, нажмите на кнопку «Вход». Выполните вход с использованием идентификатора Adobe ID, который вы указывали при входе в палитру Folio Builder.

    Чтобы можно было войти в систему, устройство iPad должно быть подключено к сети Интернет.

  6. После появления соответствующей подсказки загрузите и откройте фолио City Guide Magazine.

    При изменении исходных документов InDesign выберите статью и выберите «Обновить» в меню палитры для обновления статей. В Adobe Content Viewer на iPad отобразится предложение загрузить обновленное фолио.

Следующие шаги

Вы изучили основы о создании статей и фолио и добавлении интерактивных наложений. Для получения дополнительных сведений о наложениях и других функциях DPS выполните любое из следующих действий:

  • Откройте исходные документы в Overlay_Examples_Folio и поэкспериментируйте с разными ресурсами наложений. Можно отредактировать существующие наложения в документах или создать собственные наложения.

  • Загрузите бесплатное приложение DPS Tips. Выполните поиск «DPS Tips» в App Store на iPad или iPhone, либо выполните поиск в Google Play Store для устройств на базе Android, или Amazon Appstore для Kindle Fire.

  • Опубликовать приложение в Apple App Store? При наличии подписки Adobe Creative Cloud можно создавать и отправлять неограниченное количество приложений для одного фолио для iPad. Кроме того, можно приобрести лицензию Single Edition для создания приложения для одного фолио. Если потребуется создать приложение, выберите фолио в палитре Folio Builder, затем выберите «Создать приложение» в меню палитры. Будет предложено загрузить пошаговое руководство по публикации. Чтобы создать свое первое приложение, следуйте инструкциям в этом руководстве.

  • Если требуется создавать приложения для нескольких фолио, можно получить подписку версии Professional или Enterprise на Digital Publishing Suite.

Логотип Adobe

Вход в учетную запись

Ссылки быстрого перехода

Просмотреть все свои планы Управление планами

Правовые уведомления    |    Политика конфиденциальности в сети Интернет