gskinner.com: gBlog: Internal Preloading in Flash MX 2004

Posted on August 17, 2004 by Grant Skinner

One of the major limitations of setting up large dynamic applications in Flash MX 2004 is that most of your content (and hence most of your file size) gets dumped onto frame 1. This is especially true if you use a lot of Macromedia components.

There are a number of workarounds for this, including setting up an external file to handle pre-loading, but the best one I have found is to carefully move all of the content off of the first few frames, so that you can set up a proper preloader within the swf in the first two frames.

There are a number of steps to achieving this – I will walk through each of them, and you can download a simple demo at the end of this entry.

1) Set your publish settings to export AS2 classes export on a frame other than 1

By default, Flash compiles all of your AS2 classes onto the first frame of your SWF, so that they are ready to be used immediately when your SWF loads. Of course, this adds a lot of bulk to the first frame of your application. Luckily, we can override this behaviour.

In this example I’m going to set my classes to export on frame 5, so that I can set up a preloader in the first few frames. To accomplish this, simply open Publish Settings from the File menu, click on the Flash tab, then on the ActionScript 2.0 “Settings…” button. In the dialog that opens, type “5″ into the “Export frame for classes” box.

2) Set up exported library items to load on a frame other than 1

As with classes, Flash defaults to exporting all library items that are set to “Export for ActionScript” to export on frame 1. In order to circumvent this, you must go through your entire library and find each item that is set to export for ActionScript. Then, for each of these items you must turn off “Export in first frame” and add an instance of the symbol to the frame you have decided to export your assets on (in this example, frame 5).

This is a very laborious process in larger projects, and for ongoing projects it can be very difficult to remember which symbols are set up properly for preloading, and which still need to be set up. To solve this problem, I developed a simple JSFL script which automates the entire process: It identifies symbols that haven’t been set up, turns off their “Export on first frame” property, and adds an instance of the symbols to whatever keyframe you specify. And because it only affects symbols that are not already set up, you don’t have to manage the process. One of our current projects has over 800 symbols in the main FLA, almost 200 of which are exported for ActionScript – as you can probably imagine, this JSFL has saved me a LOT of time.

You can download the JSFL, and find instructions for using it at the end of this entry.

3) Set up the preloader

Now all of your assets are loading on frame 5, so you have 4 frames to play with for preloading – this example only uses a single frame, but the timeline is easier to work with when it’s a little spaced out. The most important thing to remember is to not use embedded fonts, classes, or components in your preloader, otherwise you’re defeating the purpose.

For this example, I’m just going to set up a super simple preloader that just puts the percentage complete into a textfield (using _sans system font) on the stage. I could use the same percentage value to drive a progress bar or something fancier, but I want to make it easy. Here’s the code, placed on frame 2, together with a textfield called “loadStatus” – I use frame 2 so that Flash even has an opportunity to properly preload that frame before the playhead hits it:

onEnterFrame = function() {
var percentLoaded:Number = // wraps to next line:
Math.floor(getBytesLoaded()/getBytesTotal()*100);
if (percentLoaded == 100) {
// clean up:
delete(onEnterFrame);
// jump over our asset frame, and
// straight to our content frame:
gotoAndPlay(10);
} else {
loadStatus.text = "Loading: "+percentLoaded+"% done";
}
}
stop();

As you can see in the above code, once I hit 100% loaded, I skip over the frame I exported all of my assets to (otherwise I would get a really ugly screen with them all scattered everywhere – not to mention the CPU hit of instantiating them all at once), and straight to my frame with my application content. Also, don’t forget to delete your onEnterFrame function – you don’t want it to keep running in the background eating up resources.

The “Set up for preloading command”

As I mentioned above, I’ve scripted a simple, but very useful JSFL command that will automate prepping your symbols for preloading. To use it, follow these simple steps:

download it by clicking here

open it in Flash (using open… in the File menu, not by double-clicking it), and read the little disclaimer at the top

open your FLA, and select the keyframe you want all of the symbols that are set to “Export for ActionScript” to be exported to

Select “Run command…” from the command menu, and select the JSFL file

The command will search your library for any symbols that are set to export in the first frame. For each of these symbols, it will turn off “Export in first frame”, and create a new instance on the stage in the keyframe you selected. Simple!

NOTE: JSFL files have the potential to break things in your work – I would urge you to run them on copies of your files, rather than your originals in case something goes wrong.

You can download the demo mentioned in this entry by clicking here. Take a look at the bandwidth profiler when you test movie to see where the assets are being loaded.

[UPDATE JULY 16/2005]
There have been several comments on preloading audio clips. The approach we took was to create a single movie clip, and put each audio clip on a layer/frame. Note that audio will sometimes still play, despite being in a frame that’s never hit, so all the audio frames are changed to “stop” events.

You can download an updated jsfl here

Follow @gskinner on Twitter for more news and views on interactive media.

32 Comments

What if you are doing Screens Based development?

Posted by: Jim Fee on Aug 17, 2004 9:46am

To the best of my knowledge, you're forced to use an external preloader for a Screen or Form based application - one more reason I don't use Forms.

Cheers.

Posted by: Grant Skinner on Aug 17, 2004 9:52am URL: http://gskinner.com/

Thanks for sharing this Grant. It's good to see how others are leveraging jsfl in their workflow.

Posted by: Lucas on Aug 17, 2004 10:09am

i use almost the exact same setup for class export, etc. and made a very similar "no first frame" jsfl file (on my blog last week). I prefer to place the components on stage manually, as there may be items in the library I don't want to include in the swf.

Posted by: Keith Peters on Aug 17, 2004 10:27am URL: http://www.bit-101.com

You little beauty!!! Was using the container_mc method all this while, a la many others i believe, but nothing like every mc having its exclusive preloader.

Posted by: Arindam on Aug 17, 2004 4:13pm

Handy. But to prevent the _sans type, if the preloader only uses numbers and the percent sign, I believe this wouldn't amount to a large file size. This would enable you to have a bit more consistent design. Correct me if I'm wrong...

Posted by: Arthur Clemens on Aug 18, 2004 8:20am URL: http://visiblearea.com

Grant,

Thank you so much for posting this. I've been struggling with this precice issue on a current project, and it has been driving me absolutely nuts.

You note: "The most important thing to remember is to not use embedded fonts, classes, or components in your preloader, otherwise you're defeating the purpose."

Is the an absolute rule? Before I had realized what issues were present, I wrote a Preloader Class (cute, right?), along with an App Logger Class (along the lines of Moock's example, which sends messages out via LC for online debugging). I need to use the classes right away, in frame 1.

While I'm happy to move the majority of classes over to frame 5, is it then impossible to have a few manually imported and available on frame 1? Did I paint myself into a corner by making preloading and debugging code into classes?

With all the excitement about AS 2.0 and bringing class declaration to a more standard method, are we really supposed to be using timeline-based preloaders still? I'm happy to do so if there is no other option... I just feel a little frustrated.

On a related note, I see odd behavior with some of the MM comps I use when I don't export their classes in the first frame. In particular, button and combo box highlights don't turn off correctly. Have you noticed this?

Again, thank you for the thoughtful post. I'd be eternally grateful if you had any thoughts on these questions.

John

Posted by: John Blake on Aug 18, 2004 3:48pm URL: http://www.fivepecks.org

As it happens I was struggling with this as well. Sometimes its difficult to get around/find all the tweaks for getting that first frame down in size. Thanks a ton, I'll be using this technique (and your nifty jsfl script) right away.

Posted by: Ian Turgeon on Aug 23, 2004 8:59am

Thanks Grant - What a time saver! Have just over 50 files that I was going to have to hand code to do this. This with the compileProject have gotten me out before 5:00 for the first time in months!!

Posted by: Philip Double on Aug 25, 2004 3:32pm URL: http://www.cognizen.com

salut mai datimi nistie smekerii care le pot face in flash

Posted by: Wagner on Sep 10, 2004 2:46am URL: http://www.Wagner.go.ro

This worked great for my virtual tour. I also have a demo up that is not working. The output errors I am getting are as follow (I'll just pot one and see what you thing):

I have some script that targets going to another scene and playing. Here is an error -

**Error** Symbol=welcomeVidSmall, layer=actions, frame=1274:Line 1: There is no class with the name 'String'.

_root.gotoAndPlay("newRegScene");

It seems to me that I am missing a class. Should I go into the properties of the movie clip that is reporting the problem and make up a class or is there another alternative.

Thanks!

Posted by: Brian on Sep 10, 2004 11:39am URL: http://www.urquest.com

This works great and thanks for the JSFL. There is one problem.

One cannot use classes where the code is not available to them when they are not exported on frame 1. DataSet, data.binding for example are not available at run-time when you include their SWC and then change their class export value.

Any ideas for a work around or solution?

Thanks!!

Posted by: Will on Sep 10, 2004 6:59pm

hello ... your web site is very wonderful for me .... i love flash animation ...

Posted by: sepehr on Sep 24, 2004 6:33am URL: http://www.sepehr90.us.tt

Thank you!

Posted by: Kyle Ward on Nov 4, 2004 5:24am URL: http://www.k19.co.za

There seems to be a problem with certain components and this preload method.In particular the Menu and DataGrid.If I set the ClassPath other than frame 1 then these two components don't seem to initialise properly,especially the Menu.If a simulated test is carried out then the DataGrid initialises and works fine but the Menu does'nt.Both have instances on the stage,so that is not the problem.It's as if the Menu Class has'nt loaded properly prior to using the component.

So you are forced to set the ClassPath to frame 1 in order to initialise certain components properly.

Strangley though;when compiled for Flash Player 6 and ClassPath set to 3 everything is initialised but does'nt work properly.

Anybody else encountered this problem?

Robert

Posted by: Robert Berger on Nov 18, 2004 2:33am

Thanks Grant - What a time saver!

Posted by: ¹©Ó¦Á´ on Nov 23, 2004 12:13am URL: http://www.ascm.cn/

Hey Grant,

thanks for this.

I just have 1 question. I notice that the JSFL does not do anything with embedded font symbols - is there anything that one can do to export these on a frame other than the first frame? I notice that even with that box unchecked they seem to get exported in the first frame.

thanks again

Posted by: da5id on Apr 19, 2005 1:55pm

you rock man! this article has saved my butt!! million thanks.

Posted by: Semprini on May 3, 2005 3:28pm

Thank you so much Grant. There were so many websites that I searched through that could not solve this problem. Your solution fixed it brilliantly!

Posted by: Gerry on Jun 14, 2005 7:29pm

Thank a million, you saved me from haveing another white night.

just a quick note, for sound files (in my case that where the weight of the movie clip was).

i had to put each instance in a different frame.

You are still my hero, got o get into this jsfl speil.

Cheers, gideon

Posted by: gideon on Jun 18, 2005 1:19pm URL: http://www.journeytotheweb.com

I get an output screen full of errors like this:

**Error** C:\Documents and Settings\rolivares\ConfiguraciÃ³n local\Datos de programa\Macromedia\Flash MX 2004\en\Configuration\Classes\mx\data\formatters\NumberFormatter.as: Line 18: The class 'mx.data.binding.Formatter' could not be loaded.

{

any ideas why this happens.

im pretty sure i did exactly what is mentioned in this article.

Any help is greatly appreciated

Thank you

Roric

Posted by: Roric on Jul 8, 2005 8:15am

Ok I think i figured out whats happening.

ItÂ´s loading all of the components ok (datagrid,comboboxes,etc..)except for the DataBindingClasses, no idea why.

The DataBindingClasses are in the library and it is NOT exporting to the first frame.

help please..

Posted by: Roric on Jul 8, 2005 8:45am

This is just what I'm already doing, I'm sad to hear there isn't a better way. I'm wondering what it is you do with sound files that don't have an intuitive visual representation. Do you just put them in otherwise empty movieclips on the stage, as I have done in the past? So ugly!

Posted by: Jonathan Decker on Jul 15, 2005 10:36pm

I have added an updated JSFL that also handles the preloading of audio files (see the excerpt at the end of this post)

Posted by: Lanny on Jul 16, 2005 1:36pm URL: http://www.gskinner.com

As with da5id above, the biggest thing in my flash file are a couple fonts embedded in the library. Even following the advice above and using the JSFL, I can't get these fonts to load in anything but the first frame. Anyone know of a way to get library fonts to load up somewhere other than the first frame? Thanks.

Posted by: Jordan on Jul 18, 2005 9:14pm

I followed your procedure and got my preloader working(thanks for posting this article), but the problem is that my app uses the datagrid component and when I export classes to any frame other than 1, the column headers do not appear. I think this is a bug with the datagrid component.

Any Ideas?

Posted by: Blaine on Aug 15, 2005 12:30pm

the FLFile error is caused by not updating to Flash 7.2 (free upgrade on MM site @ http://www.macromedia.com/support/flash/downloads.html)

Posted by: Lanny on Sep 7, 2005 8:56am URL: http://www.gskinner.com

http://www.u.mat.co.il

Posted by: u.mat on Aug 17, 2006 1:24pm URL: http://www.u.mat.co.il

This works great and thanks for the JSFL! Realy useful.

Thank you!

Posted by: Daniel on Dec 22, 2007 9:29pm

he FLFile error is caused by not updating to Flash 7.2 (free upgrade on MM site @ http://www.macromedia.com/support/flash/downloads.html)

Posted by: islami sohbet on Feb 1, 2008 6:29am URL: http://www.muslumannesil.net

For Bruce, to correct your comment, the idea of the barcode began in 1932 and began implementation measures in 1948. There may not be an idea to implant people against their will, but what if that was the only means of accessing your accounts and other information.

Posted by: programlar on Feb 3, 2008 10:11am URL: http://www.indirbir.net

o correct your comment, the idea of the barcode began in 1932 and began implementation measures in 1948. There may not be an idea to implant people against their will, but what if that was the only means of accessing your accounts and other information.

Posted by: gravedigger on Apr 19, 2008 1:32pm URL: http://www.freedownload.gen.tr

Internal Preloading in Flash MX 2004

Posted on August 17, 2004 by Grant Skinner

32 Comments

Leave a Reply Cancel reply