SWFObject или как подружить Flash со всеми браузерами

Flash — позволяет «оживить» и украсить сайты, а так-же снабдить их новыми возможностями.

К сожалению разработчики Flash и создатели браузеров далеко не всегда приходят к полному взаимопониманию.

Например браузер Opera заставляет web-мастеров работающих с Flash серьезно поломать голову. Дело в том, что Flash-вставки (меню, банеры, плееры и т.п.) в этом браузере загружаются неактивными. Т.е. наводите вы мышку на меню, а оно ведет себя как обычная картинка и только если по нему кликнуть, меню начнет реагировать на движения курсора.

Это для вашей же безопасности, — утвреждают разработчики Оперы. Но не удобно же, БЛИН!

И вот тут нам на помощь приходит JavaScript в лице подгружаемой библиотеки SWFObject.

Это решение не только простое, но и дает дополнительные преимущества как web-мастеру, так и посетителю сайта.

Преимущество №1 — Простота

На счет раз — подключаем SWFObject к шаблону сайта. Для этого достаточно вставить ниже приведенную строчку где-нибудь перед тэгом </head> (хотя можно и непосредственно перед кодом вставки на страницу первого flash-файла).

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

На счет два — скачиваем архив с библиотекой SWFObject http://blog.deconcept.com/swfobject/swfobject.zip.

На счет три — распаковываем содержимое в корень сайта (обычно на хостинге это папка www).

На счет четыре — заменяем привычный код вставки flash-обьекта, вот такого типа:

<div id="flalogo">
<object id="baterflea" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="140" height="140" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="align" value="middle" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#f1f1ed" />
<param name="src" value="/images/baterflea.swf" />
<param name="name" value="baterflea" />
<embed id="baterflea" type="application/x-shockwave-flash" width="140" height="140" src="/images/baterflea.swf" name="baterflea" bgcolor="#f1f1ed" wmode="transparent" quality="high" allowscriptaccess="sameDomain" align="middle"></embed>
</object>
</div>

на вот такой:

 
<div class="flalogo"></div>
<script type="text/javascript">
// <!&#91;CDATA&#91;
var so = new SWFObject("/images/baterflea.swf","baterflea","140","140","7","#f1f1ed"); /* Тут указали имя и путь к flash-файлу, id обьекта, высоту и ширину в пикселях, версию флеша, цвет фона */   
so.addVariable("A", "значение_переменной"); /* Тут указали переменную А и ее значение. */   
so.addParam("wmode", "opaque"); /* Тут присвоили параметру wmode значение opaque */   
so.write("flalogo"); /* Тут перезаписали содержимое контейнера div с id="flalogo" вставив наш flash файл */
// &#93;&#93;>
</script>

И всё!

Преимущество №2 — Универсальность

Мало того, что теперь ваша flash-вставка активна в любом браузере, есть еще один здоровенный плоюс.

В предыдущем примере контейнер div id=»flalogo» оказался пустым. В него нужно поставить тот элемент (например картинку или html-меню), который будет заменять flash у пользователей, которые не установили flash-player.

Таким образом ваш сайт будет корректно отображаться даже если flash у посетителя отключен! Да и поисковый робот, не понимающий flash получит то содержимое, которое способен переварить.

Тем, кто в теме — достаточно.

PS Только учтите, содержимое контейнера и то, что будет его замещать у пользователей с установленым флеш-плеером должно быть полностью схожим. Иначе яндекс обвинит вас в клоакинге и забанит. А как было бы здорово вставить SEO-текст, который увидит только поисковый робот, ну и те … кто по недоразумению не установил флеш-плеер.))

А с вами был Лексиум.
До скорого!))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *