www.webdeveloper.com
Results 1 to 8 of 8

Thread: [b]Flash window mode param not working[b/]

  1. #1
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161

    [b]Flash window mode param not working[b/]

    Hi again,
    I thought I had this problem solved but it turns out, 'only in IE'. I have drop down menu items the client wants to have positioned over a Flash swf file that fades pictures into a banner. The basic problem is getting the div for the flash to respond to z-indexing, i.e. to have banner "sit behind" the drop down menu items.

    Here are my list of things I've tried:
    1. make sure all the elements involved have been 'positioned' either absolute or relative
    2 make sure the flash div has a negative value and other elements positive values for their z-index values
    3 make sure the param for the flash object is set to "opaque" and mode of "wmode"

    Again it works in IE but not FF.

    here is the bare bones code section:

    <div id="headnav">
    <ul id="nav1">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html" onmouseover="mopen('about')" onmouseout="mclosetime()">About Us</a>
    <div id="about" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    <a href="test.html">Testimonials</a>
    <a href="team.html">Our Team</a>
    <a href="bus.html">Business History</a>
    </div><!--end about div-->
    </li>
    <li><a href="contact.html" >Contact Us</a>
    </ul>
    </div><!--end headnav-->

    <div id="flashpic">
    <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="750" height="120" title="headflash">
    <param name="movie" value="images/headpicture3.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <embed src="images/headpicture3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="120"></embed>
    </object>
    </div>
    <!--end flashpic-->

    I would appreciate any input.

    captsig

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    This works in my IE8 with a test .swf file.

    It puts the navigation list on top of the flash file.

    Make sure you have this set.

    Code:
    <param name="wmode" value="opaque"/>
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    style type="text/css">
    <!--
     
    #content {
    positionrelative
    }
     
    #flash_container {
    border1px solid red;
    positionabsolute;
    top0px;
    left0px;
    width200px
    }

    #headnav {
    border1px solid green;
    width300px;
    positionabsolute;
    top20px;
    left20px
    }
     
    -->
    </
    style>

    </
    head>
    <
    body>
     
    <
    div id="content">
     
    <
    div id="flash_container">
    <
    object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
    codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" 
    height="147" id="samplePages" width="200"
    <
    param name="movie" value="samplePages.swf"/> 
    <
    param name="quality" value="high"/> 
    <
    param name="loop" value="true"/> 
    <
    param name="wmode" value="opaque"/> 
    <
    embed autostart="true" height="147" loop="true" 
    pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" 
    quality="high" src="./flash/samplePages.swf" 
    type="application/x-shockwave-flash" width="200"/> 
    </
    object
    </
    div>
     
    <
    div id="headnav">
    <
    ul id="nav1">
    <
    li><a href="index.html">Home</a></li>
    <
    li><a href="about.html" onmouseover="mopen('about')" onmouseout="mclosetime()">About Us</a>
    <
    div id="about" >
    <
    a href="test.html">Testimonials</a>
    <
    a href="team.html">Our Team</a>
    <
    a href="bus.html">Business History</a>
    </
    div><!--end about div-->
    </
    li>
    <
    li><a href="contact.html" >Contact Us</a>
    </
    ul>
    </
    div><!--end headnav-->

    </
    div>
     
    </
    body>
    </
    html
    Last edited by tirna; 06-30-2010 at 06:22 AM.

  3. #3
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161
    tirna,
    thanks, would you mind trying your code in Firefox; that's where my problem is,....my code works in IE, it won't in FF. If your code works in FF, then I can celebrate.

    captsig

  4. #4
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161
    tirna,
    I found the problem!! For Firefox, you must place this param statement in the <embed> tag: wmode="opaque"

    That got it working in FF; I saw this variant in another forum I was exploring.

    cheers,
    captisg
    P.S. I have another question I'll throw at you....very simple: how do you get the title line in this forum to appear in bold?

  5. #5
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    wmode missing from <embed>, correct the <embed> path and add:
    Code:
    quality="high" src="samplePages.swf"
    wmode="opaque"
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  6. #6
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161
    Thank you 'Eye for Video';
    I did find the solution but I will take note of your refinements!

    captsig

  7. #7
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Also note that the old <object><embed> method of placing Flash on the page is not valid code. One better alterantive is:
    Code:
    <object type="application/x-shockwave-flash" data="filename.swf" width="#" height="#">
    <param name="movie" value="filename.swf">
    </object>
    This will work without the <embed> tag and the FF problems. It will also validate as HTML code.
    An even better method is to use swfobject to detect and display Flash. This is great for SEO because it allows you to place alternate, regualar HTML content on the page to describe your Flash content.
    http://code.google.com/p/swfobject/
    As for wmode, here's a detailed description from an old post:
    Window Mode (wmode) - What's It For?
    There are three window modes.
    Window
    Opaque
    Transparent
    By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
    In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  8. #8
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161
    Wow, thanks

    captsig

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles