8

I'm encountering a weird, very difficult to reproduce graphics glitch in a Flash video player!, so far only in Chrome.

screenshot

The gray rectangle below "Enter the building" is showing the background color of the html div that the flash player is sitting in. There is a smaller one under the "Where are we" link. These are sprites (containing several other sprites and displayobjects) that have a scripted hover animation (they slowly move towards a random point that is withing a certain range of their origin). The glitch resizes together with them, sometimes disappearing.

What's the strangest it makes the entire flash component see through. I have this code running when the videoplayer is created: 

        graphics.clear();
        graphics.beginFill(0xff00ff, 1);
        graphics.drawRect(0, 0, _stage.stageWidth, _stage.stageHeight);
        graphics.endFill();

So there should be a bright color in the back of the video player, and I've confirmed that it is there if I don't load the video player. However this bright color is not displayed, but rather the background div that contains the player shines through.

This makes absolutely no sense to me...and I have no idea how to debug this. All I know is that the appearance of the glitch is dependent on where the text-links are hovering on the screen.

The flash is loaded in WMODE transparent, which we need because it has a expandable 'wing' on the side which is semi transparent.

EDIT:

it is live at www.48hourgames.com. Once you make an account you will see the video player that ends with the screenshot above.

joon
  • 832
  • 13
  • 31
  • Ensure your Chrome is the latest version. From the **main menu**, choose **`About Google Chrome`** and it will automatically look for and install the latest version if needed. – arttronics Dec 16 '12 at 23:22
  • 1
    This did not solve the problem. It occurs on all machines with latest version of Chrome. – joon Dec 17 '12 at 10:17
  • I notice that you have `_` for stage which seems odd. Maybe it's suppose to be `stage.stageWidth` and `stage.stageHeight` instead? Typically, the *underscore* is used to specify a variable. If it's needed, maybe syntax should be `this._stage.stageWidth` and `this._stage.stageWidth`. – arttronics Dec 17 '12 at 13:06
  • I keep a local stage reference around out of habit cause the public/static stage is unavailable if the Sprite is not being rendered, making it difficult to add it to the stage again. I have no idea whether this is good or bad form, but there is no difference if I swap out _stage.stageWidth with 850 (Which is the actual width) and the same for height. – joon Dec 19 '12 at 17:41
  • This issue is in [Chromium Issues Archive](http://code.google.com/p/chromium/issues/detail?id=142038) – trkaplan Dec 20 '12 at 16:41
  • 1
    This is not the same issue as the one you mention does not involve Flash. – joon Dec 20 '12 at 23:20
  • Sorry guys, but referring to my message on [Chromium Issues Archive](http://code.google.com/p/chromium/issues/detail?id=142038#c85) they opened [another issue entry](http://code.google.com/p/chromium/issues/detail?id=167157) for this problem. – trkaplan Dec 21 '12 at 15:19

5 Answers5

5

This is a problem with the Pepper Flash player. Adobe and Google have been working on this for some time, it is how they intend to keep Flash alive and working on the Linux platform.

Pepper Flash, unfortunately, is very buggy. Sometime over the summer of this year, Pepper Flash became the default Flash plugin in Chrome for all operating systems. It has many issues that there are no real solutions to, other than disabling it (and hoping Adobe/Google will address them).

To disable Pepper Flash:

  • go to: chrome://plugins
  • click the Details icon in the upper right
  • find the Flash Player plugin section, you will likely have several versions of Flash installed here. I just installed Chrome to verify it was the problem, and had Pepper Flash plus 2 "normal" versions of Flash.
  • disable the Flash plugin that has "PepperFlash" in the path.
Sunil D.
  • 17,983
  • 6
  • 53
  • 65
  • 1
    This is very helpful. Is there any official info or bug reports you can refer me to, so I can track them? – joon Dec 20 '12 at 23:19
  • Sorry I never looked for a bug report, but the internet is riddled with reports of problems that only occur in Pepper Flash/Chrome. Some of the issues cannot be worked around (especially those regarding webcams). However, Tiffon posted some good ideas in his answer as work arounds that might be helpful. Especially if you are using a non standard wmode value, which bring their own set of issues. – Sunil D. Dec 21 '12 at 16:37
  • Enlightening answer. Thanks. – net.uk.sweet Mar 12 '13 at 11:12
4

I was able to very reliably reproduce the issue. A couple of ideas:

  • Sounds like wmode transparent might be problematic on a recurring basis. Maybe you could make the Flash element have width 100% and do a seemless background in the left / right margins. In Flash, you can prevent it from scaling your content via stage.scaleMode = StageScaleMode.NO_SCALE;. If the Flash went the whole width, you could get rid of the wmode transparent and might be good to go.
  • Have you tried setting cacheAsBitmap to true for your two buttons that overlay the movie?
  • Because the artifacts only show up at the end of the movie, when it's a still frame, maybe setting cacheAsBitmap to true on the movie when it reaches this final state would work?
  • Maybe swap out the movie when it reaches the final state with a PNG image that looks the same?
  • Maybe swap out the two buttons with PNG images, if they are not already PNG images?

If these don't work... getting more desperate.

  • Maybe strip the side menu (expanding Flash element) out of the SWF into it's own SWF and put on top of the movie SWF. This way, the movie SWF can lose wmode transparent and maybe the glitch won't happen on the side menu.
  • The side menu could be HTML.
    • The rollover states could be HTML elements.
    • Or, the side menu could call into the Flash element to toggle the rollover texts. The call into Flash would have to be registered via the ExternalInterface class (details).

As I don't have code to test anything, these are all kinda shots in the dark.

I would start with the cacheAsBitmap related ideas. Then move onto the PNG ideas (buttons, last frame). From there, try the full-width version of the Flash element. If these don't work, you might want to consider a new design. If that is not an option, I would move onto splitting out the side menu, with variations, as described above.

tiffon
  • 5,040
  • 25
  • 34
  • A possible aternative design would be to position the menu over the video: http://imgur.com/fjh3b – tiffon Dec 21 '12 at 20:46
2

I got this problem today with lastest Flash Player version 11.6 + Chrome 27. In some computer it's working, on several others, it's not, this make it's very difficult to track down the problem because it's not happening my side.

I believe that this is a Flash's bug, not chrome because when I rightclick -> zoom-in, rightclick -> zoom-out the dirty patches disappear

So I looked around for a dirty quick fix.

Tried cacheAsBitmap method : does not work (this fix does work for "black where transparency" problem but not for this one).

Tried the two frame images method : does not work neither (not sure why)

I finally found a way to fix (tested several times) :

As the dirty white patches only show up when the animation end I put a transparent shape tween clip on stage and let it run forever. And it works.

p/s : Actually I tried to add this as a comment instead of an answer but can not found a way to do, it's weird.

thienhaflash
  • 79
  • 1
  • 9
  • My SWF in chrome is set to wmode=transprent and I was getting the black behind transparent PNGs. This just started happening for me on a particular project. I made the PNG a movie clip and set `cacheAsBitmap` to true and it fixed the black background for me – Ronnie Oct 14 '13 at 17:24
0

I've encountered this issue today on my Google Chrome 31.0.1650.63 while playing my jigsaw game. I don't normally use this browser, hence flash supposed to work exactly the same in every browser, so I was a bit surprised to hear about white rectangles overlaying all over my game. Setting the wmode to opaque instead of transparent fixed this problem.

nullheart
  • 41
  • 3
0

same here, in my videoplayer too.

only in chrome pepper flash, and only when the swf is embeded with transparent wmode.

Today i've found a fix/workaround/hack on the web which one i can live with:

"If you'd like to bypass this problem with a simple hack, you can draw a MovieClip that is a transparent fill. And every frame toggle its 'alpha' property. Because its fill is transparent, its 'alpha' property doesn't do anything, except for force a full screen redraw to update the alpha property of the MovieClip. This in turn fixes any malfunctioning rendering due to wmode being transparent.

By adding moueEnabled = false you ensure the hack doesn't interfere with any existing mouse events"

import flash.display.MovieClip;
import flash.events.Event;

var redrawAll = new MovieClip();
redrawAll.mouseEnabled = false;
redrawAll.graphics.beginFill(0x000000, 0);
redrawAll.graphics.moveTo(0,0);
redrawAll.graphics.lineTo(stage.stageWidth, 0);
redrawAll.graphics.lineTo(stage.stageWidth, stage.stageHeight);
redrawAll.graphics.lineTo(0, stage.stageHeight);
redrawAll.graphics.endFill();
addChild(redrawAll);

addEventListener(Event.ENTER_FRAME, function(e:Event){
    redrawAll.alpha = (redrawAll.alpha == 0)? 1 : 0;                 
});

"

source: https://code.google.com/p/chromium/issues/detail?id=173089#c12

PeterErdogyaraki
  • 1
  • 1