Программа презентации с комментариями и анимациями
Виктор Кон, (09-08-2018) 16-07-2019, eml: kohnvict@yandex.ru
Введение
Во все времена существовала проблема представления картинок во время выступления с докладом перед аудиторией. Как только появились персональные компьютеры с графическим экраном эту проблему стали решать с помощью компьютеров. Первоначально использовались проекторы, которые отображали экран компьютера на стену или на специальный экран в виде потока света. При этом приходилось закрывать окна и тушить свет. Сейчас все чаще используются мониторы очень больших размеров, которые сами светят достаточно ярко, а также в большом зале устанавливают мониторы поменьше в разных частях зала. Сейчас 2019 год, год назад прошел чемпионат мира по футболу в России. Огромные мониторы были на стадионах, которые показывали то же самое, что и по телевизору.
В настоящее время каждая программа показа видео способна убирать свою рамку и показывать картинку на весь экран монитора, как это делает телевизор. А в докладах используется такая же форма показа слайдов. Картинки показываются на весь экран, а необходимую информацию докладчик сообщает словами. Для приготовления слайдов и их показа стандартом считается программа Power Point из пакета программ Microsoft Office. Но в системе Linux она не работает, и там используют программы показа PDF файлов, первой из которых была программа Adobe Reader.
Набор слайдов, которые показываются на весь экран компьютера во время доклада, называют презентацией. Презентация является одним из видов слайд-шоу, то есть удобного показа картинок. Слайд-шоу получили большое распространение на сайтах интернета и программируются на разных языках, в том числе и на языке javascript. Есть разные варианты программ слайд-шоу. Их пишут как профессионалы для продажи за деньги, так и любители. Я сам как раз любитель, и мне было интересно сделать что-то свое в этой области. Я написал разные варианты таких программ. Одна из них имеет возможность масштабировать картинки, в том числе на весь экран, показывает 24 разных фасонных перехода от кадра к кадру и сопровождается музыкой.
Так хорошо показывать фотографии, поэтому я такие программы называю фото-шоу. Каталог всех сделанных мной фото-шоу можно посмотреть тут [01], а одно из последних произведений такого типа тут [02]. Другой тип фото-шоу под музыку сделан в виде книги, которая сама переворачивает страницы. Такие картинки не масштабируются. Последнее мое произведение такого типа тут [03]. Такие фото-шоу делаются проще, чем видео, имеют меньший размер файлов на диске, но по эмоциональному воздействию приближаются к видео. И картинки в них более высокого качества.
Программу презентации я тоже сделал и относительно давно, и даже сделал онлайн программу, которая делает такие программы для любого желающего. Вот ссылка на программу [04]. Там представлен вполне рабочий вариант. Но вдруг я понял, что такое слайд-шоу презентации можно значительно усилить, если добавить к каждой картинке текст комментария, который будет сообщать всю необходимую информацию о слайде так, как это делает докладчик. Тогда программа может выполнять две цели. Она может работать как презентация, и может использоваться как полноценный доклад, дающий всю необходимую информацию.
Кроме того, даже сам механизм показа слайдов требовал оптимизации. И я сделал такую программу. Я написал о ней статью тут [05]. В этой статье написано как пользоваться новой программой и как сделать свою собственную такую программу по заранее приготовленному образцу. То есть новую презентацию можно получить с помощью небольшого редактирования копии образца. Ссылка на образец в статье есть. Этой программы вполне достаточно для большого числа случаев. Я даже начал переводить свои старые фото-шоу в новый формат, открыл каталог таких презентаций тут [06].
На первом месте в этом каталоге стоит коллекция из моего автобиографического альбома, причем этот альбом полностью обеспечен комментариями. На запись комментариев я потратил не один день. Пока это единственный альбом, в котором комментарии написаны к каждой фотографии. Картинки для этого альбома я специально готовил и закачивал. А другой альбом из последнего отдыха в Болгарии в прошлом году я сделал по адресам фотографий, которые я размещал на моей странице в сети Гугл Плюс. Такой вариант вполне подходит для тех, у кого нет своего сайта для размещения фотографий.
Но в какой-то момент я понял, что могу еще более усилить потенциал программы. А именно, каждую фотографию или картинку можно снабдить не только комментарием, а и анимацией, то есть движением какого-то объекта в отдельном окне. Это движение реализуется с помощью серии кадров, то есть необходимо приготовить дополнительный набор картинок, которые показываются с некоторой паузой и в цикле. В такой форме удобно показывать вращающиеся трехмерные объекты, но реально можно показывать все, что угодно, хоть набор кадров из кино.
Дело в том, что доклады с показом анимационных картинок уже давно практикуются. Программа Power Point способна показывать формат картинок "анимационный gif", когда в одном файле записывается сразу много картинок и они показываются подряд с какой-то паузой. На языке javascript можно написать программу, которая так же точно показывает картинки из серии файлов. К сожалению, браузер не умеет работать с файловыми архивами, да и в этом нет большой необходимости в интернете.
Конечно, это уже очень сложный режим. Если презентация имеет 100 кадров и к каждому из них сделать анимацию еще на сто кадров, то картинок получится 10000. Но вовсе не обязательно показывать анимации к каждому кадру. Надо просто иметь возможность показать их к конкретным кадрам, где это необходимо по логике презентации. К остальным кадрам можно скопировать ту же самую анимацию. Важно также, что есть возможность заказывать любой масштаб при показе анимации. Она не обязательно идет на весь экран компьютера.
Как бы сложно такая программа не выглядела, я ее сделал, и она отлично работает. Данная статья как раз посвящена этой программе. Снова я сначала расскажу как она работает, то есть работает образец [07], который я приготовил. А потом о том, как самому приготовить такую презентацию методом редактирования образца.
Как программа работает
Итак, рассмотрим как эта программа работает. Ее входными данными для презентации являются два основных массива и еще несколько массивов для анимации. Первый массив сообщает адреса картинок в интернете или на компьютере для показа в презентации, второй массив содержит тексты комментария к каждой картинке. Если есть возможность, то лучше задавать относительные адреса, тогда все будет работать одинаково в интернете и без интернета. Реальные размеры картинок не имеют значения и не используются. Но ясно, что чем они больше, тем качество лучше, но зато и размеры файлов увеличиваются. Однако, разумно соблюдать заказанное аспектное отношение, иначе картинки будут искажаться.
При запуске программа считывает все картинки сразу и показывает их в виде таблицы иконок меньшего размера. Если интернет медленный, то в самом начале придется какое-то время подождать. При работе с картинками на компьютере все очень быстро. Таблица иконок всегда квадратная, и она может показывать не все картинки сразу, а только часть. Она с самого начала имеет ширину на всю ширину браузера и высоту в соответствии с аспектным отношением экрана. При желании работать в полноэкранном режиме надо открыть окно браузера по максимуму, а затем либо нажимать клавишу [F11], либо кнопку в настройках браузера. В самом начале программа выдает подсказку.
Режим презентации работает следующим образом. Выбираем любую картинку в таблице и кликаем ее. Она получается на максимальный размер. При этом исходные параметры можно задать таким образом, что комментарий к первой картинке сразу появляется. А можно и отказаться от комментариев, что необходимо в реальном докладе. Если кликнуть на картинке, то она сменяется второй картинкой со своим комментарием и так далее. Для более свободной работы с картинками и комментариями программа выставляет 10 кнопок. Они имеют названия по буквам F, B, T, C, A, P, E, M, H, G и выставлены в два ряда. Клик на кнопках выполняет определенную работу. Тот же самый эффект получается при нажатии клавиш клавиатуры с теми же буквами.
Описание начнем с кнопки H. Она выставляет текст подсказки. Это Help, быстрая помощь, если забыли как пользоваться кнопками и программой. Кнопка F (forward) копирует клик на картинке, то есть показывает следующий кадр. При выходе за пределы числа картинок, все начинается с самого начала. Кнопка B (back) показывает предыдущий кадр. Снова после первого идет последний. Кнопка T (table) показывает таблицу иконок. Таблица имеет фиксированное число иконок, которое задается как число колонок в квадрате. Например, если число картинок 40, а число колонок 4, то таблица будет иметь 16 кадров. В этом случае таблица имеет несколько листов. При повторном нажатии этой же кнопки показывается следующий лист таблицы и так можно быстро просмотреть все кадры презентации.
Каждый раз показывается тот лист таблицы, в которую входит текущий кадр. Так, пока текущими являются картинки с номерами от 1 до 16 будет показываться таблица иконок именно этих номеров. При переходе к 17-й картинке таблица будет показывать номера с 17 по 32 и так далее. Последняя таблица может быть не полной. Кнопка C (current) показывает текущий кадр, в самом начале она показывает первый кадр, с нее можно начинать показ или продолжать для выхода из таблицы иконок.
Итак, первые 4 кнопки выполняют навигацию. Кнопки с 6-й по 9-ю меняют режимы работы программы. Кнопка P (parameters) в окне комментария выставляет значения параметров с подсказкой их смысла. Первый параметр -- это аспектное отношение (АО) картинок. Хотя реальные размеры картинок не имеют значения, но АО при масштабировании используется. К сожалению, программа не может определить АО. Она может определить аспектное отношение экрана монитора, но картинки не всегда ему соответствуют. И при неполном соответствии картинки не масштабируются на весь экран. Они заполняют либо всю высоту, либо всю ширину экрана и выставляются слева и сверху.
Исходное значение АО в программе задается в файле входных данных двумя значениями параметров art (числитель, top) и arb (знаменатель,bottom) самим создателем слайд шоу в виде дроби. Он знает заранее какое аспектное отношение у его картинок. И оно должно быть одинаковым для всех картинок, иначе они будут искажены. Но это значение можно изменить и потом перезапустить программу по кнопке E. Второй параметр -- это номер картинки, который желательно показать следующей. Это имеет смысл, так как таблица не показывает иконки всех картинок, и быстрый переход можно сделать по номеру. Третий параметр -- это размер текста. Размер текста задан заранее оптимальным образом, но если кому он не нравится, то можно изменить его, то есть сделать меньше или больше, задавая число меньшее или большее 1. Четвертый параметр -- это ширина текстового окна. Он снова задан оптимально при аспектном отношении картинок 4*3 и аспектном отношении экрана 16*9, но его можно увеличить или уменьшить таким же образом.
Пятый параметр -- это число колонок в таблице. Оно задается во входных данных, но его можно изменять в процессе работы. При этом таблица переделывается, начиная с первого кадра. Шестой параметр -- это ключ автоматического показа комментариев. Исходно он задан 1 (то есть показывать), но если его поменять на 0, то комментарии появляться не будут. Седьмой параметр -- это ключ перезапуска программы. Он тоже исходно задан 1, чтобы изменение параметров автоматически работало. Если все картинки загружены, то перезапуск происходит очень быстро. Но его можно изменить на 0 и тогда перезапуск происходит автоматически если изменилось аспектное отношение или число колонок, а если что-то другое, то перезапуска не будет. Кстати аспектное отношение надо задавать числитель и знаменатель отдельно, не меняя знака деления. Восьмой параметр показывает общее число картинок. Его менять нельзя, точнее он не меняется и показывается только для информации.
После того как поменяли (или нет) параметры, нужно кликнуть кнопку E (execute). Ее назначение такое. Она всегда убирает текстовое окно (окно комментария) с экрана, а если редактировались параметры, то она их перезаписывает. И если задан ключ перезапуска программы, или изменилось АО или число колонок, она ее перезапускает. Следующая кнопка M (message) как раз показывает окно комментария, если не задан режим автоматического показа, или окно убрано кнопкой E. Она всегда показывает окно комментария так же точно, как E всегда окно закрывает, но только если показывается картинка. При показе таблицы иконок комментария нет и она не работает. Кнопка H описана выше.
Таким образом, описанные кнопки позволяют легко управлять как показом картинок, так и комментариев. Отмечу еще приоритет показа. Окно комментария показывается над окном картинки. По этой причине окно поставлено в правую часть экрана, а картинки -- в левую, чтобы понизить область их пересечения. А кнопки показываются над всеми окнами. В самом начале работы программы они всегда показываются и их нельзя убрать в приборах, где нет клавиатуры. По этой причине они поставлены справа и над окном комментария. Если аспектное отношение картинок такое, что они заполняют весь экран, то кнопки всегда будут закрывать часть картинки. Сейчас современные программы позволяют показывать кнопки только при определенном положении курсора мыши. Но я пока так не сделал. Зато я сделал так, что если клавиатура есть, то нажимая клавишу D кнопки можно убрать. Повторное нажатие клавиши D возвращает их на место.
Быстрый переход к таблице с нужными номерами картинок можно сделать либо задавая картинку с нужным номером по кнопке P, либо выставляя последний кадр таблицы, кликая его перейти в следующую область и снова вызвать таблицу. Такую операцию можно повторять несколько раз как вперед, так и назад (используя кнопку B). Задавать число кадров в таблице слишком большим не всегда имеет смысл, так как в этом случае иконки будут иметь очень маленький размер. Но есть еще более быстрый способ, а именно, повторное нажатие кнопки T автоматически показывает следующую порцию иконок. Если число картинок превышено, то иконки показываются с самого начала. То есть нажимая только кнопку T можно быстро просмотреть все картинки.
Наконец, есть еще кнопка A. Эта кнопка запускает анимацию, приписанную к текущей картинке. Анимация работает и тогда, когда выставлена таблица иконок просто потому, что программа номер текущей картинки всегда знает. Выбор другой картинки в таблице приведет к изменению этого номера. Но правильно запускать анимацию только в тот момент, когда показывается конкретный кадр, а не таблица. И анимация может быть дополнением именно к этому кадру. Анимация открывается в отдельном окне браузера поверх окна презентации и начинается сразу, без предупреждения. Она показывает серию картинок в окне с заданными размерами через фиксированную паузу и без переходов.
То есть все как в кино. Только в кино показываются 24 кадра в секунду, а тут можно показывать с любой паузой. Параметры анимации задаются в файле входных данных сразу после задания адресов картинок презентации и комментариев. Только теперь входные данные -- это массивы. Первый массив задает ширины окон для каждой анимации, второй массив задает высоты окон для каждой анимации, третий массив задает паузу между кадрами для каждой анимации. И четвертый массив задает набор текстов. В тексте в каждом элементе массива должны быть указаны списки адресов каждой анимации, сразу полный список, каждый адрес в кавычках и через запятую.
Это огромная информация. Но имена файлов анимации лучше всего пронумеровать. Тогда все адреса можно задать кодом javascript в цикле, меняя только номер. Такая форма записи и показана в примере. Она более компактная. Ну и можно задать одни и те же параметры для всех кадров, меняя индивидуально только параметры для тех кадров, где анимация реально необходима. Если в анимации совсем нет необходимости, то код в конце файла входных данных примера просто не трогаем. Он написан правильно, а если не кликать кнопку, то он и не будет работать.
А кнопка G делает еще более общую работу. Она в отдельном окне для каждого кадра запускает новый сайт, на котором может быть показано все, что угодно. Это может быть комментарий к данному кадру, но написанный в более фасонном виде, чем простой комментарий. Это может быть проигрыватель mp4 файла видео или анимированный gif файл. Или любая другая анимация, написанная, например, с использованием графического пакета языка javascript. Вообще говоря, для такой работы можно было бы просто открыть другое окно браузера и запустить другой сайт. Но при работе в полноэкранном режиме это долго. К тому же адрес сайта надо как-то приготовить. А в данной презентации уже все готово. Вызвать сайт по кнопке очень быстро.
Входными данными для этой кнопки являются три массива: ширины окна, высоты окна и адреса сайтов. Ну а сайт пользователь готовит сам. Какие-то типовые образцы я потом приготовлю отдельно. В примере показан один из моих сайтов с проигрывателем mp4 видео файла. Это уже хороший пример. Это вообще отдельный вопрос -- как готовить кадры анимации по обоим кнопкам. Тут есть много вариантов. Если эти кадры рисуются компьютерной программой, то такая программа способна записать кадры в файлы, упорядоченные по номерам. Именно так получены кадры анимации в примере для кнопки A. И уже javascript код записывает их в прямом и обратном порядках для создания цикличности. Но могут быть и другие варианты. Можно выбрать кадры из анимационного gif файла. Можно вырезать кадры с какой-либо паузой из видео файла с помощью программ работы с видео. Но наиболее общее применение в науке -- это показ двумерных зависимостей, как графиков от первого аргумента при изменении второго аргумента. Или цветных карт двумерных зависимостей при изменении третьего аргумента. Можно вращать трехмерные объекты, как показано в примере.
У программы есть еще одна возможность. На компьютерах с клавиатурой она может показывать часы, которые дают информацию о реальном времени. В самом начале часы не видны. Но если нажать клавишу I, то часы появляются в правом нижнем углу. Они имеют такой же вид, как на моем сайте. И примерно такой же размер. Размер часов можно поменять в самом начале, меняя параметр cws, как написано в следующем разделе. Часы могут быть полезными в процессе реального доклада, на который обычно дается фиксированное время. Чтобы понять сколько времени осталось, можно запомнить время окончания доклада и смотреть на часы. Сейчас не все носят часы на руках, а смотреть их на смартфоне не быстро. Если нажать клавишу повторно, то часы снова исчезают.
Как самому сделать такую презентацию
Теперь я расскажу как самим сделать такую программу по образцу уже сделанной программы [07]. Программа состоит из 4-х файлов. Код главного файла браузер на ноутбуке показывает при нажатии клавиш [Ctrl]+[U]. У себя на компьютере нужно открыть текстовый редактор, лучше всего Notepad2, но еще лучше -- мой редактор vkNotepad [08]. Он также встроен в более общую универсальную программу vkUtility [09]. Достаточно ее скачать и тогда много чего можно будет делать. В моем редакторе можно открыть любой файл, выбрать в меню [File]->[Save As] и спасти файл с новым именем. Затем очистить его содержимое ([Ctrl]+[A] и затем [Ctrl]+[X]). Затем надо скопировать текст окна браузера, показывающего код главного файла (в браузере [Ctrl]+[A] и затем [Ctrl]+[C], а в редакторе [Ctrl]+[V]).
После этого если спасти файл, то вы имеете свой главный файл программы. Но перед тем, как спасти текст файла, его надо отредактировать. Во первых, имя файла должно быть вашим и уникальным. Во-вторых, нужно переписать текст внутри скобок
Следующий этап. В коде главного файла программы в браузере файл sun-sea.js дан ссылкой. Кликаем ссылку и видим код (текст) этого файла. Его снова надо спасти в ваш уникальный файл, который будет клоном этого файла. И поменять в нем все адреса картинок и тексты комментариев. Адреса картинок в двойных кавычках, а тексты в одинарных. В текстах могут быть двойные кавычки, а конец параграфа надо записывать как \n. Кроме того, можно поменять исходное аспектное отношение в первой строке задавая другие числа, чем в файле образце. А также размер текстов (параметр bws), ширину текстового окна (параметр mws), число колонок таблицы (параметр nt), ключ показа комментариев (параметр sm) и размер часов (параметр cws). И все. Программа будет показывать ваши картинки и ваши комментарии. Все остальное будет работать точно так же, как в примере.
В том числе и анимации. Но если вы хотите указать ваши собственные анимации, то это дело посложнее. В примере входные данные для кнопок А и G отделены пустыми строками, а массивы для этих кнопок имеют на конце буквы a и b. Для кнопки A указана только одна анимация с шириной окна 45 (значение переменной w), высотой 36 (значение переменной h) и с паузой 0.1 сек (значение переменной p). Эти значения можно изменить на любые другие. Реальный размер картинок не имеет значения, они будут масштабироваться на указанный размер. Надо понимать, что презентация получается красиво на всех приборах только в том случае, если она масштабируется на ширину окна браузера. Поэтому размеры картинок анимации указываются в процентах от ширины окна браузера. Окно анимации имеет размеры чуть больше размеров картинок.
Тут надо сделать замечание. Если размеры слишком маленькие, то браузер может принудительно поставить ширину окна больше. Разумно ставить значения ширины, равные примерно половине, то есть около 50. Важно также понимать, что браузер сам может увеличить указанную ширину, но он не может ее уменьшить. Поэтому увлекаться большими размерами не имеет смысла.
В анимации примера используются файлы с номерами от 01 до 63, записанные на одном из моих сайтов несколько лет назад, то есть 63 файла. В текстовой переменной tt в одинарных кавычках записан цикл по 124 картинкам, то есть 63 в прямом и 61 в обратном направлениях. Если у вас есть 63 файла с такими же номерами, то достаточно только поменять общий адрес картинок в 81-й строке на ваш. А в 85-й строке изменить число слайдов 36 на ваше число. Если ваши номера файлов другие или их число другое, то надо менять код в цикле более сложным образом. И тут уже без знания основ языка javascript сделать что-то будет сложнее. Число картинок анимации задает переменная n0. Остальное вычисляется автоматически.
Примеры записи кода анимаций для разных случаев я потом запишу в отдельном файле. И пока это здесь делать не буду. Я использовал просто те файлы, которые уже были записаны. Как я уже сказал выше, если вы не собираетесь использовать анимации, то код можно оставить как есть. Ошибки не будет, даже если нажать на кнопки.
Для анимации по кнопке G в примере заданы три массива wb, hb и ttb. Это ширины и высоты окон и адреса сайтов. Тут все проще. Но нужно иметь хотя бы один работающий адрес. Я поставил два адреса. Один из них привязан к первому слайду и показывает анимационный график, то есть программу, которая показывает зависимость от первой переменной на графике, а вторая переменная меняется во времени. К всем остальным слайдам привязан другой сайт. На нем стоит проигрыватель видео из mp4 файла с заголовком и рекламой. Как я уже сказал, возможности у этой кнопки очень большие, но надо уметь писать сайты. Образцы для таких сайтов я опишу в отдельной статье. Пока она не написана, поэтому ссылку я не даю. Как только я ее напишу, в этой статье появится новая ссылка. В данной анимации масштабировать сложнее, поэтому пока размеры окна задаются в пикселах.
Если у вас нет сайта, то картинки и анимации можно показывать на компьютере. Для этого проще всего все файлы картинок и два файла программы разместить в одной папке и вместо адресов указать просто имена файлов. Если же у вас и интернета нет, то тогда надо и еще два файла скопировать себе на компьютер таким же способом, как указано выше. И разместить их в той же папке. Название им можно не менять. А в главном файле указать только название вместо ссылки. Первая ссылка на файл дана в главном файле как ../js/superviewa.js. Скачиваем файл, ставим в папку и убираем в ссылке указание на сайт, оставляя только имя. Вторая ссылка записана сложнее. Сайт указан в переменной ttbg второго файла во второй строке. А имя файла img01.png записано в 3-м файле. Так что нужно скачать файл ../pic/img01.png. Затем обнулить переменную ttbg, то есть оставить пустые кавычки.
Вот и все. Как видим, никакого особенного знания интернет технологий такие действия, кроме анимаций, не требуют. Не беда, что вы не понимаете, что написано в других частях кода. Интернет -- это полностью открытая система и все, что в нем находится, доступно каждому. Сделать информацию недоступной невозможно, максимум, что можно сделать -- это сделать ее трудной для понимания. Так работают почти все автоматические генераторы кода. Они создают код огромных размеров, в котором сложно понять что нужно, а что нет. Но я как раз сделал так, что части, которые нужно редактировать, выделены и вполне понятны.
Если у кого есть вопросы, то пишите мне в почту, адрес указан в заголовке.
Ссылки на интернет
[01] 
Каталог фото-шоу под музыку
[02] Фото-шоу Нью-Йорк под музыку Оскара Бентона
[03] Фото-шоу Берлин в виде книги
[04] Программ-генератор слайд-шоу
[05] статья о программе презентации с комментариями
[06] каталог презентаций с комментариями
[07] образец программы презентации с комментариями и анимациями
[08] vkNotepad -- программа редактирования текстов
[09] vkUtility -- универсальная программа, которая делает все.