打造炫丽的旋转FLEX界面

最新推荐文章于 2025-11-05 01:31:20 发布

最新推荐文章于 2025-11-05 01:31:20 发布 · 125 阅读

文章标签：

#Flex #软件测试 #F#

FLEX 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一种使用Flex进行界面布局的方法，并实现了导航栏及主显示区域的3D翻转效果。通过具体步骤展示了如何构建导航组件和主界面，并利用DistortionEffects库实现界面间的过渡动画。

花了些时间把软件界面整理了下,先看效果图

布局

刷新导航栏(抓的图不是很好应该是导航条的开门效果)

内容界面的3D翻转效果

工程布局说明

1 org 放置对应的模块组界面和AS,例如用户管理模块属于appmanager模块组,则在上图appmanager目录下建立USERmanager目录,并建立相应的界面文件和as

2 herper 放置辅组自定义控件和辅组模块

3 view放置公共模块,如导航等...

布局主界面

1 设置 WindowedApplication 属性

layout="vertical"

horizontalAlign="center"

2 分别加入三个 HBox 作为 header body bottom.属性:width="100%" height="100%"

此时布局如下(没有按钮)

接下来载入导航

1 在view目录下建立 Navs.mxml,右击view-->new-->MXML component ,文件名:"Navs", based on "Panel"

2 拖入 List 控件属性 width="100%" height="100%" id="Navlist" dataProvider="{listdate.state}"

3 构造测试数据

	<mx:Model id="listdate">
		<states>
			<state label="应用管理" data="2"/>
			<state label="模块管理" data="3"/>
		</states>		
	</mx:Model>

这样一个就弄好了导航,要怎样是这个导航显示在界面上呢?

WindowedApplication 中构造一个函数

			function iniApp():void{
				var nav:Navs = new Navs();
				nav.id="nav";
				nav.name="nav";
				nav.width=160;
				nav.setStyle("fontSize",12);
				nav.layout="horizontal";	
				midlayout.addChild(nav);	
			}

设置 WindowedApplication 属性 creationComplete="iniApp()"

依照此方法继续添加导航右边的主显示区 MainBoard iniApp函数改为

			function iniApp():void{
				var nav:Navs = new Navs();
				nav.id="nav";
				nav.name="nav";
				nav.width=160;
				nav.setStyle("fontSize",12);
				nav.layout="horizontal";	
				
				var mainBoard:MainBoard = new MainBoard();
				mainBoard.title="应用管理";
				mainBoard.id="mainBoard";
				mainBoard.name = "mainBoard";																						
				midlayout.addChild(nav);			
				midlayout.addChild(mainBoard);
			}

注意一定要先 midlayout.addChild(nav)

好了, 这样界面布局基本完成了.接下来添加选择效果,

先把 DistortionEffects.swc 加入libs中,在bottom中添加几个按钮用于测试

在 WindowedApplication 中添加函数

			public function flipTonav(s:String) : void
			{									
				var e : Door = new Door(this.midlayout.getChildByName(s) );										
				e.siblings = [ this.midlayout.getChildByName(s) ];
				e.direction = DistortionConstants.LEFT;
				e.horizontalLightingLocation = DistortionConstants.LEFT;			
				e.duration = 1000;
				e.play();
			}

只要给按钮添加 click事件 click="flipTonav('nav');" 就可以看到效果了.

对于 mainBoard 也是同样的道理,只是我这里用的是3D 所以 Door 改为 CubeRotate 即

				var obj : Object = 	this.parent.getChildByName("mainBoard");				
				var e : CubeRotate =new CubeRotate(obj);														
				e.siblings = [ obj ];
				e.direction = DistortionConstants.LEFT;
				e.horizontalLightingLocation = DistortionConstants.LEFT;			
				e.duration = 1000;
				e.play();