Flex锁定页面遮罩

时间：2010-10-09 来源：董广祥

要做一個跟Confirm確認視窗差不多的功能
要先鎖定整個畫面
然後跳出別的操作畫面
等操作結束後
再將畫面解除鎖定

先用Flash做一個元件
設定形狀、顏色、大小、透明度等等
匯出成一個swf檔給Flex使用

在Flex用一個Canvas和SWFLoader
放在最上層
用visible去控制顯示或隱藏
這樣就可以鎖住畫面了


1	<?xml version="1.0" encoding="utf-8"?>
2	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
3	width="400" height="400" verticalScrollPolicy="off" horizontalScrollPolicy="off">
4
5	<mx:Script>
6	<![CDATA[
7	import mx.controls.Alert;
8
9	//將外部資源嵌入swf檔
10	[Embed(source="swf/waring_base_bg.swf")]
11	[Bindable]
12	private var myWaring_bg_Class:Class;
13
14	[Embed(source="swf/ico_ok.swf")]
15	[Bindable]
16	private var myIco_ok_Class:Class;
17
18	private function myClickFunction():void{
19	myMask.visible = true;
20
21	//遮罩上的Canvas
22	var myWaring:Canvas = new Canvas();
23	myWaring.x = 70;
24	myWaring.y = 70;
25	myCanvas.addChild(myWaring);
26
27	//遮罩上的圖示swf
28	var myWaring_bg:SWFLoader = new SWFLoader();
29	myWaring_bg.source = myWaring_bg_Class;
30	myWaring.addChild(myWaring_bg);
31
32	//遮罩上的圖示按鈕
33	var myIco_ok:SWFLoader = new SWFLoader();
34	myIco_ok.source = myIco_ok_Class;
35	myIco_ok.x = 125;
36	myIco_ok.y = 125;
37	myWaring.addChild(myIco_ok);
38
39	myIco_ok.addEventListener(MouseEvent.CLICK, onClick_Ico_ok);
40	}
41
42	//點擊遮罩上的按鈕
43	private function onClick_Ico_ok(e:MouseEvent):void{
44	myMask.visible = false; //將遮罩隱藏
45
46	//除了遮罩以外，將遮罩上的全部東西移除
47	for(var i:int = 1; i < myCanvas.getChildren().length; i++){
48	myCanvas.removeChildAt(i);
49	}
50	}
51
52	]]>
53	</mx:Script>
54
55	<mx:Button x="150" y="10" label="Button" click="myClickFunction();"/>
56
57	<mx:Canvas id="myCanvas">
58	<mx:SWFLoader id="myMask" source="@Embed('swf/mask.swf')" scaleX="10" scaleY="10" visible="false"/>
59	</mx:Canvas>
60
61	</mx:Application>
	開新視窗(view plain) \| 列印(print) \| ?