CODEWITHSUNDEEP
actionscript-3flashairstagewebview
Rebelord
Rebelord

Reputation: 41

StageWebView Flash's White when Displayed

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.

Upvotes: 4

Views: 1201

Answers (1)

Ayman Abdel Nasser
Ayman Abdel Nasser

Reputation: 21

private var webView : StageWebView;

 webView  = new StageWebView( true );
 webView.stage = this.stage;
 webView.viewPort = new Rectangle( 0, 0, 1024, 768 );

Upvotes: 1

Related Questions