Creating a preloader that will load in time rather than bytes

[donhoward3]

Hi,

I'm trying to create a preloader that will load in time rather than bytes. I would like for people to see the preloader working without having content to load. I am new to actionscript so I don't know how to convert this to a timer. I have looked at many posts and not found anything that fits this. It seems like this would be a fairly common use script.

Thank you in advance!

Don

Here is the code I am using as a preloader:

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoading);

this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);

function onLoading(evt:ProgressEvent):void {

          var loaded:Number = evt.bytesLoaded / evt.bytesTotal;

          percent_txt.text = (loaded*100).toFixed(0) + "%";

          var counter= (loaded*100)*3.6;

          masked_mc.mask=masking_mc;

          masked_mc.rotation=counter;

          trace(masked_mc.rotation);

          if(masked_mc.rotation<0) (masked_mc.mask=null)

};

function onComplete(event:Event):void {

          this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onLoading);

          this.loaderInfo.removeEventListener(Event.COMPLETE, onComplete);

          gotoAndPlay(2);

};

[Ned Murphy]

If you were to create a preloader that was based on time rather than bytes loaded what would it be reporting and how would it detect when it is completed?  Time is one of the unknown elements when it comes to loading content.  You could report how long it has taken as time passes but there is no way to be sure how long it is going to take and to countdown from that.

[donhoward3]

Hi Ned,

Thanks for taking the time to look at this.

Those are good questions. It be reporting on the passage of time and I would suspect that it detect the computer's clock. Since this preloader won't be connected to any content it needs something else to report on and time seemed to be a logical answer to my newbie mind. In my thinking I would set a predetermined time and the report would be based on how much of that time has passed. Since the preloader is based on 100% it seemed that basing it on milliseconds to create a 5 second time lapse would work out.

Another issue that I would like to overcome with this preloader is the abilitiy to view it working more than once. If it is a working preloader once the content is loaded and cached the preloader won't be seen again without going through extra motions.

Thanks again for your response,

Don

[paul_robertson]

So it sounds like you don't actually need a "preloader" in the sense that you need something that runs while your SWF is loading. You want something that runs for a set amount of time before moving on to the rest of your app. Is that right?

Normally I would say you should use a Timer for something like this, except that you want "progress" updates and not just an event when it ends. (A timer is best for when you want to know when a certain period of time has passed.) You could also use a timer if you don't want to run your code as often -- for example, if you want the progress to update every 1/10 of a second or something like that. Also, if you're using an indefinite preloader -- that is, one that just spins around rather than showing the actual progress -- then you could definitely use a Timer.

However, since this is tied to a visual display, I just did the simplest thing and used the enterFrame event -- it fires once per frame, which is the most often you could possibly update the screen so it's the most often you would care. You can use the getTimer() method (it's in the flash.utils package) to get a snapshot of how much time has elapsed since the SWF started running. Basically you take that snapshot when you start your "preloader." Every frame you check how much time has elapsed (by calling getTimer() again and comparing it to your saved snapshot) and you update your progress display. Finally, when your total time (5 seconds or whatever you choose) has elapsed you move on to your next frame.

I modified your code to do that:

// This variable needs to be at the class level so it persists
var preloaderStartTime:int;
var preloaderLength:int = 5000; // how long should the preloader run, in milliseconds

// This is the code when you actually start your preloader
this.addEventListener(Event.ENTER_FRAME, onLoading);
preloaderStartTime = getTimer();


function onLoading(evt:Event):void {
     var elapsedTime:int = getTimer() - preloaderStartTime;
     var percentElapsed:Number = elapsedTime / preloaderLength;
     trace("percentElapsed:", (percentElapsed * 100).toFixed(0) + "%");
     percent_txt.text = (percentElapsed * 100).toFixed(0) + "%";
     
     var counter:Number = (percentElapsed * 100) * 3.6; // I'm not sure why this is multiplied, I just copied it from your original
     masked_mc.mask = masking_mc;
     masked_mc.rotation = counter;
     trace(masked_mc.rotation);
     if (masked_mc.rotation < 0) (masked_mc.mask = null);

     if (elapsedTime >= preloaderLength)
     {
          onComplete();
     }
}


function onComplete():void {
     this.removeEventListener(Event.ENTER_FRAME, onLoading);
     gotoAndPlay(2);
}         

Hopefully that helps you see how to do this.

[donhoward3]

Hi Paul,

That's great! I will try it out and let you know. I won't be able to get to it until this weekend though.

BTW: It's a circular preloader so the 100 * 3.6 is for the 360 degree movement.

Thanks,

Don