Сегодня решил открыть некоторые простенькие секреты, которые позволят вам намного улучшить внешний вид вашего сайта. И речь пойдет о технике флеша.
Вообще, я считаю, что делать весь сайт на флеше — просто неуважение к посетителю, да ещё и проблемы с индексацией в поисковиках, но вот делать интересные вставки на флеше, очень даже украшает дизайн любого сайта.
В статье речь пойдет о том, как правильно вставлять эти флешролики так, чтобы они органично вписывались в фон.
Для начала, я хотел бы показать зачем нам это нужно на примере.
Идем на один сайт . Думаете у них весь сайт на флеше? А вот и нет. Сама шапка сделана картинкой, а поверх наложен флеш с анимацией. Вы можете сами убедиться в этом глянув на .
Итак, первое что нужно сделать для такой техники — подготовить фон картинку и флеш-наложение. Делать это можно в любых программах, которые вам понравятся. При экспорте флеш-ролика, обязательно нужно его сделать на прозрачном фоне. Для этого перед экспортом, вам нужно найти нужную галочку. Обычно этот пунктик называется alpha channel. Очень часто, вам придется сделать определенные настройки в html экспорте. На примере, в adobe flash — эти настройки находятся в file -> Publish Settings -> html . Ищем там опцию window mode и выбираем transparent.
Далее, нужно вставить правильно этот ролик на сайт.
Я считаю, что самым лучшим решением для этого сейчас является .
Скачиваем последнюю версию с гугла, там же можно посмотреть и разные способы вставки, я же расскажу об одном из них, который нам нужен будет для вставки флеш с прозрачным фоном.
Для этого будем использовать динамический метод вставки флеш. Это значит, что нужно в коде создать 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 для его работы 310x137px.)
7. flashvars (подключаем переменные)
8. params (подключаем параметры)
9. attributes (подключаем атрибуты)
Вот и все, если же что-то непонятно, то вот вам архив, в нем показан пример подключения такого флеш ролика.
Скачать пример вставки флеш ролика с прозрачным фоном
Мониторинг сети: все ещё волнует тема, как поднять тиц. Смотрите последние методы о том как поднять тиц
Понравилась статья? - Подпишись.
Или поделись полезным с миром
Похожие статьи:
position:absolute;
right:100%;
margin-left:100;
top:50%; margin-top:140;
width:10;
height:200;
}
Код хороший, сам пользуюсь. Но у меня возникла проблема.
Вот код
var params = {};
params.scale = «noscale»;
params.salign = «tl»;
params.wmode = «transparent»;
params.allowfullscreen = «true»;
var attributes = {};
swfobject.embedSWF(«http://scripts.b-f.com.ua/flash/flash.swf», «Banner», «1200», «190», «9.0.0», false, flashvars, params, attributes);
Из за params.wmode = «transparent»;, отключается звук. То есть при первом посещении, он срабатывает, а дальше при переходе, или при следующем посещении нет. Что то в кеш по всей видимости вкладывается.
Делал мувик в Adobe Flash CS3, может что то нужно в нутри мувика добавить, или в код скрипта дописать?
Убираю params.wmode = «transparent»; всё работает.
Спасибо
С opaque проподает прозрачность, и всё равно со звуком проблема. А убираешь params.wmode звук в порядке, а прозрачности нет.
Я так ни чего и не нашёл.
Вот должен стать
var flashvars = {};
var params = {};
params.scale = «noscale»;
params.salign = «tl»;
params.wmode = «transparent»;
params.allowfullscreen = «true»;
var attributes = {};
swfobject.embedSWF(«http://scripts.b-f.com.ua/flash/flash.swf», «Banner», «1200», «190», «9.0.0», false, flashvars, params, attributes);
</script>
<div id=’Banner’>
<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>
</div>