Недавно виникла необхідність показувати DIV елемент поверх флекс аплікації, причому робити це при виникненні певної події у флекс аплікації, або ховати цей DIV елемент при виникнені якоїсь іншої події у флекс аплікації. Така необхідність може виникнути якщо Ви, наприклад:

1) хочете показувати в аплікації відео, яке не є у форматі flv;
2) не хочете бавитись з перекодуванням відео з одного формату в flv формат на серверній стороні;
3) хочете заембедати якийсь відеоплеєр у свою аплікуху(наприклад Windows Media Player, Real Player etc.).

Розглянемо як це зробити для аплікації, яка бігає на флексі 3 (подібний підхід точно працює і на другому флексі).

Якщо ви розробляєте аплікуху у флекс білдері 3, а так я і робив, то для неї генерується HTML-template файл(він називається index.template.html), в який буде вбудовуватись відкомпільована swf-ка. Такий файл також присутній, якщо робите ваш проект і не викристовуючи флекс білдер (просто в даному прикладі я покажу як це робиться, використовуючи згенерофаний флекс білдером шаблон).

Для початку додамо в стилі два класи videoDivShowStyle та videoDivHideStyle, клас body вже був згенерований:
КОД
<style>
    body {
        margin:0px;
        overflow:hidden;
    }
    
    .videoDivShowStyle {
        position: absolute;
        left: 305px;
        top: 5px;
        z-index: 100;
        border:1px dashed #cccccc;
        width : 640px;
        height : 480px;
        display: block;
    }
    
    .videoDivHideStyle {
        display: none;
    }
    
</style>


Далі знаходимо кусок коду:
КОД
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

if ( hasProductInstall && !hasRequestedVersion ) {
    // DO NOT MODIFY THE FOLLOWING FOUR LINES
    // Location visited after installation is complete if installation is required
    var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
    var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;

    AC_FL_RunContent(
        "src", "playerProductInstall",
        "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
        "width", "${width}",
        "height", "${height}",
        "align", "middle",
        "id", "${application}",
        "quality", "high",
        "bgcolor", "${bgcolor}",
        "name", "${application}",
        "allowScriptAccess","sameDomain",
        "type", "application/x-shockwave-flash",
        "pluginspage", "http://www.adobe.com/go/getflashplayer"
    );
} else if (hasRequestedVersion) {
    // if we've detected an acceptable version
    // embed the Flash Content SWF when all tests are passed
    AC_FL_RunContent(
            "src", "${swf}",
            "width", "${width}",
            "height", "${height}",
            "align", "middle",
            "id", "${application}",
            "quality", "high",
            "bgcolor", "${bgcolor}",
            "name", "${application}",
            "allowScriptAccess","sameDomain",
            "type", "application/x-shockwave-flash",
            "pluginspage", "http://www.adobe.com/go/getflashplayer"
    );
  } else {  // flash is too old or we can't detect the plugin
    var alternateContent = 'Alternate HTML content should be placed here. '
      + 'This content requires the Adobe Flash Player. '
       + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
    document.write(alternateContent);  // insert non-flash content
  }
// -->
</script>
    <noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="${application}" width="${width}" height="${height}"
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" swLiveConnect="true">
            <param name="movie" value="${swf}.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="${bgcolor}" />
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="wmode" value="transparent">
            <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}" wmode="transparent"
                width="${width}" height="${height}" name="${application}" align="middle"
                play="true"
                loop="false"
                quality="high"
                swLiveConnect="true"
                allowScriptAccess="sameDomain"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer">
            </embed>
        </object>
    </noscript>

Обгортаємо його DIV елементом і додаємо параметри до JavaScript методу AC_FL_RunContent(...). Це приблизно виглядає так:
КОД
<div style="position: absolute; width: 100%; height:100%; z-index: 1;">
<script language="JavaScript" type="text/javascript">
...
} else if (hasRequestedVersion) {
    // if we've detected an acceptable version
    // embed the Flash Content SWF when all tests are passed
    AC_FL_RunContent(
            
...

            "pluginspage", "http://www.adobe.com/go/getflashplayer",
            "wmode", "transparent"
    );
...
    </noscript>
</div>

Зверніть увагу, я додав параметри в метод AC_FL_RunContent(): "wmode", "transparent" - без цього Ви свого DIV елемента ніколи не побачите.
Далі, власне, додаємо наш DIV елемент в тіло сторінки (якщо повернутись до опису CSS класу videoDivHideStyle, то можна зауважити, що спочатку DIV елемент є невидимий для користувача):
КОД
<div id="mediaPlayerContainer" class="videoDivHideStyle">
<!--Тут ви вставляєте потрібні Вам елементи-->
</div>

Тепер додамо ще JavaScript функції, які будуть показувати/ховати DIV елемент:
КОД
<script type="text/javascript">
    function showVideoWindow(){
        var obj = document.getElementById("mediaPlayerContainer");
        obj.className = "videoDivShowStyle";
    }
    
    function hideVideoWindow(){
        var obj = document.getElementById("mediaPlayerContainer");
        obj.className = "videoDivHideStyle";
    }
</script>

Якщо все вищеописане зроблено, то HTML-шаблон є готовим для використання. Залишилось додати виклики відповідних JavaScript функцій у флекс аплікації - для цього використаємо флексовий клас ExternalInterface і його метод call. У потрібних подіях флекс аплікації пишемо такий код:
КОД
// В події, при настанні якої потрібно показати DIV
...
ExternalInterface.call("showVideoWindow");
...

КОД
// В події, при настанні якої потрібно сховати DIV
...
ExternalInterface.call("hideVideoWindow");
...

Ось це і все. Дана штука точно працює і тестувалась під Internet Explorer 6, 7; Mozilla Firefox 2.x, 3.x (підозрюю що й під 1.x); Opera 9.5.
Я прикріпив скріншот: як виглядатиме флекс аплікація з DIV елементом, який містить в собі Media Player.