The site I'm making uses a tabbed navigation and MooTools to fade the pages in and out. One of the pages has a Flash player embedded on it, and all of the others consist of pure HTML. The problem occurs on the HTML pages -- somehow the Flash player is causing the HTML pages to display oddly. Vertical borders and text will be jagged in the same locations of the top and bottom of the player. I don't have any code to show because it would be quite overwhelming to sift through, but has anyone run into a similar problem and know of a simple fix? Thank you!
My first thought is that this probably has to do with your wmode setting on the flash player.
Quote from http://www.communitymx.com/content/article.cfm?cid=e5141
Window Mode (wmode) - What's It For?
There are three window modes. Windowless mode allows you to take advantage of the transparent movie, absolute positioning, and layering capabilities available in the browser. They are controlled with the wmode parameter in the object tag. The default mode is available by either choosing not to specify any wmode, or by using wmode="window". We'll look at Macromedia's explanation of the three modes and then we'll explore them a bit further individually.
Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.
Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.
Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.
Adobe's property listing: http://kb2.adobe.com/cps/127/tn_12701.html
you are using swfobject lib for adding the flash, arent you?
I had a different problem but maybe helps, with a jquery submenu been hidden by a flash movie, and I solved this with CSS z-index property.
Thanks, everybody, for your answers. Flash is definitely the culprit here, since the problem only exists when the embedded Flash player is present. The player is actually created by Kyte, so it's not the standard players that are made through Flash/Dreamweaver. I tried changing the wmode parameter, which useful, but didn't work. And the z-index thing didn't work either. I'll keep trying it, though, because it seems that should work.
Related
I am using starling for rendering so I must use wmode=direct in my application for it to work.
Having said that I need to show a box on top of flash under some circumstances. But when I show the box it appears on the back because of the wmode (works fine with opaque).
Is there any way I can show content on top of flash while I am in wmode=direct?
You can try showing that box within SWF on 2D level, that level is by design above Stage3D content.
When ‘wmode’ in instigated and a user is playing a Flash game requiring arrow keys, on Internet Explorer the browser window also moves. Seemingly, the only way round this is to remove the ‘wmode.’ But, if the ‘wmode’ is removed the Flash game rises to the top of the stacking order and all other elements such as expandable banners or dropdown menus go behind the Flash. No amount of iFrames or CSS resolves this issue.
I have found a solution that lets the ‘wmode’ remain, whilst also enabling the Flash game to have keyboard focus once clicked and therefore the Internet Explorer browser window does not move. This solution means other Dom elements can go above the Flash.
I have put the AS3 code below into a simple example and it seems to work. It basically puts a scrollPane in the content and then this is made invisible.
Being a PHP developer and not an AS3 developer, my questions is – can any AS3 developers see an issue or detrimental impact of placing the code below into a Flash based/AS3 built game. Equally could this work in AS2?
Much appreciated
_scrollPane = new ScrollPane();
_scrollPane.setSize(stage.stageWidth, stage.stageHeight);
_scrollPane.horizontalScrollPolicy = ScrollPolicy.OFF;
_scrollPane.verticalScrollPolicy = ScrollPolicy.OFF;
_scrollPane.alpha=0;
stage.addChild(_scrollPane);
After a bit more testing it appears this is not realistically a viable option. Although the swf file gains focus once clicked and sprites requiring arrow key control can be moved without affecting the browser window, clicking or dragging interaction with sprites is prevented due to the child index of the scrollPane.
I’ve been playing around with the pre-release of IE10 and it appears no matter what state the wMode is left in (or removed) the browser window is still affected by arrow key interaction with the swf.
If anyone else has come across this problem or found an answer it would be greatly appreciated.
Could someone settle this little dispute please.
If I set wmode=transparent on the flash template everything works magically. However, the flash developer says that by doing this the template will be slowed down significantly..
So the questions.
1) How much of an impact does wmode have on performance today?
2) Is there any other way to place HTML on top of flash?
It should be noted the HTML only appears on top of the flash when they click on a video -> rare. The flash only is animated again after the video is closed and the user clicks on a rollover or whatever.
I've done a bunch of websites with transparent flash objects and heavy animations, etc.. I've never noticed any change. I think it should only matter if you had issues with performance to start with (zillions of vectors being animated or something).
I have a piece of Flash on an HTML page that when you hover over it, it expands out to reveal more information.
There are text links that it expands over, however in everything but IE, when it's not expanded those links are still covered by the Flash making them unclickable.
I have the Flash piece in a separate DIV wmode set to transparent.
I know this is possible to make work but for the life of me, I can only get it to work in IE.
Does anyone have any idea of what I'm missing?
Thanks.
I'm a little confused by what you're looking for, so I'll give you a couple of areas to look into. With luck, one of these will get you going, but otherwise, feel free to ask more questions. I'm a little slow on the uptake sometimes....
First off, by default, most browsers place flash files in the uppermost layer. So, the links that you cannot click are stuck in behind your flash presentation - basically, in the eyes of the browser, you are actually clicking on the flash presentation!
This article has some good information on this:
http://kb2.adobe.com/cps/155/tn_15523.html
But basically, you can use a parameter called WMODE in both the object and embed tags. For example, you could implement it like this:
and then add wmode="transparent" into your embed tag.
However, to make it smooth across all browsers (and to make the code a little easier to read/follow), you should also add some z-index values to your stylesheet.
I hope this helps a bit. If not, remember, I'm slow on the uptake....:-)
I have an embedded flash that is transparent so it looks like part of the background. I achieved that by setting wmode to transparent.
My problem is that the area underneath the flash becomes inaccessible, even though the flash is transparent. Therefore I cannot click on any links or buttons that are under the flash object.
How do I make the flash unobtrusive?
Clarifications:
- the flash is transparent but it has an animation that shows in the background.
- wmode set to transparent lets you click the contents underneath in IE but not Firefox.
The problem is that in your document, the object/embed that contains the Flash animation is on top of the elements you need to access. You need to put these elements on top of the Flash animation instead of the other way around.
The way to do this is to set the object's wmode to opaque, and use the CSS z-index property to set it to a z-index lower than the z-index of whatever elements you want to float over it -- you can do this in CSS or just with inline style="" attributes.
Here's an example using SWFObject to create the object/embed tags, but the same principle applies if you are just hardcoding these into your HTML.
I didn't know there could be such a thing as unobtrusive flash.
On a more serious note: what are you trying to accomplish with a layer of flash anyways?
I suggest taking a step back and looking at the page as a whole. If the things below the flash are needed, then make the flash go somewhere else or replace it with actual elements in the page to serve the same purpose.
What is the purpose of the Flash? If it doesn't do anything visible, then you can make it 1 pixel in size and/or put it in a div that is absolutely positioned off the screen.
I think I might have found the answer to my own question.
There is a javascript library called Unobtrusive Flash Objects (UFO), which got deprecated and now is swfobject.
I will give it a go and report back.