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.
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??
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.
The flash wmode attribute has three different values.
wmode attribute/parameter Values:
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.
I like to use 1 of 2 awesome javascript scripts to insert flash into my page, which fixes the microsoft activex problem.
to
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;}
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.
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.
The following attributes are required within the object and/or embed tags when adding a Flash movie to an HTML page:
object and embed widthheightobject only classidcodebasemovie (param)embed tag only: srcpluginspageThe following attributes are optional when defining the object and/or embed tags. For object, all attributes are defined in param tags unless otherwise specified:
idobject, object only)nameembed only)swliveconnectplayloopmenutrue 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.qualitylow: 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. scaledefaultnoorderexactfitalignlrtbsalignl, 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. wmodewindowopaquetransparentbgcolorbaseflashvarsnoBorder
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.