AS3 pre-loader code not progressing - actionscript-3

In my FLV file the first frame I have this pre-loader code:
//Stop Frame
stop();
//Create a listener to call the loading function as the movie loads
this.loaderInfo.addEventListener (ProgressEvent.PROGRESS, loading);
//Runs when the loading progress has changed
function loading(event:ProgressEvent):void
{
//Determine the percent loaded from bytesLoaded and bytesTotal
var percent:Number = event.bytesLoaded / event.bytesTotal * 100;
//Display the percentage of the pre-loaded MovieClip
percentage_text.text = int(percent)+"%";
if(percent == 100){
gotoAndStop(2);
}
}
When I try to run the SWF file from an Xampp server via an absolute path "http://localhost/test/mainFLV.swf" the SWF does not progress past 0%. However, when I embed the SWF in a PHP script and the load that PHP script, the SWF loads, but it does not show the pre-loader progressing.
Any help?
EDIT
just tested it in Firefox, and I get a flash of the pre-loader being at 62% before it goes to the second frame. However the original problem persists in Chrome.

When you test it on a localhost the PROGRESS event fires quite often, too often, so sometimes it goes undetected. This happens if the file has been cached by the browser, too.
You should listen for event COMPLETE to decide whether the file has loaded or not.
EDIT
You can upload the file onto a slow server ;-) Or, for testing purposes, use network speed throttling software.
But honestly, if the preloader goes too fast in normal conditions (on average speed connection) that means that it is not needed. User can wait a second or two... You can use a 'spinning thing' instead.

Related

Why does URLStream sometimes not fire Event.COMPLETE?

I've got an application that is downloading several large binary files and saving them to disk. On some machines it works fine and on some other machines every once in a while a download will proceed to 99.9% complete and the URLStream object will not fire Event.COMPLETE
This is almost identical to the issue that appears here:
Why does URLStream complete event get dispatched when the file is not finished loading?
I've tried using the 'Cache Bust' method described in one of the answers but still no dice.
Any help would be appreciated.
Here is some sample code to help illustrate what I am trying to do:
var contentURL:String = "http://some-large-binary-file-in-amazon-s3.tar";
var stream:URLStream = new URLStream();
stream.addEventListener(Event.COMPLETE, function(e:Event):void{
//This should fire when the file is done downloading
//On some systems this fails to fire once in a while
//On other systems it never fails to fire
});
stream.addEventListener(ProgressEvent.PROGRESS, function(pe:ProgressEvent):void{
//Write the bytes available in the stream and save them to disk
//Note that a download will reach 100% complete in terms of total progress but the 'complete' event might still not fire.
});
var urlRequest:URLRequest = new URLRequest(contentURL);
//Here we might add some headers to the URL Request for resuming a file
//but they don't matter, the 'Event.COMPLETE' will fail to fire with our without
//these headers
addCustomHeaders( urlRequest );
stream.load( urlRequest );
Imo this is a code meant to fail where you purposely give up any control on whatever is going on and just assume that everything would work by itself and go well. I never had any problems whatsoever with the URLStream class but here's basically what I never do:
I never not register all the different error event available (you don't register any).
I never use anonymous listeners. Even though they are supposed to not be GC until the download is complete this is imo an unnecessary unsafe bet especially since it's not rare for the URLStream to idle a little while loading the last bits. I would not be surprised if removing those anonymous listeners would actually fix the problem.

Why does URLStream complete event get dispatched when the file is not finished loading?

I'm writing an AIR kiosk app that every night connects to a WordPress server, gets a JSON file with paths to all the content, and then downloads that content and saves it to the kiosk hard drive.
There's several hundred files (jpg, png, f4v, xml) and most of them download/save with no problems. However, there are two f4v files that never get downloaded completely. The complete event does get dispatched, but if I compare the bytesTotal (from the progress event) vs bytesAvailable (from the complete event) they don't match up; bytesTotal is larger. The bytesTotal (from the progress event) matches the bytes on the server.
The bytesLoaded in the progress event never increases to the point that it matches the bytesTotal either so I can't rely on the progress event either. This seems to happen on the same two videos every time. The videos are not very large, one is 13MB and the other is 46MB. I have larger videos that download without any problems.
EDIT: After rebooting my computer, the two videos now finish downloading but I'm getting the same problem with a 300kb png file.
If I paste the url into Firefox it downloads correctly. I've also written a simple c# app to download the files and it is able to download them with no problems, so it appears to be a problem with Flash/AIR.
EDIT: here's a simpler version of the code, this is from a test project and it's the only code (the url is on our local network so you won't be able to download the file yourself):
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
import flash.net.URLStream;
[SWF(backgroundColor="#000000", frameRate="24", width="640", height="480")]
public class Test extends Sprite {
private var fileSize:Number;
private var stream : URLStream;
private var url:String = "http://192.168.150.219/wordpress2/wp-content/uploads/2012/12/John-Butler-clip1.f4v";
public function Test() {
if (stage)
init();
else
this.addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event=null):void {
this.removeEventListener(Event.ADDED_TO_STAGE, init);
stream = new URLStream();
stream.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
stream.addEventListener(Event.COMPLETE, onLoadComplete);
stream.load(new URLRequest(url));
}
private function onLoadProgress(event:ProgressEvent):void {
fileSize = event.bytesTotal;
var percent:Number = event.bytesLoaded / event.bytesTotal * 100;
trace(percent + "%"); // this never gets to 100%
}
private function onLoadComplete(event:Event):void {
trace("loaded", stream.bytesAvailable, "of", fileSize);
// outputs "loaded 13182905 of 13184365"
// so why is it "complete" when it isn't fully downloaded?
}
}
}
Don't compare to bytesAvailable, use length instead. BytesAvailable is actually ByteArray.length - ByteArray.position. So if the position within the ByteArray has moved away from index 0, the bytesAvailable value will decrease. Length will always be the total number of bytes within the array.
Try comparing using length and see if this makes any difference. I don't have time to sift through your code to see if you are changing position at any point (either purposefully or accidentally; you can do it in more ways than one), so that's the best I can offer right now.
If anyone else has the same problem like I did. It turned out to be a caching problem which is present in AIR as well so a timestamp added to the request solves this: http://www.newtonflash.com/blog/as3/prevent-xml-caching-problem/#comment-43
{
var xmlPath:String="replaceYourXMLPathHere.xml"
var urlReq:URLRequest = new URLRequest(xmlPath+"?time=" + new Date().getTime());
}
Your answer is in your question.
Normal URLs (files) - to this server this is a block of data. Once the server delivers the 'block of data' the delivery process is considered 'COMPLETE'. In this case if a file is 100kb, once the 100kb is received - Flash considers this as 'COMPLETE'.
URLStream - to the server this is [TWO] blocks of data (very simple way to look at it). The server will first serve the CONNECTION to the stream... then serve the STREAM DATA. This is handled in Flash just as its described.
Flash will consider the loading of the CONNECTION as 'COMPLETE', and NEVER check if the STREAM data is loaded - thats up to your server. In any streams you should actually check the [load progress] event and read each byte of data as it comes in... then construct as required.

Saving flash game state to server after window.onbeforeunload when swf is cross-domain

My Facebook app is a flash game. I want the game swf to save its latest state to the server when the window unloads. Since I embed the swf with swfobject, I use its embed handler to add a onbeforeunload listener to window:
function embedHandler(event)
{
shell=event.ref;
window.onbeforeunload=function(event)
{
shell.message("save", null);
//delay the unloading a bit so flash has time to contact server
var now = new Date().getTime();
var later=now+50;
while (now < later)
{
now = new Date().getTime();
}
}
}
Here's the problem. This works every time when the swf is loaded directly from the app (a rails app). It never works when the swf is loaded from Amazon.
All the cross-domain issues are worked out between the swf and the app--the rails app accepts calls from Amazon swf, and the Amazon swf loads data from the rails app.
ExternalInterface also works for both outgoing and ingoing calls. But I suspect this is nonetheless a browser security issue, since the inward-going ExternalInterface call only fails when:
it is called from inside the window.onbeforeunload handler
the swf originates from Amazon.
What is the problem? How does one unobtrusively save game state when the game is from a CDN and the save is triggered by onbeforeunload in Javascript? Or is there a better way to accomplish this same thing?
Testing in Firefox.
ExternalInterface also works for both outgoing and ingoing calls. But
I suspect this is nonetheless a browser security issue, since the
inward-going ExternalInterface call only fails when:
it is called from inside the window.onbeforeunload handler
the swf originates from Amazon.
From the sounds of it you worked out all the security issues.
It is more likely a lack of understanding on your part on what is going on behind the scene when onbeforeunload is triggered.
This is a function that will not wait for your "game.swf" to finish the call back via ExternalInterface.This is why you added a stalling mechanism to delay that process. However, I will assume here that this works from the rails app because that is a local server and you are not subject to the lag monster.
Now you might be thinking well I put in a delay it should work. Well that delay is on 50 milliseconds. Try increasing to to 5000(5 seconds) and you should see it start to work on the cdn.
The saving of data should be controlled via the flash app and not triggered by an outside source.
In the game itself you should have milestones that should trigger a save event.
In closing I do want to add that is by far the worst method you could use to save information up to a server. onbeforeunload is unreliable and is subject to cross browser issues let alone putting a lag loop in the JavaScript is just a bad idea and in the end just annoy your users to the point that they won't return.

How to detect the presense of an SWF in the browser cache?

I have an AS3 application that loads various SWFs at runtime. The loading animation that is being used has a fairly long in and out animation that I don't want to show if the target SWF is in the browser cache.
So at the moment each SWF is loaded in as required using Greensock's SWFLoader in a basic manner:
var context:LoaderContext = new LoaderContext();
context.applicationDomain = ApplicationDomain.currentDomain;
loader = new SWFLoader("mySWF.swf", {name:"sectionLoader",context:context,auditSize:true,onOpen:onLoadInit,onProgress:onLoadProgress, onComplete:onCompleteLoadHandler, onError:onLoadErrorHandler});
loader.load();
My goal is to do something before calling loader.load(); to determine if the load operation will require the request to go beyond the browser cache, but before I get into R&Ding something I thought I'd ask if anyone has already done something similar.
A few more thoughts I've had so far:
Just keeping track of what has been loaded in AS3 isn't good enough because if the user clears their cache they might be left loading a large SWF on a slow connection with no indicator.
Might a combination of LoaderItem.httpStatus and LoaderItem.auditSize() be worth investigating?
Is there a better loading framework for AS3 that I should be looking into instead of the Greensock classes?
Ideally I would prefer to also have some kind of version detection to span sessions that could be months apart, but one step at a time.
when you are doing any HTTP request, the responce comes up with HTTPStatus property. In AS3 you just need to chek if
HttpStatusEvent.status == 304
And for httpStatus in greensock library.
Basically 304 code means that no chages has been made on server side to the resource which user has requested. Which eventually leads to conclution that the resource is in the cache.
UPDATE
If this will not fit your needs try storing some variable for should you play the animation or not in Cookies or in Session variables.

How to check for the FLV file existence before playing that using FLVPlayback in Action Script 3?

I'm very new to the Action Scripting, I'm using the FLVPlayback class to play my FLV files.
If I'm trying to play a FLV file which is not existed yet then I am getting a "VideoError: 1000" with message of Unable to make connection to server or to find FLV on server.
I want to check for the FLV file existence using the file URL or path, before playing that FLV by FLVPlayback. Can anybody please suggest a way to do that.
Thanks
The only way to catch the error safely is to listen for the fl.video.VideoEvent.STATE_CHANGE event and act accordingly. Here's a little code snippet on how to do so:
import fl.video.FLVPlayback;
import fl.video.VideoEvent;
import fl.video.VideoState;
var videoPlayer:FLVPlayback;
videoPlayer.addEventListener( VideoEvent.STATE_CHANGE, onVideoStateChange );
/** Bad source **/
videoPlayer.source = "http://www.helpexamples.com/flash/video/caption_video_error.flv";
/** Good source **/
//videoPlayer.source = "http://www.helpexamples.com/flash/video/caption_video.flv";
function onVideoStateChange( evt:VideoEvent ):void
{
var videoPlayer:FLVPlayback = evt.target as FLVPlayback;
switch( evt.state )
{
case VideoState.CONNECTION_ERROR:
trace( 'Connection error' );
/**
* Once you hit this event, you should run some logic to do one or more of the following:
* 1. Show an error message to the user
* 2. Try to load another video
* 3. Hide the FLVPlayback component
*/
break;
default:
trace( 'Player is: ' + evt.state );
}
}
For a full list of possible VideoState constants, visit fl.video.VideoState.
I think you may be able to make use of the stateChange event. One of the possible event types is VideoState.CONNECTION_ERROR and another is VideoState.DISCONNECTED which may also work.
Try giving that a shot.
If those don't work, the only way I can think of would be to either do a HEAD or GET request for the flv before you attempt to load it. Only a successful response would trigger the video loading through the normal method. I don't remember whether Flash supports HEAD requests, but if it does that would certainly be the better option.
If Flash does not support HEAD requests then you may be better off having a simple, server-side script that could verify the existence of the flv before you actually request if. That way you can use a simple GET request without having to retrieve the whole file.
INLINE THINKING
I am just thinking, another possible solution using GET would be to cancel the load as soon as bytesLoaded > 1K (for example), or something like that. As long as you are checking for a size greater than the 404 response you are getting, you should be able to assume the flv is being loaded.