Часовня на весь экран:
http://tinyhack.ru/virtualnyj-xram/

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

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

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

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

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

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

Для просмотра ролика установите флеш-проигрыватель

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

var flashvars = {}; var params = {wmode: "transparent"}; var attributes = {}; swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

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

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

В этой строке

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

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

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

fleek.org

Подготовил: Евгений Рыжков Дата публикации: 23.02.2009

Последнее обновление: 17.03.2010

Вставить flash-объект в HTML страницу, придерживаясь следующих требований:

• кроссбраузерность — работоcпособность во всех современных браузерах;
• альтернативный контент — если не установлен flash или установленная устаревшая версия, выводим альтернативное изображение и ссылку для инсталляции свежей версии flash;
• максимальная простота и гибкость использования метода;
• SEO и юзабилити дружественность;
• чистота кода — меньше кода, проще работать с шаблонами;
• соответствие стандартам.

if (swfobject.hasFlashPlayerVersion("6.0.0")) {
var fn = function() {
var att = { data:"images/flash/test.swf", width:"200", height:"300" };
var par = {
menu:"true",
quality:"high",
wmode:"opaque"
};
var id = "replaceMe";
var myObject = swfobject.createSWF(att, par, id);
};
swfobject.addDomLoadEvent(fn);
}

Блок, в который будет вставлен flash, имеет альтернативный контент — это будет отображено при не установленном flash, либо при устаревшей версии. Для примера выведем альтернативную картинку и ссылку для установки свежей версии flash:

• недостаток метода — у пользователей у которых установлен flash, но отключен javascript, увидят только альтернативное содержимое
• использование параметра wmode может привести к некотрым ошибкам работы flash (например, при wmode="transparent" нельзя ввести кириллические символы в поля ввода), используйте его только когда это действительно необходимо + хорошо потом тестируйте функциональность flash-объекта
• в предыдущей версии метода использовалось значение transparent параметра wmode, от него пришлось отказаться, т.к. обработка прозрачности ведет к снижению производительности браузера

• проект SWFObject (есть документация, описание api)

update 16.03.2010 Александр Головко

Еще один вариант динамической вставки объекта реализуется вызовом функции embedSWF.

Для этого подключаем библиотеку, скачать которую можно на странице проекта SWFObject в Google Code:

Как и в предыдущем варианте, создаем HTML контейнер для flash с альтернативным содержимым:

Установить свежую версию Flash

При динамической вставке пишем скрипт, который вызывает функцию swfobject.embedSWF и передает ей параметры вставки flash-объекта. Это может выглядеть, например, так (демонстрационный пример взят из официальной документации):

var flashvars = {}; flashvars.name1 = "hello"; flashvars.name2 = "world"; flashvars.name3 = "foobar"; var params = {}; params.menu = "false"; var attributes = {}; attributes.id = "myDynamicContent"; attributes.name = "myDynamicContent"; swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

Так как скрипт будет вставлять на страницу конструкцию object с вложенными param, необходимо передать ему параметры этой конструкции. Они делятся на три группы:

Это собственно аргументы функции swfobject.embedSWF()

Параметры перечисляются через запятую. Необязательные параметры можно пропускать, заменяя значением false. При этом замыкающие false можно не указывать. Например вместо:

Swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "false", flashvars, "false", "false", "false");

пишем просто:

Swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "false", flashvars);

Параметры flashvars, params и attributes являются JavaScript объектами, их можно пропустить не только вышеуказанным методом, но и передав пустой объект:{}.

Var params = {}; params.menu = "false"

Для управления прозрачностью, часто применяется параметр wmode, для управления качеством — quality.

Var params = {}; params.menu = "false"; params.wmode = "transparent"; params.quality = "high";

Это те атрибуты, которые в нашем примере выглядят вот так:

Var attributes = {}; attributes.id = "myDynamicContent"; attributes.name = "myDynamicContent";

Для flashvars, params и attributes существует сокращенный вариант записи, в одну строку, без создания дополнительных переменных, например так:

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {}, {}, {id:"myDynamicContent",name:"myDynamicContent"});

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

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});

Тут всего-навсего написано: «Флешку из файла myContent.swf вставить в HTML элемент c id="myContent". Ширина флеша 300px, высота 120px. Требуемая версия Flash плеера 9.0.0. Для установки плеера при его отсутствии используем файл expressInstall.swf. В флеш передаем три переменных name1="hello" name2="world", name3="foobar". Отображаем меню, которое содержит только настройки и опции Flash. Созданному тегу object присваиваем id="myDynamicContent" и name="myDynamicContent"».

Немного громоздко, но совсем не страшно, не правда ли?

Напоследок еще один пример вставки флеша. Чуть более сложный и приближенный к реальности.

var flashvars = {}; flashvars.categoryChosen="Slots"; flashvars.assets="http://namefosite.net/flash/assets/"; var params = {}; params.menu = "false"; params.wmode = "opaque"; var attributes = {}; attributes.id = "flashBox"; attributes.name = "flashBox"; swfobject.embedSWF("flash/game.swf", "games", "800", "200", "9.0.124", "expressInstall.swf", flashvars, params, attributes);

Если вы когда-либо пробовали вставить Shockwave Flash файл в ваш блог на WordPress, то вы знаете, что сделать это не так просто. Кроме того, если вы размещаете ваш блог на WordPress.com , то вы не сможете загружать flash из соображений безопасности. Если у вас есть свой хостинг-аккаунт, то есть несколько способов, с помощью которых вы сможете загружать swf файлы в ваши WordPress записи. Первый вариант включает использование плагина . Этот вариант предпочтительнее, если вы не очень хорошо обращаетесь с кодом. Другой способ требует базовых знаний html . В этой статье мы покажем, как вставить swf в записи WordPress с помощью плагина и без него.

Для начала вам нужно скачать и установить Easy Flash Embed для WordPress. Этот плагин настолько прост, что в меню администратора даже не добавляется никаких настроек. Все, что вам нужно, это использовать шорткод при создании записей, вот так:

Скачать Easy Flash Embed плагин вы можете .

Для тех, кто хочет иметь больше контроля над кодом, мы покажем, как вставить ваши flash файлы прямо в WordPress записи, посты и даже темы. Хотя за годы было придумано множество способов сделать это, самый простой и подходящий под стандарты - использовать элемент.

Код вставки будет выглядеть примерно так:

-->

Fallback or "alternate" content goes here. This content will only be visible if the SWF fails to load.

Обратите внимание, что вы используете 2 элемента . Внешний элемент - для Internet Explorer, тогда как внутренний - для всех остальных браузеров. Вы можете изменять ваш альтернативный текст, если необходимо. Вы можете добавить также другие опции , например wmode или allowScriptAccess .

P.S. Всегда нужно использовать wmode=transparent , чтобы ваша вставка не перекрывала существующий контент, например плавающий блок.

Всем добрый день! Сегодня поговорим с вами о том, как вставить flash на сайт. Казалось бы, вопрос пустяковый. Если это баннер, то просто скопировать предложенный код и разместить в шаблоне, виджете или на странице через редактор. Если это flash анимация для сайта, то вставить при помощи того же кода, но прописанного самостоятельно. Однако и в этом несложном процессе есть свои тонкости, о которых мы сейчас поговорим.

Итак, нам потребовалось разместить флэш анимацию на сайте. Для этого используется стандартный код:

На первый взгляд все правильно и ничто не предвещает проблем. Однако, если вы прокрутите страницу вверх, то увидите такую особенность, что размещенная таким образом flash анимация будет перекрывать админский тулбар - верхнюю черную панельку админа WordPress.

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

Это происходит оттого, что flash всегда по глубине находится впереди блоков div. Чтобы этого избежать, нужно добавить всего лишь один дополнительный параметр в наш код:

В этом случае ролик flash ведет себя как обычное изображение. Также можно воспользоваться аналогичным параметром value=»transparent», но это создаст дополнительную нагрузку ни замедлит загрузку страницы. В конечном результате на код вставки флеш на сайт будет выглядеть так:

Если Вам приходится часто вставлять разные ролики или просто боитесь что-то неправильно написать в этом длинном коде, то можно воспользоваться плагином, который вставляет флеш на сайт автоматически - от вас требуется лишь указать адрес его расположения. Называется он WP-SWFObject. Как обычно, скачиваем и устанавливаем его, затем заходим в «Параметры > WP-SWFObject» и выполняем необходимые настройки. Здесь можно все оставить по умолчанию, кроме одного - пункта «Window Mode». Для того, чтобы вставить swf на сайт с учетом тех параметров, которые нам нужны, выберите здесь из выпадающего списка «OPAQUE» и сохраните настройки.

Теперь, чтобы вставить флэш на сайт, пропишите шорткод (его потом можно для удобства добавить на панель редактора)

В действии выглядеть будет так:

Для прямого размещения через шаблон используйте другой код: