Архив Галактики

Превращаем презентации PPT (PPTX) во флеш-ролики. Публикуем на своем сайте

scar169 / 04.05.2012

В настоящее время практически все учителя умеют делать презентации в Microsoft PowerPoint. Преимущества этого ПО общеизвестны: простота первичного изучения, множество встроенных графических эффектов, огромное количество шаблонов в сети Интернет, возможность анимации, управляющие элементы (триггеры), простота вставки звука и видео.

Презентации используются в самых разных видах: от сопровождения лектора, до игровых конструкций. Но есть у этой технологии и недостаток - привязанность к ПО. Конечно, можно возразить, что, используя вариант "Опубликовать-Подготовить для компакт диска" мы можем создать папку с содержимым презентации и средством просмотра, но, тем не менее, возможность ее использования будет ограничена ОС Microsoft Windows. Кроме того, в папке будут храниться в виде разрозненных файлов видео и звуковые ролики, что, опять же, не всегда устраивает.
Поэтому сегодня я расскажу об одном из вариантов конвертации презентации в более универсальный формат - swf, с сохранением всех особенностей исходного продукта. Ну, а полученный результат можно использовать и как самостоятельный файл, а можно и встроить в свой сайт.

Шаг 1. Переводим презентацию в формат swf
У вас уже готова презентация, и мы хотим сохранить ее в новом формате. Есть разные варианты конвертации, но, поскольку я уже писал о Ispring, то им и воспользуюсь. В указанном посте рассказывалось о сайте для публикации своих презентаций и о приложении, облегчающем эту работу. Сегодня мы поговорим о других возможностях этого приложения. Cсылка на страницу загрузки Ispring Free.

Итак, приложение закачано и установлено, в PowerPoint появилась дополнительная панель Ispring, начнем конвертацию.

Открываем свою презентацию, переходим в панель Ispring Free и нажимаем кнопку Publish.


В окне публикации выбираем путь, куда будем сохранять ролик флеш (напомню, мы сегодня не публикуем презентацию на внешнем ресурсе, а забираем себе локальный файл), для чего выбираем Local Folder и в Browse (обзор) показываем путь, куда хотим сохранить. Заодно можно поменять название файла (если планируется публикация на сайте, лучше англоязычное).

Дополнительные настройки - по вкусу (можно не менять): сохранять будем All slides (все слайды), стартовать будем автоматически, кому надо повторение ролика (удобно для рекламных роликов) - Loop presentation, кто не настраивал автопереход слайдов может либо потом щелкать мышкой, либо сейчас назначить время смены.
Все, жмем Publish и получаем папку с файлами.


Из них искомым файлом-флеш является в нашем случае Слайд1.swf, а два других нужны на случай нашего желания опубликовать результат на своем сайте.
Swf файл можно использовать самостоятельно, в нем все содержание вашей презентации. Если на ПК не установлена связь с приложением для просмотра swf, всегда можно использовать браузеры (открыть с помощью? и указать на тот же IE или Mozilla).

Шаг 2. Хотим опубликовать на своем сайте.
Тут опишу несколько вариантов. Сначала для собственного сайта на HTML, при условии, что хранить ролик хотим на своем ресурсе (если нет, то смотрите в конце поста).
1.
В принципе, лежащий в папке файл index.html уже готов для публикации, т.е. можно всю папку забрасывать на сайт и делать ссылку на этот файлик. Но мы же хотим вписать флеш ролик в дизайн НАШЕГО сайта. Поэтому открываем index.html в любом редакторе HTML, которым пользуемся (если ничего нет под рукой, то хоть в Блокноте) и копируем оттуда кусок кода (в основном смотрим на начало и конец фрагмента, специально взял с запасом, чтобы проще ориентироваться):

<object id="presentation" width="722" height="577" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Слайд 1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowFullScreen" value="true" />
<embed src="Слайд 1.swf" quality="high" bgcolor="#ffffff" width="722" height="577" name="presentation" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" allowFullScreen="true" />
</object>
Далее вставляем этот код в ту страницу вашего сайта, куда планируется размещение ролика.
Пример работы в таком варианте

2 вариант
Но что-то мне в этом коде не нравится... Да и кажется, что не везде работает... Проще, когда понимаешь, что и как делается. Посему предлагаю заменить код на стандартный для вставки флеш роликов с ссылкой на плеер просмотра:

<object width="722" height="577" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" class="mceItemMedia mceItemFlash"><param name="src" value="http://sch169.ru/projekt/workuch/game/1/Game1.swf" /><embed width="722" height="577" type="application/x-shockwave-flash" src="http://sch169.ru/projekt/workuch/game/1/Game1.swf" class="mceItemMedia mceItemFlash" /></object>

Здесь width="722" height="577" - ширина и высота, можно менять, http://sch169.ru/projekt/workuch/game/1/Game1.swf - путь к вашему ролику (не обязательно на этом сайте, где угодно, куда выложите).
Пример работы в таком варианте.

Преимущества этого варианта и в том, что в сайт Google он вставляется в таком же виде (в режиме - Редактировать страницу - HTML), правда сам ролик надо куда-нибудь выложить, чтобы на него можно было ссылаться.
Пример такого варианта.

Вставка ролика при его расположении на стороннем источнике.
В варианте Google сайтов куда проще воспользоваться основной функцией ispring - выложить на slideboom, и там воспользоваться кнопкой embed, получить код и вставить его в Google сайт (или в свой, если не хотите хранить ролик у себя).
Т.е. при шаге 1 выбираем не локальную папку для публикации, а SlideBoom, задаем категорию ролика (у нас - образование), публикуем, идем на страницу ресурса, там жмем кнопку embed и получаем HTML код,...

...который можем вставить и в свой сайт обычного типа, и в Google-сайт (режим редактирования страницы - HTML).
Пример такой вставки.