7. Делаем слайд-шоу за 6 минут, модель: vk11sep
Мотивация
Данная модель javascript программы автоматического показа слайд-шоу в идейном плане очень похожа на модель, представленную в статье номер 3. Она показывает слайд-шоу фиксированного дизайна в отдельном окне браузера. Мотивация использования такой модели та же самая, читайте в статье номер 3. Однако данная модель является более продвинутой версией, по крайней мере так мне кажется. В ней учтен некоторый опыт работы с предыдущей моделью, а также добавлена некоторая функциональность. Первое изменение касается числа разных переходов между кадрами, их меньше, всего 11. Как мне показалось, переходы с движениями картинок сильно напрягают глаза и выглядят тяжелыми. Поэтому я убрал 12 переходов, в которых картинки двигались перед тем как встать на свое место. Остались только переходы с неподвижными картинками. В десяти переходах новая картинка постепенно открывается в окне, меняющем размеры, а в одном переходе меняется прозрачность. Данные 11 переходов циклически повторяются, они лучше выглядят и не так утомительны для глаз. Второе изменение связано с тем, что адреса фотографий не показываются, показывается только номер фотографии в массиве. Третье изменение состоит в том, что добавлены кнопки автоматического масштабирования фотографий в процессе показа. Можно поставить любой размер из списка, а также размер на весь экран. Размер экрана дисплея определяется автоматически. Соответственно кнопки ставятся без подсказок, но добавлен стандартный текст с правилами управления анимацией. Четвертое изменение касается проигрывателя музыки, поставлен новый проигрыватель mju, который описан в статье номер 2.
Таким образом, данная программа позволяет сделать слайд-шоу так же быстро, как и вариант статьи номер 3. Но добавление автоматического масштабирования фотографий требует от автора фото-шоу соблюдения определенных правил. При масштабировании всегда соблюдается аспектное отношение, то есть отношение ширины к высоте. По этой причине на кнопках указывается только ширина. Отношение высоты к ширине берется из исходных параметров размера окна анимации. Поэтому чтобы реально фотографии не искажались необходимо, чтобы все они имели одинаковый размер, совпадающий с размерами исходного окна анимации. Оптимальный размер 800*600, но могут быть и другие размеры. Для того, чтобы этого добиться, часто приходится скачивать фотографии из интернета и дополнительно их обрабатывать. Для обработки оптимально использовать бесплатную программу Fast Stone Viewer
. Она очень просто делает обрезку фотографий, масштабирование, меняет яркость и четкость. Лично я вертикальные фотографии показываю парами, то есть две фотографии размера 400*600 сложенными вместе. Сложить две фотографии вместе можно с помощью моего редактора текстов vkNotepad.jar
или с помощью простой программы Slide Maker (vkSM2.jar
). Программы можно скачать с моего сайта. То есть данная версия в принципе рассчитана на то, что будут показаны обработанные фотографии, поэтому адреса фотографий не показываются. Если это кому-то важно, то можно дать список ссылок в отдельном файле. Всего файлов пять, но редактировать надо только один, остальные универсальные и их нужно только копировать. Итак способ такой: скачиваем архив размером 15 Кб (в нем пять файлов) себе на компьютер, кликая на этой ссылке.
Описание
Сначала я расскажу как это работает. В окне браузера в первом ряду слева направо появляются указатель номеров картинок в массиве, картинка плейера музыки, и два ряда кнопок, которые позволяют регулировать процесс показа. Во втором ряду находится окно самого слайд-шоу, в котором показываются фотографии. Размер этого окна может меняться в зависимости от того, какие кнопки кликаются. Под этим окном может быть текст комментария ко всем фотографиям сразу, он может иметь произвольно большой размер, но показывается в колонке шириной 800 пикселей независимо от размера окна анимации. А под этим текстом стоит стандартный текст с правилами управления анимацией, написанный мной, хотя его тоже можно редактировать. Как говорится, лучше увидеть, чем долго объяснять. И это не проблема, если ваш компьютер подключен к интернету, то просто кликаем пример фото-шоу, смотрим и слушаем.
Но описание все же необходимо. Итак начнем с плейера музыки. В эту версию я включил плейер mju, описанный в статье номер 2. Плейером является mju.swf
файл. Его надо ставить в ту же папку, что и htm файл анимации. Сам плейер запрашивает файл с названием playlist.mpl
, который тоже должен быть в той же папке. А в этом файле можно указать полный интернет адрес любого mp3 файла, который и будет исполняться. В принципе конечно можно поменять код плейера на любой другой, но данный плейер хорош тем, что он свой и никто не сможет его выключить. А также ему можно указать любой mp3-файл, в том числе и ваш собственный, который тоже никогда не слетит. Данный плейер позволяет исполнять не один mp3-файл, а сразу много с различным переключением между ними. Недостатком плейера является то, что программа Adobe flash player
блокирует при запуске swf файла на компьютере проигрывание файлов, размещенных в интернете. Можно как-то снять блокировку, но я так пока и не научился. Однако при записи swf файла в интернет все работает. Также все работает, если swf и mp3 файлы оба находятся на компьютере. То есть принцип такой: или оба файла в интернете или оба на компьютере.
Теперь кнопки. Всего я сделал 5 кнопок управления сменой кадров. В стандартном режиме анимация сразу запускается и первая кнопка [Stop] способна ее остановить. А вторая кнопка [Start] - запустить снова, если она остановлена. Каждая кнопка, кроме [Next], имеет только одну функцию: установить режим показа, то есть повторное нажатие кнопок ни к каким изменениям не приводит. Третья кнопка [Back] задает режим прокрутки в обратном направлении. Если она нажата, то кадры двигаются к началу, а не к концу. Если надо это исправить, то необходимо снова нажать кнопку [Start]. Таким образом кнопка [Start] имеет две функции: она запускает анимацию после остановки (ликвидирует действие кнопки [Stop]) и она же восстанавливает нормальное направление движения (ликвидирует действие кнопки [Back]). Четвертая кнопка [Next] позволяет принудительно перейти к следующему кадру в том направлении, какое является основным в данный момент. Все кадры, кроме первого, показываются заданный интервал времени (первый в два раза дольше), но если нет времени ждать -- жмем [Next]. Ну и пятая кнопка позволяет сразу перейти к первому кадру, то есть начать все сначала.
Второй (нижний) ряд кнопок управляет размером окна анимации. На самих кнопках написана ширина окна анимации в пикселях экрана. Высота автоматически устанавливается из условия сохранения аспектного соотношения. Последняя кнопка [Screen] задает размер окна из условия, чтобы окно заполняло весь экран по одному из измерений: высоте или ширине, за вычетом линейки прокрутки, которая остается. В этом режиме разумно нажимать клавишу [F11] на клавиатуре. Все написано в "правилах управления показом", которые выводятся на экран.
Что надо делать
Рассмотрим первый, более простой вариант, когда вы хотите показывать слайд-шоу дома на своем компьютере. В этом случае вынимаем из архива пять файлов с окончаниями (расширениями) mju, mpl, css, js и htm, записываем их в какую-нибудь папку. Первые четыре файла можно даже не смотреть. А вот пятый файл надо открыть в любом текстовом редакторе, хоть в Notepad. Для этого надо нажать правую кнопку мыши и выбрать в меню Open with
(так у меня, а по русски Открыть с помощью
) и выбрать программу текстового редактора. Тем кто, работает с программой Тотал Коммандер, легче так как просто нажимаем клавишу [F4]. Но реально старые версии редактора Notepad все же не удобны, так как не показывают номера строк. Лучше использовать любой редактор, который показывает номера строк. Я сам пользуюсь редактором Notepad2. Хотя у меня есть и свой редактор vkNotepad, который можно скачать с моего сайта с таким же названием. Впрочем поиск по словам есть и в обычном Notepad и часто этого достаточно.
Итак, в файле с расширением htm записан html код сайта с анимацией, то есть слайд-шоу. Даже если вы не знаете как записывается этот код -- не беда. Вам надо сделать совсем простые вещи. Первое: найти слова Заголовок анимации
(во 2-й строке) и написать любой заголовок, какой вы хотите. Это может быть название вашего слайд-шоу, ваше имя и другие данные. Этот заголовок покажется в титульной строке окна браузера. Второе: найти слова здесь надо набить . . .
(в 7-й строке) и заменить все слова между кавычками на ваш комментарий. В нем может быть сколько угодно предложений, но все надо набить одной строкой. Для этого надо включить режим вписывания текста в окно редактора (Word Wrap). Следующая строковая переменная htxt
написана мной и ее можно не трогать. Но если кому не нравится как я написал, можете переписать. В следующей 9-й строке надо поменять 4 числа, там исходно напечатано 10, 800, 600, 5000. Первое число - это число фотографий минус 1. Второе и третье числа - это ширина и высота исходного окна анимации в пикселах (точках) экрана, которое должно совпадать с размерами фотографий. Можно конечно напечатать и любые другие числа и фотографии будут автоматически промасштабированы на эти числа. Но желательно правильно указать аспектное соотношение, то есть отношение высоты к ширине. Оно используется при последующем масштабировании. А последнее число задает временную паузу между кадрами в миллисекундах, то есть 5000 - это 5 секунд. Можно изменить по вкусу.
А дальше самое главное. Напечатаны адреса в интернете тех фотографий, которые и составляют суть слайд-шоу. Каждый адрес в отдельной строке, в кавычках и заканчивается запятой. У последнего адреса запятой нет. Если вы используете фотографии, файлы которых размещены у вас на компьютере, то надо указать путь относительно размещения данного htm файла. То есть, если все файлы в одной папке, то пишем просто имена файлов. Как и где брать адреса в интернете я писал раньше в статье Советы начинающим
. Их надо копировать из соответствующих окон, либо из адресной строки браузера, либо из специальных окон, где их дают, например, в социальной сети Яндекс-фотки
. Если число адресов будет больше, чем первое число, описанное выше плюс 1, то не беда, будут показаны не все фотографии. А если будет меньше, то получим ошибку и слайд-шоу работать не будет. Ошибку впрочем легко исправить, поэтому я ничего для ее блокировки не делал. Может быть потом сделаю.
Все. Слайд шоу готово. Можно запускать. Если у вас заранее приготовлены адреса фотографий, то слайд-шоу можно сделать и менее, чем за 6 минут. Ну а если фотографии надо искать и отбирать из нескольких тысяч, а также обрабатывать, то это конечно уже другое время. Но в этом и есть муки творчества. Для показа слайд-шоу в интернете удобно даже свои фотографии закачивать в интернет, либо на свой сайт, либо в сеть Яндекс-фотки
. Как я уже сказал, если не снять блокировку, то при запуске swf файла на компьютере музыка, размещенная в интернете, играть не будет. А для того, чтобы она нормально играла в интернете именно вашу мелодию, необходимо еще отредактировать файл с названием playlist.mpl
. Стандартно в нем указан адрес моего файла, который реально существует и будет играть. Если mp3 файл находится в той же папке, что и swf файл, то достаточно указать только имя файла, и в таком варианте музыка играет и на компьютере и при переносе в интернет. Но это не всегда удобно. В интернете mp3-файл музыки может быть размещен на другом сервере.
Несколько слов о том как проходит анимация. Фотографии сменяют друг друга с использованием 11 разных переходов. Первый переход мгновенный и имеет паузу в два раза больше, остальные 11 фасонные и все разные. После того, как все 11 пройдут, они снова начинаются с первого фасонного и повторяются вновь и вновь. Тип переходов и их порядок зашиты в файле с расширением js. В принципе там записан код, который позволяет реализовывать бесконечно много разных переходов, хотя и не бесконечно много типов. Можно настроить анимацию на другие переходы. Конечно полноценно слайд-шоу играет только в интернете, так как его можно запустить с любого компьютера. Если у вас есть свой сайт и вы хотите поставить слайд-шоу туда, то просто копируем приготовленные файлы на сервер и все дела. О том, как использовать разработанный javascript код в более сложных анимациях, а также о том как он работает, я расскажу в других статьях.
Виктор Кон, 06.01.2012
