MovieClipLoader class

Question

For some reason, I'm having difficulty wrapping my head
around how to implement and use the MovieClipLoader class. Here's
where I'm stuck. I have a bit of code that looks like this:
function showImage(filename:String):Void {
var image:MovieClip = imagePlaceholder_mc.image_mc;
image.loadMovie(filename);
//Center images
xPos = (900 - image._width)/2;
yPos = (600 - image._height)/2;
image._x = xPos;
image._y = yPos;
imagePlaceholder_mc._alpha = 0;
imagePlaceholder_mc.onEnterFrame = fadeIn;
Now, whenever showImage() is called, the picture loads and
properly fades in. However, the image is not correctly centered.
However, if showImage is called a second time on the same image,
THEN the image properly centers. Basically, showImage uses the last
._width and ._height values. I assume this is because the clip
hasn't finished loading when xPos and yPos are set, and that if I
had the calculations occur when the .jpg is completely loaded, then
the correct results will occur.
However, I can't seem to figure out where to put my
MovieClipLoader class, where to stick the listeners, or anything.
I'm having some sort of problem conceptualizing how the class is
supposed to work, and for some reason the tutorials are not helping
me out. If it were explained to me in relation to the code I have
above, it would help.
Thanks,
Peter

Answer 1

Can't really explain it in terms of your code above because
it is different that your code above. The MCL just gives some nice
packaging to starting, progressing through, and ending, the load of
external assets. The listeners just listen for the different
"events" in this process and then can run certain bits of code when
those events happen.
So lets go to it. We start out well enough:
function showImage(filename:String):Void {
Then we need to make an instance of our MCL. It is also
possible to have it outside your function, but for now lets keep it
inside.
var myMCL:MovieClipLoader=new MovieClipLoader;
Next we need to make an object to attach the various events
to. There are a lot of ways they could have designed this, but this
is how they did it so that is what we do!
var myListener:Object=new Object()
Now there are several different events that the MCL might
have, but for the moment we are going to worry about only one of
them. You want to do something when the external asset is fully
loaded – you can't set the width or height until after the
whole thing is done.
myListener.onLoadInit=function(target:MovieClip){
Pos = (900 - target._width)/2;
yPos = (600 - target._height)/2;
target._x = xPos;
target._y = yPos;
target._parent._alpha = 0;
target._parent.onEnterFrame = fadeIn;
Notice how basically your same code goes in there, but with
the difference of target? (BTW, I could have called that grapefruit
or anything I wanted, but target seemed good.) That is because the
onLoadInit event returns a reference to the thing that has just had
content loaded into it. So we can use that instead of having to
hard code the names of our movie clips. That makes it a lot more
flexible.
Okay we could now issue our load, close up the braces, and be
done with it. But we still have one more thing. Let's look at what
we have. We've made a function that sets up an MCL, makes and
Object to hold listeners, and set up an event inside that object.
But we still haven't told our MCL instance that it needs to report
its events to that object.
It is a great philosophical debate of whether events happen
if there is nothing there to listen for them! :) But on the
practical side, nothing will happen if we don't tell flash to
listen for them. That is way we need the next line:
myMCL.addListener(myListener);
That tells our MCL that when it has events it needs to tell
myListener about them. Now the MCL has many events onLoadStart,
onLoadProgress, etc. and it will dutifully tell our listener object
about them. Inside that listener we have only set up an action for
one of them, but hey, laissez les bon temps rouler.
So finally we can issue our load statement and close up the
braces.
myMCL.loadClip(filename);
So what happens?
You call your function and pass it the filename.
An MCL is created.
A listener object is created.
Object is given an event handler function.
The MCL is told to report its events to that Object.
The MCL starts loading the file.
The MCL has a onStartLoad event and reports it to the object.
Nope no handler for that, nothing to do.
Several times in a row the MCL has an onLoadProgress event,
and reports it.
Nope no handler for that, nothing to do.
etc.
Finally there is an onLoadInit event – the file is
ready to be mucked with. The MCL reports it to the object, and hey
there is something to do.
So the MCL tells the objects onLoadInit function, "I just
Inited, the following clip."
The function then takes that information and applies the
things you specified.
And that is pretty much it.
A couple of notes. The onLoadProgess event doesn't happen
when you are testing locally. So you won't see it.
It is a good practice to get into that when you are done with
something you remove the listener. So you might want to add the
following line to your onLoadInit function.
myMCL.removeListener(myListener);
(At least I think that is a good idea. I haven't done that
myself in the past, but I have recently become much more aware of
how important it is – at least generally – to remove
listeners. So if you get an error just remove that.)