4. Слайд-шоу по протоколу, модель: vkAsep
Мотивация
В предыдущей статье (номер 3) я рассказал о возможности делать слайд-шоу очень быстро. Фактически там надо было указать адреса фотографий и 4 параметра, а также поставить музыку, о которой говорилось в статье номер 2. Это удобно когда нет времени и желания делать более фасонное представление. Но вот наступает момент когда такое желание появляется. А раз есть желание, то найдется и время. В этом случае я хочу предложить более сложную технику создания слайд-шоу. Она основана все на той же javascript программе, которая работает и в предыдущем случае, но теперь программа будет использоваться в полном объеме своих возможностей. В этом варианте редактировать непосредственно html код сайта уже не очень удобно и разумно использовать программу генератор html файла. Программа генератор сама готовит вам текст с html кодом сайта одним файлом. А задача пользователя -- обеспечить программу всей необходимой информацией. Естественно, что возможности программы не безграничны и разнообразие переходов между кадрами ограничено. Однако в данном случае это разнообразие намного превышает то, которое используется в автоматическом варианте модели vk24sep.
Для данной модели ничего скачивать не надо. Сама программа генератор написана на javascript и размещена на одном из моих сайтов вот по этой ссылке. Она работает следующим образом. У нее есть окно редактора. В это окно надо скопировать текст протокола из вашего файла после того как нажали кнопку [Input]. Протокол можно и прямо в окне редактора программы написать, но это неудобно, так как программа его не сохранит. Лучше писать в любом текстовом редакторе, спасти содержимое в файл, а потом скопировать в окно программы. После этого нажимаем кнопку [Execute] и в этом же окне появляется другой текст -- это уже готовый html код сайта. Текст надо спасти в окно вашей программы редактора и затем в файл с расширением htm. И можно его запускать. Процедура с копированием необходима по той причине, что программам, работающим в сети на серверах бесплатного доступа не дают возможности работать с файлами ни на сервере, ни на компьютере пользователя. Второе по соображениям безопасности. Однако на копирование текста через буфер обмена запрета нет. И это остается единственным каналом обмена данными между пользователем и интернет программой. Напомню, что копирование делается с помощью клавиш [Ctrl]+[A] и затем [Ctrl]+[C] в окне источника, а также [Ctrl]+[V] в окне куда производится копирование.
Описание
Сайт, который делает указанная выше программа, в основном похож на тот, что описан в статье номер 3. В окне браузера в правом верхнем углу стоит картинка плейера музыки, музыка запускается сразу, хотя это можно регулировать. Справа от плейера музыки стоят 5 кнопок, которые позволяют регулировать процесс показа. А под плейером и кнопками находится окно самого слайд-шоу, в котором показываются фотографии. Под этим окном есть строка, которая сообщает номер картинки и ее адрес в интернете или на компьютере. А еще ниже может быть текст комментария ко всем фотографиям сразу, он может иметь произвольно большой размер. То есть все так же, как в прошлый раз. Но в данном случае окно показа нужно стараться задавать равным размеру картинок, так как автоматического масштабирования не происходит. Зато картинки могут иметь произвольный размер как меньше, так и больше окна показа.
Я повторяю описание из предыдущей статьи. Кто уже читал, можете пропустить. Плейер музыки. Стандартно я поставил тег <embed>
который запускает встроенный плейер браузера, об этом написано в статье номер 2. При желании сам плейер можно поменять на любой другой. Потому что плейер задается специальным кодом (набором букв) и можно просто поменять один набор букв на другой. Теперь кнопки. Всего я сделал 5 кнопок. В стандартном режиме анимация сразу запускается и первая кнопка [Stop] способна ее остановить. А вторая кнопка [Start] - запустить снова, если она остановлена. Каждая кнопка имеет только одну функцию: установить режим показа, то есть повторное нажатие кнопок ни к каким изменениям не приводит. Третья кнопка [Back] задает режим прокрутки в обратном направлении. Если она нажата, то кадры двигаются к началу, а не к концу. Если надо это исправить, то необходимо снова нажать кнопку [Start]. Таким образом кнопка [Start] имеет две функции: она запускает анимацию после остановки (ликвидирует действие кнопки [Stop]) и она восстанавливает нормальное направление движения (ликвидирует действие кнопки [Back]). Четвертая кнопка [Next] позволяет принудительно перейти к следующему кадру в том направлении, какое является основным в данный момент. Все кадры, кроме первого, показываются заданный интервал времени (первый в два раза дольше), но если нет времени ждать - жмем [Next]. Ну и пятая кнопка позволяет сразу перейти к первому кадру, то есть начать все сначала.
Строка под фотографиями с указанием их номера и адреса сделана для того, чтобы иметь навигацию, а также хотя бы частично указать автора фотографии. Дело в том, что если компьютер подключен к интернету, то анимация может показывать любые фотографии, размещенные в интернете на любых сайтах. Ну и указание адреса фотографии позволяет понять - является ли она собственностью автора сайта или слайд-шоу, или взята из интернета. Это очень увлекательное занятие - готовить слайд-шоу по фотографиям на любую тему. Из миллионов фотографий интернета можно выбрать те, которые наиболее полно раскрывают тему и, даже не скачивания их себе, сразу показывать с тех сайтов, на которых они размещены. Это будет честно по отношению к авторам фотографий. Ну а назначение комментария ясно и без слов.
Что надо делать
Ниже написано о том как приготовить протокол показа в файле входных данных. Во первых, вы должны выбрать размеры окна показа, исходя из размеров ваших фотографий. Если размер фотографий больше, то будет показана только та часть, которая влезает в окно, а если меньше, то окно не будет заполнено. Например, если большинство ваших фотографий имеет размер 800*600, то разумно именно таким и задавать размеры окна. Итак, в первой строке файла указываются 2 числа - размеры окна в пикселах, например,
800 600
Числа надо набивать с первой позиции, без пробелов перед первым числом, иначе будет ошибка. Так как в стандартных переходах используется 10 кадров, то числа должны делиться на 10, иначе не во всех браузерах анимация будет работать адекватно. Так если вертикальный размер 533, то надо ставить 530.
Во второй строке указывается заголовок окна браузера при показе шоу, это может быть любой текст, например,
Мое первое фото-шоу
В третьей строке указывается полный интернет адрес файла с музыкой, желательно mp3 формата, который будет проигрываться браузером с помощью встроенного проигрывателя. Например так
http://n-i-shulga.narod.ru/music/Epipbany.mp3
Но если фотошоу предполагается использовать без интернета, то есть на локальном компьютере, то можно указывать относительный адрес файла, то есть по отношению к будущему адресу создаваемого файла фото-шоу. При этом вы заранее должны решить будет ли данный файл находиться в той же папке или во внутренних папках.
В четвертой строке пишется текст комментария ко всему шоу. Этот текст появится на экране в окне браузера и будет виден все время. Текст может быть сколько угодно длинным, но надо писать все на одной строке. Потом текст впишется в его поле с шириной, равной ширине окна показа.
В пятой и последующих строках надо указать адреса фоток, которые будут показываться, а также информацию о показе. На сервере Яндекс-Фотки узнать адрес фотки можно на ее сайте, если кликнуть ссылку "Код для вставки на сайт или в блог". Там нужно копировать самый нижний адрес. Итак, в каждой строке указывается адрес только для одной фотки. После адреса надо поставить знак вертикальной черты " | " и за ним указать число. Это число составное, в нем младшие два разряда указывают на номер стандартного перехода, это могут быть числа от 0 до 23, а также 99. Старшие разряды указывают время показа фотки в единицах 0.1 секунды. Так, если надо задать 5-й переход, 4 секунды пауза, то число будет 4005. Число также должно заканчиваться вертикальной чертой. Вот пример правильного задания
http://kohnvict.narod.ru/a/base.png|2000|
В этом примере указан реальный адрес фотки, дающей просто серый фон размером 800*600, а также время 2 секунды и нулевой переход. Здесь принцип задания адресов тот же. Для фоток в интернете надо указывать полный интернет адрес, для фоток на локальном компьютере - относительно файла фото-шоу.
Стандартные переходы описаны ниже. Здесь я объясню что такое переход 99. Это переход по параметрам пользователя. Если указан такой переход, то после второй вертикальной черты на строке надо записать в явном виде параметры перехода. Есть нормальный набор параметров и расширенный набор. Нормальный набор имеет следующюю структуру:
X, Y, n, x, y, t, k|
То есть это 7 чисел, разделенных запятыми. Перед первым числом желательно, хотя и необязательно, поставить пробел. Первые 2 числа ( X, Y, ) указывают стационарную (конечную) позицию картинки в пикселах, 3-е число ( n, ) указывает число шагов перехода, Следующие два числа ( x, y, ) указывают стартовую позицию картинки до начала перехода, 6-е число ( t, ) указывает время показа одного шага в миллисекундах и наконец 7-е число ( k| ) указывает модификацию перехода и заканчивается вертикальной чертой. Об этом чуть позже. Вот пример:
http://img-fotki.yandex.ru/get/1/olru.0/0_d4d3_777942a5_XL.jpg|2099| 0, 0, 10, 500, 400, 30, 0|
Необходимо помнить, что вертикальная ось идет сверху вниз, что позиция 0, 0, соответствует совпадению левого верхнего угла фотки с левым верхним углом окна показа. Так в указанном выше примере, картинка будет исходно смещена вправо и вниз и постепенно (за 10 шагов) вернется на свое правильное положение. Все части картинки за пределами окна показа не видны. На самом деле каждый раз показываются 2 картинки. Первая под второй. В нижнем слое находится предыдущая картинка, а выше - текущая. При модификации 0 (k=0) нижняя картинка стоит неподвижно. Но если задана модификация 1 (k=1), то нижняя картинка одновременно сдвигается вправо или влево или вниз или вверх в зависимости от движения верхней картинки. Сдвиг нижней картинки происходит на размер окна показа. При этом надо задавать только горизонтальные или вертикальные движения. В этих случаях происходит эффект выталкивания одной картинки другой для картинок размером, равным размеру окна показа, когда старая картинка выталкивает новую, а в процессе обе картинки видны частично. Итак, если w и h - размеры области, то первые 13 стандартных переходов описываются следующими параметрами, которые учитываются автоматически
0 == 0, 0, 0, 0, 0, 0, 0 1 == 0, 0, 10, -w, -h, 30, 0 2 == 0, 0, 10, w, h, 30, 0 3 == 0, 0, 10, -w, h, 30, 0 4 == 0, 0, 10, w, -h, 30, 0 5 == 0, 0, 10, -w, 0, 30, 0 6 == 0, 0, 10, w, 0, 30, 0 7 == 0, 0, 10, 0, -h, 30, 0 8 == 0, 0, 10, 0, h, 30, 0 9 == 0, 0, 10, -w, 0, 60, 1 10 == 0, 0, 10, w, 0, 60, 1 11 == 0, 0, 10, 0, h, 60, 1 12 == 0, 0, 10, 0, -h, 60, 1
При других модификациях обе картинки, как предыдущая, так и текущая стоят неподвижно, но текущая картинка может быть установлена с любым смещением, задаваемым теми же координатами X и Y. В процессе перехода варьируется видность текущей картинки. Она показывается сначала в маленькой области, которая все время растет, пока не откроет всю картинку. В этом случае вместо параметров x и y надо задавать ширину w и высоту h текущей картинки. Она может не совпадать с размерами окна показа. Для картинки с заданными размерами и заданной позицией только номер модификации перехода вносит изменения. Так при k=2 картинка разворачивается из левого верхнего угла, k=3 -- из левого нижнего угла, k=4 -- из правого нижнего угла, k=5 -- из правого верхнего угла, k=6 -- слева направо, k=7 -- справа налево, k=8 -- сверху вниз, k=9 -- снизу вверх, k=10 -- из центра, k=11 -- предыдущая картинка сворачивается в центре, под ней оказывается текущая картинка. Соответственно еще 10 стандартных переходов описываются следующими параметрами
13 == 0, 0, 10, w, h, 30, 2 14 == 0, 0, 10, w, h, 30, 3 15 == 0, 0, 10, w, h, 30, 4 16 == 0, 0, 10, w, h, 30, 5 17 == 0, 0, 10, w, h, 30, 6 18 == 0, 0, 10, w, h, 30, 7 19 == 0, 0, 10, w, h, 30, 8 20 == 0, 0, 10, w, h, 30, 9 21 == 0, 0, 10, w, h, 45, 10 22 == 0, 0, 10, w, h, 45, 11
Есть еще модификации 12 (k=12) и 13 (k=13). В модификации 12 предыдущая картинка ставится в начало области, параметры X, Y, w, h задают положение и размеры второго окна, через которое двигается текущая картинка. Сама картинка может иметь любые размеры, но дополнительно задаются длина перемещения L и направление перемещения d. Эти два параметра надо указать за параметром перехода и только потом закрыть вертикальной чертой. Итак вот пример
X, Y, n, w, h, t, k, L, d|
Направления движения такие: d=1 -- снизу вверх, d=2 -- справа налево, d=3 -- сверху вниз, d=4 -- слева направо. Стартовые позиции картинки для этих 4-х вариантов определяются из условия, что изначально картинка не видна и она постепенно появляется снизу, справа, сверху, слева соответственно. Шаг движения очевидно равен L/n. Разумно, если размер картинки в направлении движения совпадает с L, а другой размер совпадает с размером окна, через которое картинка двигается. Но это не обязательно. Для этой модификации нет стандартных переходов, главное ее применение - продвигать картинку с текстом на фоне другой картинки. При этом нужно помнить, что при новом кадре картинка с текстом станет предыдущей, поэтому перед показом новой картинки необходимо еще раз прогнать предыдущую картинку с нулевой паузой и без переходов. Замечу также, что прогнать большую картинку через окно показа можно и в нулевой модификации.
В модификации 13 реализуется плавное изменение прозрачности картинки от полностью прозрачной до любой степени прозрачности. Полностью прозрачная картинка имеет значение параметра 0, полностью непрозрачная - 1. Параметры перехода задаются стандартным набором
X, Y, n, x, y, t, k|
но в данном случае X,Y - координаты положения картинки, x равно шагу изменения прозрачности, y не используется и может быть равно нулю, n - число шагов, t - время на один шаг и k=13. Соответственно есть стандартный переход
23 == 0, 0, 10, 0.1, 0, 60, 13
который оптимизирован на плавный переход от полностью прозрачной картинки до полностью непрозначной. В этом случае новая картинка как бы постепенно появляется из старой.
Важное замечание. Из-за особенной использованного алгоритма переход с k=13 нельзя ставить после перехода с k=10 или k=11. Если использовать все стандартные переходы подряд, то это условие нарушится. Поэтому после перехода 20 надо ставить сначала переход 23, а затем 21 и 22. В противном случае переход отрабатывается неправильно. Ничего страшного не происходит, но некрасиво. Проще просто соблюдать указанное ограничение и тогда проблем не будет.
Все. После использования программы слайд шоу готово. Можно запускать. Если у вас заранее приготовлены адреса фотографий, то слайд-шоу можно сделать относительно быстро, но все зависит от того насколько сложные переходы вы задумали использовать. Ну а если фотографии надо искать и отбирать из нескольких тысяч, то и это добавляет время. Но в этом и есть муки творчества. Еще раз замечание про сервер Народ. Дело в том, что на сервере narod.ru
переходы с k=1 отрабатываются не совсем корректно. Если вы запускаете слайд-шоу у себя дома, или записали файлы на другой сервер, который не приписывает рекламу на js, то все будет нормально. А если записать файлы на narod, то нет. Поэтому если вы планируете записывать файл на сервер Народ, то лучше переходы с k=1 не использовать.
Итак, если у вас есть свой сайт и вы хотите поставить слайд-шоу туда, то просто копируем файл на сервер и все дела. О том, как устроен разработанный javascript код, а также о том как он работает, я расскажу в других статьях.
Виктор Кон, 05.10.2011
