flash as3 & html5 - preloader when movieclip embedded in timeline

Question

I have a movie which is embedded in my flash timeline so that I can scroll through it frame by frame using a scrollbar class I created. However, because the movie is about 10mb, I need to have some sort of preloader, either in HTML5 or in flash, to display a poster image or something until the movie is loaded. I've loaded movie clips dynamically using a preloader, but how do I do this when the movie clip is embedded in the timeline? I tried a $(window).ready function to hide the poster image on window ready, because I thought that this doesn't fire until all your assets are loaded, but I guess that doesn't work with flash, so I guess I'm going to have to do it within flash.

score 0 · Accepted Answer · answered Dec 02 '12 at 14:17

On the main movieclip (on the main timeline) you should add first empty frame (it should be lightweight and load fast). Then you should stop(); the MovieClip. After it is stopped you may continuously check loaderInfo.bytesLoaded/loaderInfo.bytesLoaded properties and display percentage of the loading process.

This snippet may help (you may place this code into first frame of timeline, or into Main class constructor method):

//create a text field to show the progress
var progress_txt:TextField = new TextField();
//stop the timeline, will play when fully loaded
stop();
//position text field on the centre of the stage
progress_txt.x = stage.stageWidth / 2;
progress_txt.y = stage.stageHeight / 2;
addChild(progress_txt);

//add all the necessary listeners
loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
loaderInfo.addEventListener(Event.COMPLETE, onComplete);


function onProgress(e:ProgressEvent):void
{
  //update text field with the current progress
  progress_txt.text = String(Math.floor((e.bytesLoaded/e.bytesTotal)*100));
}

 function onComplete(e:Event):void
{
  trace("Fully loaded, starting the movie.");
  //removing unnecessary listeners
  loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
  loaderInfo.removeEventListener(Event.COMPLETE, onComplete);
  //go to the second frame. 
  //You can also add nextFrame or just play() 
  //if you have more than one frame to show (full animation)
  gotoAndStop(2);
}

score 0 · Answer 2 · answered Mar 04 '14 at 05:38

I'm not sure why this isn't working for me..

Here's my code, on the main timeline:

stop();

var percent:Number; //used to show loader progress

loaderInfo.addEventListener(Event.COMPLETE, onGameLoaded);
loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoaderProgress);
trace(loaderInfo.bytesLoaded, loaderInfo.bytesTotal);

function onLoaderProgress(event: ProgressEvent): void {
    trace("Progress called");
    percent = (event.bytesLoaded / event.bytesTotal);
    preloader.bar.scaleX = percent;
    preloader.percentageTxt.text = String(Math.round(percent * 100)) + "%";
}

//Event-handler for when this main controller is completely loaded
function onGameLoaded(event: Event): void {
    loaderInfo.removeEventListener(Event.COMPLETE, onGameLoaded);
    loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onLoaderProgress);
    trace("Game completely loaded");
    play();
}

The trace statements aren't even firing, and the timeline doesn't move ahead.

Ah, I found the problem. This only works if the code is placed on the first frame. I had a simple "Loading" textfield on the first frame, and the preloader on the second. The reason for doing it like that was, that the user wouldn't see a completely blank screen, before the preloader bar and it's assets had loaded, but that doesn't work. — Qasim, Mar 04 '14 at 05:49

flash as3 & html5 - preloader when movieclip embedded in timeline

2 Answers2