Flex 预加载特效实例

这个预加载特效没有经过严格测试及通用性测试，它仅在firefox及mac中测试通过。

这个组件显示了一个application(应用)最后一次shut down的画面快照，该组件通过编辑器自动生成的HTML文件来调用onBeforeUnload。当application shut down后，它保存了application的state及画面快照在本地共享变量中(SharedObject)，当下一次应用启动的时候，它抓取该快照并正确显示，所以它显示的非常快，也就意味着当你的主文件还未下载完毕，它就已经可以看见界面了。

<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.myflexhero.com/share/flex-hero-flex4/578 -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
			   preloader="SnapShotPreloader" initialize="setup()" >
	<fx:Script>
		<![CDATA[
			import mx.events.SandboxMouseEvent;

			private function setup():void
			{
				ExternalInterface.addCallback("onBeforeUnload", onBeforeUnload);
				var so:SharedObject = SharedObject.getLocal("preloaderImage");
				if (so.data.listSelectedIndex)
					list1.selectedIndex = so.data.listSelectedIndex;
				if (so.data.bbSelectedIndex)
					bb.selectedIndex = so.data.bbSelectedIndex;
				if (so.data.taText)
					ta.text = so.data.taText;
				if (so.data.padData)
				{
					display.graphics.lineStyle(1, 0);
					var commands:String  = so.data.padData;
					var arr:Array = commands.split(",");
					var n:int = arr.length;
					for (var i:int = 0; i < n; i++)
					{
						var cmd:String = arr[i];
						var args:Array = cmd.split(" ");
						switch (args[0])
						{
							case "M":
								display.graphics.moveTo(args[1], args[2]);
								break;
							case "L":
								display.graphics.lineTo(args[1], args[2]);
								break;
						}
					}
				}
			}
			private function onBeforeUnload():void
			{
				var bmd:BitmapData = new BitmapData(width, height);
				bmd.draw(this);
				var ba:ByteArray = bmd.getPixels(new Rectangle(0, 0, width, height));
				ba.compress();
				var so:SharedObject = SharedObject.getLocal("preloaderImage");
				so.data.preloaderImage = ba;
				so.data.width = width;
				so.data.height = height;
				so.data.listSelectedIndex = list1.selectedIndex;
				so.data.bbSelectedIndex = bb.selectedIndex;
				so.data.taText = ta.text;
				so.data.padData = drawCommands.join(",");
			}

			override protected function commitProperties():void
			{
				super.commitProperties();
				var t:Number = getTimer();
				while (getTimer() - t < 1000);
			}

			override protected function measure():void
			{
				super.measure();
				var t:Number = getTimer();
				while (getTimer() - t < 1000);
			}

			override protected function updateDisplayList(w:Number, h:Number):void
			{
				super.updateDisplayList(w, h);
				var t:Number = getTimer();
				while (getTimer() - t < 1000);
			}

			private var drawCommands:Array = [];
			private var mouseIsDown:Boolean;
			private function pad_mouseDownHandler(event:MouseEvent):void
			{
				mouseIsDown = true;
				display.graphics.lineStyle(1, 0);
				display.graphics.moveTo(event.localX, event.localY);
				drawCommands.push("M " + event.localX + " " + event.localY);
				systemManager.getSandboxRoot().addEventListener(MouseEvent.MOUSE_UP, pad_mouseUpHandler);
				systemManager.getSandboxRoot().addEventListener(SandboxMouseEvent.MOUSE_UP_SOMEWHERE, pad_mouseUpHandler);
				pad.addEventListener(MouseEvent.MOUSE_MOVE, pad_mouseMoveHandler);                
			}
			private function pad_mouseUpHandler(event:MouseEvent):void
			{
				systemManager.getSandboxRoot().removeEventListener(MouseEvent.MOUSE_UP, pad_mouseUpHandler);
				systemManager.getSandboxRoot().removeEventListener(SandboxMouseEvent.MOUSE_UP_SOMEWHERE, pad_mouseUpHandler);
				pad.removeEventListener(MouseEvent.MOUSE_MOVE, pad_mouseMoveHandler);                
				mouseIsDown = false;
			}
			private function pad_mouseMoveHandler(event:MouseEvent):void
			{
				display.graphics.lineTo(event.localX, event.localY);
				drawCommands.push("L " + event.localX + " " + event.localY);
			}
		]]>
	</fx:Script>
	<s:Panel width="100%" height="100%" title="Big App" >
		<s:List id="list1">
			<s:dataProvider>
				<s:ArrayList>
					<fx:String>One</fx:String>
					<fx:String>Two</fx:String>
					<fx:String>Three</fx:String>
					<fx:String>Four</fx:String>
					<fx:String>Five</fx:String>
					<fx:String>Six</fx:String>
				</s:ArrayList>
			</s:dataProvider>
		</s:List>    
		<s:ButtonBar id="bb" x="200">
			<s:dataProvider>
				<s:ArrayList>
					<fx:String>One</fx:String>
					<fx:String>Two</fx:String>
					<fx:String>Three</fx:String>
					<fx:String>Four</fx:String>
				</s:ArrayList>
			</s:dataProvider>
		</s:ButtonBar>
		<s:Panel title="Scratch Pad" y="150" width="150" height="150" >
			<s:Button label="Clear" click="drawCommands.length = 0;display.graphics.clear()" />
			<s:Group id="pad" left="0" top="24" right="0" bottom="0"
					 mouseDown="pad_mouseDownHandler(event)" >
				<s:Rect left="0" right="0" top="0" bottom="0" >
					<s:fill>
						<s:SolidColor color="0xFDFDFD" />
					</s:fill>
				</s:Rect>
			</s:Group>
			<s:SpriteVisualElement id="display" left="0" top="24" right="0" bottom="0" />
		</s:Panel>
		<s:TextArea id="ta" x="200" y="150" width="200" height="150" />
	</s:Panel>
</s:Application>

个人觉得此实例的主要看点是使用了一些不常用的系统级类，有一定参考价值。当然若需要详细了解系统级类，直接参考API即可。

From http://www.myflexhero.com/share/flex-hero-flex4/flex-hero-components/flex-module/578