Flash preloader with external file?

March 14, 2005 5:08 AM

I've plowed through a lot of Flash sites, but haven't found an answer to what I thought would be a simple question. Y'all are a buncha geniuses here, so I thought I'd ask you.

What I want to do is display a static image (a JPG) until an external SWF file is loaded, which would play when fully loaded. I've tried loading the external .swf file using loadMovie(), but rather than showing the static image, it shows a blank frame until the external file is loaded, which doesn't help my needs in this case.

What's the "right" way to do this sort of thing?

Thanks in advance.

posted by jpburns to computers & internet (6 comments total)

1. Use 2 divs, one on top of the other, the top one with the jpg, the bottom one with the swf.
2. The top one has style="visibilty:visible;" and the bottom one style="visibility:hidden;".
3. Then write a javascript function (eg: switch();)that switches the visibilty of the two, so the jpg div disappears and the swf shows.
4. Insert into the body tag: onload="switch()".
posted by Zootoon at 5:24 AM on March 14, 2005

Put the image you want to display in frame 1 of the flash movie, along with a stop() action, then start preloading the rest of the movie. When it's loaded, issue a play() action to continue with the movie.

LoadMovie will load the movie into an existing movie clip. You might be best off creating a placeholder movie, setting it to be invisible:

myMovie._visible = false;
myMovie.loadMovie( "loadThis.swf" );

Ensure that the movie you're loading also has a stop() command as it's first frame, or it will run the moment it loads, and that the first frame contains nothing, so that it does not display anything whilst loading. Once the whole movie has loaded, then you tell it to begin playing:

myMovie._visible = true;
myMovie.play();

Also, make sure that the initial jpeg image is on a layer that is above the one that the movie is loading into, so that it will obscure anything that is loaded below, if anything is in the first frame of the loaded movie.
posted by gaby at 5:46 AM on March 14, 2005

gaby:

This is what I was trying, but I still get a blank frame until the bigger .swf file is loaded. Where should my code be... on the first frame of the main timeline?

Here's what I've got on the first keyframe:

stop();
this.myMovie._visible = false;
this.myMovie.loadMovie("exampleSide.swf");
if (this.myMovie._framesloaded<this.myMovie._totalframes) {
gotoAndPlay(1);
} else {
this.gotoAndPlay(2);
this.myMovie._visible = true;
}

I'm sure I'm doing something fundamentally wrong, but I'm apparently really dense...
posted by jpburns at 7:46 AM on March 14, 2005

What I've found happens is the loadMovie() doesn't actually kick in until you move to the next frame. To get round this, I usually found myself building a preloader movie of three layers and four frames long.

Layer one is your actions layer, split into four separate frames, as we need to do four separate actions.

Layer two contains your image that you want to display whilst loading. This should be two slices, one slice three frames long (displayed whilst loading) and one empty frame at the end. The three frame slice contains your image, the final slice contains nothing.

Layer three contains a holding clip to load your external flash movie into, and should be one single slice, spanning all four frames.

Your actions in frame one are to start loading the movie into your holding clip. The action in frame 2 is to check that the movie has loaded. I would recommend using the bytesLoaded() and bytesTotal() functions to do this, rather than counting the frames. If the movie has fully loaded then goto and play frame 4, your final frame. If the movie is not fully loaded, continue playing (which will advance to frame 3).

In frame 3, your actions should simply bounce back to frame 2. This will only occur if the movie is not yet fully loaded. Once the movie has fully loaded, frame 2 will bounce to frame 4.

In frame 4, you stop the current movie and then myMovie.play() to kick the loaded movie off.

So, frame 1:

this.stop();
this.myMovie.loadMovie( "exampleSide.swf" );
this.play();

Frame 2:

loaded = this.myMovie.bytesLoaded();
total = this.myMove.bytesTotal();

if ( loaded >= total ) {
this.gotoAndPlay( 4 );
}

Frame 3:

this.gotoAndPlay( 2 );

Frame 4:

this.stop();
this.myMovie.play();

You must ensure that the movie you are loading has a blank frame at the start, and that it issues a this.stop(); as it's first action, or it will start playing as soon as you load it.
posted by gaby at 8:08 AM on March 14, 2005

hey jp, you're better creating an empty movie clip to
a. check whether your placeholder swf is fully loaded
and
b. then load the external swf and display a loader

I've created something recently that i've just adapted for you:

http://80.234.160.78/misc/flash/loader/index.htm

It loads the placeholder graphic, and then loads an external swf into it. I added a 1meg mp3 into the external swf so you can see it load.

Grab the files here
posted by derbs at 8:23 AM on March 14, 2005

Wow! what great answers.

As it turned out... what I was doing wrong was using the "Preview" function in Flash, which doesn't always accurately represent what will happen in a browser. Bastards!

After realizing that, I could simplify the code incredibly. I didn't even have to hide anything, or even judge when all of the clip was loaded.

Here's what I ended up using (adapted from derbs' answer):

stop();

_root.createEmptyMovieClip("myMovie",101)
this.myMovie.loadMovie("exampleSide.swf");

You can see the final result on my site.

Thanks again for a great education, and (shaking fist) curse you Macromedia for making it so tough...
posted by jpburns at 9:20 AM on March 14, 2005