Делаем электронную flash книгу онлайн. Слайдер с эффектом перелистывания страниц с помощью CSS3 и jQuery Скачать приложение эффекты перелистывания окон
1. HTML позволяет вам загрузить книгу на вебсайт для просмотра онлайн (с названием, ключевыми словами и другими метаданными). И вы сможете добавить код отслеживания Google Analytics для вывода страниц книги .
2.EXE позволяет вам просматривать готовую книгу на компьютере с ОС Windows.
4.App (Приложение Mac) - это исполняемое приложение на Mac.
6.Версия для мобильных устройств предназначена для просмотра HTML книг на мобильных устройствах через браузеры (поддерживает одностраничные презентации на мобильных устройствах).
7.Запись на компакт-диск позволяет вам записать на CD для отправки физической копии вашей публикации пользователям для просмотра на компьютере (возможность настроить автоматический просмотр).
8.Размещение книги с переворачивающимися страницами на ваш FTP сервер.
9.Создание формата *.scr для использования в качестве скринсейвера.
10.Размещение и отправка книги, выбрав адрес и опцию "Отправить".
11.Сохранение книги как плагин WordPress и размещение в WordPress.
12.Размещение книги в модуле Joomla.
13.Создание модуля Drupal для вставки на вебсайт Drupal.
Важно: Вы можете установить пароль для защиты (с возможностью установки даты отключения) в установках для архивов EXE и ZIP. К тому же, вы можете добавить информацию о компании в исходном варианте в архив EXE.
Читатели вашей электронной книги с переворачивающимися страницами смогут:
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"
Вот в принципе и все...
CSS3 анимация перелистывания страниц
В буржунете я подсмотрел технику перелистывания страниц реализованную на CSS3. Очень эффектно! На основе этой техники я решил сделать свой пример демонстрацию такой CSS3 книги с анимацией перелистывания страниц.
В основе этой техники лежат такие CSS3 свойства как transform
и transition
а так же нестандартное использование тега input
с флажком (checkbox). Реализация получилась кривенькая, потому как браузеры ещё полноценно не поддерживают самые эффектные CSS3 свойства в прямом виде. Но, благодаря , мы можем этими свойствами попробовать воспользоваться уже сейчас.
Получилось эффектно, радует то что возможно в скором будущем браузеры начнут понимать новые стандарты CSS3 и вебмастера смело смогут реализовывать подобную красоту на своих сайтах, стало возможно листать страницы на CSS3.
Пример лучше всего смотреть браузером Mozilla Firefox
последней версии - работает всё без проблем. В Safari и Chrome пример работает, но уже со скрипом. Opera при анимации сжирает процессор, поэтому на слабых компьютерах пример просто не потянет. IE - это IE ради прикола можно и им посмотреть.
Смотрим браузером Mozilla Firefox
- не портим впечатление!
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 и исходник к нему:
Чтобы получить интересные уроки на свой адрес,
введите свои данные в форму подписки ниже:
Эффект перелистывания страницы, наиболее часто создается с помощью 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
Код который вы видели, полностью лежит в блоке #magazine div. Это единственное, что нужно для turns.js. Вам не нужно создавать какие-то специальные классы или дата атрибуты для элементов, которые будут интерпретированы в странички. На этом мы готовы приступить к написанию 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){ ?> " />
