Global Moxie

Help!

What's Global Moxie?

Global Moxie specializes in mobile design strategy and user experience for a multiscreen world. We offer consulting services, training, and product-invention workshops to help creative organizations build tapworthy mobile apps and effective websites. We're based in Brooklyn, NY. Learn more.

On Shelves

Books by Josh Clark

Moxiemail

Enter your e-mail to receive occasional updates:

News feeds

Home > Help! > Big Medium FAQ > Design > Templates

Why do Flash animations obscure parts of my page?

E-mail this page

Print this page

Flash animations tend to display on top of all other elements on the page, sometimes obscuring elements that should appear above them. For example, dropdown menus and the image enlargement/slideshow features can sometimes be hidden by Flash animations included in your custom page template.

In many cases, this can be avoided by adding a wmode parameter to the HTML for the Flash object, which allows other objects to display on top of the Flash animation.

If your Flash object has <param> tags, add a wmode param tag like so:

<param name="wmode" value="transparent" />

...and if your Flash object uses an <embed> tag make sure that it likewise includes wmode="transparent" among its attributes, for example:

<embed src="flash.swf" quality="best" wmode="transparent" ... >

An example

Say that your template includes the following HTML to embed a Flash animation into your page:

<object type="application/x-shockwave-flash
        data="flash.swf" width="400" height="300">

    <param name="movie" value="/flash/movie.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />

    <embed src="/flash/movie.swf"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        quality="high" bgcolor="#ffffff" align=""
        width="550" height="400"></embed>

</object>

You would add a new <param name="wmode"> tag and add the wmode="transparent" attribute to the <embed> tag, with this result:

<object type="application/x-shockwave-flash
        data="flash.swf" width="400" height="300">

    <param name="wmode" value="transparent" />
    <param name="movie" value="/flash/movie.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />

    <embed src="/flash/movie.swf"
        wmode="transparent"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        quality="high" bgcolor="#ffffff" align=""
        width="550" height="400"></embed>

</object>

More from this section

Home > Help! > Big Medium FAQ > Design > Templates

Can I include PHP code in my templates?
Tips for combining PHP-generated markup with Big Medium.

Why don't images appear on my pages?
The problem is likely related to either the “page position” setting for the images or incomplete loading of images when adding image sizes manually.

Why are the images in my custom templates broken on some pages?
Troubleshoot broken images in your templates.

Why do Flash animations obscure parts of my page?
Tips for fixing flash movies that "float" above other page elements, including dropdown menus and enlarged/slideshow images.

I changed the direction of the navigation in my templates or HTML preferences, but nothing changed. What gives?
Troubleshooting navigation layout problems.

How do I add a new page type with its own custom template?
Learn how to add a custom template with a Big Medium plugin.

Can Google Analytics track Big Medium file downloads?
If you use Google Analytics to track visitor activity on your Big Medium-powered site, a small tweak lets you track file downloads, too.