nunomira.com nunomira.com   tutorials
   
   

Loading and Positioning Movie Clips

Loading external content has many advantages, especially since Flash MX, because you can load .jpgs as well as .swf's. So, when the word "movie" is used, the same would be true for "image".
External content can be updated and modified easily. You don't have to re-publish the movie. The user doesn't have to wait for everything you want to show her to load: she only loads what she sees.

If you're using Flash MX, there's a method from the MovieClip class that you use, loadMovie() and two global functions, loadMovie() and loadMovieNum(). Notice that the loadMovie() method is preferred over the loadMovie() function.
In Flash MX 2004, the MovieClipLoader class has been a great enhancement for the simple reason that you'll never have to worry about writing your own preloader again.

Topics

Download all Files

loadMovie()

The syntax for the loadMovie() method is very simple:

mc.loadMovie(url)
mc.loadMovie(url, method)

  • mc - a movie clip that will receive the external file;
  • url - a string with the target path to the external file such as external.swf or myPicture.jpg;
  • method - optional parameter, either GET or POST.

This means that, if you have a movie clip on the stage called empty_mc, and want to load a movie called square.swf into it, all you need to do is:

empty_mc.loadMovie("square.swf");

The empty movie clip can be created in the authoring tool or using actionscript:

this.createEmptyMovieClip("empty_mc", 1); // create the movie clip dynamically
empty_mc.loadMovie("square.swf"); // load square.swf into empty_mc

download .fla: 1

In order to unload the movie, you use unloadMovie():

mc.unloadMovie();

which, in this case is:

empty_mc.unloadMovie(); // square.swf is unloaded

Loading another movie into the same movie clip, will replace the previous one, i.e., will automatically unload it:

this.createEmptyMovieClip("empty_mc", 1);
empty_mc.loadMovie("square.swf");
empty_mc.loadMovie("rectangle.swf"); // unloads square.swf

download .fla: 2

If the target movie clip is the main timeline, the content of the main timeline is also replaced by the external file:

_root.loadMovie("external.swf");
// or
_level0.loadMovie("external.swf");

download .fla: 3

loadMovieNum()

loadMovieNum() is similar, but instead of loading the external file into a movie clip, the file is loaded into a level.

loadMovieNum(url, level);
loadMovieNum(url, level, method);

  • level - an integer which is the level of the document that will receive the movie

loadMovieNum("square.swf", 1); // load square.swf into _level1

download .fla: 4

square.swf appears on top of the main document (_level0), into _level1.
If _level0 is used as the destination, the main document is replaced by the external movie:

loadMovieNum("square.swf", 0); // replaces everything on the stage

The same happens with any level that may already be hosting a movie:

loadMovieNum("square.swf", 1); // load square.swf into _level1
loadMovieNum("rectangle.swf", 1); // rectangle.swf replaces square.swf

In order to unload a movie from a level, you use unloadMovieNum():

unloadMovieNum(level)

loadMovieNum("square.swf", 1); // load square.swf into _level1
unloadMovieNum(1); // unload square.swf from _level1

download .fla: 5

Preloading

Before you try to do something with the loaded content, it's always a good idea making sure that the content is available, i.e., it has already finished loading. In some occasions it's not only a good idea, it's fundamental.

To preload you can use two MovieClip's methods: getBytesTotal() and getBytesLoaded().
Notice that if you test getBytesTotal() on an empty movie clip, you get two different results, depending on the way it has been created, via createEmptyMovieClip() or created in the authoring tool: 0 and 4 respectively.

This is an example of a basic preloader that outputs the percentage:

this.createEmptyMovieClip("e_mc", 2);
function preload(url, mc)
{
this.createEmptyMovieClip("controller_mc", 1);
mc.loadMovie(url);
controller_mc.onEnterFrame = function()
{
var bl = mc.getBytesLoaded();
var bt = mc.getBytesTotal();
// notice the use of "4"
if (bt > 4) { // if the movie has started loading
var percentage = Math.round(bl / bt * 100);
trace(percentage);
if (bl >= bt) { // the movie has finished loading
// do what you want
trace("finished!");
delete this.onEnterFrame; // delete the method
}
}
};
}
preload("rectangle.swf", e_mc);

download .fla: 6

When you preload a movie, a nice approach is having a blank frame with a stop action attached, as the first frame of that movie. This way, no content will be displayed and the movie will only play when you want. For example, instead of

// do what you want
trace("finished!");

you might have

mc.play();

download .fla: 7

A good thing about this function is that with very little modification, it'll work for levels as well.

download .fla: 8

A question I've seen many times relates to people wanting to assign onRelease() events to movie clips with loaded .jpgs. The problem is that when the file starts loading, all the methods and properties (except _x, _y, _rotation, _xscale, _yscale) of the container movie clip are lost. This means that the onRelease() has to be assigned after the file loads.
Once again, a little change to the preload() function - replacing the previous lines of code - does the trick:

mc.onRelease = function()
{
// do something
}

(*)

download .fla: 9

MovieClipLoader

This new class - Flash MX 2004 - and it's methods can save you a lot of time and trouble.
The following piece of code does the same as the function above, just by using the built-in methods.

this.createEmptyMovieClip("e_mc", 2);
var mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
mcl.addListener(mclListener);
mclListener.onLoadProgress = function(e_mc, bl, bt)
{
var percentage = Math.round(bl / bt * 100);
trace(percentage);
};
mclListener.onLoadComplete = function(e_mc)
{
// do what you want
trace("finished!");
};
mcl.loadClip("square.swf", e_mc);

download .fla: 10

Positioning loaded movies

When using loadMovie() or loadClip(), all you need to do is positioning the (empty) movie clip that will receive the external file:

// using loadMovie()
e_mc.loadMovie("square.swf");
// using the MovieClipLoader class
mcl.loadClip("square.swf", e_mc);
// position e_mc
e_mc._x = x0;
e_mc._y = y0;

When using loadMovieNum(), the upper left corner will coincide with the upper left corner of the stage. Once again, to reposition the loaded movie, you need to make sure it has finished loading.

loadMovieNum("rectangle.swf", 2);
/*
preloading code goes here
*/
_level2._x = 500;

download .fla: 11

An easy way to test this, is in, rectangle.fla, defining a variable, and then, in the main movie, checking for that variable's value:

// external movie
var available = true;
// main movie
loadMovieNum("rectangle.swf", 2);
this.onEnterFrame = function()
{
if (_level2.avaiable) {
_level2._x = 500;
_level2._y = 200;
delete this.onEnterFrame;
}
};

download .fla: 12

Related Topics

jpgs

If you want to load .jpgs, there is one limitation which you'll notice when everything should work fine, but the image isn't displayed: the Flash player doesn't load and/or display progressive .jpgs, so make sure you don't save/export yours as progressive.

start/finish loading

When talking about availability of the loaded file and preloaders, I usually say finish loading, but the truth is that this isn't always necessary. As long as the file starts loading, there are things you can do, e.g.: repositioning a movie loaded via loadMovieNum() while it is still loading.

In the preload() function, when the if() condition is true:

if (bt > 4) {

you know that the movie has started loading.

In the same way, when using the MovieClipLoader Class, you can use the onLoadInit() method, that tells you when the first frame is available.

(*)

There is another workaround for this situation when preloading is not compulsory for you:

this.createEmptyMovieClip("outer_mc", 1); // create one empty movie clip
this.outer_mc.createEmptyMovieClip("inner_mc", 1); // create another empty movie clip inside the previous
outer_mc.inner_mc.loadMovie("external.jpg"); // load the file inside the inner movie clip
// assign the onRelease() to the outer movie clip
outer_mc.onRelease = function()
{
// do something
}

download .fla: 13

A similar situation is trying to hide the host movie clip:

this.createEmptyMovieClip("empty_mc", 1);
empty_mc._visible = false; // try to hide the movie clip
empty_mc.loadMovie("external.jpg");

As soon as the file starts loading, the movie clip becomes visible, because the value false of the _visible property is lost. The solutions are exactly the same:
Preload the file and, as it starts loading, hide the movie clip.
Use two movie clips, hide the outer one, and load the file into the inner one.

 

   
   
nunomira.com nunomira.com   tutorials