Loading Images Dynamically

We will start with images first because they are simpler to work with; they have no "moving parts" so to speak, as Flash files do.

Flash uses certain methods to load content in dynamically, and the first one to cover is the loadMovie() method.

The loadMovie() Method

The loadMovie() method is used to load external files directly into a MovieClip object. It can be called either by the ActionScript reader hitting it, or on an event such as a button being clicked.

This method has two layouts; the first is the independent function:

 loadMovie(URL, movieClip, method); 

The second is the movie clip method:

 movieClip.loadMovie(URL, method); 

Both usages do the exact same thing, and both have the same parameters basically, just arranged differently:

• URL A string literal representing either a relative or absolute path to an external .swf or image file.

• movieClip This is a reference to the movie clip that will receive the content.

• method An optional parameter used for sending or receiving variables; it can take either GET or POST as its argument; GET will append variables to the end of the URL, and POST will send the variables in a separate header.

Now that you see the basic usage and parameters, let's do an example:

1.	Create a new Flash document.
2.	Save this document as loadImage1.fla in the same directory as the external images.
3.	Name the layer in the main timeline actions.
4.	Go to the first frame of the actions layer, open the Actions panel, and place this code within it: //load the image this.loadMovie("bridge.jpg");

All this code does is call the loadMovie() method.

Run this code, and your screen should look like Figure 19.3. That's itthat's all the code necessary for loading an image into Flash at runtime. You could even take out the comment if you wanted to, but that wouldn't be good coding practice.

Figure 19.3. Loading external files is as easy as adding one line of code.

That was pretty simple. Now let's go back and add a button, and change the way we load the image in.

1.	Continuing from the preceding example, close the test movie screen and go back to the main timeline.
2.	Create a new layer and name it button.
3.	Choose Window>Common Libraries>Buttons.
4.	Choose your favorite button and drag it from the library to the bottom right of the stage in the button layer.
5.	Give the button an instance name of myButton_btn.
6.	Go back into the actions layer, and replace the code with this: //create the event for the button myButton_btn.onRelease = function(){ //load the image loadMovie("bridge.jpg",_root); }

This code creates an event for the myButton_btn button on the stage. When triggered, it will accomplish the same thing that the preceding code didload an image into the _root timeline. Also notice that we used _root this time instead of this because we were calling code from inside a button event. If we had used this, it would have meant we were trying to load the image into the button instead of the _root timeline.

Test the movie; click the button and see what happens. The image still loads, but the button disappears. Welcome to the first limitation of loading external content into movie clips; it replaces everything in that movie clip, which is why the button was removed, because it was on the _root timeline.

Let's fix that by creating an empty movie clip with ActionScript as you learned in Chapter 13, "The Movie Clip Object."

1.

Go back into the actions layer, and change the code to this:

 //create the event for the button myButton_btn.onRelease = function(){      //create a movie on the main timeline      _root.createEmptyMovieClip("target_mc",1);      //load the image      loadMovie("bridge.jpg",_root.target_mc); } 

This time, we created an empty movie clip on the _root timeline and loaded the image into that. We could have made the empty movie clip outside the button event, but in keeping with the content-on-demand mindset, it was better to create the movie clip when we needed it, and not before.

Test the movie, and as you can see in Figure 19.4, the image loads in when the button is clicked, and the button remains on the stage. As a matter of fact, you can continue to click the button, and it will refresh the image every time.

Figure 19.4. External files should be loaded into empty movie clips, or content within the movie clip being loaded into will be overwritten.

Now that we are loading content into movie clips other than the _root timeline, it is important to understand inheritance.

Inheritance

The idea of inheritance may be difficult to grasp at first, until you see an example. The idea is that any content loaded into a movie clip will inherit its parent's properties.

For instance, if you load an image into a movie clip that has an alpha of 50, the image in turn will also have an alpha of 50.

Let's take a look at an example of inheritance:

1.	Create a new Flash document.
2.	Save this document as inheritance1.fla in the same directory as the external images.
3.	Go to the first frame of the main timeline, open the Actions panel, and place this code within it: //create the empty movie clip this.createEmptyMovieClip("holder_mc",1); //set the position of the holder_mc movie clip holder_mc._x=400; holder_mc._y=300; //rotate the holder_mc movie clip holder_mc._rotation=180; //load the image holder_mc.loadMovie("bridge.jpg");

This code creates an empty movie clip on the _root timeline to load the image into. We set a few of its properties including the _rotation set to 180, which will flip the empty movie clip. Then we load the image into the empty movie clip just as before.

Now test the movie, and you will see that the image is completely upside down just like the one in Figure 19.5. This is very useful for aligning images or sizing them before they are even loaded.

Figure 19.5. Use inheritance to control external files before they are even loaded.

You are not limited to movie clip properties, however, as you will see in this next example. We will create a color object, change the tint of the empty movie clip, and then load the image into it.

1.

Continuing from the preceding example, close the test movie screen and return to the actions on the main timeline.

2.

Replace the code in the first frame with the following: //create the empty movie clip this.createEmptyMovieClip("holder_mc",1); //create a color object var myColor:Color = new Color(holder_mc); //create a transform object var blueObj:Object = new Object(); //set its blue property to the maximum blueObj.bb=255; //change the tint myColor.setTransform(blueObj); //load the image holder_mc.loadMovie("bridge.jpg");

The preceding code creates an empty movie clip as it did before. Then it creates an instance of the Color object associated with the holder_mc movie clip. After that, another object is created that will be used in conjunction with the Color object. We set a special property, and then pass the blueObj to the setTransform() method of the Color object, changing the tint of the empty movie clip to a shade of blue. Finally, we load the image into the empty movie clip.

Test the movie again and you will see that the image is right side up again (because we removed the rotation code), but this time the image is a shade of blue.

So far we have loaded images directly into movie clips. Now we will see how to load them into levels of the Flash player directly using the loadMovieNum() method.

The loadMovieNum() Method

The loadMovieNum() method, like the loadMovie() method, loads external files into Flash, but unlike the loadMovie() method, the loadMovieNum() method loads the files into a specific level of the Flash player directly.

This is the generic layout of the loadMovieNum() method:

 loadMovieNum(URL, level, method); 

This action has three parameters:

• URL A string literal representing either a relative or absolute path to an external .swf or image.

• level A numerical value representing the level of the Flash player the content is to be loaded into.

• method An optional parameter used for sending or receiving variables; it can take either GET or POST as its argument.

Although the loadMovieNum() method will not remove everything in a movie clip as the loadMovie() method does, it will remove anything on the level number it is being loaded into, so keep that in mind and know that _level0 is the same as _root.

Now that you've seen the parameters and layout of this method, let's start using it.

1.	Create a new Flash document.
2.	Save this document as loadMovieNum1.fla in the same directory as the external images.
3.	Go to the first frame of the actions layer, open the Actions panel, and place this code within it: //create an empty movie clip for the background this.createEmptyMovieClip("holder_mc", 1); //load the background in holder_mc.loadMovie("bridge.jpg"); //load the png into the Flash player loadMovieNum("atSign.png",1);

The preceding code first creates an empty movie clip to be the background, then loads an image into it. Next the code loads content into the first level of the Flash player.

Test this code and you will see that both images have loaded into Flash. Also, notice two important things. First, that the second image did not affect the first at all. Second that the second image, because it was a PNG, kept its transparency, even being loaded in at runtime.

Now you know how to load images into Flash, but how do we get rid of them?

The unloadMovie() Method

The unloadMovie() method is designed to clean out movie clips containing any content (but in this case, content that has been loaded into it).

Like the loadMovie() method, the unloadMovie() method has two basic layouts, the first being the independent function:

 unloadMovie(movieClip); 

The other use is as a MovieClip method:

 movieClip.unloadMovie(); 

Both of these actions perform the same thing and have the same basic parameter, movieClip. The movieClip parameter is the movie to be cleaned.

Here is an example of removing a loaded image from the Flash movie:

1.	Create a new Flash document.
2.	Save this document as unloadMovie1.fla in the same directory as the external images.
3.	Name the layer in the main timeline actions.
4.	Create a new layer and name it button.
5.	Choose Window, Other Panels, Common Libraries, Buttons.
6.	Choose your favorite button and drag it from the library to the bottom right of the stage in the button layer.
7.	Give the button an instance name of myButton_btn.
8.	Go into the first frame of the actions layer, and place this code within it: //create an empty movie clip to house the image this.createEmptyMovieClip("holder_mc", 1); //load the image holder_mc.loadMovie("bridge.jpg"); //use the button to remove the movie clip myButton_btn.onRelease = function(){ //clean the movie clip holder_mc.unloadMovie(); //check to make sure the movie is still there trace(holder_mc); }

The preceding code creates an empty movie clip to house the image being loaded into it. Then an event is created to remove the loaded content from that movie, and also to check to see if the movie is still there.

Run this code, and you will see that the image does load in, and when you click the button, the image disappears, and the Output panel shows a reference to the holder_mc movie clip that is still present.

There is another way to remove loaded content from movie clips: to remove both the clip and the content. Although it is a little more definite: the removeMovieClip() method will accomplish this.

The removeMovieClip() Method

The removeMovieClip() method can be used to remove loaded content from movie clips, but the difference between it and the unloadMovie() method is that the removeMovieClip() method will completely remove the movie clip it is referencing, not just the loaded content.

Like the unloadMovie() method, the removeMovieClip() method has two ways of being written. The first is the independent function:

 removeMovieClip(movieClip); 

And the second way is the MovieClip method:

 movieClip.removeMovieClip(); 

Both ways of writing this action accomplish the same task: They both remove the movie clip completely from the Flash player.

We will continue the preceding example by merely changing the code to use the removeMovieClip() method.

1.

Return to the first frame of the actions layer, and change the code to this:

 //create an empty movie clip to house the image this.createEmptyMovieClip("holder_mc", 1); //load the image holder_mc.loadMovie("bridge.jpg"); //use the button to remove the movie clip myButton_btn.onRelease = function(){      //remove the movie clip      removeMovieClip(holder_mc);      //check to make sure the movie is still there      trace(holder_mc); } 

The only thing changed in the code was that the method unloadMovie() was replaced with removeMovieClip().

Test this movie, and again when the button is clicked, the image is removed. However, this time in the Output panel, there is no reference to the holder_mc movie clip because it was also removed.

Those two methods are used to remove loaded content from movie clips, but to remove content from level numbers you must use the unloadMovieNum() function.

The unloadMovieNum() Function

The unloadMovieNum() method works the same way as the unloadMovie() method except that it cleans levels, not movie clips.

Here is the layout of this method:

 unloadMovieNum(level); 

The only parameter this method has is the level parameter representing which level is to be cleaned.

Returning to the same example, we will replace the code to show how the unloadMovieNum() method works.

1.

Return to the first frame of the actions layer, and change the code to this:

 //load the image into level 1 loadMovieNum("bridge.jpg",1); //use the button to remove the movie clip myButton_btn.onRelease = function(){      //clean level 1      unloadMovieNum(1); } 

The preceding code loads the image into level 1 of the Flash player. Then it creates the event for the button so that when the button is clicked, it will clean out that level.

Test this movie, and just like before, the image loads in fine, and when the button is clicked, the image is removed.

After all that work and coding to load images into Flash, now is the perfect time to tell you that there is an easier way.

The Loader Component

This is one of the simplest components shipping with Flash 8. The Loader component is designed to make it easy for designers and developers to load images and SWF files into Flash dynamically.

It has three parameters:

• autoLoad This is a Boolean value representing whether the component should automatically load the content or wait to be told.

• contentPath The relative or absolute path to the image or SWF file you are loading in. You can also use URLs to load content.

• scaleContent This parameter, if set to true, will scale the content being loaded into it to the Loader component's dimensions (which are set during authoring). If this parameter is set to false, the component simply acts as a point to load files to.

That's the basics of how these components work. Now let's see them in practice in this next example.

1.	Create a new Flash document.
2.	Save this document as loaderComp1.fla in the same directory as the external images.
3.	Drag an instance of the Loader component onto the stage.
4.	Give it an instance name of loader.
5.	Set the parameters as follows: autoLoad TRue contentPath bridge.jpg scaleContent true

Now test the movie, and your screen should look like Figure 19.6. You can go back into the main timeline and change the size of the Loader component with the Free Transform tool (Q), retest the movie, and the image will reflect the changes made to the Loader component. Also, notice that after you test the movie (or if you click on the stage before you test the movie), the image you have set to it now appears there.

Figure 19.6. The Loader component makes it almost too easy to load dynamic images into Flash.

All we have done so far is load images into Flash. Next we begin to load other .swf files into Flash.