源文出处：http://www.bit-101.com/blog/?p=946

[Note, although this post is right now over a year and a half old, it continues to be one of the most visited pages on my site. If you are just showing up here now, you should note that the data here is a bit dated and may not work exactly as described in the current version of the flex SDK. In fact, I am pretty sure it DOESN'T work as described anymore. Feel free to read through this for some overall info, but check all the comments as well, which may have more info or links to more up-to-date data. I haven't had to deal with this situation since I first wrote this, so don't have the current method for making AS3 preloaders to hand.]

It’s an age old problem. Let’s go back to AS2: You have a relatively large SWF, consisting of exported movie clips in the library, and/or a good deal of code contained in classes. All classes and exported assets load in prior to frame one being displayed, so the viewer sees nothing while it is all loading in.

Solution: Turn off "export first frame" on your exported assets, and place an instance on some frame in the timeline to force them to be compiled into the SWF. For classes, set classes to export to some later frame. Then put your preloader on frame one, stop the timeline, loop until everything is loaded, then jump to an initialization frame.

Now jump to AS3 with mxmlc. There is no timeline. Embedded assets and all classes load in prior to frame one as in a default IDE-created SWF. So, how do you create a preloader?

Well, if you are using flex, it’s all programmed in there for you, and while I don’t know the specifics, I know you can specify a custom preloader in flex, and there is obviously a default preloader in a Flex app. Since the Flex framework is all written in AS3, I knew there must be some way to do this in an AS3 only project, but it wasn’t very clear. In fact, you might say it was rather hidden. My first idea was to check the compiler arguments. These two seemed interesting:

frames.frame label class name [...]
Specifies a SWF file frame label with a sequence of class names that are linked onto the frame.
This is an advanced option.

generate-frame-loader=true|false
Toggles the generation of an IFlexBootstrap-derived loader class.
This is an advanced option.

But that is the entire extent of the documentation on the subject, and doing a web search didn’t turn up a whole lot more.

Then, last Thursday, Ted Patrick happened to be in Boston, and stopped by for a tour of Brightcove. We were sitting there talking to Brian Deitte, who was also part of the Flex team til a few months ago and it occurred to me that one of these guys must have the answer. They pointed me to the [Frame] metadata tag, and said to check out the source for mx.core.Application. Sure enough, I see the following:

/**
* The frameworks must be initialized by SystemManager.
* This factoryClass will be automatically subclassed by any
* MXML applications that don’t explicitly specify a different
* factoryClass.
*/
[Frame(factoryClass="mx.managers.SystemManager")]

And, checking out SystemManager, I see a few interesting tidbits:

// NOTE: Minimize the non-Flash classes you import here.
// Any dependencies of SystemManager have to load in frame 1,
// before the preloader, or anything else, can be displayed.

and

* The SystemManager is the first display class created within an application.
* It is responsible for creating an mx.preloaders.Preloader that displays and
* mx.preloaders.DownloadProgressBar while the application finishes loading,
* then creates the mx.core.Application instance.

And finally, the create() method, which is basically called when the movie is fully loaded in:

A bit more searching around led me to this post by Roger Gonzalez, which explains it a bit more, though highly oriented towards Flex. Even he describes the Frame tag as "semi-secret and bizarre". He also mentions that it is basically an inline alias for the "frames" compiler configuration option. So, with a bit more work I could probably figure out how to do it that way, but the metadata way seems easier so far.

This was enough for me to start testing in AS3 only. Here’s the deal:

First you create your main class as usual, and point the compiler to that as the class to compile.

You then use the [Frame] metadata tag, passing in another class as the factoryClass, like so:

[Frame(factoryClass="MyFactoryClass")]

This is where the magic happens. Basically, the Frame tag forces the compiler to create a two-frame SWF. All of your embedded assets, your main class and any classes that are used by the main class are forced into frame two. The only thing that goes into frame one is your specified factory class and any classes or embedded assets that it uses. Hence the above warning to include minimal other classes in this class.

So, this factory class is where you create your preloader. Generally, you want to stop the timeline, and then set up an enterFrame listener, or a timer to check currentFrame against totalFrames. When they are equal, it means that the rest of your classes and assets are loaded in and ready to go. You then want to call nextFrame() to move to frame two so those classes and assets will be available. At that point, you can instantiate your main class, using getDefinitionByName(). This allows your factory class to create a new instance of the main class without compiling a reference to that class into it – which would force the main class and everything else to load in frame one and defeat your preloader.

The slightly weird thing about this setup is that you are usually used to your main class being the "document class". That is, the main class represents the main timeline of the SWF. In this setup though, the factory class actually becomes the document class. This has a few ramifications:

1. The factory class has to extend MovieClip. NOT Sprite! It actually has frames, so it should be a MovieClip.
2. When you create an instance of your main class, you then have to do an addChild to get it onto the display list.
3. Your main class will not be the at the base of the display list. It will be a child of your factory class.
4. Because you instantiate your main class, and THEN add it to the display list, be careful not to have its constructor call code which will refer to stage, as its stage property will not be available until after it is added.

OK, let’s look at an example. First we have the main class, which we will target with mxmlc:

This doesn’t do much other than embed a large jpeg image, which makes the SWF come in at over 3 MB. If you were to compile this normally, the end viewer would see a blank screen until that jpeg fully loaded in. But the addition of the line:

[Frame(factoryClass="com.bit101.MyFactory")]

causes the main class, along with the embedded jpeg, to go into frame two. Note that in this case it is safe for the the constructor to call the init function directly. But, as mentioned earlier, you might want to delay that until the instance is actually added to the display list, to avoid null stage references, etc.

Now let’s look at the factory class:

PLAIN TEXT

Actionscript:

1. package com.bit101
2. {
3. import flash.display.DisplayObject;
4. import flash.display.MovieClip;
5. import flash.display.StageAlign;
6. import flash.display.StageScaleMode;
7. import flash.events.Event;
8. import flash.utils.getDefinitionByName;
9.  
10. public class MyFactory extends MovieClip
11. {
12. public function MyFactory()
13. {
14. stop();
15. stage.scaleMode = StageScaleMode.NO_SCALE;
16. stage.align = StageAlign.TOP_LEFT;
17. addEventListener(Event.ENTER_FRAME, onEnterFrame);
18. }
19.  
20. public function onEnterFrame(event:Event):void
21. {
22. graphics.clear();
23. if(framesLoaded == totalFrames)
24. {
25. removeEventListener(Event.ENTER_FRAME, onEnterFrame);
26. nextFrame();
27. init();
28. }
29. else
30. {
31. var percent:Number = root.loaderInfo.bytesLoaded / root.loaderInfo.bytesTotal;
32. graphics.beginFill(0);
33. graphics.drawRect(0, stage.stageHeight / 2 – 10,
34. stage.stageWidth * percent, 20);
35. graphics.endFill();
36. }
37. }
38.  
39. private function init():void
40. {
41. var mainClass:Class = Class(getDefinitionByName("FrameTest"));
42. if(mainClass)
43. {
44. var app:Object = new mainClass();
45. addChild(app as DisplayObject);
46. }
47. }
48. }
49. }

Note that it extends MovieClip. It immediately stops the timeline and adds an enterFrame listener. In that handler, it checks to see if framesLoaded == totalFrames. If so, it calls nextFrame() to make the main class available, and then calls init, which gets a reference to the main class, instantiates it, and adds it to the display list.

While second frame is still loading, it simply draws a progress bar on the stage, using root.loaderInfo.bytesLoaded and root.loaderInfo.bytesTotal to access the percent loaded.

This is a pretty simple example, but shows you how it works. I’m pretty sure it’s the only documentation out there on how to do this in AS3, so feel free to share it around.

原文翻译大致如下：

在介绍这个 Tag 之前，先说说 Flash SWF 档案 Streaming 与 Preloading
很早之前 Flash 為了要做到一边下载一边拨放的功能
把资料分别散佈到主时间轴的影格内
只要该影格所需的资料下载完毕，该影格便可进行拨放
我记得以前是号称 SWF Streaming，不过现在与 RTMP Streaming 相比
恐怕只能称作 SWF 渐进式下载 (Progressive Download) 而已了
最有代表性的应该就是 Flash Test Movie 时候，上面哪个长条图了
结果渐进式下载常常会发生停顿的现象
要另外写 Preloading 程式…
结果大多数情况下又回到了，全部下载完才能拨放的情况~~
只是可以看到下载进度而已….
要 Preloading 程式能够正常执行
便需要能够让 Preloading 程式在主时间轴影格 1 输出
其它的内容放在后面的影格
让 Preloading 程式儘量小可以快速被下载完毕
好执行它的工作
在 Flash 开发工具内有好用的时间轴面板
很容易把 Preloading 程式与其它内容用影格分开来
但是在 Flex Builder 裡面并没有时间轴面板啊
连怎样作出多影格的 SWF 都不知道
那要怎样管理 Preloading 呢?
答案就是标题 Flex Metadata Tag – Frame FactoryClass
先看一个简单的使用例子：

Main.as package { import flash.display.*; [Frame(factoryClass="Factory")] public class Main extends MovieClip { public function Main():*{ } } } Factory.as
package { import flash.display.*; public class Factory1 extends MovieClip { public function Factory():*{ } } }

Frame FactoryClass 标籤只对 Application Class (Document Class) 有作用
功能是用指定的 Class 取代作為 Application Class
并且在指定的 Class 增加影格数量
从上面的例子来看 Factory Class 便成為新的 Application Class
且具有两个影格，影格标籤分别為 ["Factory", "Main"]
同时也兼具 Preloading、初始化 Main Insatnce 的任务
接下来，利用 FactoryClass 作一个完整的 Preloading

Main.as package { import flash.display.*; [Frame(factoryClass="Factory")] public class Main extends MovieClip { // 随便嵌入一张大图，以突显 Preloading 作用 [Embed(source="assets/1600.jpg")] public var img:Class; public function Main():*{ this.addChild(new img()); } } } Factory.as
package{ import flash.display.*; import flash.events.*; import flash.text.*; import flash.utils.*; public class Factory extends MovieClip { public var percentTxt:TextField; public function Factory():*{ init(); } private function init():*{ stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; percentTxt = new TextField(); percentTxt.width = 100; percentTxt.height = 20; percentTxt.x = (stage.stageWidth – 100) / 2; percentTxt.y = (stage.stageHeight – 20) / 2; percentTxt.border = true; var tf:TextFormat = percentTxt.getTextFormat(); tf.align = TextFormatAlign.CENTER; percentTxt.defaultTextFormat = tf; this.addChild(percentTxt); this.addEventListener(Event.ENTER_FRAME, doEnterFrame); doEnterFrame(); stop(); } public function doEnterFrame(event:Event = null):void{ var percent:Number = Math.round(loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100); percentTxt.text = percent + "%"; if (loaderInfo.bytesLoaded == loaderInfo.bytesTotal) { this.removeEventListener(Event.ENTER_FRAME, doEnterFrame); this.removeChildAt(0); this.gotoAndStop(2); // Main Class 初始化 var main:Class = Class(getDefinitionByName("Main")); this.addChild(new main()); } } } }

※FactoryClass 使用要点：
1. 不可以在 Factory Class 内明确引用其它非 Preloading 期间需要用到的 Class，
否则会造成引用的 Class 在影格 1 输出，失去 Preloading 作用；
应该待读取完毕后，使用反射 (Reflection) flash.utils.getDefinitionByName 方式取得 Class。
2. SWF 载入完毕后，仍要让拨放头 (playhead) 前进，Main Class 才可以被使用。