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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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