If you have ever tried to load an external jpeg or swf in to a flash movie, it is likely you will have encountered a situation where you need to trigger an event based upon completion of that loading process.
Loading external data of any kind in to Flash is never instantaneous, therefore it usually gives rise to the need for some sort of checking process - usually in the form of a preloader.
The MovieClipLoader API (Applications Programming Interface) takes away much of the necessary work involved in loading images and swfs in to our Flash movies, and allows us to be notified about the various stages of loading, ultimately giving us more control over our movie, and helping us cut down on the amount of code we need to write.
We can use a single instance of the MovieClipLoader class to load one or more files in to a single movieclip/level, or create a different MCL instance for each file we load.
I have decided to split the subject up in to two seperate tutorials. The first will introduce you to basic MCL usage, and the second will show you how to use a single MovieClipLoader instance to load content in to multiple (duplicated) movie clips, and will employ the use of a listener object. It is possible to use MCL without the need for a listener, and as some of you will not be familiar with how they work you may find it easier to learn about the MovieClipLoader if we ignore using a listener for the time being.
With that said, let's look at what makes the MovieClipLoader class so useful - callback functions. Callbacks are the 'internal organs' of tha MCL class - they are what provide us with the information on the status of the files being downloaded. There are 7 callbacks in all, 5 of them give us infomation about various stages of the loading process. The other two deal with unloading and errors. Let's take a very brief look at them before we proceed:
MovieClipLoader callbacks:
-----------------------------------
MovieClipLoader.onLoadStart() - invoked when loading begins.
MovieClipLoader.onLoadProgress() - invoked as the loading process progresses.
MovieClipLoader.getProgress() - progress of the downloaded file(s).
MovieClipLoader.onLoadInit() - invoked after the actions in first frame of clip have executed.
MovieClipLoader.onLoadComplete() - invoked when the entire downloaded file has been written to disk.
MovieClipLoader.onLoadError() - invoked if the clip cannot be loaded.
MovieClipLoader.unloadClip() - remove movies/images loaded with this method or cancels a load operation in progress.
-------------------------------------
The list of callback functions and short explanations, though brief, should be pretty self-explanatory, and the best way to learn about the MovieClipLoader class is to jump straight in and get our hands dirty, but before we do there are a couple of things to note.
Firstly, MCL is new to Flash 7, so ensure that Flash is set to export swfs as Flash 7 and using AS2 - the settings for both of these can be found under the FILE->PUBLISH SETTINGS menu. The second important thing to note is that for our MovieClipLoader to function properly we'll need to view it through a browser. If you try and test it directly through Flash your bytesLoaded and bytesTotal values will end up being recorded as zero.
In our example we're going to use a single MovieClipLoader object to load several pictures in to empty movieclips. The swfs and images needed for this example can be found in the sourcefile for this tutorial and can be seen in action here.
Building the Example:
--------------------------------
1. Create a new movie (.fla) and put the following code on the first frame of the root timeline:
_root.traceBox.vScrollPolicy ="on";
function myTrace(msg)
{
_root.traceBox.text += msg + newline;
_root.traceBox.vPosition = _root.traceBox.maxVPosition;
}
--------------------------------
All we're doing here is setting up a basic trace function, the output of which will be displayed in the TextArea component that we are about to place on the stage. _root.traceBox.vPosition = _root.traceBox.maxVPosition keeps the scrollbar moving as more content is added, so that we can see new traces as they appear without the need to manually scroll. vScrollPolicy makes sure the vertical scrollbar is on at all times.
2. Now drag an instance of the TextArea component on stage from your components panel, resize it to make it big enough to display our traces properly and give it an instance name of "traceBox".
3. The next step is to create a new movieclip symbol, and place 3 instances of that symbol on the main stage, giving them the instance names of "myMC1", "myMC2" and "myMC3". We will load our images and swfs in to these, so space them about at 200 pixels apart. Our loaded images will actually be much bigger than 200 pixels wide, but we'll resize them once they've downloaded. It is not good practice to make your images larger than the final size at which they will be displayed of course, but for the sake of this tutorial it will allow us to see the onLoadInit() method in action.
4. The next thing to do is to create our new MovieClipLoader object which we'll call myMCL, so add the following code to the first frame, below our trace function:
------------------to be continue
Loading external data of any kind in to Flash is never instantaneous, therefore it usually gives rise to the need for some sort of checking process - usually in the form of a preloader.
The MovieClipLoader API (Applications Programming Interface) takes away much of the necessary work involved in loading images and swfs in to our Flash movies, and allows us to be notified about the various stages of loading, ultimately giving us more control over our movie, and helping us cut down on the amount of code we need to write.
We can use a single instance of the MovieClipLoader class to load one or more files in to a single movieclip/level, or create a different MCL instance for each file we load.
I have decided to split the subject up in to two seperate tutorials. The first will introduce you to basic MCL usage, and the second will show you how to use a single MovieClipLoader instance to load content in to multiple (duplicated) movie clips, and will employ the use of a listener object. It is possible to use MCL without the need for a listener, and as some of you will not be familiar with how they work you may find it easier to learn about the MovieClipLoader if we ignore using a listener for the time being.
With that said, let's look at what makes the MovieClipLoader class so useful - callback functions. Callbacks are the 'internal organs' of tha MCL class - they are what provide us with the information on the status of the files being downloaded. There are 7 callbacks in all, 5 of them give us infomation about various stages of the loading process. The other two deal with unloading and errors. Let's take a very brief look at them before we proceed:
MovieClipLoader callbacks:
-----------------------------------
MovieClipLoader.onLoadStart() - invoked when loading begins.
MovieClipLoader.onLoadProgress() - invoked as the loading process progresses.
MovieClipLoader.getProgress() - progress of the downloaded file(s).
MovieClipLoader.onLoadInit() - invoked after the actions in first frame of clip have executed.
MovieClipLoader.onLoadComplete() - invoked when the entire downloaded file has been written to disk.
MovieClipLoader.onLoadError() - invoked if the clip cannot be loaded.
MovieClipLoader.unloadClip() - remove movies/images loaded with this method or cancels a load operation in progress.
-------------------------------------
The list of callback functions and short explanations, though brief, should be pretty self-explanatory, and the best way to learn about the MovieClipLoader class is to jump straight in and get our hands dirty, but before we do there are a couple of things to note.
Firstly, MCL is new to Flash 7, so ensure that Flash is set to export swfs as Flash 7 and using AS2 - the settings for both of these can be found under the FILE->PUBLISH SETTINGS menu. The second important thing to note is that for our MovieClipLoader to function properly we'll need to view it through a browser. If you try and test it directly through Flash your bytesLoaded and bytesTotal values will end up being recorded as zero.
In our example we're going to use a single MovieClipLoader object to load several pictures in to empty movieclips. The swfs and images needed for this example can be found in the sourcefile for this tutorial and can be seen in action here.
Building the Example:
--------------------------------
1. Create a new movie (.fla) and put the following code on the first frame of the root timeline:
_root.traceBox.vScrollPolicy ="on";
function myTrace(msg)
{
_root.traceBox.text += msg + newline;
_root.traceBox.vPosition = _root.traceBox.maxVPosition;
}
--------------------------------
All we're doing here is setting up a basic trace function, the output of which will be displayed in the TextArea component that we are about to place on the stage. _root.traceBox.vPosition = _root.traceBox.maxVPosition keeps the scrollbar moving as more content is added, so that we can see new traces as they appear without the need to manually scroll. vScrollPolicy makes sure the vertical scrollbar is on at all times.
2. Now drag an instance of the TextArea component on stage from your components panel, resize it to make it big enough to display our traces properly and give it an instance name of "traceBox".
3. The next step is to create a new movieclip symbol, and place 3 instances of that symbol on the main stage, giving them the instance names of "myMC1", "myMC2" and "myMC3". We will load our images and swfs in to these, so space them about at 200 pixels apart. Our loaded images will actually be much bigger than 200 pixels wide, but we'll resize them once they've downloaded. It is not good practice to make your images larger than the final size at which they will be displayed of course, but for the sake of this tutorial it will allow us to see the onLoadInit() method in action.
4. The next thing to do is to create our new MovieClipLoader object which we'll call myMCL, so add the following code to the first frame, below our trace function:
------------------to be continue
回复Comments
作者:
{commentrecontent}