Getting flash to show up in front of content

Adobe Flash Positioning I used to have a problem of controlling flash elements on my sites.. specifically I wanted to be able to specify the stacking/zIndex order of the element. Sometimes I want flash to show up in front of or behind other content. My company does a ton of video/audio production for tv and radio spots and most of the time we use flash to make them available online. On one site we have 6 different flash flv movies that are all the same size and are in the same position on the page. But only 1 is displayed at a time based on what the user wants to watch. So the selected flash movie needs to have the highest stacking order/zIndex to be the only viewable movie.

The reason I choose to load all 6 files at a time is so that when a user clicks 1 of 6 buttons to select a video, it INSTANTLY is front and center.. literally milliseconds because all that is happening is moving the video in front of the others.

Controlling flash to show in foreground or background on command

Basically the "hover" buttons I've created using css, are placed under the flash animation clip. I can't come up with a good solution. Any ideas??

The Solution is `wmode` and `css`

I used to have this problem all the time too! Very frustrating. I figured out that there is a parameter for embedding flash files that change the way the flash is displayed in the DOM.. After looking through a lot of macromedia flash documentation, I learned about flash's wmode attribute.

wmode

The flash wmode attribute has three different values.

From the official flash documentation

wmode attribute/parameter Values:

Window
Opaque
Transparent

The default value is Window if this attribute is omitted. Applies to object only. Description: (Optional) Lets you use the transparent Flash content, absolute positioning, and layering capabilities available in Internet Explorer 4.0. Window plays the application in its own rectangular window on a web page. Window indicates that the Flash application has no interaction with HTML layers and is always the topmost item. Opaque makes the application hide everything behind it on the page. Transparent makes the background of the HTML page show through all the transparent portions of the application and can slow animation performance. Opaque windowless and Transparent windowless both interact with HTML layers, letting layers above the SWF file block out the application. The difference between the two is that Transparent allows transparency so that HTML layers below the SWF file might show through if a section of the SWF file has transparency; opaque does not.

Using the wmode attribute/parameter

I like to use 1 of 2 awesome javascript scripts to insert flash into my page, which fixes the microsoft activex problem.

Basically to get your site working change:

Nice one askapache! Which browsers does this work in? If it's all of them: you know how to fix a bug even the owners of Flash don't. Sadly I expect that to just be IE7 for Windows. Very aggravating for the rest of us :)

This is a trick that I learned towards the end of 05' for a site that I was developing. I'm obsessed with cross-browser functionality and I got the flash element to disappear behind other content by using the zIndex css attribute with javascript.

I had 5 elements to control, 5 divs that held various content, including flash video. By apsolutely positioning each of the 5 divs within 1 relative parent div I was able to manipulate the stacking order of the divs by applying a className.

.z6 {z-index:9119;}
.z0 {z-index:459;}
.z1 {z-index:449;}
.z2 {z-index:439;}
.z3 {z-index:429;}
.z4 {z-index:419;}

Applying CSS Classes with JavaScript

Using an easy javascript example from my best javascript code snippets 2007 article its incredibly easy to make this work. Add an event to each of the buttons that when clicked changes the className of the videos containing element to have the highest z-index.

I created an array of the the 6 video containers using a quick getElementsByTagName and applied the className to all of them at once using a simple foreach loop.

document.getElementById("video1div").className='z6';

wmode attribute/parameter
Value:
Window | Opaque | Transparent


Description:
(Optional) Lets you use the transparent Flash content, absolute positioning, and layering capabilities available in Internet Explorer 4.0. This attribute/parameter works only in Windows with the Flash Player ActiveX control.

Window plays the application in its own rectangular window on a web page. [B]Window indicates that the Flash application has no interaction with HTML layers and is always the topmost item.

Opaque makes the application hide everything behind it on the page.

Transparent makes the background of the HTML page show through all the transparent portions of the application and can slow animation performance.

Opaque windowless and Transparent windowless both interact with HTML layers, letting layers above the SWF file block out the application. The difference between the two is that Transparent allows transparency so that HTML layers below the SWF file might show through if a section of the SWF file has transparency; opaque does not.

[B]The default value is Window if this attribute is omitted. Applies to object only.

Flash OBJECT and EMBED tag attributes

This document lists the required and optional attributes of the object and embed tags used to publish Adobe Flash movies.

For specific usage information for these attributes, refer to sections of the Using Flash manual devoted to using object and embed tags (exact headings vary among Flash versions). Information is also available at Adobe Flash OBJECT and EMBED tag syntax.

Required attributes

The following attributes are required within the object and/or embed tags when adding a Flash movie to an HTML page:

Both `object` and `embed`

width: Specifies the width of the movie in either pixels or percentage of browser window.
height: Specifies the height of the movie in either pixels or percentage of browser window.

`object` only

classid: Identifies the ActiveX control for the browser. See example code for value
codebase: Identifies the location of the Flash Player ActiveX control so that the browser can automatically download it if it is not already installed.
movie (param): Specifies the location (URL) of the movie to be loaded.

`embed` tag only:

src: Specifies the location (URL) of the movie to be loaded.
pluginspage: Identifies the location of the Flash Player plug-in so that the user can download it if it is not already installed. EMBED only.

Optional attributes and possible values

The following attributes are optional when defining the object and/or embed tags. For object, all attributes are defined in param tags unless otherwise specified:

id

Movie Identifier. Identifies the Flash movie to the host environment (a web browser, for example) so that it can be referenced using a scripting language. (attribute for object, object only)

name

Movie name. Identifies the Flash movie to the host environment (a web browser, typically) so that it can be referenced using a scripting language such as JavaScript or VBScript. (embed only)

swliveconnect

( true / false ) Specifies whether the browser should start Java when loading the Flash Player for the first time. The default value is false if this attribute is omitted. If you use JavaScript and Flash on the same page, Java must be running for the FSCommand to work.

play

Specifies whether the movie begins playing immediately on loading in the browser. The default value is true if this attribute is omitted. ( true / false )

loop

( true / false ) Specifies whether the movie repeats indefinitely or stops when it reaches the last frame. The default value is true if this attribute is omitted.

menu

true displays the full menu, allowing the user a variety of options to enhance or control playback. false displays a menu that contains only the Settings option and the About Flash option.

quality

Possible values: low, high, autolow, autohigh, best.

low: favors playback speed over appearance and never uses anti-aliasing.
autolow: emphasizes speed at first but improves appearance whenever possible. Playback begins with anti-aliasing turned off. If the Flash Player detects that the processor can handle it, anti-aliasing is turned on.
autohigh: emphasizes playback speed and appearance equally at first but sacrifices appearance for playback speed if necessary. Playback begins with anti-aliasing turned on. If the actual frame rate drops below the specified frame rate, anti-aliasing is turned off to improve playback speed. Use this setting to emulate the View > Antialias setting in Flash.
medium: applies some anti-aliasing and does not smooth bitmaps. It produces a better quality than the Low setting, but lower quality than the High setting.
high: favors appearance over playback speed and always applies anti-aliasing. If the movie does not contain animation, bitmaps are smoothed; if the movie has animation, bitmaps are not smoothed.
best: provides the best display quality and does not consider playback speed. All output is anti-aliased and all bitmaps are smoothed.

scale

Possible values: showall, noborder, exactfit.

default: (Show all) makes the entire movie visible in the specified area without distortion, while maintaining the original aspect ratio of the movie. Borders may appear on two sides of the movie.
noorder: scales the movie to fill the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the movie.
exactfit: makes the entire movie visible in the specified area without trying to preserve the original aspect ratio. Distortion may occur.

align

Possible values: l, t, r, b. Default centers the movie in the browser window and crops edges if the browser window is smaller than the movie.

l: (left)
r: (right)
t: (top)
b: (bottom) align the movie along the corresponding edge of the browser window and crop the remaining three sides as needed.

salign

Possible values: l, t, r, b, tl, tr, bl, br.

l, r, t, and b align the movie along the left, right, top or bottom edge, respectively, of the browser window and crop the remaining three sides as needed.
tl and tr align the movie to the top left and top right corner, respectively, of the browser window and crop the bottom and remaining right or left side as needed.
bl and br align the movie to the bottom left and bottom right corner, respectively, of the browser window and crop the top and remaining right or left side as needed.

wmode

Possible values: window, opaque, transparent. Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.

window: movie plays in its own rectangular window on a web page.
opaque: the movie hides everything on the page behind it.
transparent: the background of the HTML page shows through all transparent portions of the movie, this may slow animation performance.

bgcolor

[ hexadecimal RGB value] in the format #RRGGBB . Specifies the background color of the movie. Use this attribute to override the background color setting specified in the Flash file. This attribute does not affect the background color of the HTML page.

base

. or [base directory] or [URL]. Specifies the base directory or URL used to resolve all relative path statements in the Flash Player movie. This attribute is helpful when your Flash Player movies are kept in a different directory from your other files.

flashvars

Possible values: variable to pass to Flash Player. Requires Macromedia Flash Player 6 or later. Used to send root level variables to the movie. The format of the string is a set of name=value combinations separated by '&'. Browsers will support string sizes of up to 64KB (65535 bytes) in length. For more information on FlashVars, please refer to Using FlashVars to pass variables to a SWF.

Flash "scale" Attribute

noBorder

The Stage.width and Stage.height values will remain constant and will reflect the values set in the Document Properties dialog box. The "noBorder" setting means that the SWF will be scaled, maintaining the original aspect ratio, but there may be some cropping. The Update Dimensions button is there to keep us honest. The values in the width and height boxes are not automatically updated when the player window is resized, so you must click the button to update the displayed values of Stage.width and Stage.height. If you have resized the player window in "noScale" mode before switching to this mode, click the Update Dimensions button to see the width and height revert to the values defined in the Document Properties dialog box.

exactFit

The Stage.width and Stage.height values will remain constant and will reflect the values set in the Document Properties dialog box. The "exactFit" setting means that the Flash content will be scaled, without maintaining the original aspect ratio. All of the Flash content will be visible, but some distortion may occur. The Update Dimensions button is there to keep us honest. The values in the width and height boxes are not automatically updated when the player window is resized, so you must click the button to update the displayed values of Stage.width and Stage.height. If you have resized the player window in "noScale" mode before switching to this mode, click the Update Dimensions button to see the width and height revert to the values defined in the Document Properties dialog box.

noScale

The Stage.width and Stage.height values will change as you resize the player window. The "noScale" setting means that the SWF will not be scaled when the size of the player window changes. Resize the player window and you'll see what I mean. There's no need for an Update button with this setting because this is the only setting for which the onResize message is sent when the player window size changes. In other words, we can add code to the SWF to update the width and height whenever the player window size changes

showAll

The Stage.width and Stage.height values will remain constant and will reflect the values set in the Document Properties dialog box. The "showAll" setting means that the all Flash content will be visible and the original aspect ratio will be preserved, but borders may appear on two sides of the application. The Update Dimensions button is there to keep us honest. The values in the width and height boxes are not automatically updated when the player window is resized, so you must click the button to update the displayed values of Stage.width and Stage.height. If you have resized the player window in "noScale" mode before switching to this mode, click the Update Dimensions button to see the width and height revert to the values defined in the Document Properties dialog box.

CSS 7 Oct, 20077 Oct, 2007

« Story by Author of PING for UNIXCSS Background Image Sprites »