Страницы перелистываются. Как я создавал электронную книгу с перелистыванием и что из этого получилось. Отличные кнопки с красивым эффектом на CSS

Flash-Альбом с эффектом перелистывания страниц

Недавно нашел в интернете одну замечательную программу для создания фотоальбомов. Причем не просто фотоальбомов, а Flash-альбомов, в которых присутствует эффект перелистывания страниц! Такой альбом можно выложить на Youtube в формате swf и на свой сайт, как html-страницу, можно создать из него файл-exe и т. д... Да что говорить, смотрите что получилось у меня, за каких-то 20 минут!

Flip Album - программа, которая модифицирует обычные фотографии в отличные flash-альбомы + эффект перелистывания страниц! Теперь Вы можете создавать замечательные онлайн-фотоальбомы из коллекции своих фото и изображений.

1. Запустив программу нажимаем "Background" (фон), выбираем "Select from Background..." - если будем использовать встроенный фон программы.

Если есть свой фон, выбираем "Select from your computer". И вставляем свое фот

2. Нажимаем "Photo" и добавляем нужную нам фотографию. Ее можно растягивать, уменьшать и поворачивать

3. Нажав на "Mask" выбираем какой-нибудь из эффектов обрамления.

4. Кликнув "Text" можно добавить подпись к фото, поставив галочку "Shadow" добавляем тень к тексту

Получаем первую готовую страницу.

5. Таким-же образом добавляем столько страниц, сколько нам надо. Далее нажимаем на "Publish

6. Попадаем в новое окно, под надписью "Templates" выбираем шаблон, в настройках (Options) можно поменять качество фотографий и т. д. Далее нажимаем "Convert To Flipping Book

7. В окне конвертации выбираем формат выходного файла, например EXE. Выбираем папку сохранения, название файла и нажимаем "Convert"

Вот в принципе и все...

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

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

Если вы принадлежите к представителям старой школы и читаете бумажные книги, подписываетесь на газеты и просматриваете сайты любимых изданий в интернете, возможно, для вас привычней было бы, чтобы любимый проект был в удобной и более знакомой вам форме. 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

Page 1

3

Page 2

4

Page 3

5

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

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

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

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

Преобразование веб-страниц сегодня стало намного проще с Adobe InDesign CS4.

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

Мы собираемся писать этот код как плагин JQuery, поэтому сначала нам нужно включить jQuery . Далее подключаем библиотеку Modernizr. Нам нужны только 3d-преобразования, и вы можете скачать необходимый скрипт отсюда . Это будет гарантировать, что все будет прекрасно работать в браузерах, которые не поддерживают 3D преобразования. Дальше нужно создать файл с именем jquery.pictureflip.js, который будет размещен в том же месте, где и код нашего плагина. HTML должен выглядеть следующим образом:

Body

HTML-разметка довольно проста. Все что нужно сделать, поместить группу дивов, которые будут представлять наши изображения в HTML. А затем Создать еще один блок с определенным ID? например, #flipbook .

Flowers: What you didn"t know Flowers: Real or Fiction? A Flower ate my Baby! Will Flowers Destroy Earth?

Давайте теперь перейдем к стилям.

CSS

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

#container { padding : 10px ; box-shadow: 0px 0px 10px rgba(0 ,0 ,0 ,0 .1 ) ; margin : 20px auto ; width : 600px ; height : 330px ; } /* 600x300px in size */ .flipbook { position : relative ; width : 600px ; height : 300px ; z-index : 999 ; } .flipbook > div { width : inherit ; height : inherit ; position : absolute ; top : 0px ; left : 0px ; text-align : left ; } .flipbook .hide { display : none ; } .flipbook > div > div { width : inherit ; height : inherit ; background-size : 600px 300px ; width : 50 % ; height : 100 % ; position : absolute ; } /* разделяем блок с картинкой на два отдельных. */ /* Второй должен быть справа, а первый слева */ .flipbook div[ class$="-fend" ] { background-position : 100 % 0 ; left : 50 % ; }

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

/* Preserve 3D */

Flipbook .moving-div { z-index : 99999 ; width : 50 % ; -webkit-perspective: 1000 ; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 0 0 ; -moz-perspective: 1000 ; -moz-transform-style: preserve-3d; -moz-transform-origin: 0 0 ; -o-perspective: 1000 ; -o-transform-style: preserve-3d; -o-transform-origin: 0 0 ; -ms-perspective: 1000 ; -ms-transform-style: preserve-3d; -ms-transform-origin: 0 0 ; perspective: 1000 ; transform-style: preserve-3d; transform-origin: 0 0 ; } /* Make the backfaces invisible */ .flipbook .moving-div div { -webkit-backface-visibility : hidden ; -moz-backface-visibility : hidden ; -o-backface-visibility : hidden ; -ms-backface-visibility : hidden ; backface-visibility : hidden ; width : 100 % ; z-index : 9999 ; } /* Ensure the divs are in the correct position */ .flipbook .moving-div > div[ class$="-fend" ] { left : 0 ; } /* Rotate the last card so its facing back to back with the first one */ .flipbook .moving-div > div[ class$="-fstart" ] { -webkit-transform: rotateY(180deg) ; -moz-transform: rotateY(180deg) ; -o-transform: rotateY(180deg) ; -ms-transform: rotateY(180deg) ; transform: rotateY(180deg) ; }

Внутри moving-div будут размещены два span, которые будут создавать эффект тени. Они будут анимированы в части jQuery.

/* The two spans are shadows for depth */ .flipbook .moving-div span { box-shadow: inset 60px 0 60px -60px rgba(0 ,0 ,0 ,0 .1 ) ; width : 100 % ; height : 100 % ; position : absolute ; opacity: 0 ; display : block ; z-index : 999999 ; top : 0 ; background : rgba(0 ,0 ,0 ,0 .1 ) ; -webkit-backface-visibility : hidden ; -moz-backface-visibility : hidden ; -o-backface-visibility : hidden ; -ms-backface-visibility : hidden ; backface-visibility : hidden ; left : 0 ; } .flipbook .moving-div span:last-of-type { -webkit-transform: rotateY(180deg) ; -moz-transform: rotateY(180deg) ; -o-transform: rotateY(180deg) ; -ms-transform: rotateY(180deg) ; transform: rotateY(180deg) ; box-shadow: inset -60px 0 60px -60px rgba(0 ,0 ,0 ,0 .1 ) ; }

Есть также несколько других классов, которые будут добавлены в классы, чтобы создавать вращение moving-div . Для них используем простые 3D-трансформации

Flipbook .rotateYForward { -webkit-transform: rotateY(180deg) ; -webkit-transition: -webkit-transform 1s ease-in; -moz-transform: rotateY(180deg) ; -moz-transition: -moz-transform 1s ease-in; -o-transform: rotateY(180deg) ; -o-transition: -o-transform 1s ease-in; -ms-transform: rotateY(180deg) ; -ms-transition: -o-transform 1s ease-in; transform: rotateY(180deg) ; transition: transform 1s ease-in; left : 50 % ; } .flipbook .beginMove { left : 50 % ; -webkit-transform: rotateY(180deg) ; -moz-transform: rotateY(180deg) ; -o-transform: rotateY(180deg) ; transform: rotateY(180deg) ; } .flipbook .rotateYBackward { -webkit-transform: rotateY(360deg) ; -webkit-transition: -webkit-transform 1s ease-in; -moz-transform: rotateY(360deg) ; -moz-transition: -moz-transform 1s ease-in; -o-transform: rotateY(360deg) ; -o-transition: -o-transform 1s ease-in; -ms-transform: rotateY(360deg) ; -ms-transition: -o-transform 1s ease-in; transform: rotateY(360deg) ; transition: transform 1s ease-in; }

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

Flipbook .back-arrow , .flipbook .forward-arrow {

Width : 100px ; height : 100px ; box-sizing: border-box; -moz-box-sizing: border-box; padding : 8px 28px ; font-size : 7em ; font-weight : bold ; z-index : 10 ; left : -140px ; color : #fff ; top : 30 % ; border-radius: 100px ; position : absolute ; cursor : pointer ; z-index : 999999 ; background-color : #396275 ; } .flipbook div[ class$="-arrow" ] :hover { box-shadow: inset 0px 0px 30px rgba(0 ,0 ,0 ,0 .2 ) ; } .flipbook div[ class$="-arrow" ] :active { background-color : #2e505f ; box-shadow: inset 0px 0px 30px rgba(0 ,0 ,0 ,0 .1 ) ; } .flipbook .forward-arrow { right : -140px ; left : auto ; padding : 8px 34px ; font-weight : bold ; } .flipbook .buttons { width : 98 % ; padding : 7px 1 % ; height : 16px ; background : #fff ; position : relative ; top : 300px ; } .flipbook .buttons span { background : #fff ; box-shadow: inset 0 0 8px rgba(0 ,0 ,0 ,0 .1 ) ; width : 16px ; cursor : pointer ; height : 16px ; border-radius: 16px ; display : block ; float : right ; position : relative ; margin-right : 5px ; } .flipbook .buttons .selected { background-color : #47b1e2 ; box-shadow: inset 0 0 10px rgba(0 ,0 ,0 ,0 .1 ) ; } .flipbook .content { display : none ; height : 30px ; padding : 7px ; z-index : 99999999 ; position : absolute ; bottom : 0 ; width : 50 % ; font-size : 2em ; } .flipbook a { color : #fff ; font-weight : bold ; text-decoration : none ; border-bottom : 2px solid #fff ; text-shadow : 0 0 10px rgba(0 ,0 ,0 ,0 .1 ) ; }

И, наконец, мы собираемся добавить изображения, которые мы будем использовать. Вы можете добавить больше, если пожелаете. В примере их будет 4. Они будут относиться к дивам image, которые мы определили ранее в HTML.

/* THE IMAGES YOU WANT TO USE */

/* == add more if you want == */ /* == update the HTML too! == */ div[ class^="image-1-" ] { background : url ("images/1.jpg" ) ; } div[ class^="image-2-" ] { background : url ("images/2.jpg" ) ; } div[ class^="image-3-" ] { background : url ("images/3.jpg" ) ; } div[ class^="image-4-" ] { background : url ("images/4.jpg" ) ; }

Переходим к JQuery!

jQuery

Откройте ваш файл jquery.pictureflip.js файл. Основная структура JQuery плагина должна иметь следующий вид:

(function ($) { $.fn .extend ({ // The name of your plugin pictureflip: function (options) { // Some default values. The user will be able to alter these var defaults = { time: 1000 , start: 1 } // Connect the default values with the function variables var options = $.extend (defaults, options) ; // This bit is important, it ensures the chainability of jQuery // We have to return each object this plugin applies to, so that // the user can still add more jQuery functions on the end, i.e. // $("#item").pictureflip().appendClass("pictures"); return this .each (function () { var o = options; var obj = $(this ) ; // This is where our plugin code goes! It"s just regular jQuery // from here on out! } ) ; } } ) ; } ) (jQuery) ;

Создание плагина

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

// Некоторые переменные для начала работы

Var time = o.time ; var imageNumber = $("div" , obj) .length ; var animated = 0 ;

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

// Append UI obj.append ("" ) ; obj.addClass ("flipbook" ) ; // Добавление кнопки в зависимости от выбранной фотографии while (imageNumber > 0 ) { $("" ) .appendTo ($(".buttons" ) ) ; --imageNumber; } // Fade в содержании текста $(, obj) .fadeIn () ; // Эту функцию добавим позже selectCircle() ;

Затем мы должны определить несколько простых функций. Эти функции анимации, z-index, перезапуск слайдов и выбор правильного круга.

// Изменение z- индекса function zIndexFix() { $("" ) .each (function (index) { zindex = index * -1 ; $(this ) .css ("zIndex" , zindex) ; } ) ; } // Restarts the slides to the regular position so they"re ready to flip // again! function restartSlides() { var $moveFirst = $(".moving-div div:first" ) .attr ("class" ) .split ("-" ) [ 1 ] ; var $moveLast = $(".moving-div div:last" ) .attr ("class" ) .split ("-" ) [ 1 ] ; $("> .moving-div div:first" , obj) .appendTo ($("> #image-" +$moveFirst, obj) ) ; $("> .moving-div div:last" , obj) .appendTo ($("> #image-" +$moveLast, obj) ) ; $(".moving-div" ) .removeClass ("rotateYForward rotateYBackward beginMove" ) .removeAttr ("style" ) ; $(".moving-div" ) .addClass ("hide" ) ; } // Анимация тени function shadowAnimate(time) { $(".moving-div span" ) .animate ({ opacity: 1 } , time/2 ) ; setTimeout(function () { $(".moving-div span" ) .animate ({ opacity: 0 } , time/2 ) ; } , time/2 ) ; } // Выбор соответствующего круга на основе выбранных изображений. function selectCircle() { var imageID = parseFloat($("> div:first" , obj) .attr ("id" ) .split ("-" ) [ 1 ] ) ; $(".buttons span" ) .removeClass ("selected" ) ; $(".buttons .button-" +imageID) .addClass ("selected" ) ; }

Давайте теперь перейдем к функции анимации. Была добавлена переменная, которая будет проверять, есть ли кнопка вперед или назад. Если вы заметили, то с помощью переменной prev будет идти проверка, какая кнопка нажата. На данный момент, это не работает в Safari, поэтому был отключен эффект листания в Safari .

// Функция анимации

Function animation(prev, time, buttons) { // Исчезание текста $("div:first .content" , obj) .fadeOut (50 ) ; // Если анимация не работает, то мы можем начать if (animated == 0 ) { // Анимация работает animated = 1 ; // Следующий слайд if (prev != true ) { var $nextSlide = $("div:first ~ div:first" , obj) .attr ("id" ) ; } else { var $nextSlide = $("div:last" , obj) .attr ("id" ) ; } // Текущий слайд var $thisSlide = $("div:first" , obj) .attr ("id" ) ; // If 3D Transforms are not supported then we just default back to // fade in slides. These will not have the 3D effect but it will // still be usable. if (Modernizr.csstransforms3d == "" || (navigator.userAgent .indexOf ("Safari" ) != -1 && navigator.userAgent .indexOf ("Chrome" ) == -1 ) ) { $("> #" +$nextSlide, obj) .prependTo (obj) ; if (prev != true ) { $("> #" +$thisSlide, obj) .appendTo (obj) ; } animated = 0 ; zIndexFix() ; selectCircle() ; return false ; } // Если нажата кнопка вперед if (prev != true ) { // Добавление дивов к moving div $("> #" +$nextSlide+" > div, > #" +$thisSlide+" > div" , obj) .appendTo ($(".moving-div" ) ) ; // Rotate the moving div holder and change the time // based on what is set via Javascript $(".moving-div" , obj) .addClass ("rotateYForward" ) .css ({ : time/1000 +"s" , "-moz-transition-duration" : time/1000 +"s" , "-ms-transition-duration" : time/1000 +"s" , "-o-transition-duration" : time/1000 +"s" , "transition-duration" : time/1000 +"s" } ) ; // Вращение дивов таким образом, чтобы было видно следующий // А предыдущий див находился под ним $("> #" +$nextSlide, obj) .prependTo (obj) ; $("> #" +$thisSlide, obj) .appendTo (obj) ; } else { // Else this is the back button // So put the divs in the correct order so we can create // the illusion of flipping $("> #" +$thisSlide, obj) .prependTo ($(obj) ) ; $("> #" +$nextSlide, obj) .insertAfter ($("div:first" , obj) ) ; // Then append the correct divs to the moving div $("> #" +$nextSlide+" > div, > #" +$thisSlide+" > div" , obj) .appendTo ($(".moving-div" ) ) ; // Fix the z-index real quick since we"ve been moving stuff around zIndexFix() ; // Rotate the moving div holder $(".moving-div" ) .addClass ("beginMove" ) ; // A very small timeout so that this function does not interfere with // other functions setTimeout(function () { // Вращение! $(".moving-div" ) .addClass ("rotateYBackward" ) .css ({ "-webkit-transition-duration" : time/1000 +"s" , "-moz-transition-duration" : time/1000 +"s" , "-ms-transition-duration" : time/1000 +"s" , "-o-transition-duration" : time/1000 +"s" , "transition-duration" : time/1000 +"s" } ) ; } , time/50 ) ; } // Анимация тени! shadowAnimate(time) ; // Another timeout, to be run at the end of the animation setTimeout(function () { // Put the slides back to their default classes and values restartSlides() ; if (buttons != true ) { $(".moving-div" ) .addClass ("hide" ) ; } // Prepend accordingly if (prev == true ) { $(" > #" +$nextSlide, obj) .prependTo ($(obj) ) ; } // Fix up the z-index and change the circle zIndexFix() ; selectCircle() ; // The animation is now over animated = 0 ; // Fade in the content! $("div:first .content" , obj) .fadeIn () ; } , time) ; } }

Теперь все, что нам нужно сделать — вызвать определенную реакцию на нажатие кнопки.

$(".forward-arrow" ) .click (function () { $(".moving-div" ) .removeClass ("hide" ) ; setTimeout(function () { animation(false , time) ; } , 1 ) ; } ) ; $(".back-arrow" ) .click (function () { $(".moving-div" ) .removeClass ("hide" ) ; setTimeout(function () { animation(true , time) ; } , 1 ) ; } ) ;

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

$(".buttons span" , obj) .click (function () { // Remove the hide class from the moving div $(".moving-div" ) .removeClass ("hide" ) ; // Get the button ID var buttonID = parseFloat($(this ) .attr ("class" ) .split ("-" ) [ 1 ] ) ; // Get the current iamge ID var currentImageID = parseFloat($("> div:first" , obj) .attr ("id" ) .split ("-" ) [ 1 ] ) ; // Calculate a faster time var reduxTime = time/10 ; // And set an interval in a variable using the rotateImages function var interval = setInterval(rotateImages, reduxTime) ; function rotateImages() { // Update the current image everytime the interval is run currentImageID = parseFloat($("> div:first" , obj) .attr ("id" ) .split ("-" ) [ 1 ] ) ; // If the button number is equal to the current image number if (buttonID == currentImageID) { // The animation is over, clear in the interval clearInterval(interval) ; // Hide moving-div $(".moving-div" ) .addClass ("hide" ) ; // Cancel the function! return false ; } else { // Otherwise keep running the animation animation(false , reduxTime, true ) ; } } } ) ;

И наконец просто нужно проверить z-index, и установить первое изображение, если пользователь определит его.

// Make sure to fix the z-index too! zIndexFix() ; // Oh, and change the start image if the user defines it. $(".buttons .button-" +o.start , obj) .click () ;

Теперь, когда мы закончили, можно запустить наш плагин.

Подключение

Чтобы запустить плагин, просто добавьте это в head вашего документа:

$(document) .ready (function () { $("#flipbook" ) .pictureflip ({ time: 1000 , start: 1 } ) ; } ) ;

Перевод — Дежурка

Недавно нашел в интернете одну замечательную программу для создания фотоальбомов. Причем не просто фотоальбомов, а Flash-альбомов, в которых присутствует Такой альбом можно выложить на Youtube в формате swf и на свой сайт, как html-страницу, можно создать из него файл-exe и т. д... Да что говорить, смотрите что получилось у меня, за каких-то 20 минут!

Просто нажмите на картинку для просмотра:

Flip Album - программа, которая модифицирует обычные фотографии в отличные flash-альбомы + эффект перелистывания страниц! Теперь Вы можете создавать замечательные онлайн-фотоальбомы из коллекции своих фото и изображений.

Так как программа на "ноу-рашине" представляю небольшое руководство к действию:

1. Запустив программу нажимаем "Background" (фон), выбираем "Select from Background..." - если будем использовать встроенный фон программы.

Если есть свой фон, выбираем "Select from your computer" .И вставляем свое фото.

2. Нажимаем "Photo" и добавляем нужную нам фотографию. Ее можно растягивать, уменьшать и поворачивать.

3. Нажав на "Mask" выбираем какой-нибудь из эффектов обрамления.

4. Кликнув "Text" можно добавить подпись к фото, поставив галочку "Shadow" добавляем тень к тексту

Получаем первую готовую страницу.

5. Таким-же образом добавляем столько страниц, сколько нам надо. Далее нажимаем на "Publish"

6. Попадаем в новое окно, под надписью "Templates" выбираем шаблон, в настройках (Options) можно поменять качество фотографий и т. д. Далее нажимаем "Convert To Flipping Book"

7. В окне конвертации выбираем формат выходного файла, например EXE . Выбираем папку сохранения, название файла и нажимаем "Convert"

Вот в принципе и все...

Разработчик: Flip PDF Studio
Платформа: Windows XP/ Vista/ 7
Язык интерфейса: English
Размер файла: 17,05 MB

Мы уже разбирались, как сделать электронную flash книгу с перелистыванием , с помощью программы , в виде файла exe . Давайте теперь рассмотрим, как сделать такую же flash книгу, только уже онлайн, на своем сайте.

Для этого можно воспользоваться той же программой Flip PDF. Принцип создания книги тот же, только сохраняете ее не в виде файла exe, а в виде html.

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

Все это можно делать не только с помощью программы Flip PDF Professional. Не менее интересная программа — FlippingBook Publisher Professional. Скачать демо версию программы можно на сайте flippingbook.com . С помощью этой программы тоже можно делать замечательные электронные flash книги, причем можно их делать даже со звуковым сопровождением. Правда, стоит программа дороже — базовая версия программы стоит 399 долларов. Но можно использовать поначалу и триальную версию.

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

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

Делается это в программе FlippingBook Publisher Professional очень легко. Сначала нужно подготовить материалы: книгу PDF, и аудиофайлы для каждого разворота книги. При использовании у Вас получится очень чистая, качественная запись голоса. А, используя , Вы можете наложить на запись легкую фоновую музыку.

Теперь возвращаемся к программе Flipping FlippingBook Publisher. Открываете ее. Если Вы используете триальную версию, отменяете форму ввода логина и пароля. Когда появится программа, нажимаете Импортировать , и выбираете свою книгу PDF. Нажимаете Открыть . Вы можете выбрать после этого один из нескольких типов публикации: журнал, документ, книга с твердым переплетом, фотоальбом. От того, какой тип публикации flash книги Вы выберете, будет зависеть ее внешний вид.

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

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

После того, как книга будет оформлена, нажимаете Опубликовать , и выбираете, в каком виде Вы хотите получить эту книгу — в виде одного файла exe, или в виде сайта. Если Вы выбираете файл exe, то Вам нужен пункт В Offline , а если выбираете сайт — то это пункт В HTML .

При выборе второго варианта Вы получите папку, в которой будет находиться файл index.html , и сопутствующие файлы и папки. Общую для них папку переименовываете таким же образом, каким будет URL-адрес Вашего сайта, и забрасываете на хостинг.

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

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже: