Как вставлять flash-анимацию в html-страницы?

2010-05-09

В этом посте я хочу рассказать вам о замечательной JavaScript-библиотеке под названием SWFОbject.

Внедрение flash в исходный код страницы происходит с помощью тега <object /> или же <embed />. Дело в том, что один из них работает в одних браузерах, другой — в других. Поэтому эти методы подключений часто комбинируют вместе. При этом исходный код становится громоздким и не очень понятным. Также приходится сталкиваться с проблемой, когда веб-браузер не поддерживает flash или же он просто не установлен. В этом случае нужно писать какие-то свои проверки, причём разные для разных браузеров. Но пиком возмущения может стать ситуация, когда мы должны учитывать минимальную версию flash-плеера, для того, чтобы узнать корректно ли воспроизведется наша flash-анимация и воспроизведется ли вообще.

К чему это я?
Дело в том, что существует замечательная javascript-библиотеке SWFОbject. Её основная функция — это подключение flash-анимации в веб-странице. SWFОbject умеет учитывать все вышеуказанные нюансы для всех браузеров. Размер этой библиотеки совсем небольшой. Скачать SWFОbject и найти всю официальную документацию можно здесь: http://code.google.com/p/swfobject/.

Примеры использования:
Самое простое подключение flash:

<!--Подключение библиотеки-->
<script type="text/javascript" src="swfobject.js"></script>
<!--Инициализация flash-анимации-->
<script type="text/javascript">
swfobject.embedSWF("myFlash.swf", "myFlash", "320", "240", "9.0.0");
</script>
<!--Место, в которое будет вставлен flash-->
<div id="myFlash"> Flash не установлен </div>

Данный пример внедряет flash-анимацию (файл «myFlash.swf»). Если flash-плеер не установлен, то будет отображено сообщение «Flash не установлен».

SWFObject также позволяет передавать параметры флэшу (flashvars), а также задавать настройки отображения флэша в браузере (params).
Пример:

<!--Подключение библиотеки-->
<script type="text/javascript" src="swfobject.js">
</script>
<!--Инициализация flash-анимации-->
<script type="text/javascript">
var flashvars = {
  name1: "hello",
  name2: "world",
  name3: "foobar"
};
var params = {
bgcolor:"#000000",
menu:"false",
quality:"high",
wmode:"opaque",
allowscriptaccess:"always"
};
var attributes = {
  id: "myFlash",
  name: "myFlash"
};
swfobject.embedSWF(
"myFlash.swf",
"myFlash",
"320",
"240",
"9.0.0",
"",
flashvars,
params,
attributes
);
</script>
<!--Место, в которое будет вставлен flash-->
<div id="myFlash"> Flash не установлен </div>

В этом примере продемонстрирована возможность передачи флэш-ролику параметров с веб-странички (name1: «hello», name2: «world», name3: «foobar»), а также — задание опций отображения флэша на странице.



5 комментариев на «Как вставлять flash-анимацию в html-страницы?»

  1. Диденко Константин:

    Именно изза сложности совместимости флешь лучше вообще не использовать !

  2. Диденко Константин:

    могу добавить . Что в тег объект можно вставлять всё что угодно . Но . . . Опятьже совместимость . . . Главное использование ембеда и объекта это вставка хтмл . Хотя это не бесспорно

  3. raf17:

    Спасибо , очень помагло!

  4. Ёжик:

    Спасибо , очень помагло!

  5. Ёжик:

    Я планировал вместо фразы «Flash не установлен» вставить iframe с роликом на youtube (на случай если флеш не установлен, пускай с youtuba качают, там какая-то другая технология), но передумал, т.к. сначала будет грузится этот iframe, а только потом содержимое div myFlash будет переписано кодом флеш ролика.

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