Первая страница

Flip PDF

конвертор PDF в HTML5
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы

О программе

Flip PDF – мощный инструмент для создания из любого PDF документа веб-приложения в виде книги, которую можно листать прямо на странице браузера. Также возможно создать исполняемый файл для десктопа. Сначала PDF или набор изображений конвертируется в формат проекта программы, потом публикуется в HTML5 или EXE. Между этими недолгими процедурами пользователь имеет возможность редактировать документ: составить закладки, добавить на страницы медиа (картинки, видео, аудио), добавить на страницы интерактив (кнопки, область зумирования, галерею изображений, викторину). Опубликованный проект выглядит как листалка книги с навигацией, содержанием, закладками, поиском по тексту.

Flip PDF

Импорт

Сделать проект можно из двух типов сырья – из обычного PDF и из набора растровых изображений. И в том, и в другом случае проект будет иметь вид книги/журнала со страницами, которые можно листать. В настройках возможно отключить функцию и звук листания и тогда проект будет иметь вид презентации со слайдами.

После запуска программы нажимайте кнопку [New Project]. Я буду исходить из английского интерфейса, хотя в параметрах программы можно перейти и на русский.

Затем выбрать HTML5 – это рекомендую настоятельно, потому что предлагаемая вторым выбором Flash уже не функционирует на современных компьютерах, современных операционных системах, в современных браузерах. Скажите "спасибо" усопшему Стиву Джобсу. После выбора HTML5 откроется основное окно импорта:

Flip PDF - импорт

Выбрав файл PDF или набор картинок программа создаст проект, файл с расширением flb – в нем будут храниться все страницы вашей книги, все объекты, которые вы добавите на страницу, все настройки проигрывателя страниц, все настройки самой программы. Это файл может много весить, если в вашем проекте много страниц. В окне создания проекта есть поле для выбора качества – чем качество изображений выше, тем вес файла проекта больше. Каждая ступень качества имеет также индивидуальные настройки. В процессе работы над проектом эти параметры можно перенастроить: Options > Preferences > Quality and Convertion. Качество - это размеры страниц в пикселах и степень сжатия JPEG.

В блоке расширенных настроек (Advanced Settings), первоначально скрытом, есть ряд полезных опций, таких как импорт закладок или автоматическое разрезание широких страниц, которые отсканированы с разворотом.

Теперь осталось нажать кнопку [Import Now] и немного подождать конвертации исходника в проект Flip PDF.

Настройка проигрывателя

После успешного импорта исходного материала в программу будет сразу доступна книга в том виде, в котором вы ее сможете получить после публикации. Она будет снабжена навигацией по страницам. Это листалка, или, выражаясь несколько приличнее – проигрыватель. Его можно настраивать. Во-первых, выбрать шаблон – они выбираются в левой панели на закладке Design Settings. По умолчанию выбран дизайн H5 metro. Название дизайна написано на широкой кнопке, которую следует нажать для выбора другого дизайна. Откроется окно:

Flip PDF - шаблоны

Слева название дизайна, от которого зависит вид и расположение навигационной панели. Справа – выбор фона, который, впрочем, потом можно легко поменять уже на свой, в том числе на фон с анимационными эффектами.

Раз уж зашла речь о фоне проигрывателя, то на его примере покажу, где и как заниматься оформлением проигрывателя. Это делается на той же левой панели на той же закладке Design Settings (см. самый первый скриншот выше). Ниже больших кнопок есть древовидное содержание настроек. Открывая плюсиками ветки дерева искать нужную настройку муторно. Легче воспользоваться строкой поиска. Наберем backgr и нам откроются все ветки с таким контекстом. Нам нужен параметр Background Image File – в нем выберите изображение со своего диска.
Возможно, вы захотите сделать фон не с помощью цельной картинки, а с помощью небольшого паттерна, который должен быть размножен по всей площади. Ну, тогда надо очистить поле Search и углубиться в дерево настроек: Display Settings > Background Settings > Background Image File – это выбор паттерна. И в следующей настройке Background Position надо выбрать Tile.

Есть два принципиально разных режима перелистывания страниц: реалистичное перелистывание как в бумажной книге и скольжение слайдера. На верхней панели проигрывателя в программе есть кнопки [Flip] и [Slide], которые за эти режимы отвечают. В настройках есть набор параметров для юстировки этих режимов. Например, можно выбрать ось перелистывания – по горизонтали или вертикали (Flip Direction), выбрать количество листов на экране 1 или 2 (Page Display Mode), время перехода между страницами... Даже тип переплёта книги поддается регулированию (Book Binding Type), тень между страницами разворота (ветка Shadow Settings), а также визуализация толщины книги (Page Thickness Type), чтобы она не выглядела плоско как журнал.

После выбора нового фонового изображения пользователь ожидает его увидеть в проигрывателе, но неопытный пользователь будет разочарован, не увидев его. Дело в том, что после таких вот изменений внешнего вида надо эти изменения применить, перезагрузив проигрыватель. Это делается по кнопке [Applay Changes] на главой панели инструментов вверху. Эта кнопка, кстати, мигает красным, если изменения требуются.

По кнопке [Language] можно поменять или добавить язык проигрывателя, что скажется на текстовых подсказках, которые возникают при наведении мыши на кнопки проигрывателя.

В этих настройках сразу рекомендую изменить логотип на свой – в поле поиска наберите logo и измените параметр Logo Image.

Если кого-то раздражает звук перелистывания страниц, то его можно просто отключить в настройка или уменьшить громкость – задайте поиск sound. Имейте в виду, что при отключении звука в настройках, кнопка звука будет убрана из проигрывателя и зритель/читатель вашей книги его не сможет включить. Если же звук выставлен в yes, то кнопка звука у читателя есть и он может звук отключить сам.

Редактирование страниц

Есть довольно много интересного, чем вы можете порадовать читателей свой веб-книги. Чтобы приступить к редактированию страниц надо нажать кнопку [Edit Pages] на главной панели инструментов. Откроется редактор:

Flip PDF - редактор страниц

Здесь можно проводить манипуляции со страницами: добавлять, заменять, перемещать, удалять.
Здесь можно добавлять на страницу объекты: видео, аудио, изображения, слайдер изображений, текст, фигуры, область клика (Hotspot), кнопку, область зумирования, область подсказки. Можно также добавить объекты для поддержания вашей коммерческой деятельности, например, ссылку на PayPal, с помощью которого зритель вам может за что-то заплатить.

Что интересного скрыто под капотом. Оказывается вы можете организовать для ваших читателей интерактивную викторину. Для этого добавьте на страницу Hotspot. Выберите его внешний вид. Ниже окна с внешним видом настройте подсказку, которая будет возникать при наведении курсора мыши на объект. Для создания самой викторины совершите двойной клик на странице по Hotspot. Откроется окно с выбором, по какому событию и что будет происходить. Выберите событие Mouse Downn и действие Open Quiz. В открывшемся окне викторин можете добавлять вопросы, варианты ответов, выбирать правильный ответ, давать комментарий для правильного и неправильных ответов, добавлять картинку-иллюстрацию к вопросу. На один Hotspot можно навесить не один вопрос.

Для читателя это будет выглядеть так, что при клике на Hotspot откроется окно с вопросом и ответами, читатель выбирает ответ, программа ему говорит верно или нет и начисляет балл за правильный ответ, читатель переходит к следующему вопросу… В конце викторины подводится итог с указанием процента правильных ответов.

Экспорт

Когда вы насладитесь редактированием страниц и посчитаете, что ваш проект готов предстать перед широкой публикой, нажимайте на кнопку [Publish] на главной панели инструментов. Откроется окно настройки экспорта:

Flip PDF - экспорт

Мне лично интересен формат html (выбирается слева), потому что у меня есть сайт и я могу на нем опубликовать книгу. В настройках вывода ничего сложного, только повторю заклинание выбора HTML5 Only, потому что нет смысла связываться SWF, так как, Flash уже почти нигде не отображается.

Результат экспорта в HTML открывается в любом браузере двойным кликом по html-файлу в корне экспортируемой папки. Верстка адаптивная, то есть, при изменении размеров экрана размеры книги также будут пропорционально изменяться. Более того, если вашу книгу кто-то откроет на мобильном телефоне с вертикальной ориентацией экрана, то книга будет показана не с двумя страницами разворота, а с одной страницей, но возможность красиво листать страницы останется.

Если у кого сайт на Wordpress, Joomla или Drupal, то вы можете опубликовать проект в виде плагина для одной их этих CMS. Ну, а если у вас нет своего сайта, то проект можно опубликовать в виде приложения Windows (расширение exe) или Mac (расширение app).

Пример

В качестве примера того, как будет выглядеть книга на страницах интернета после ее конвертации из PDF в программе Flip PDF, посмотрите мою книжку для семейного чтения. Я ее сократил до 206 страниц, чтобы не сильно напрягать читателя. В ней пощелкайте на закладках (это ушки, которые выпирают из страниц по бокам) – увидите как работает зумирование и озвучка текста, ссылки из содержания.
Содержание доступно в двух местах – на страницах книги и в панели, которая выплывает по кнопке . А по кнопке на экран выводится лента миниатюр. Язык интерфейса проигрывателя меняется по кнопке . По кнопке [T] можно выделить текст и скопировать его в буфер обмена. Есть контекстный поиск по книге вверху справа и поиск по заголовкам содержания на панели содержания.

Рекомендую развернуть книгу на весь экран:

В проигрывателе читатель может листать страницы четырьмя разными способами:

  1. С помощью кнопок навигационной панели (следующая/предыдущая, вперед/назад, начало/конец)
  2. С помощью кнопок слева и справа (следующая/предыдущая)
  3. С помощью клавиш-стрелок на клавиатуре (следующая/предыдущая)
  4. С помощью протягивания мыши вручную переворачивать страницы
Кроме того, если вы предусмотрели содержание и закладки (это не одно и то же), то они тоже облегчат быструю навигацию по книге.

Скачать, посмотреть

📥 Скачать Flip PDF. По ссылке вы найдет несколько вариантов на выбор - инсталлятор, репак, портабельная сборка.

📺 Видео 1. Автор ролика умирающим русским голосом 25 минут рассказывает и показывает как в программе сделать музыкальную книгу.
📺 Видео 2. Автор ролика на английском за 7 минут пробегается по интерфейсу программы и показывает как в ней работать на базовом уровне.


Ещё обзоры для вебмастеров, расширяющие их технологический кругозор:
Памятка начинающему вебмастеру
Amazing Slider – программа для создания HTML5 слайдшоу, галерей, альбомов
Blumentals WeBuilder – удобнейший редактор кода с предпросмотром
Camtasia Studio – видеоредактор с экспортом в интерактивный HTML5 проигрыватель
GDevelop – игровой движок c редактором в вебе, на мобильных и ПК платформах
Google Web Designer – конструктор HTML5 баннеров и приложений
Hi Slider – программа для создания продвинутых jQuery слайдеров
Hippani Animator – удобная анимационная студия с экспортом в HTML, video, анимированный gif
Lunacy – для макетирования интернет-страниц
Moodle – практика администратора СДО
MediaWiki – как использовать для ведения и хранения документации
MediaWiki – как скачивать Wiki-страницы в PDF
MediaWiki – как подсвечивать синтаксис программного кода
Nicepage – конструктор сайтов и тем для CMS
Pinegrow – стильный визуальны конструктор сайтов
PowerPoint в HTML5 – обзор софта конвертации
RocketCake – лаконичный визуальный конструктор сайтов
Saola Animate – программа для быстрого и удобного создания анимации в HTML5
Scratch – визуальный язык программирования и редактор кода
Sozi – программа для создания стильных HTML5 презентаций с перелетами между слайдами
SVG – как сделать анимацию линии (имитацию рисования)
TimelineJS – библиотека для хронологических лент
TurboSite – лаконичный конструктор многостраничных сайтов
TurboWarp – продвинутый форк Scratch для создания HTML5 игр и приложений
WOW Slider – программа для создания красивых HTML5 слайдеров
WYSIWYG Web Builder – мощный визуальный конструктор сайтов
HTTP – коротко о протоколе
OpenAPI – спецификация, визуализация, инструментарий
Визуально-блочные среды программирования и моделирования – обзор
Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare
Что нужно знать об электронных платежах вебмастеру интернет-магазина
Как создать интерактивный кроссворд на сайте?
Как работать с Flash в современное время
Спецсимволы HTML – коды около 2000 дизайнерских иконок
Новости
От рекламы не скрыться
Как пройти в библиотеку
Реклама
Реклама 2
Стихокомментарии
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь
Поделки - видеоуроки от специалистов