StageWebView Flash's White when Displayed
So I've been working on a project using Adobe Animate to create a universal Air application that can be ported to multiple platforms i.e. Mac, Windows, and iOS.
It uses StageWebView to display videos embedded on HTML pages that have their own custom html5 video player and everything works well except for one simple but annoying thing.
Whenever I display a Stage Web View you'll see a flash of white before the page displays.
Now I originally thought this was an issue with checking for a URL load completion or a poorly formatted HTML document but that doesn't seem to be the case.
What I did notice after several attempts of trying to remove the issue is that it did go away if I used the embedded Air WebKit opposed to using the native WebKit from the desktop device.
(Code Below) Causes white flash on load:
var webView:StageWebView = new StageWebView(true);
(Code Below) This gets rid of the issue but my HTML tags like video and progress are not supported by the embedded WebKit and no longer function properly.
var webView:StageWebView = new StageWebView();
Information from about the setting from Adobe:
useNative:Boolean (default = false) — When useNative is false, a version of WebKit embedded within AIR is used as the source of the
StageWebView created. When useNative is true, then AIR will use the
the system's default web engine. Mobile platforms only support using
the system web engine, so useNative is ignored on mobile platforms.
The frustrating thing is that I've set a listener to check for load completion and that doesn't get rid of the issue. So as a workaround I've hidden the displayed StageWebView off the screen and then moved it's location to where I want it to be after a delay which is not great.
Other attempts to display it small as a pixel resize it in place cause the issue still.
/* Check for Stage Web View Errors */
webView.addEventListener(ErrorEvent.ERROR, onError);
function onError(e:ErrorEvent):void {
trace("Stage Web View error: " + e);
}
/* Function to not show Stage Web View until loaded. */
function onCompleteHandler(e:Event):void {
webView.assignFocus();
// Delay the Stage Web View to fix white flash issue.
setTimeout(callWebView,500);
webView.removeEventListener(Event.COMPLETE,onCompleteHandler);
}
/* Multi-Function Stage Web View Loader, Just add file path string to call */
function webviewFilePath(path:String):void {
webView.stage = this.stage;
// Prep filepath
filePath = new File(new File(path).nativePath).url;
// Load file path
webView.loadURL(filePath);
// Add listener for Complete URL Load then Show
webView.addEventListener(Event.COMPLETE,onCompleteHandler);
}
/* Function to call Stage Web View independantly so it can be delayed with a timer */
function callWebView() {
webView.viewPort = new Rectangle(posX(viewX), posY(viewY), viewWidth, viewHeight);
}
Any hints or tips on how I can alleviate or fix the issue would be great.
Of course if Adobe just actually updated the embedded Air WebKit that would probably fix the whole issue in the first place but I doubt that's happening anytime soon.
Partial Fix
So the issue still exists when I initially load up the Stage Web View but I've managed to minimize its appearance during app use.
One major part of the issue was how I reset the StageWebView in preparation for a new page I wanted to load or when I wanted to close the view.
I went a little overboard on resetting StageWebView because audio in StageWebView has been known to continue playing even when it's hidden.
/* Function to Reset Stage Web View */
function resetWebView():void {
webView.loadString("<!DOCTYPE HTML><html><body></body></html>");
//webView.viewPort = new Rectangle(0, 0, 0, 0);
webView.stage = null;
//webView.viewPort = null;
}
I realized I could just simply hide the StageWebView and load up a blank page while it was hidden from view to stop any audio playing. That was easy enough to accomplish with a simple string loaded into it.
Although from time to time I'll still see that white flash it's occurrence is minimal.
private var webView : StageWebView;
webView = new StageWebView( true );
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, 1024, 768 );
Related
I'm using Phaser 2.5.0 (tried 2.4.8 also) and I'm trying to create fully responsive game using phaser library.
Everything is ok when I refresh page, here is image:
but when I change rotation to portrait dialog message is not ok, image:
When I refresh page using portrait mode I get ok dialog:
So problem is when I resize browser window.
Here is code for init phaser game:
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO);
Tried also:
var game = new Phaser.Game("100%", "100%", Phaser.AUTO);
Here is create function located in main.js:
create: function(){
console.log('create');
this.game.antialias = true;
this.game.stage.smoothed = true;
this.input.maxPointers = 1;
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.minHeight = 0;
this.game.time.advancedTiming = true;
},
So to tell again problem is when I resize browser window but when I do refresh then it's not working ok. Game must support resize.
Here is one simple example which is giving almost same result, on refresh is ok but when doing resize is not ok: https://jsfiddle.net/CroDac/tv010u0t/
Thank you
There was/is an old, but apparently not fixed, bug in iOS that caused (causes?) this. There are several workarounds on the net, on of them is here:
https://github.com/scottjehl/iOS-Orientationchange-Fix
From the description:
This fix works by listening to the device's accelerometer to predict
when an orientation change is about to occur. When it deems an
orientation change imminent, the script disables user zooming,
allowing the orientation change to occur properly, with zooming
disabled. The script restores zoom again once the device is either
oriented close to upright, or after its orientation has changed. This
way, user zooming is never disabled while the page is in use.
Maybe this can help you....
I've created a small javascript game and I tested on my local computer in all major browsers and it works fine . After that I uploaded the game on my hosting server and the game won't display in Chrome , the canvas area is grey but it works fine in firefox , anyone knows why ? Here is the link for the demo
http://djordjepetrovic.rs/igrica/
In your catcher_game.js file I found at least on of this:
draw: function(){
basket_catcherImg = new Image();
basket_catcherImg.src = 'images/basket.png';
ctx.drawImage(basket_catcherImg, this.x, this.y, this.w, this.h);
// ...
This won't work very well. It works locally on your computer as the image is cached from disk.
Loading images is an asynchronous operation so your drawImage needs to wait until the image is loaded - the proper way is:
draw: function(){
var me = this;
basket_catcherImg = document.createElement('img');
basket_catcherImg.onload = function() {
ctx.drawImage(basket_catcherImg, me.x, me.y, me.w, me.h);
}
basket_catcherImg.src = 'images/basket.png';
//...
You need to do this with other such instances of img as well.
The reason you need me here is because this is changed to the image element when called on the onload callback. So you need to keep a reference to the original this context.
Also replace new Image() to createElement('img') as there is currently an issue in Chrome that doesn't handle this correctly.
Nice graphics by the way!
So I have run into a strange problem with Chrome and I haven't been able to find any posts online speaking to a similar issue. I have a script in an AS3 app that takes a screenshot as bitmap data and sends it to the printer with the PrintJob object. It works fine from within flash, locally on my desktop, and in every browser but Chrome.
When I print with Chrome the bitmap image just displays as a grey box instead of the actual image itself. If i add the bitmap to the stage and view it from Chrome I can see that the bitmap actually contains image data other than a 50% grey fill but as soon as it is sent to PrintJob Chrome seems to strip it of this data.
This is the code I am using:
function printImage(clip:Sprite){
var printJob:PrintJob = new PrintJob();
printJob.start();
printJob.addPage(clip);
printJob.send();
};
var clip:Sprite = new Sprite();
clip.addChild(bitmap);
printImage(clip);
Also it is worth noting that when I set the PrintJobOptions.printAsBitmap to be true the grey box begins appearing in all instances not just Chrome
Thanks so much for any help!!
It is a known issue with Chrome that any DisplayObject that is being assigned for print needs to be on the stage.
Simply add it to the stage and remove it afterward and you should be go.
However, I typically like to set up a holding container buried behind everything to prevent the blink of adding/removing the child.
I have an app (for iOS and Android) which has the ability for users to select an image from the cameraroll or take an image using the cameraui. After selecting the image it is then uploaded to a server using urlloader and urlrequestwrapper class. This all works great but I need to display a percentage uploaded progress text/bar to the user but having real trouble finding a solution.
Thanks
Listen ProgressEvent.PROGRESS:
var loader = new URLLoader();
loader.addEventListener(ProgressEvent.PROGRESS,progressHandler);
function progressHandler(e:ProgressEvent):void {
trace(e.bytesLoaded/e.bytesTotal);
}
But notice, that your server has to support dispatching progress event for flash. Read the same problem here link
I'm building a webcam recording app in CS5 and I'm having some seemingly random issues with the recorded flv. Currently I'm publishing a stream to Wowza Media Server using the standard _netstream.publish("movieName", "record") command. Everything regarding this works fine and I can play the file back but sometimes there's a 3 to 4 second pause at the beginning or end of the video. There will be a still frame and the time will sit at 0 and then snap to 4. I've explored bandwidth options and I've turned the resolution and quality down considerably and it doesn't seem to have any effect and the rest of the video will play back smoothly. Here are my current camera and mic settings.
_cam.setMode(160, 120, 30, false);
_cam.setQuality(0, 88);
_cam.setKeyFrameInterval(30);
_mic.rate = 11;
I'm also flushing the buffer before closing out the publish stream
_netstream.publish('null');
Could there be something going on with camera initialization/deactivation that causes the lag?
Any help would be greatly appreciated. Let me know if you need more details
I believe this has something to do with the way that the Flash plugin itself initializes and displays the camera.
If you set up a simple test to try setting and unsetting the video stream:
var cam:Camera = Camera.getCamera();
var webcam:Video = new Video(500, 375);
addChild(webcam);
var isPaused:Boolean = false;
function showWebcam():void {
if (!isPaused) {
cam = null;
} else {
cam = Camera.getCamera();
}
webcam.attachCamera(cam);
isPaused = !isPaused;
}
pausingButton.addEventListener(MouseEvent.CLICK, showWebcam);
You'll notice a definite pause as it switches between the two states.
From what I've seen, every time I call attachCamera() with a video object, there is a noticeable pause of the Flash Player itself (including all tweens, interactions, everything) when the method is called, even if the object I'm attaching is null.
Four seconds seems like an excessive lag, but I have noticed that the larger the input/video render and with smoothing = true set on the video object can affect the length of the delay.
As for a solution; I'm not sure if there is one achievable via pure Actionscript, since the delay appears to be down to how the Flash Player itself initializes and renders the live video object.