One of the most costly aspects of using components is preloading. As you saw in Chapter 10, components rely heavily on a structure that is organized by linkage names of the component's movie clip; you give the component a linkage name so you can associate the code for the component, which handles its functionality, with a movie clip, which is the graphical representation of the component. When you enter the linkage name for the component, you encounter a dialog box like Figure 12.1.
Figure 12.1: Linkage properties for a component
The last check box, Export In First Frame, is the key to the organization of the component structure. It forces the component movie clip and everything inside it to load before anything can happen in the movie; the term anything includes preloaders, animations, and actions. This means that the user will not see your preloader, or even know that the movie is loading at all, until the component is downloaded. Why would Macromedia impose this strange restriction? It makes sense when you consider the complicated relationship between the code and graphics of the component. Before Flash can set up the relationship we explored in Chapter 10, everything pertaining to the component must be downloaded.
|On the CD|| |
To see this problem in action, we can make use of the bandwidth profile in Flash's authoring environment. In the Chapter 12 folder on the CD, you will find the file BadPreloadComponents.fla, where all the components from the Flash UI Component Set, which comes with Flash MX, have been added to the movie's library. After you have opened the file, you will notice that none of the components are actually on the stage (see Figure 12.2).
Since each of these components has linkage names, they are exported with the rest of the movie when published to an SWF file, which explains the added kilobytes to the file even though they are not on the stage. The crux of the problem is exposed when we test the file in the authoring environment (press Command/Ctrl+Enter) and take a look at the bandwidth profiler (Command/Ctrl+B). The bar chart that appears at the top of Flash displays the number of kilobytes in each frame of the movie, which added together are the file size of the movie. This information tells us how much must be downloaded before a particular frame can be played; if any frame needs a lot of memory, we may want to cut it down for streaming purposes. Looking at the bandwidth profiler for this file (see Figure 12.3), we see something startling. The user must download nearly 100 KB before even a preloader will appear!
Figure 12.3: The user who views this file will need to download nearly 100 KB before the movie begins to play.
Seeing as how components are so useful, you might feel compelled to use many components in tandem to create a project. If so, a serious drawback comes about when using components: Do you take the full benefit of components and leave the user without a preloader, hoping that they wait long enough for everything to load? Or do you resort back to creating elements from scratch, but allow the user to once again find solace in the preloader? Luckily, there are a few tricks you can use to reduce the ghastly 100 KB to something more manageable.
Since a movie clip must have a linkage name to work with attachMovie, we keep from exporting the symbol. So, we are left with only one alternative: uncheck Export In First Frame in the Linkage Properties dialog box. The only problem with unchecking this option is that the symbol must be on the stage at some point in the movie in order for it to be exported at all. As a result, if you start unchecking the option in all of your components and their assets, you will end up with a broken component.
|On the CD|| |
To see how to get the components back up and running even when the Export In First Frame option is unchecked, let's go back to the sample with all the UI components that came with Flash. Open GoodPreloadComponents.fla from the Chapter 12 folder on the CD. Three scenes have been created to organize the main parts of the file: Preloader, Pre-Assets, and Main. One holds the preloader, one holds all the assets that have had their Export In First Frame option unchecked, and one holds the components as you want the user to see them. The intermediate scene, which simply holds assets and does nothing else, guarantees that the component and its assets are loaded before the components start to initialize and execute actions. It is also useful to have this scene if you are using a component only through attachMovie, in which case you would not have any instances on the stage.
In the Preloader scene, a very simple preloader, which is only there for reference, has been constructed. It simply takes care of displaying the percentage of the movie downloaded and plays the movie when finished downloading.
The Pre-Assets scene is the place we dump all of the assets for each component we are using. There is a very systematic way to do this, so don't rush into dragging a bunch of symbols from the library to the stage. Follow these steps:
Open the Pre-Assets library and make sure it is not docked with any other panels. Size the panel so that it is quite tall and wide enough to see the Linkage column, as in Figure 12.4.
Figure 12.4: Open the library big enough to view many symbols at once and have the Linkage column in full view.
Thoroughly scour each folder and their subfolders, looking for any symbol with a linkage name. If a symbol has a linkage name, the text Export:LinkageName will show up in the Linkage column, where LinkageName can be any string.
When you find such a symbol, open its Linkage Properties dialog box and uncheck Export In First Frame.
Drag that symbol to the stage.
Again, make sure you do all of this in the Pre-Assets scene, as it should all occur before any use of these components. Also, be sure to follow the above steps exactly; this is the only way to make sure you drag each symbol that was unchecked onto the stage. Any slip-up of unchecking a symbol and not dragging that symbol to the stage will ultimately render the component unusable.
The steps described were followed precisely to produce the GoodPreloadComponents.fla file. As a result, the bandwidth profiler reports the data shown in Figure 12.5 for the new file.
Figure 12.5: The bandwidth profile reports that only 6 KB needs to download for the movie to start playing.
We have reduced the amount of data the user must download before the movie starts by over 1,500 percent to only 6 kilobytes, some of which is due to the preloader. The set of components is now in the most user-friendly way possible, and you've seen that one of the more serious drawbacks to using components has an elementary fix. Be sure to use this technique when using components to lessen their heavy blow on the preloader.