Communicating with the Server

When you publish a page to the Web for the world to view, you are essentially placing files in a directory on the Web server's hard drive. When a client uses a Web browser to access your page, the server sends copies of the files from its hard drive, over the Internet, to the client's computer where the Web browser displays the page.

We can take further advantage of this in Flash by initially getting part of our movie or game and then, while the user is already interacting with some of our site, load more of the site behind the scenes for him.

To put this in the perspective of game development, if you were making a game that was compartmentalized so that not all art assets were needed to play the first level, you could break up your art assets into multiple files and stream in only the files you needed when you needed them. If you had a five-level game in which each level took roughly two minutes, you would only need to load in enough to play the first level and let the secondary files load in the background.

Flash can ask the server for several types of files directly, including other .swf files, .jpg files, text files, MP3s, and .flv files (Flash Video format). We'll look at several of these types in the following sections.

Loading .swf Files from the Server

Because we've been working with .swf files since Chapter 1, "The Flash Authoring Tool," it's probably best to begin our server discussion by looking at the way our movies can load other movies from the server.

To exemplify this topic, we're going to need to set up a couple of files. First, we need something to load. I have supplied a simple movie on the CD in the directory path /Chapter 12/movieloader/veggie.swf. You don't need to work with the veggie.fla file because the veggie.swf doesn't care that it happens to be loaded into another .swf. In other words, we don't have to do anything special to veggie.fla to prepare it to be loaded into another .swf file. The original veggie.swf with no modifications is all that's needed.

We're going to load veggie.swf into another movie, so we must create that movie to do the loading. On the CD, I have named this file movieloader.fla. Inside movieloader, we want to develop some code that loads veggie.swf when the user clicks a button.

Note  

The Chapter 12 directory of the CD is broken into several subdirectories. Because this chapter has several examples, I thought grouping the files by example would make navigation easier.

Creating movieloader.fla

The first thing we need is a button. I've imported one from one of the previous games and instantiated it once on the stage. I named the instance loadButton .

From here, we are going to write our script in frame 1 of the main timeline. Because we want to load an .swf when the button is clicked, let's go ahead and write the code that gives the button some text. Then we can define the onRelease handler for the button to trigger the load process. Let's put a call to a custom function startLoad inside the onRelease so that we can encapsulate the loading code inside a function that could be called from more than this onRelease .

First, we set up the button so that it has appropriate text:

 loadButton.myText.text = "Load"; 

Now we're ready to attach a handler to the button so that it responds to being clicked.

 loadButton.onRelease = function(){      startLoad() } 

To make this function a bit more generic, we should really make it so that we can pass the URL of the file we want to load into the function. Let's go back and change the onRelease to this:

 loadButton.onRelease = function(){      startLoad(  "veggie.swf"  ) } 

Note  

veggie.swf is available on the CD. For now, make sure that the file is in the same directory as the movieloader.fla that we are building. We will talk about specifying paths for files in just a little bit.

Now we're ready to define the startLoad function. Because we expect this function to load another .swf file, we are going to use the movieClipLoader class. This is a new feature in Flash MX 2004 that loads movies into the current .swf while triggering several callbacks that allow you to have precise information about what is happening in the loading process.

Note  

There is another way to load a movie into Flash: loadMovie. loadMovie is a slightly easier piece of code to use; however, it doesn't have the same useful callbacks that we will be seeing throughout the next couple of sections.

Implementing startLoad

As with all functions, we can start by defining the function and setting up the arguments. As mentioned before, the URL will be passed into the function so that it can be used more generically:

 function startLoad(url) { } 

Our startLoad function needs to do two things when it runs: It needs to create a place for the new .swf to load, and it should start loading the .swf into that new target. To achieve these tasks , we are going to use the createEmptyMovieClip function and then fully implement an instance of the movieClipLoader class.

The reason for creating an empty movie clip is that loading a movie is a destructive action. This means that whatever was previously inside the target movie clip is removed. In addition to having the target clip timeline replaced , any instance variables or event handlers that are attached to the clip are also replaced. The exception to this is the built-in properties. Built-in properties such as _x , _y , _xscale , and so on remain at their set values after a movie is loaded.

Therefore, if you position a clip on the stage, you are setting its instance properties _x and _y to some position. If you now call loadMovie on that clip, it stays where it is but has its contents replaced by the .swf.

If, on the other hand, you define some variables of your own on the clip and then load into it, those variables are erased during the load. Any functions or event handlers are also erased.

Because removing the contents of a clip is generally not the intended behavior, it's typical to see loadMovie called on an empty movie clip. With this in mind, we can write the first line of script that does our loading ”namely, the creation of an empty clip:

 _root.createEmptyMovieClip("mc", 0); 

The new movie clip, mc, is blank and positioned at (0,0). Next, we need to create an object to be an instance of the movieClipLoader class. Instances of this class have access to methods that can load a movie into a target as well as callbacks for when the movie starts loading, receives a piece of the movie, or completes the loading.

Using the movieClipLoader Class

To use the movieClipLoaderClass , we first need to create a new instance of it. Keep in mind that this object is not the target movie clip. It is a separate type of object that simply holds functions to make the loading process a bit easier to deal with.

For now, we are going to start off with the simplest implementation of the class. After we instantiate the object, we are going to call its loadClip method. This method takes the URL of the file you want to load and a reference to the movie clip that you want to externally file into:

 var loader = new MovieClipLoader(); 

The loadClip function has the following general form:

 void  movieClipLoader  .loadClip("url",  targetMovieClip  ); 

The first argument to loadClip is a string (indicated by the quotes in the general form) named url . This string is essentially the name of the .swf to load, along with the path to get to it. The path can be absolute or relative. In other words, if the movieloader .swf file is located in the same directory as the veggie.swf file, you can use the following relative path name, which is the name of the file.

However, the veggie.swf file doesn't need to be in the same directory. In fact, it can be on a different domain completely. I have posted the veggie.swf file on my Web page. You can load it into your movieloader .swf using the following absolute path: "http://www.medusastudios.com/veggie.swf".

Caution  

This static URL works only on your local machine. When a Flash file is run in a browser, the plug-in imposes some additional security constraints. We'll explore this again at the end of this section.

Note  

If you use an absolute path name, you need to use a fully qualified name, meaning that you must put http:// at the beginning. Supplying an address such as www. mydomain .com causes failure.

To start the load, we refer to the URL passed into the function. We want to tell it to load into the empty movie clip we created a moment ago by using the following code:

 loader.loadClip(url, mc); 

That's all there is for our startLoad function. The preceding script loads veggie.swf into the empty veggie clip. Everything should work perfectly , as shown in Figure 12.1. That's not the end of the story, though.

Figure 12.1: The veggie.swf movie has been loaded into our loadMovie.swf file.

Loading .jpg Images

Flash also allows us to load .jpg images from the server on demand. We can do this with the same startLoad function we used previously. To load a .jpg, you simply change the URL so that it points to a .jpg instead of an .swf file. (Yes, it's that easy.)

As an example, I have included a file called veggie.jpg in the Chapter 12 directory on the CD (in the subdirectory jpgloader). If we create a movie called jpgloader.fla and place it in the same directory as our .jpg, we can load the .jpg using the same code that we did loading an .swf, with an altered URL, as follows :

 loadButton.myText.text = "Load"; loadButton.onRelease = function() {      startLoad(  "veggie.jpg"  ); }; function startLoad(url) {      _root.createEmptyMovieClip("mc", 0);      var loader = new MovieClipLoader();      loader.loadClip(url, mc); } 

If you test this movie, it should work. You can see the results in Figure 12.2.

Figure 12.2: The veggie.jpg graphic has been loaded exactly as if it were an .swf.

Caution  

If the .jpg file to load is not in the same directory, you might have to use an absolute path to the file. An example of an absolute path would be myURL = " http://blog.infinitumdesign.com/veggie.jpg "; .

Note  

In addition to loading a .jpg file into a movie clip, you can also dynamically load .jpgs into text fields that are set to display Hypertext Markup Language (HTML). You just use an <img> tag as you would in regular HTML.

If the .jpg or .swf that you are loading is large, you might want to consider tracking the progress of the loading process and report the information back to the user. Let's look now at building a preloader.