Section 12.1. Using ActionScript to Modularize Content


12.1. Using ActionScript to Modularize Content

Successfully modularizing a Flash project depends largely on what type of content you're working with. For example, it's possible to divide larger projects into smaller .swf files. It's also possible to keep many or all bitmaps, sounds, and videos external to your main .swf document. In each case, you can load the assets dynamically when needed.

12.1.1. Loading SWFs

Your first project will focus on loading external SWFs using the loadMovie-Num( ) command. The related loadMovie( ) command will be examined in just a bit, when you load bitmaps.

Flash allows you to "stack" visual objects in three primary ways:

  • Using the arrange feature within a timeline layer. You've also had some experience in this book with using the Modify Arrange Bring to Front menu command and its related commands to adjust the order of appearance of visual assets within a layer.

  • Using ActionScript to set the level of a scriptable visual asset. Although you may not have had as much experience with this method of ordering movie clips and buttons, this is the subject of this section's mini-project.

To allow ActionScript control over the stacking of movie clips and buttons, Flash uses invisible levels that appear above the Stage. In some ways they are similar to timeline layers, but the level of an asset can be changed at runtime, while the timeline layer order cannot. Furthermore, a level can override a layer setting.

For example, imagine a file with movie clips myClip1, myClip2, and myClip3 in layers 1, 2, and 3, respectively. Without ActionScript, the stacking order of these movie clips could not be changed at runtime. However, if the level of myClip1 were set to a number higher than the level of the other movie clips, myClip1 would appear on top of the other visual assets.

It's also important to understand that the layer number has nothing to do with the level number. All layers in the main timeline are in Flash's _level0. Therefore, placing any asset into _level1 using ActionScript would cause that asset to appear on top of all the timeline layers, even if the timeline contained 50 layers.

In fact, loading assets into _level0 will actually replace the main movie. This can be beneficial if you want to link through a linear storyline, replacing timelines chapter by chapter, in an attempt to keep RAM overhead to a minimum. On the other hand, what if you had an ambient soundtrack in the main timeline, or perhaps a chapter-wide navigation system (including Help and other global assets)? Loading a new .swf into _level0 would interrupt the sound playback and/or unload the global interface.

In the latter case, it would be beneficial to feature your global interface and/or ambient soundtrack in the main timeline as you normally might, and then load each animation chapter into _level1. This would achieve the goal of never having more than one chapter in RAM at any given time, while ensuring that your global assets are active at all times in the unaffected _level0.

Enough descriptionnow try it out for yourself. Start by confirming the .swf file you intend to load, and preparing the file into which you will load the external asset:

  1. To avoid unnecessary complications with paths in this project, such as the need to traverse folders when locating external assets, both the loading file and the file that will be loaded should be in the same directory. First, make sure that box_guy_shadow.swf is in the 12 folder of your working directory. If not, copy the final animation from your 10 folder into the 12 folder.


    Note: Flash paths are constructed the same way as web site paths. Directories are separated by forward slashes, and you can go up to a higher-level directory by including a ../ at the beginning of the path for every level you want to ascend. For example, the following will go down into an images directory to reach a JPEG:while this path will go up one directory and then down into an adjacent images directory to reach the needed JPEG:

  2. Next, create a new file and save it as load_movie_num.fla in the 12 folder. Change its file dimensions to 550 x 500 pixels.

  3. Create a button in the lower-right corner that will load in the external asset. Give it an instance name of load_btn.

  4. Your movie only has one layer and one frame, but this is all you need. In frame 1, place the following script:

     load_btn.onRelease = function():Void {     loadMovieNum("box_guy_shadow.swf",0); }; 

    This will load the shadow animation from Chapter 10 into _level0. If that's ringing a bell, you've been paying attention. If you haven't noticed a possible issue, you'll soon see it clearly.

  5. Save your work and test your movie. Click the button you scripted to load the external .swf. If the files were in the same directory, you will see something jarringnot only does your load button disappear, but the Stage size even changes shape. Your root movie has been entirely replaced by the .swf file you just loaded. Close the .swf and go back to correct the problem.

  6. Edit the frame script to load the movie into level 1 (the change is in bold):

     load_btn.onRelease = function():Void {     loadMovieNum("box_guy_shadow.swf",1); }; 

  7. Save your work and test your movie. Click the button that loads the external .swf. This time, the animation loads into the upper-left corner of your base movie and does not unload the button or change the Stage size. Your base movie remains active in _level0, and the new .swf is loaded into _level1.

Loading assets into levels is fast and easy because no further setup is required. However, it also has limitations. Unless you are adding or replacing entire segments of movies, as in the animation chapters described earlier, you are usually better off loading external assets into movie clips. This is what you will do in the next section.

12.1.2. Loading Bitmaps


Note: When storing a reference to a dynamically created movie clip in a variable, you can target the movie clip using the variable or the instance name you gave it during the creation process. In this case, there is little advantage to either method. However, when the script is more complicatedsuch as when creating many movie clips in a loopusing the variable is much easier.

Loading bitmaps uses the same techniques as loading .swf files. In previous versions of Flash, only external baseline JPEG files could be loaded on the fly. However, Flash 8 now makes it possible to load progressive JPEGs, GIFs, and PNG files.

In this mini-project, you'll examine the loadMovie() method. Unlike the level used in loadMovieNum(), loadMovie() identifies a movie clip as the target into which the external asset is loaded. Try it out with a variety of bitmaps:

  1. Open the load_movie.fla file in the 12 folder. This will give you a little head start, in that the eight or so buttons you will experiment with have already been created.

  2. For scripting flexibility, you will use the createEmptyMovieClip() method. This method does exactly what it says: it creates an empty movie clip in the timeline you specify. Add the following line (the simplest use of this method) into the actions layer, in frame 1:

     var container:MovieClip = this.createEmptyMovieClip("container_mc", 1"); 

    Here, this refers to the main timeline. The method also gives the clip an instance name that you specify in the first parameter, and places the clip in the level specified in the second parameter.

  3. To start, add a button event handler for the JPEG load button that loads the water.jpg file into container, the empty movie clip you just created:

     loadJPG_btn.onRelease = function():Void {     loadMovie("water.jpg",container); }; 

  4. The biggest significance of loading an asset into a movie clip instead of a level is that you can exert more control over it. Anything you can do with a movie clip, you can now do with the loaded asset. To demonstrate, add the following button event handlers for the arrow buttons. They will allow you to move the loaded bitmap around with the buttons:

     up_btn.onRelease = function():Void {     container._y -=10; }; down_btn.onRelease = function():Void {     container._y +=10; }; left_btn.onRelease = function():Void {     container._x -=10; }; right_btn.onRelease = function():Void {     container._x +=10; }; 

  5. Save your work and test your movie. The first thing you may notice is that the bitmap loads into the upper-left corner of the movie, just like the .swf did when loaded into a level. However, that's just because the createEmptyMovieClip() method creates the new movie clip at (0, 0) by default. If you use the arrow buttons, you can see that the clip can be moved around.

  6. When you're finished experimenting, close the .swf and return to editing the frame script in frame 1.

  7. Assign coordinates to the target movie clip to differentiate this mini-project from the use of loadMovieNum(). You can add this code anywhere, but inserting it right after line 1 contributes to script clarity:

     container._x = 20; container._y = 20; 


    Warning: If you decide to create a static container movie clip, instead of creating this container on the fly with ActionScript, beware what you place inside it. The loaded asset will replace the content of the container movie clip. For example, don't create a container movie clip that has within it a frame for a slide show, because the frame will disappear when you load the first photo. Instead, create the frame in another movie clip beneath the container.Similarly, the image will not be cropped or scaled by the movie clip. For example, if you load a 400 x 400-pixel JPEG into a 200 x 200-pixel movie clip, you will still see the entire JPEG. This can be a problem if the larger loaded asset interferes with other assets or interface elements.In the next project, you will use a component that will automatically scale the asset to fit.

  8. Next, add the event handlers that will load the remaining image types:

     loadGIF_btn.onRelease = function():Void {     loadMovie("star_move.gif",container); } loadPNG_btn.onRelease = function():Void {     loadMovie("star_move.png",container); } 

  9. Save your movie and test your work. If you want to compare your file with the provided source, your movie should now look like load_ movie_01.fla.

Figure 12-1. External bitmaps loaded into a target movie clip can be manipulated by using ActionScript to control the movie clip


You should now be able to move your loaded bitmaps around the screen, as seen in Figure 12-1 (the movement simulated in this figure is made possible by setting the _x and _y properties of the target movie clip using the arrow buttons). Each time you load a new bitmap asset type it will replace the previous one, because each method loads the bitmap into the container movie clip.

Even with two symbols, three pieces of static text, and three graphics, the parent movie you just worked with is only 1 KB. Why? The .swf is tiny because you're loading each of the graphics from an external source. This makes near-instant download of the main file possible. Even over the internet, loading each graphic will still be a relatively speedy event, and if the user chooses not to download all three graphics, you're ahead of the game.

As good as your file is, it can still be better. It would help if you provided the user with some visual feedback while the graphics are loading. This requires a preloader.



Flash 8(c) Projects for Learning Animation and Interactivity
Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)
ISBN: 0596102232
EAN: 2147483647
Year: 2006
Pages: 117

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