Как вставить флеш на сайт

Сегодня решил открыть некоторые простенькие секреты, которые позволят вам намного улучшить внешний вид вашего сайта. И речь пойдет о технике флеша.

Вообще, я считаю, что делать весь сайт на флеше – просто неуважение к посетителю, да ещё и проблемы с индексацией в поисковиках, но вот делать интересные вставки на флеше, очень даже украшает дизайн любого сайта.

В статье речь пойдет о том, как правильно вставлять эти флешролики так, чтобы они органично вписывались в фон.

Для начала, я хотел бы показать зачем нам это нужно на примере.

Идем на один сайт сайзенов. Думаете у них весь сайт на флеше? А вот и нет. Сама шапка сделана картинкой, а поверх наложен флеш с анимацией.

Итак, первое что нужно сделать для такой техники – подготовить фон картинку и флеш-наложение. Делать это можно в любых программах, которые вам понравятся. При экспорте флеш-ролика, обязательно нужно его сделать на прозрачном фоне. Для этого перед экспортом, вам нужно найти нужную галочку. Обычно этот пунктик называется alpha channel. Очень часто, вам придется сделать определенные настройки в html экспорте. На примере, в adobe flash – эти настройки находятся в file -> Publish Settings -> html . Ищем там опцию window mode и выбираем transparent.

Далее, нужно вставить правильно этот ролик на сайт.

Я считаю, что самым лучшим решением для этого сейчас является swf object.

Скачиваем последнюю версию с гугла, там же можно посмотреть и разные способы вставки, я же расскажу об одном из них, который нам нужен будет для вставки флеш с прозрачным фоном.

Для этого будем использовать динамический метод вставки флеш. Это значит, что нужно в коде создать div с определенным id – в него мы вставим альтернативный контент, который будет показываться, если у пользователя не установлен\отключен флеш проигрыватель. Получится что-то вроде этого

<div id="myContent">
<p>Для просмотра ролика установите флеш-проигрыватель </p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>

Обязательно запомните id слоя.

Далее, в хедере нужно подключить скрипт swfobject, прописав путь к нему

<script type="text/javascript" src="swfobject.js"></script>

Теперь нужно вывести вместо нашего слоя флеш ролик. Для этого пишем такой код

<script type="text/javascript">

var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
                   "expressInstall.swf", flashvars, params, attributes);

</script>

Теперь расшифрую.

• var flashvars нужно нам для обозначения переменных. В нашем случае, это не нужно.
• var params – очень важно здесь указать wmode : “transparent” – потому что без этого, ролик вставится без прозрачного фона. В этой строке можно указывать и другие параметры для флеша
• var attributes – здесь указываем аттрибуты, нам это тоже не нужно.

В этой строке

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

Мы указываем по порядку

1. swfUrl (путь к ролику на флеше)
2. id (id того слоя, который мы запомнили выше)
3. width (ширина SWF)
4. height (высота SWF)
5. version (версия Flash плеера необходимого для данного SWF)
6. expressInstallSwfurl (задает URL вашего express install SWF и активирует Adobe express install [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b7521]. Обратите внимание, что express install срабатывает только один раз (при первом исполнении), требует Flash плеер версии 6.0.65 или старшей на Win или Mac платформах, минимально возможный размер SWF для его работы 310?137px.)
7. flashvars (подключаем переменные)
8. params (подключаем параметры)
9. attributes (подключаем атрибуты)

Вот и все, если же что-то непонятно, то вот вам архив, в нем показан пример подключения такого флеш ролика.
Скачать пример вставки флеш ролика с прозрачным фоном
fleek.org