3. Делаем слайд-шоу за 5 минут, модель: vk24sep
Мотивация
Давайте представим себе ситуацию: вы вернулись из интересной поездки в удивительные места и у вас есть много фотографий, которые вам хочется показать своим родным, друзьям, знакомым, да и вообще всему миру. Или у вас растет маленький сын или дочь и каждый день приносит вам новые впечатления. Хочется остановить мгновения и прокрутить их снова. А у кого-то есть животные, а может быть сад или дача, только что была свадьба или получен диплом, да много чего бывает в жизни. Конечно можно сделать альбом фотографий и копить в нем пыль, но это уже не современно. Сейчас есть компьютер, есть программы и можно сделать самые разнообразные слайд-шоу. Но вот беда -- нет времени этим заниматься. Программы надо уметь установить, с ними надо возиться и их надо понимать Впрочем если у кого есть интернет, то задача вроде бы решается проще: можно использовать возможности той или другой социальной сети. Все это так, но те слайд-шоу, какие там делают не всех устраивают по качеству.
Какой-же выход? Наиболее разумное решение -- использовать относительно простые готовые программы, которые легко настраиваются и универсально исполняются везьде и всюду. По параметру универсальности на первом месте стоят браузеры, значит программа должна работать в браузере, либо у себя дома, либо в интернете. А раз так, то программа должна быть написана на языке javascript, как единственном языке, который является родным для браузеров. Далее мы имеем такие варианты: можно делать слайд-шоу в отдельном окне, а можно как часть более общего сайта. Ясно, что второй вариант сложнее. Если делать быстро и просто, то лучше в отдельном окне. Следующий вопрос: как делать? Можно генерировать необходимые файлы с помощью внешней программы, а можно использовать редактирование уже приготовленных файлов. Вообще говоря, хороши оба способа, но самый простой и быстрый - это редактировать готовые файлы, хотя в нем и меньше возможностей чего-либо изменить. В этой статье я хочу предложить один из вариантов готовых файлов для показа слайд-шоу в отдельном окне. Всего файлов три, но редактировать надо только один, остальные универсальные и их можно было бы записать в интернет и просто ссылаться. Но если запускать слайд-шоу без интернета, то лучше иметь их под рукой, поэтому самый простой способ такой: скачиваем архив размером 6 Кб (в нем три файла) себе на компьютер, кликая на этой ссылке. На самом деле файлов 4, но об этом чуть позже.
Описание
Сначала я расскажу как это работает. В окне браузера в левом верхнем углу стоит картинка плейера музыки, музыка запускается сразу, хотя это можно регулировать. Справа от плейера музыки стоят 5 кнопок, которые позволяют регулировать процесс показа. А под плейером и кнопками находится окно самого слайд-шоу, в котором показываются фотографии. Под этим окном есть строка, которая сообщает номер картинки и ее адрес в интернете или на компьютере. А еще ниже может быть текст комментария ко всем фотографиям сразу, он может иметь произвольно большой размер. Как говорится, лучше увидеть, чем долго объяснять. И это не проблема, если ваш компьютер подключен к интернету, то кликаем демо версию, смотрим и слушаем.
Но описание все же необходимо. Итак начнем. Плейер музыки. Стандартно я поставил плейер с сайта MP3shki.ru
. Об этом плейере можно почитать в моей статье номер 2 по списку на главной странице проекта. В плейере можно поменять название файла музыки, внешний вид, режим работы. А можно поменять и сам плейер на любой другой. Потому что плейер задается специальным кодом (набором букв) и можно просто поменять один набор букв на другой. Теперь кнопки. Всего я сделал 5 кнопок. В стандартном режиме анимация сразу запускается и первая кнопка [Stop] способна ее остановить. А вторая кнопка [Start] - запустить снова, если она остановлена. Каждая кнопка имеет только одну функцию: установить режим показа, то есть повторное нажатие кнопок ни к каким изменениям не приводит. Третья кнопка [Back] задает режим прокрутки в обратном направлении. Если она нажата, то кадры двигаются к началу, а не к концу. Если надо это исправить, то необходимо снова нажать кнопку [Start]. Таким образом кнопка [Start] имеет две функции: она запускает анимацию после остановки (ликвидирует действие кнопки [Stop]) и она восстанавливает нормальное направление движения (ликвидирует действие кнопки [Back]). Четвертая кнопка [Next] позволяет принудительно перейти к следующему кадру в том направлении, какое является основным в данный момент. Все кадры, кроме первого, показываются заданный интервал времени (первый в два раза дольше), но если нет времени ждать - жмем [Next]. Ну и пятая кнопка позволяет сразу перейти к первому кадру, то есть начать все сначала.
Строка под фотографиями с указанием их номера и адреса сделана для того, чтобы иметь навигацию, а также хотя бы частично указать автора фотографии. Дело в том, что если компьютер подключен к интернету, то анимация может показывать любые фотографии, размещенные в интернете на любых сайтах. Ну и указание адреса фотографии позволяет понять - является ли она собственностью автора сайта или слайд-шоу, или взята из интернета. Это очень увлекательное занятие - готовить слайд-шоу по фотографиям на любую тему. Из миллионов фотографий интернета можно выбрать те, которые наиболее полно раскрывают тему и, даже не скачивания их себе, сразу показывать с тех сайтов, на которых они размещены. Это будет честно по отношению к авторам фотографий. Ну а назначение комментария ясно и без слов.
Что надо делать
Рассмотрим первый, более простой вариант, когда вы хотите показывать слайд-шоу дома на своем компьютере. В этом случае вынимаем из архива три файла с окончаниями (расширениями) css, js и htm, записываем их в какую-нибудь папку. Первые два файла можно не смотреть. А вот третий файл надо открыть в любом текстовом редакторе, хоть в Notepad. Для этого надо нажать правую кнопку мыши и выбрать в меню Open with
(так у меня, а по русски Открыть с помощью
) и выбрать программу текстового редактора. Тем кто работает с программой Тотал Коммандер легче, просто нажимаем клавишу [F4]. Но реально старые версии редактора Notepad все же не удобны, так как не показывают номера строк. Лучше использовать любой редактор, который показывает номера строк. Я сам пользуюсь редактором Notepad2. Хотя у меня есть и свой редактор vkNotepad, который можно скачать с моего сайта с таким же названием. Впрочем поиск по словам есть и в обычном Notepad и часто этого достаточно.
Итак, в файле с расширением htm записан html код сайта с анимацией, то есть слайд-шоу. Даже если вы не знаете как записывается этот код -- не беда. Вам надо сделать совсем простые вещи. Первое: найти слова Заголовок анимации
(во 2 строке) и написать любой заголовок, какой вы хотите. Это может быть название вашего слайд-шоу, ваше имя и другие данные. Этот заголовок покажется в титульной строке окна браузера. Второе: найти слова здесь надо набить . . .
(в 7 строке) и заменить все слова между кавычками на ваш комментарий. В нем может быть сколько угодно предложений, но все надо набить одной строкой. Для этого надо включить режим вписывания текста в окно редактора (Word Wrap). В следующей 8 строке надо поменять 4 числа, там исходно напечатано 23, 800, 600, 5000. Первое число - это число фотографий минус 1. Второе и третье числа - это ширина и высота окна анимации в пикселах (точках) экрана. Самый оптимальный вариант, когда эти числа совпадают с размерами фотографий. Но это не обязательно. Можно напечатать любые другие числа и фотографии будут автоматически промасштабированы на эти числа. Поскольку это делается на лету, то при первом проходе возможны задержки с переходами, если указать очень большие размеры. Но все зависит от того насколько мощный у вас компьютер. Моему уже 6 лет и он слабоват. А последнее число задает временную паузу между кадрами в миллисекундах, то есть 5000 - это 5 секунд. Можно изменить по вкусу.
Ну а дальше самое главное. Напечатаны адреса в интернете тех фотографий, которые и составляют суть слайд-шоу. Каждый адрес в отдельной строке, в кавычках и заканчивается запятой. У последнего адреса запятой нет. Если вы используете фотографии у себя на компьютере, то надо указать путь относительно размещения данного файла. То есть, если все файлы в одной папке, то пишем просто имена файлов. Как и где брать адреса в интернете я писал раньше в статье "Советы начинающим". Их надо копировать из соответствующих окон, либо из адресной строки браузера, либо из специальных окон, где их дают, например, в социальной сети Яндекс-фотки
. Если число адресов будет больше, чем первое число, описанное выше плюс 1, то не беда, будут показаны не все фотографии. А если будет меньше, то получим ошибку и слайд-шоу работать не будет. Ошибку впрочем легко исправить, поэтому я ничего для ее блокировки не делал. Может быть потом сделаю.
Все. Слайд шоу готово. Можно запускать. Если у вас заранее приготовлены адреса фотографий, то слайд-шоу можно сделать и менее, чем за 5 минут. Ну а если фотографии надо искать и отбирать из нескольких тысяч, то это конечно уже другое время. Но в этом и есть муки творчества. Несколько слов о том как проходит анимация. Фотографии сменяют друг друга с использованием 24 разных переходов. Первый переход мгновенный и имеет паузу в два раза больше, остальные 23 фасонные и все разные. После того, как все 23 пройдут, они снова начинаются с первого фасонного и повторяются вновь и вновь. Тип переходов и их порядок зашиты в файле с расширением js. В принципе там записан код, который позволяет реализовывать бесконечно много разных переходов, хотя и не бесконечно много типов. Можно настроить анимацию на другие переходы. Один раз мне пришлось это сделать. Дело в том, что на сервере narod.ru
четыре перехода отрабатываются не совсем корректно. Если вы запускаете слайд-шоу у себя дома, или записали файлы на другой сервер, который не приписывает рекламу на js, то все будет нормально. А если записать файлы на narod, то нет. Поэтому специально для сервера narod, я заменил 4 перехода на другой (21-й) и файл с такой заменой называется vk24sepn.js. При записи файлов на сервер narod лучше ставить его. Хотя и первый тоже будет работать без ошибок, но переход получается не такой, какой задумывался.
А если у вас есть свой сайт и вы хотите поставить слайд-шоу туда, то просто копируем приготовленные файлы на сервер и все дела. О том, как использовать разработанный javascript код в более сложных анимациях, а также о том как он работает, я расскажу в других статьях.
Виктор Кон, 03.10.2011
