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

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"

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

Привет всем! Я тут частенько бываю на одном блоге, и как-то раз зашла там речь о специальной программе для создания учебников, подчеркиваю именно учебников. И при некоторой сноровке, ее можно использовать и для создания простых электронных книг. Так вот, слово за слово и возникло некое пари, ну пари не пари, а спор.

Я утверждал, да и утверждаю до сих пор, что создать электронную книгу возможно с помощью стандартной программы Word из пакета Microsoft Office. Да не просто книгу, а с содержанием, постраничной навигацией, ну разными другими штуками, вплоть до перелистывания страниц, а так же вставки звука и видео.

Справедливости ради, надо сказать, что все это можно сделать в Word, ну кроме перелистывания. Перелистывание – это уже другие технологии, которые требуют других программ. Так что каюсь, был не прав… И вот при некоторой сноровке получается вполне себе такая, красивая электронная книга с перелистыванием.

Примеры работ

Посмотрите, что получилось
Смотреть книгу в PDF

Скачать и смотреть книгу с перелистыванием

Ну как? Скачали-посмотрели? Какие впечатления? Если не получилось скачать, ну мало ли, антивирус ругается, например, то предлагаю посмотреть еще несколько вариантов данной книги:

Статья в виде флеш-книги в html с использованием iframe Та же статья с использованием специального сервиса

Онлайн-сервис по созданию флеш-книг и флеш-журналов. Кому интересно, обзор этого сервиса можно почитать

Заказные книги:

Меню кафе «Равенна» — Итальянска кухня

Меню кафе «Равенна» — Русская кухня

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

Вот и готова книга с красивой титульной страницей и удобным оглавлением. Осталось только сделать из него PDF-файл.

Шаг второй. Создаем PDF-файл

Ну, тут все просто, я, к слову, уже писал от том, как создать PDF-файл с помощью средств Word 2007, о чем можно прочитать вот . Но для последней версии Word все еще проще. Заходим во вкладку Файл и выбираем пункт Экспорт

Нажимаем на кнопку Создать PDF и в открывшемся окне вводим название файла

А вот здесь важно поставить галочку в пункте Создать закладки используя Заголовки

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

Шаг третий. Завершающий, создаем флеш-книгу

Так как до сего момента мне не было нужно, то я особо и не заморачивался тем, какими программами возможно создать такие книжки. Но с помощью дяди Гоши и некой толики терпения и упорства я нашел две программы позволяющие превращать PDF-файлы во флеш-книги.

Программа первая. FlipBook Maker.

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

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

А вот следующая программулина, как раз то, что нужно.

Программа следующая. Flip PDF

Отличная программа, легко работает с PDF-файлами, позволяет вставлять или редактировать: ссылки, изображения, видео, звук и многое другое…

Скачать пробную версию можете .

Оговорюсь сразу, программа не бесплатная, да и при создании книги она прислюнивает свои водяные знаки. Но если вам требуется эта программа на один раз или просто очень нужна — напишите мне, помогу.

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

Загрузка PDF-книги

Запускаем программу и видим вот такое окно

Нажимаем на кнопку Import PDF и указываем путь к нашей PDF-книге

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

Кроме указания пути к файлу, все остальные параметры можно оставить как есть. Нажимаю Import Now , то бишь Импортировать сейчас , и видим, как программа раскладывает файлик на странички.

Появляется окно с будущей книгой.

Выбор и настройка шаблона

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

При нажатии на стрелку, появиться вот такое окно,

в котором можно выбрать понравившийся шаблон.

В левой колонке указаны наборы шаблонов. Шаблоны различаются не только по цвету и фоновой картинке, но и по функционалу.

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

Все описывать не буду, но хочу обратить ваше драгоценное внимание на несколько моментов:

Первый момент. Если вы вносите какие-либо изменения в шаблон, то для чтобы увидеть что получилось, нажмите на кнопку Apply Change. Она у вас будет моргать красным цветом при изменении какого-либо параметра.

Второй момент. В настройках шаблона есть возможность указать ID Google Analytics. Если я не прав, то поправьте меня. При указании ID у меня появляется возможность защитить свое творение от воровства. Дядя Гугл присвоит данной книге авторство именно моего сайта, так как мой блог зарегистрирован в Google Analytics. Так это или я не прав?

Третий момент. Обратите внимание на замечательную кнопку Edit Pages. С помощью этой кнопки вы сможете вставить дополнительные материалы в книгу.

Можно добавить звук, видео с Ютуба, просто видео в формате.flv, а еще добавить ссылки, кнопки и слайд-шоу, не говоря уже о картинках. В общем очень полезная штука.

Создание книги

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

• Формат HTML (для вставки в блог)
• Формат ZIP (тот же html, но запакованный в архив)
• Формат EXE (самозапускающийся файл, который вы могли скачать в начале статьи)
• Формат APP (специальный формат для компьютеров Apple)

Так что все просто: выбираете нужный формат, путь к папке, где будет храниться книга и нажимаете кнопку Convert.

Вот и все необходимые манипуляции для создания интерактивной книги. Сделал книгу во-второй раз с другим шаблоном и в формате HTML, а еще добавил на некоторые странички звуковые файлы и кнопки.

Выводы

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

1. Все программы, которые использовались для создания флеш-книг платные. Кроме Adobe Reader, это бесплатная читалка. Но Word и Flip PDF платные, хотя Flip PDF оправдывает стоимость в сто зеленых американских рублей полностью, да и Word, в принципе свои деньги отбивает. За хорошую программу денег не жалко. Кстати, а вы покупаете программы или ломанными пользуетесь?

2. Пока возился с Flip PDF обнаружил некоторые косяки и неудобства

• видео с Ютуба вставляется криво, в программе работает, а вот в готовой книге нет
• при вставке звуковых и видеофайлов эти файлы копируются в папку с книгой, что значительно увеличивает объем самой книги

Больше корявостей не нашел, если найдете, напишите в комментариях. Как всегда писал дольше, чем занимает весь процесс. Ну, как вам процесс и результат? Всем удачи!

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

В этой статье мы будем использовать PHP и плагин turns.js, которые позволят реализовать эффект перелистывания страницы на чистом CSS3 и jQuery. Мы возьмем наиболее популярные картинки из Instagram.com и создадим красивый журнал.

HTML

Прежде всего нам нужно понять основы этого примера. Мы будем использовать простой дизайн странички, который совмещает HTML5 разметку и PHP в одном файле. Так будет проще понимать. Вы можете видеть результат выполнения ниже:

index.php

Здесь мы подключаем style. css , в head, и javascript файлы внизу. Далее мы подключаем еще 3 js файла: библиотека jQuery, turn.js, script.js, в котором мы будем инициализировать плагин и принимать события клавиатуры. PHP код, который мы напишем немножечко позже, будет выполнятся в #magazine div блоке. PHP будет генерировать странички нашего журнала, которые будут нужны для turn.js.

Как пример, вы можете посмотреть на три первых страницы журнала, сгенерированных с помощью PHP:

1 // 32 2 // 32 3 // 32

Код который вы видели, полностью лежит в блоке #magazine div. Это единственное, что нужно для turns.js. Вам не нужно создавать какие-то специальные классы или дата атрибуты для элементов, которые будут интерпретированы в странички. На этом мы готовы приступить к написанию PHP кода!

PHP

PHP будет соединяться с Intagram API, кешировать результаты, и генерировать разметку, которую вы видели выше.

Первым шагом будет регистрация Instagram девелоперского сайта. После чего вы получите client_ id ключ, который вставим как значение в переменную $instagramClientID , в файле index. php . Мы не нуждаемся в расширенной функциональности API, мы просто запросим наиболее популярные картинки. Это освободит нас от использования дополнительной OAuth аутентификации, которая только утруднит понимание кода.

Ниже пример JSON ответа текущих популярных картинок от Instagram. Я скрыл некоторые атрибуты, чтобы сделать код более понятным.

{ "meta": { "code": 200 }, "data": [{ "tags": ["beautiful", "sky"], "location": "null", "comments": { "count": 31, "data": [...] }, "filter": "Normal", "created_time": "1331910134", "link": "http:\/\/instagr.am\/p\/IPNNknqs84\/", "likes": { "count": 391, "data": [..] }, "images": { "low_resolution": { "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_6.jpg", "width": 306, "height": 306 }, "thumbnail": { "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_5.jpg", "width": 150, "height": 150 }, "standard_resolution": { "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_7.jpg", "width": 612, "height": 612 } }, "caption": { "created_time": "1331910148", "text": "Goodnight.\ue056", "from": { "username": "jent99", "profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "id": "6227738", "full_name": "jent99" }, "id": "148395540733414783" }, "type": "image", "id": "148395420004568888_6227738", "user": { "username": "jent99", "website": "", "bio": "Mostly nature pics.\ue32b\ue32b\ue32b Hope you like them.\ue056\ue32a \ue334gi\ue334 ", "profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "full_name": "jent99", "id": "6227738" } }, { /* Здесь идет больше фотографий... */ }] }

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

PHP будет кешировать результаты этого API запроса. Таким образом, мы будем получать последние картинки каждый час. Это сделает наше приложение более быстрым и ограничит количество обращений к API.

index.php

// Вы можете получить client ID из Instagram API страницы $instagramClientID = "-- вставьте свой client id ключ здесь --"; $api = "https://api.instagram.com/v1/media/popular?client_id=".$instagramClientID; $cache = "cache.txt"; if(file_exists($cache) && filemtime($cache) > time() - 60*60){ // Если файл кэша существует и он // свежее нежели 1 час, будем использовать его $images = unserialize(file_get_contents($cache)); } else{ // Создаем API запрос и генерируем файл кэша // Получаем 32 популярные фотографии на Instagram $response = file_get_contents($api); $images = array(); // Декодируем ответ и создаем массив foreach(json_decode($response)->data as $item){ $title = ""; if($item->caption){ $title = mb_substr($item->caption->text,0,70,"utf8"); } $src = $item->images->standard_resolution->url; $images = array("title" => htmlspecialchars($title), "src" => htmlspecialchars($src)); } // Удаляем последнюю картинку, но мы будем иметь // 32 картинки, когда добавим обложку array_pop($images); // Добавляем обложку в начале массива array_unshift($images,array("title"=>"Cover", "src"=>"assets/img/cover.jpg")); // Обновляем файл кэша file_put_contents($cache,serialize($images)); } // создаем разметку $totalPages = count($images); foreach($images as $i=>$image){ ?> " />