flex使用半透明图层的一些心得

诸如js中lightbox这样用一个半透明图层覆盖原有页面的效果在flex中应用也很广泛，一些弹出框效果使用这种半透明图层屏蔽原页面操作会使得ui交互更友好，而且在flex中，这种实现并不麻烦，最近操练了一下也有一点心的。

private var cover:Canvas;

			private function pop():void{
				cover = new Canvas();
	    		cover.styleName = "cover";
	    		cover.visible = false;
                cover.visible=true;
				cover.width=this.width;
				cover.height=this.height;
				cover.move(0,0);
				this.setChildIndex(serverInput,3);
				serverInput.visible = true;
			}

稍微解释一下，flex中会将后产生的组件自动放在最上层，所以我们在as函数中创造的这个cover曾会在页面的最上面。

this.setChildIndex(serverInput,3);

这个函数是将也面本来的一个windows移到最上面，setchildindex可以改变本来组件放置的前后顺序，不过这个不同于html设置深度可以设置-9999，这里的数字只是表示顺序而不是具体深度。

在具体应用中，可以用css来给弹出层设置样式，譬如我这里就是用一个名为cover的css属性控制这个半透明层的样式，利用backgroundAlpha属性控制透明程度就好了。