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.
Related
We are facing the following challenge: We are creating a behavioral experimentation library, which both needs to be able to show random shapes as well as display forms.
For the shape drawing part we use pixi.js, and even though we know it can also use canvas2D, we prefer it to use WebGL as its rendering engine, which uses the 3D context of the canvas. Pixi however doesn't really have the ability to draw form elements on the canvas, so we decided to use Zebra/Zebkit for this, but zebra can only draw to 2d context.
According to many sources, it's impossible to use 2D and 3D context simultaneously with a single canvas, or switch from 2D and 3D context (and vice versa) after the canvas has been initialized. We therefore decided to create 2 separate canvases, one with a 3D context to use with Pixi.js, and one with a 2D context to use with Zebra/zebkit. When necessary, we switch the canvases by showing one and hiding the other.
This works quite well when the canvases are integrated in the web page, but less optimal when we want to display the experiment fullscreen. It is very difficult to switch from one canvas to the other in fullscreen, because you can only choose one DOM element at the time to be displayed full screen, and weird stuff happens when you start hiding the full screen element to show another. My question is: what would be the best approach to tackle this problem? I already have several in mind:
Put both canvases in a container div, and display this container fullscreen instead of the canvases itself. I don't know if this is possible, or if this will have any negative side effects compared to showing a canvas in fullscreen directly.
Render the zebkit canvas on top of the pixi canvas by making sure it is on top of the overlay item, as suggested in How do I make a DIV visible on top of an HTML5 fullscreen video?. This situation seems very hacky though, and I smell inconsistency issues between the various browsers that are around already.
Use the method described in How do I make a DIV visible on top of an HTML5 fullscreen video? to render normal HTML form elements on the pixi canvas. I predict there will be some resolution/rendering problems to tackle though, because you don't have the degree of control over the pixel raster as you have with canvas items.
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.
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.
I have a div box that needs to pop up over an ActiveX object, but it seems that an ActiveX object has an infinitely high z-index, even if when I set that index to be low. My div box continues to show up under the ActiveX object. Any ideas?
You'll want to place a transparent iframe over the object you want to cover up.
found this example for you
An advantage of Windowless ActiveX controls is that they participate in overlapping 2-D layout
Though modifying the control to make it windowless may not be practical.
Edit:
I've found a sample that demonstrate this using the flash player ActiveX control. Flash can be used in both windowed and windowless modes. That sample makes it easy to switch between these and see how an overlapping div appears in each mode.
Windowless controls are implemented in a way that don't require them to have their own window. That means no WindowProc and no dedicated drawing surface.
Instead you receive messages by implementing IOleInPlaceObjectWindowless and can get the GDI drawing context through IOleInPlaceSiteWindowless.
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.