LOADING MOVIES INTO A TARGET


When loading media from an external source, you must assign it a place to reside within your main movie (which we'll call the receiving movie). For externally loaded SWFs and JPGs, that location can be either a target or a level.

NOTE

You cannot load an MP3 file into a target or level. It's a different process all together, as you will learn in the section, Loading MP's Dynamically, later in this lesson.


NOTE

We will discuss loading a movie into a level in the section, Loading Movies into a Level, later in this lesson.


A target is simply an existing movie clip instance within the receiving movie. In fact, every movie clip instance in the receiving movie is a potential target for externally loaded SWFs or JPGs.

The syntax for loading a movie into a target looks like this:

 loadMovie ("myExternalMovie.swf", "_root.myPlaceholderClip"); 

NOTE

The directory path to the external asset can be written as an absolute or relative URL, depending on where the file exists.


The above action loads myExternalMovie.swf into the movie clip instance with the target path of _root.myPlaceholderClip , thereby replacing the current timeline at that target path with the one that's loaded into it. Thus, when loading external media, you can think of movie clip instances as nothing more than shells containing timelines either one placed there when the movie was authored (which happens automatically when a movie clip instance is placed on the stage) or one that is loaded dynamically as the movie plays.

When loading an external asset into a target, it's important to remember the following:

  • The registration point of the externally loaded asset will match the registration point of the target/instance it's loaded into.

  • If the target/instance that an external asset is loaded into has been transformed in any way (for example, rotated), the loaded asset will retain those transformations.

  • Once an externally loaded asset has been loaded into a target, you can control it via ActionScript using the target path to the instance into which it was loaded. In other words, the externally loaded asset becomes that instance. For example, if an external movie is loaded into an instance with a target path of _root.myPlaceholderClip , you can control the externally loaded asset by referencing that target path.

NOTE

For more information about target paths, see Lesson 3.


External SWFs that are loaded into targets can be as simple as animated banners or as complex as an entire Flash production.

  1. Open virtualaquarium1.fla in the Lesson17/Assets folder.

    This file (which we'll build on throughout this lesson) contains no actions, and the frame and movie clip structure have already been created so that we can focus on the ActionScript involved. Although the file looks uninspiring now, once the lesson is complete, it will contain several pieces of externally loaded content.

    This file is made up of nine layers: The bottom layer, Loaded Background, contains two elements: a text field at the bottom left of the screen that says "loading background…" and an empty movie clip instance (with no graphical content) named background, which is placed at an X position of 0 and a Y position of 0. Soon, this movie clip instance will contain our project's background, which will be loaded from an external source. The second layer, banner back, contains a movie clip instance of a white box (named bannerBack) that says "loading banner…" as well as a button that's labeled Banner On/Off. We'll use these in a later exercise. The third layer, next/prev buttons, contains two arrow buttons that we will set up in the next exercise. The fourth layer, panel, contains a bitmap of a gray panel box. The fifth layer, placeholder, contains another empty movie clip instance (which will be used in the following exercise) named placeholder as well as a movie clip instance named maskClip that resembles a big, black square, just to the left of the stage. The layer above this, paneltop, contains a dynamic text field named title as well as a bitmap of a black rectangle, which sits at the top-right corner of the gray panel. The progress bar layer contains a movie clip instance named progress that we'll use in a later exercise. And finally, the logo layer contains a bitmap of our logo, and the Actions layer will contain most of the actions that make this project work.

    graphics/17fig03.gif

    The graphic element that we're most interested in for this exercise is the empty movie clip instance named background, located in the top-left portion of the stage. In a moment, we'll begin scripting our project to randomly load one of three SWFs into this instance.

    Before we do that, though, let's take a quick look at the external assets we'll be loading into our project in the next several exercises.

  2. Using your operating system's directory exploring application, navigate to the Lesson17/Assets directory.

    In this directory you'll find the files that will be loaded dynamically into our project. They include the following: background0.swf, background1.swf, background2.swf, banner0.swf, banner1.swf, banner2.swf, image0.jpg, image1.jpg, image2.jpg, music0.mp3, music1.mp3, and music2.mp3.

    In this lesson, we'll work with the first three files in this list: simple, animated movies that will represent our project's background (the dimensions of which are 550 width by 400 height, the same as those of our receiving movie). You can double-click these files to view them in the Flash player. Remember their names.

    Keep the directory window open and available as we progress through the following exercises since we'll be referencing it again.

  3. Return to Flash. With the Actions panel open, select Frame 1 of the Actions layer and add the following script:

     backgrounds = new Array ("background0.swf", "background1.swf",  "background2.swf"); 

    This creates a new array named backgrounds , which holds the paths to our external background movies.

    Now let's create a function that will randomly load one of these background movies into our project.

  4. Place the following function definition below the script you just added:

     function randomBackground() {    randomNumber = random (backgrounds.length);    loadMovie (backgrounds[randomNumber], "_root.background");  } 

    graphics/17fig04.gif

    This creates a function named randomBackground() . Let's look at how this function will work.

    The first line generates a random number based on the number of elements in the backgrounds array. The length of the array is analyzed to determine the range of possible random numbers to generate. Because the backgrounds array has three elements, one of three possible numbers (0, 1, or 2) will be generated and set as the value of randomNumber . The next line of the function uses the value of this variable to determine which background movie to load. If the number 1 was generated and set as the value of randomNumber , the loadMovie() action would look like this:

     loadMovie (backgrounds[1], "_root.background"); 

    Since the value of Element 1 of the backgrounds array is "background1.swf" , this line could be broken down further to look like this:

     loadMovie ("background1.swf", "_root.background"); 

    In this scenario, the external movie named background1.swf would be loaded into the movie clip instance with a target path of _root.background . You'll remember that the movie at this target path is the empty movie clip instance in the top-left portion of the stage. Because the externally loaded background movie and the receiving movie share the same dimensions (550 w by 400 h), the externally loaded background movie will cover the entire stage.

  5. Place the following function call just below the function definition you previously added:

     randomBackground(); 

    Because this function call resides on Frame 1 of our movie, it will be executed as soon as the movie begins to play.

    TIP

    Depending on its file size, an externally loaded movie (like any other movie) may require a preloader, which you would construct and program as a regular preloader. For more information on how to create a preloader, see Lesson 15, Time and Frame - Based Dynamism.

  6. Choose Control > Test Movie.

    As soon as the movie begins playing, one of the three background movies is loaded into our project.

    NOTE

    The background movie clip instance (which our external background is loaded into) resides on the bottom layer of the scene; the rest of the scene's content resides above it. When the external movie is loaded into the instance, the loaded content will appear at that same depth. In other words, it will be on the bottom layer with the rest of the scene's content above it.

    graphics/17fig05.gif

    Using the above-described technique, you could construct dozens or even hundreds of background movies, though only one would be loaded when the movie plays. In this way, you can create a dynamic project without increasing download or viewing time.

    TIP

    With ActionScript, you could use a variation of this technique to determine the current date and then load an external background based on time of day, day of week, or month.

  7. Close the test movie. Save the file as virtualaquarium2.fla.

    This completes the exercise! We'll build on this file in the following exercises.

    Although our project is set up to randomly load a background movie into a target, for a typical Web site, it might make sense to create a navigation bar that loads content movies into a target. In other words, clicking on a button named Products would load products.swf into a target named content. There are many variations to this concept.



Macromedia Flash MX ActionScripting Advanced. Training from the Source
Macromedia Flash MX ActionScripting: Advanced Training from the Source
ISBN: 0201770229
EAN: 2147483647
Year: 2002
Pages: 161

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net