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

Что-то подобное происходит и с книгами. Все меньше остается таких людей, которые читают бумажные книги. Гораздо проще читать электронные книги, которые значительно дешевле бумажных или же и вовсе доступны для бесплатного скачивания.

Если вы принадлежите к представителям старой школы и читаете бумажные книги, подписываетесь на газеты и просматриваете сайты любимых изданий в интернете, возможно, для вас привычней было бы, чтобы любимый проект был в удобной и более знакомой вам форме. PageFlip (перелистывание страниц) эффект - имитация книг. Ниже вам будут представлены некоторые уроки, плагины и примеры с использованием эффекта PageFlip. Итак, давайте разберемся с некоторыми плагинами.

Плагины

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

Этот плагин позволит вам встраивать публикации, созданные с помощью FlippingBook Publisher и FlippingBook Online, одним шагом без внесения изменений в код.

Easy Flip Flip – это плагин, с которым вы сможете создать виртуальный журнал в несколько кликов.

3D FlipBook – это программа просмотра PDF или WordPress плагин, который позволяет просматривать изображения, PDF-файлы или HTML-файлы в виде перелистывания.

***

A Page Flip Book для WordPress – это самый простой способ управлять виртуальными 3D-книгами, которые вы можете просматривать с помощью мыши.
Вы также можете выбрать фоновое изображение или текстуру, если вам это нужно.

Photo Book Gallery позволяет создавать адаптивные флип-книги из изображений. Вы можете настроить свои книги с помощью набора параметров. Плагин прост в использовании и отлично работает на мобильных устройствах.

GoWorks Flip Clock отображает на ваших страницах и сообщениях элегантные ретро-флип-часы. Плагин идеально подходит для привлечения внимания к важной информации, имеет привлекательный визуальный эффект.

Учебник о том, как создать полноэкранный макет PageFlip с использованием BookBlock. Идея состоит в том, что доступ к контенту сайта в виде книги осуществляется через выдвигающуюся боковую панель меню.

Учебник представляет чистый CSS и рамку 3D Page Flipping.

Преобразовать можно с помощью специального кода:

1

2
1. Page 1
3
2. Page 2
4
3. Page 3
5

В настоящий момент Page Flip с использованием анимации CSS3 работает в Safari и iPhone.

Этот урок проведет вас через весь процесс создания собственного эффекта перелистывания страниц с помощью JavaScript.

Джо Ламберт проведет вас через процесс создания потрясающего эффекта оформления страниц сайта с галереей изображений.

В этом уроке вы узнаете, как создать круг с ручкой, которая открывается при нажатии на нее, создавать реалистичные 3D-эффекты и перелистывать страницы с помощью CSS 3D преобразований и теней.

type="text/javascript">yandex_partner_id = 66431;yandex_site_bg_color = "FFFFFF";yandex_ad_format = "direct";yandex_font_size = 1;yandex_direct_type = "horizontal";yandex_direct_border_type = "block";yandex_direct_limit = 2;yandex_direct_title_font_size = 3;yandex_direct_header_bg_color = "FEEAC7";yandex_direct_bg_color = "FFF9F0";yandex_direct_border_color = "FBE5C0";yandex_direct_title_color = "0000CC";yandex_direct_url_color = "006600";yandex_direct_text_color = "000000";yandex_direct_hover_color = "CC0000";yandex_direct_favicon = true;yandex_no_sitelinks = false;document.write(" ");

в фотошопе

Вы все, наверное, видели эффект перелистывания страниц альбома, журнала. Такого эффекта можно добиться во многих программах – Adobe After Effects, Sony Vegas, других программах видеомонтажа. Есть и специализированные программы, заточенные под этот эффект – например, FlipBook Maker.

Давайте сделаем подобный эффект перелистывания страниц в нашей любимой программе фотошоп.

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

К примеру, я в своей работе использовал 8 фотографий (4 разворота) и на выходе получил GIF-файл весом 8,63 МБ при исходных размерах (1200х1000 пикс.).

При уменьшении размера картинки до 350х292 пикс. удалось снизить вес до приемлемых 291 КБ, хотя требования этого сайта – файлы не более 80 КБ. Именно по этой причине здесь представлен файл не лучшего качества.

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

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

Приступим. Создайте новый документ (Ctrl+N) размерами 1200х1000 пикс. Поскольку демонстрировать гифку можно только на экране и в интернете, то разрешение файла достаточно 72 пикс/дюйм.

Перенесите на документ какой-либо из фонов (можете использовать из тех, что я приложил в конце урока). Инструментом перемещения расположите его так, как показано ниже. Оставьте сверху не менее 200 пикс. свободными для листания страниц, остальные поля одинаковые.

Щёлкните дважды по строке слоя, вызвав окно стилей слоя (или на значок «fx» внизу палитры слоёв). Применим к слою стили тиснение и тень:

Создайте новый слой, назовите его «стр.лев.» и поместите на нём шаблон, оставив со всех сторон одинаковые расстояния от краёв фона (используйте свободное трансформирование Ctrl+T)

Скопируйте слой (Ctrl+J), вызовите свободное трансформирование (Ctrl+T) > отразить по горизонтали. Переместите повёрнутый шаблон вправо, назовите слой «стр.пр.». Для удобства используйте направляющие.

Скопируйте стиль слоя с фона и вклейте его в слои с шаблонами (щелчок ПКМ по слою с фоном – «Скопировать стиль слоя» и также «Вклеить стиль слоя» на слое со страницей). Можно подкорректировать настройки по своему усмотрению.

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

Создайте поверх всех слоёв новый (Shift+Ctrl+N) слой - «дырки». Разместите направляющие посередине внутренних полей рамки шаблона, как показано на скриншоте.

Закройте на время видимость слоёв со страницами (нажмите на глазик). Берём инструмент кисть круглую, жёсткую, цвет чёрный. Настройте интервал рисования (F5 > Форма отпечатка кисти > Интервал) – я подобрал его в пределах 450%.

Зажав клавишу Shift, нарисуйте вертикальный ряд отверстий (по четыре хватит) на обоих полях страниц на слое «дырки». Зажав клавишу Ctrl, щёлкните по иконке этого слоя, загрузив выделение.

Перейдите на слой со страницей шаблона и нажмите клавишу Delete, снимите выделение. Проделайте тоже и со второй страницей шаблона. Слой «дырки» отключите, можно и вовсе удалить.

Создайте новый слой поверх всех (назовите «дуги»). Инструментом выделения овальная область, нарисуйте овал, как показано ниже. Щёлкните внутри овала ПКМ и выберите «Выполнить обводку». Цвет обводки – светло-серый, ширина – 10 пикселей.

Инструментом прямоугольного выделения выделите нижнюю часть овала и нажмите «Delete».

Щёлкните ПКМ по слою и выберите «Вклеить стиль слоя». Снимите выделение.

Скопируйте слой «дуга» три раза (Ctrl+J) и перетащите на каждый из них дуги в соответствии с отверстиями. Это удобно делать клавишей стрелка вниз при зажатой клавишей Shift (сдвигает на 10 пикс.).

Объедините слои с дугами и дырками в группу - «Дуги»

Настало время заняться фотографиями. Сделайте это раздельно для правой и левой стороны. Откройте в фотошопе фотографии, которые будут размещены на левой стороне альбома. Переместите их по одной в наш документ. Это удобно делать горячими клавишами. Открываете фотографию, нажимаете «Ctrl+A» (выделить всё), затем «Ctrl+C» (скопировать). Переходите на вкладку с альбомом, встаёте на слой «стр. лев.» и жмёте «Ctrl+V» (вставить). Так со всеми фотографиями. Объедините их в группу «Левые стр.».

Подготовим маску для левого шаблона. Отключите видимость слоёв с фотографиями. Перейдите на слой со страницей шаблона и инструментом выделения «Волшебная палочка» выделите всю внутреннюю часть рамки. Не забудьте про уголок внизу. Настройки инструмента:

Внутри выделения нажмите ПКМ и выберите «Сохранить выделенную область». В открывшемся окне выбираем канал – новый и даём имя каналу «Левые». Теперь наше выделение можно загрузить в любой момент, перейдя во вкладку «Каналы».

Дольше всё просто. Переходите на слой с первой фотографией, инструментом перемещения выровняйте фотографию по рамке (для удобства снизьте на время непрозрачность слоя). Перейдите во вкладку «Каналы», где внизу увидите слой с новым каналом «левая». Щёлкните по иконке этого слоя с зажатой клавишей Ctrl. Загрузится сохранённое нами выделение.

Перейдите обратно на слой с Вашей фотографией и добавьте ему маску слоя (значок внизу палитры слоёв)

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

Проделываем эти операции для правой половины альбома.

Вот как выглядит панель слоёв на данном этапе:

Для дальнейшей работы необходимо объединить слои "фото + маска" со страницей шаблона. Делаем дубликат слоя с шаблоном страницы, выделяем копию слоя «стр.лев.» и слой «Лев-1» (щёлкните по этим слоям с зажатой клавишей Ctrl) и щелчком ПКМ выбираете «Объединить слои». Таким же образом поступаете со всеми слоями с Вашими фотографиями, объединив их по очереди с копиями слоя шаблона страницы.

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

Начнём с верхнего слоя правой половины – слой «Пр-3». Создайте две копии слоя. Встаньте на верхний слой «Пр-3 копия 2», нажмите сочетание клавиш Ctrl+T и, кликнув ПКМ, выберите «Искажение» (либо в меню «Редактирование > Трансформирование > Искажение»). Подведите курсор (инструмент перемещения) к среднему правому маркеру и тяните его вверх так, чтобы верхний угол страницы дошёл до верхнего края документа. Затем перемещайте влево, как на скриншоте. Обязательно следите за тем, чтобы левый край страницы оставался на месте.

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

Проделываем эти действия со всеми страницами правой и левой половины альбома. На левой стороне страницы поворачиваем соответственно в другую сторону.

Теперь приступим непосредственно к анимации.

Правда, в процессе подготовки урока, я сам увидел свою ошибку и исправил её. Но весь урок переделывать не стал – для этого пришлось бы начинать его сначала. Коррективы я внёс незначительные, так что Вы разберётесь.

Дело в том, что первоначально я разместил на каждой половине альбома по три фотографии. Но, вот незадача, в таком варианте не получается правильно зациклить анимацию - какая-либо фотография будет при этом повторяться дважды (здесь просто, чистая математика). Так что, имейте ввиду, что надо размещать чётное количество фото. В общем, я добавил ещё по одной фотографии на сторону.

Итак, на данный момент у нас в каждой группе половинок альбома располагается по 12 слоёв (4 фото + по две копии каждой). На время отключите видимость всех слоёв в обеих группах правых и левых страниц.

Переходим в меню «Окно» и включаем «Шкала времени» (в старых версиях фотошопа – «Анимация»). Если у Вас открылась шкала времени в виде шкалы времени видео, как показано ниже, то нажмите на значок в нижнем левом углу.

Или значок в верхнем правом углу окна. В этом случае выбираем в выпадающем окне:

Окно должно иметь вид:

Включаем видимость слоёв первого кадра – в группе слоёв «Левые стр.» выбираем нижнюю фотографию – слой «Лев-1», а в в группе «Правые стр.» - верхнюю, слой «Пр-4» (смотрите в моём PSD-файле).

Включаем видимость слоёв для второго кадра. В левой части оставляем без изменений, а в правой меняем на следующий слой «Пр-4 копия», т.е. приподнимает страницу чуть выше. У нас приоткрывается страница, которая должна лежать следующей в альбоме – включаем видимость слоя «Пр-3».

Третий кадр – приподнимает страницу выше, т.е. включаем видимость слоя «Пр-4 копия 2» и выключаем слой «Пр-4 копия».

Четвёртый кадр – переворачиваем страницу. Теперь на ней должна быть видна следующая фотография из группы левых фото, т.е. открываем слой с фото левая-2, но самую приподнятую – «Лев-2 копия 2». Видимость правой поднятой страницы закрываем.

Пятый кадр – опускаем страницу ниже – слой «Лев-2 копия».

Шестой кадр – кладём страницу – слой «Лев-2», а предыдущий слой Лев-1 отключаем.

Так по порядку «листаем» все страницы от кадра к кадру. Есть только ещё один нюанс.

Когда мы с Вами пролистали все фотографии, то чтобы зациклить анимацию, мы должны под последнюю фотографию (Пр-1) подложить ту, которая была первой. Но она лежит у нас в самых верхних слоях (Пр-4), перекрывая нижележащие и поэтому мы получим такую картинку:

Чтобы избавиться от этого, делаем копию слоя Пр-4 (я назвал её «Пр-4 копия низ) и переносим её в самый низ группы «Правые стр.».

Тоже происходит и с левой половиной – слой «Лев.-4» перекрывает слой «Лев-1 копия 2». Сделайте копию слоя лев.-4, я назвал его «Лев-4 копия низ» и перенесите вниз группы левых фотографий. Только не забывайте отключать видимость слоёв, не задействованных в данном кадре.

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

Итого у меня на восемь фотографий получилось 20 кадров. Последний, 21-й кадр у Вас будет дублировать первый, поэтому его просто удалите.

Теперь разберёмся со временем просмотра каждого кадра. Изменить его можно под иконкой кадра, нажав на цифры со стрелочкой. Из выпадающего списка выбираете нужное время или «Другое…» и вписываете свои значения.

Я выставил следующие значения времени.

Для ключевых кадров, где фотографии полностью открыты, поставил 0,5 сек., для остальных – 0,2 сек. Чтобы не мучиться с каждым кадром - выберите нужные с зажатой клавишей Ctrl и измените время на одном, остальные тоже изменятся.

Остался последний штрих – выберите периодичность проигрывания анимации «Постоянно» в окошке внизу шкалы времени.

Нажмите кнопку «Пуск (Play)» и наслаждайтесь работой, либо помучайтесь ещё пару часов над поиском ошибок. Надеюсь, что после моих объяснений у Вас получится с первого раза.

Потерпите, осталось немного. Сохранить надо в формате GIF, а сделать это можно через меню «Файл > Экспортировать > Сохранить для Web» (в старых версиях фотошопа – просто «Сохранить для Web» или проще – комбинация клавиш Shift+Ctrl+Alt+S.

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

Можете сильно и не углубляться в теорию (хотя это и полезно), просто поиграйте с настройками и сравните соотношение размера и качества файла. Размеры можно изменить в нижней части окна справа.

Изменяя параметры настроек и размеры, обратите внимание, как меняется размер (вес) файла. Если при оригинальных размерах 1200х1000 пикс. он составляет аж 8,63 МБ, то при размере 350х292 пикс и параметрах чуть похуже – уже 291 КБ. Если Вы планируете размещать гифку на своём сайте, блоге или в соц. сетях, то учитывайте это – чем больше вес файла, тем дольше он будет загружаться в браузере, особенно при медленном интернете. Иначе посетители Вашего сайта могут просто не дождаться открытия Вашего таланта.

Масштаб просмотра – внизу слева, там же можно указать браузер, который Вы используете, и посмотреть, как это будет выглядеть в окне браузера.

В приложении к уроку Вы найдёте, кроме файлов PSD и готовых файлов GIF, ещё и папку с фонами, которые можете использовать в работе. Свои исходные фотографии прилагать не стал – ведь Вы будете использовать свои.

В этом уроке мы рассмотрели как сделать эффект перелистывания страниц средствами фотошопа, оптимизировать и сохранить созданную гифку для размещения на ресурсах интернета.

На этом – спасибо за внимание и терпение.

Удачных Вам творческих работ.

Скачать урок в формате PDF и исходник к нему:

Чтобы получить интересные уроки на свой адрес,

введите свои данные в форму подписки ниже:

Сodrops — это самый лучший блог по веб дизайну. На нём всегда можно найти много самых креативных вещей для веб дизайнера. Огромным плюсом является то, что ещё и рассказывают как прикрепить или сделать тот или иной эффект. Он очень популярен за рубежом, но почему то не столь сильно в русском интернете. В общем очень полезный сайт для дизайнера, там можно получить кучу вдохновения и много чему научиться, так как там действительно продвинутые CSS уроки.

Сегодня я Вам хочу представить 15 классных уроков с этого чудо сайта. Всё «фишки» совершенно бесплатны и Вы их с лёгкостью сможете скачать. Ну а сейчас давайте подробнее.

Так же Вам будут интересно вот это:

Динамическая сетка с красивой анимацией

Это отличное решение для расположения Ваших блоков на сайте, так же эту сетку можно с лёгкостью использовать для изображений. Сделана эта сетка на чистом CSS.

Как сделать классные эффекты для картинок при наведении на CSS

В этом уроке рассказано как сделать супер эффекты при наведении на изображении. В примере есть целых 7 совершенно разных примеров, а так же инструкция, как сделать данное чудо на CSS.

Отличные кнопки с красивым эффектом на CSS

Множество примеров CSS кнопок с замечательным эффектом при наведении, эти кнопки по желанию можно изменить под Ваш вкус.

Как сделать пианино

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

Красивый эффект при наведении для иконок

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

Эффектное перелистывание для блока

Тут Вы узнаете как сделать с помощью CSS эффектное перелистывание для блока. Так же присутствует целых совершенно разных 5 примеров.

Крутые примеры использования CSS анимации

Здесь 4 примера, которые подробно показывают на что способна CSS анимация.

Необычная форма поиска

Например я такого ещё не видел, например, Вы хотите поесть в ресторане, соответственно Вы ищете желаемый ресторан в Гугле, вписываю в поле поиска желаемое место. А теперь посмотрите как это можно реализовать на много креативней и удобней.

Как показать разные изображения для разных устройств

Тут Вы узнаете как реализовать показ разных картинок, в зависимости от того на каком устройстве просматривают Ваш ресурс.

Делаем адаптивное меню с поддержкой Ретина дисплеев

Отличный урок, в котором Вы узнаете как сделать красивое и адаптивное меню на CSS с поддержкой Ретина экранов.

Несколько CSS эффектов перелистывания для страниц

Красивые эффекты, с помощью которых можно реализовать полноэкранное перелистывание страниц

Анимация - Перелистывание страниц

Для урока вам понадобиться изображение книги или альбома. В инете много таких картинок.
Итак - картинка найдена - открываем ее в фотошопе. Разблокируем слой - удалим замочек со слоя - двойной клик по замочку и в открывшемся окошке - нажмите Ок, либо просто мышкой перетащите замочек в корзинку
Выделям с помощью инструмента Лассо правую часть книги и копируем ее на новый слой (после выделения поставьте курсор на картинку - правой клавищей мышки - команда - скопировать на новый слой)

Создаем несколько слоев, новый слой активный - нажать комбинацию клавиш Ctrl+J. Для урока я создала 4 новых слоя - для более качественной и интересной анимации - слоев должно быть больше, но для того, чтобы понять - как такую анимацию создать - их хватит.

Закрываем глазки во всех слоях, кроме Основного и Слоя-1. Слой -1 активный - с ним и будем работать. Нажмите на клавиши Ctrl+T (мы вызвали инструмент - Свободное трансформирование) - вокруг картинки появился прямоугольник, с центром в середине. Вот этот центр мышкой передвиньте на середину левой стороны квадрата - относительно этой точки и мы будем переворачивать нашу страничку

Правую сторону мы начнем сжимать - подвиньте мышкой

Но странички, перелистываясь, слегка "играют". Чтобы придать более естественный вид, мы сейчас со страничкой поработаем. Не снимая выделения - Свободное трансформирование, щелкните правой мышкой по рисунку в фотошопе и выберите функцию -Искажение

И немного исказим лист, приподняв нижний и верхний правые углы

Переходим на слой - Слой -2. Коомбинацией клавиш Ctrl+T, вызываем Свободное трансформирование, сжимаеи лист еще больше, искажаеи его - вот так должно все выглядеть, под вторым слоем я отставила включеным для вас Слой -1, чтобы вы видели, насколько стоит сжимать и искажать


Помимо функции - Исказить, можно еще задействовать функйию - Деформация, она даст вам возможность деформировать саму плоскость листочка, страница легкая, она может выгинаться от дуновения ветра, если он листает или от руки человека, но это вы уже сами попробуйте - по эксперементируйте и посмотрите на получные результаты.
Переходим с слою Слой -3. Вызываем клавишами функцию свободное трансформирование, не забываем переставить центр на середину той плоскости, относительно которой мы вращаем (перелистываем) наш листок книги, сжимаем его и искажаем.


Переходим на слой - Слой -4 - сжимаем его, искажаем


Осталось собрать анимацию. Открываем анимационную панкб - Окно - и поставвть галочку на Анимация.

Первый кадр - у нас глазок включен на Основном слое, с которым мы не работали. выставим задержку в 0,2 секунды


Создаем дубликат кадра


Второй кадр - включен основной слой и Слой -1
Третий кадр - включен основной слой и Слой -2
Четвертый кадр - включен основной слой и Слой -3
Пятый кадр - включен основной слой и Слой -4
Шестой кадр - включен только основной слой

Смотрим, что у нас получилось


Это основа. Как видите - все довольно просто. Здесь одна картинка. После того, как вы поймете саму суть, то сможите делать более сложную анимацию и, перелистывать странички, на которых будут разные изображения, т.е. будет идти просмотр книги, альбома.

Удачи всем!

Интересным усовершенствованием гипертекстового pdf-документа может стать добавление в него эффекта перелистывания страниц. Кроме этого в документ можно интегрировать элементы мультмедиа: вставить изображения, добавить звук и видео.

Где и для чего может пригодиться такая игрушка - мультимедийный документ? Наверное, в первую очередь при создании презентаций. Оригинальные дополнительные эффекты украсят слайд-шоу и добавят информативности материалам. Эксклюзивным подарком или архивом будет фотоальбом с перелистыванием, музыкальным сопровождением и голосовыми комментариями. Также, такие мультимедийные привлекательные 3D-документы и книги используются как обучающие ресурсы способствующие лучшему усвоению материала.

Опробуем некоторые инструменты для конструирования этих замечательных инфопродуктов.

Популярным десктопным приложением является программа Flip Builder. Скачиваем этот конструктор для перелистывания pdf-документов с официального сайта разработчика. Открываем главную страницу адресом: flipbuilder.com и кликом по флагу РФ русифицируем ее. Нажимаем кнопку "Узнать подробнее", переходим на страницу загрузки и кнопкой "Скачать" начинаем процесс скачивания. По завершении загрузки распаковываем zip-архив и запускаем установочный файл: flip-pdf-pro.exe

Проходим по шагам мастера установки и в заключительном окне нажимаем кнопку "Попробовать". После этого открывается интерфейс приложения и начинаем работать.

Нажимаем зеленую кнопку "Создать новый". Появляется окно "Импортировать PDF", в котором кнопкой "Просмотр" открываем проводник и выбираем на компьютере подготовленный к преобразованию pdf-файл. Затем нажимаем кнопку "Ипортировать сейчас":

Через некоторое время документ открывается в приложении и готов к перелистыванию. Теперь можно заняться редактированием и добавить в него дополнительные элементы.

Сначала для оформления документа потренируемся с шаблонами. Шаблоны, как указано в комментариях к ним, отличаются не только внешним видом, но и функциями:

Выбрав подходящий шаблон развернем меню его настроек. Изменяя значения элементов в списке можно поднастроить режимы отображения панелей, кнопок управления и многое другое:

Закончили с шаблоном и переходим в раздел редактирования.

Далее, для примера, я подробно покажу как делал мультимедийную брошюру - небольшой исторический экскурс по родному краю. Написал книгу про Алматы. Написал, это конечно, громко сказано. Накопипастил из разных источников описания важных, на мой взгляд, событий из истории города. По необходимости отредактировал их и расположил в хронологическом порядке. Проиллюстрировал содержание подходящими картинками. Все эти операции я проделал в ворде. После этого пронумеровал страницы начиная с третьей и создал интерактивное оглавление, как было описано в уроке: гиперссылка в ворде . Затем сохранил документ из ворда в формат PDF.

Для озвучивания я предварительно подготовил для каждой страницы аудиофайлы в формате mp3 - объединял текстовые дорожки с фоновыми треками. Микширование звука я производил приложением Audacity. Скачать последнюю версию программы можно с официального сайта разработчиков по адресу: http://www.audacityteam.org

Подключив аудио-гарнитуру можно с микрофона записывать звук в редактор напрямую - создавать голосовой трек или импортировать заранее подготовленные аудиофайлы. Легкая в освоении, интуитивно понятная программа, где каждый инструмент имеет всплывающую подсказку. При установке выбираем русский язык. Готовый аудио-проект экспортируем и сохраняем в файл формата mp3.

Вернемся к конструктору Flip PDF Professional.

В редакторе флип-страниц этой программы кнопкой "more" развернем список дополнительных элементов и выберем отдел "Добавить звуковой проигрыватель":

Появится окно "Sound Type" - тип плейера, где выберем вид проигрывателя, после чего вставим его на открытую страницу документа:

Теперь, в правой трети окна редактора нажав кнопку "Выбрать звуки" пройдем в проводник, найдем на компьютере заранее подготовленный для этой страницы аудиофайл и откроем его:

В этом же разделе настроим режимы работы плейера. Запуск воспроизведения я назначил при щелчке по проигрывателю, чтобы у читателя был выбор: читать самому или слушать. А выключение звука выбрал при выходе со страницы:

Также в этом окне можно подредактировать обложку плейера.

Таким образом устанавливаем проигрыватели с соответствующими аудиофайлами на все выбранные для озвучивания страницы документа. Закончив редактирование сохраняем изменения кнопкой "Сохранить и выйти", которая находится в правом верхнем углу.

Для публикации готового мультимедийного документа кнопкой "Конвертировать" откроем список предлагаемых форматов и выберем подходящий:

Скачать в архиве и посмотреть интерактивную брошюру в этом формате можно по ссылке: .

Как стимул к приобретению своего продукта разработчики флип-билдера применили водяной знак. Действительно, такое клеймо в центре каждой страницы документа делает его непригодным для демонстрации или распространения:

Но зато, в демо-приложении этого конструктора нет ограничений по объему документа, в отличие от аналогичной программы FlippingBook, например, где в пробную версию загружается только десять страниц.

В этом небольшом обзоре показан пример образования несложного мультимедийного документа с навигацией и аудиосопровождением. Используя и другие возможности редактирования можно создавать в конструкторе еще более интересные и эффектные проекты.