Отборная информация, которая вставляет!

Правильная вставка флеш с прозрачным фоном на сайт

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

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

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

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

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

Итак, первое что нужно сделать для такой техники — подготовить фон картинку и флеш-наложение. Делать это можно в любых программах, которые вам понравятся. При экспорте флеш-ролика, обязательно нужно его сделать на прозрачном фоне. Для этого перед экспортом, вам нужно найти нужную галочку. Обычно этот пунктик называется 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 для его работы 310x137px.)
7. flashvars (подключаем переменные)
8. params (подключаем параметры)
9. attributes (подключаем атрибуты)

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

Скачать пример вставки флеш ролика с прозрачным фоном

Мониторинг сети: все ещё волнует тема, как поднять тиц. Смотрите последние методы о том как поднять тиц


 

Похожие статьи:



15 комментариев к “Правильная вставка флеш с прозрачным фоном на сайт”

  1. van:

    Как задать расположение на экране ролика, к примеру по центру , и вниз на 40 рх?

    • ETNO:

      обычными средствами css — сначала нужно узнать высоту и ширину блока, потом к слою добавляете .имя_слоя{position:absolute; left:50%; margin-left:-половина_ширины блока; top:50%; margin-top:-половина_высоты блока+40px; width:ширина_блока; height:высота_блока}. Вообще почитайте инфу по поводу центрирования элементов на странице, инфы хватает по этому

  2. Ольга:

    Большое спасибо. Ваша статья мне очень помогла. 🙂

  3. Александра:

    Большое спасибо. Очень понятно и логично написано. Статья помогла.

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

  5. Максим:

    Пожалуйста дайте ответ.

    в вордпрессе этот сгенерированный код вставить нужно в какой файл php?

    и куда залить swf файл?

  6. Максим:

    Спасибо за Ваш блог!

    с вставкой флеша разобрался))

    теперь подскажите как сменить позицию.

    .myAlternativeContent {
    position:absolute;
    right:100%;
    margin-left:100;
    top:50%; margin-top:140;
    width:10;
    height:200;
    }

    в CSS темы?

    • ETNO:

      top и right — это и есть позиционирование, но чтобы правильно им пользоваться почитайте про свойство position:absolute

  7. Владимир:

    Здравствуйте!
    Код хороший, сам пользуюсь. Но у меня возникла проблема.
    Вот код

    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);

    Всё работает, во многих браузерах, а с IE-9 проблема.
    Из за params.wmode = «transparent»;, отключается звук. То есть при первом посещении, он срабатывает, а дальше при переходе, или при следующем посещении нет. Что то в кеш по всей видимости вкладывается.
    Делал мувик в Adobe Flash CS3, может что то нужно в нутри мувика добавить, или в код скрипта дописать?
    Убираю params.wmode = «transparent»; всё работает.
    Спасибо

  8. Владимир:

    Извиняюсь у вас код не вписался.
    Вот должен стать

    <script type=’text/javascript’>
    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>

оставить отзыв

Если хотите вставить код в комментарии, то оберните его тегами ‹pre›‹/pre›