flex---->行为和特效

最新推荐文章于 2023-04-06 09:39:15 发布

ncepustrong

最新推荐文章于 2023-04-06 09:39:15 发布

阅读量1.1k

点赞数

分类专栏： Flex 文章标签： application button encoding actionscript datagrid layout

Flex 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

行为和特效

Flash是一个表现力非常强的平台，可以创造出一切想要的特效效果。在Flex所提供的类库中，就包含了一些行为和特效，可以实现表现力很强的动画效果。
使用行为、拖放行为特效、使用ViewState、过度特效、使用ToolTips

一、使用行为
行为可以添加一些效果和动作，以相应用户和程序的操作。例如，使用行为，可以使一个窗体慢慢的淡入，直到完全可见。

1.1 行为简介
在Flex中，提供了一些有关行为的组件，可以通过使用MXML或者ActionScript定义这些行为。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<!-- 定义翻转效果 -->
	<mx:Rotate id="myRT" duration="1000" />
	<!-- 设置按钮的 mouseDownEffect 属性-->
	<mx:Button id="myButton" label="单击这里" 
		mouseDownEffect="{myRT}" x="44" y="30" fontSize="14"/>
</mx:Application>

1.2 在ActionScript中使用行为
除了使用MXML代码创建行为外，还可以使用ActionScript代码。所有的行为类都放在mx.effects包中，所以在使用行为类之前需要引入此包。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="createEffect(event);">
	<mx:Script>
		<![CDATA[
			// 导入效果类
			import mx.effects.Resize;
			// 创建一个 Resize 类
			private var resizeLarge:Resize = new Resize();
			
			private function createEffect(eventObj:Event):void 
			{
				// 设置特效目标对象
				resizeLarge.target = myTA;
			}
			
			private function startEffect():void
			{
				resizeLarge.end();
				
				// 设置宽度和高度
				resizeLarge.widthTo = 250;
				resizeLarge.heightTo = 250;
				// 设置频率
				resizeLarge.duration = 550;
				
				resizeLarge.play();
			}
			
			private function resetEffect():void
			{
				resizeLarge.end();
				
				// 设置宽度和高度
				resizeLarge.widthTo = 200;
				resizeLarge.heightTo = 200;
				// 设置频率
				resizeLarge.duration = 550;
				
				resizeLarge.play();
			}
		]]>
	</mx:Script>
	<mx:VBox x="40" y="28">
		<mx:HBox>
			<mx:Button label="开始" fontSize="14" click="startEffect()"/>
			<mx:Button label="重置" fontSize="14" click="resetEffect()"/>
		</mx:HBox>
		<mx:TextArea id="myTA" height="200" width="200" 
			text="Hello World."  fontSize="14" />
	</mx:VBox>
</mx:Application>

二、拖放行为特效
拖放操作可以把数据从一个地方拖到另外一个地方。在可视化的应用系统中，这样的操作是非常便捷的。

2.1 容器之间移动数据
几乎每个数据容器组件都有两个属性：dragEnabled和dropEnabled。dragEnabled属性表示允许从组件中拖出数据，而dropEnabled属性则表示允许向组件中放置数据。
默认情况下，当移动数据的时候，向目标对象中添加数据，同时在源对象中就会删除相应的数据。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
				creationComplete="initApp()">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			private function initApp():void 
			{
				// 设置数据源
				srclist.dataProvider =
					new ArrayCollection(['软件开发工程师', '网络维护工程师', '软件测试工程师']);
				destlist.dataProvider = new ArrayCollection([]);
			}
		]]>
	</mx:Script>
	<mx:HBox>
		<mx:List id="srclist" allowMultipleSelection="true" 
				 dragEnabled="true" dragMoveEnabled="true" 
				 width="150" height="200" fontSize="14"/>
		<mx:List id="destlist" dropEnabled="true" 
				 width="150" height="200" fontSize="14"/>
	</mx:HBox>
</mx:Application>

2.2 容器之间复制数据
在默认情况下，设置dragEnabled和dropEnabled属性的值，可以移动数据。但是有些情况下，需要复制数据。在数据容器之间复制数据，需要设置dragDrop事件。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
				creationComplete="initApp();">
	
	<mx:Script>
		<![CDATA[
			import mx.events.DragEvent;
			import mx.managers.DragManager;
			import mx.core.DragSource;
			import mx.collections.IList;
			import mx.collections.ArrayCollection;
			
			private function initApp():void 
			{
				srcgrid.dataProvider = new ArrayCollection([
					{Artist:'周杰伦', Album:'魔杰作', Price:41.68},
					{Artist:'王力宏', Album:'摇滚怎么了', Price:39.09},
					{Artist:'陶喆', Album:'太美丽', Price:36.59},
					{Artist:'林俊杰', Album:'西界', Price:40.66}
				]);
				
				destgrid.dataProvider = new ArrayCollection([]);
			}
			
			private function dragDropHandler(event:DragEvent):void 
			{
				if (event.dragSource.hasFormat("items"))
				{
					// 取消默认行为
					event.preventDefault();
					// 隐藏目标对象的指示器
					event.currentTarget.hideDropFeedback(event);
					// 获取拖放的目标对象
					var dropTarget:DataGrid = DataGrid(event.currentTarget);
					// 获取复制的数据集
					var itemsArray:Array = event.dragSource.dataForFormat("items") as Array;
					// 复制数据
					var tempItem:Object = {
						Artist1: itemsArray[0].Artist, 
							Album1: itemsArray[0].Album, Price1: 
							itemsArray[0].Price
					};
					// 获取拖放的目标对象的位置
					var dropLoc:int = dropTarget.calculateDropIndex(event);
					// 添加数据到目标对象的相应位置
					IList(dropTarget.dataProvider).addItemAt(tempItem, dropLoc);
				}
			}
		]]>
	</mx:Script>
	
	<mx:HBox>
		<mx:VBox>
			<mx:Label text="可选专辑" fontSize="14"/>
			<mx:DataGrid id="srcgrid"
						 dragEnabled="true"
						 fontSize="12">
				<mx:columns>
					<mx:DataGridColumn dataField="Artist" headerText="歌手"/>
					<mx:DataGridColumn dataField="Album" headerText="专辑"/>
					<mx:DataGridColumn dataField="Price" headerText="价格"/>
				</mx:columns>
			</mx:DataGrid>
		</mx:VBox>
		<mx:VBox>
			<mx:Label text="已经选购的专辑" fontSize="14"/>
			<mx:DataGrid id="destgrid"
						 dropEnabled="true"
						 fontSize="12"
						 dragDrop="dragDropHandler(event);">
				<mx:columns>
					<mx:DataGridColumn dataField="Artist1" headerText="歌手"/>
					<mx:DataGridColumn dataField="Album1" headerText="专辑"/>
					<mx:DataGridColumn dataField="Price1" headerText="价格"/>
				</mx:columns>
			</mx:DataGrid>
		</mx:VBox>
	</mx:HBox>
</mx:Application>

2.3 手动添加拖放功能
数据控件中已经内置了拖放功能的支持，但是其他Flex组件却不受支持。想要非数据控件也支持拖放功能，必须通过相应的事件驱动来实现。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.core.DragSource;
			import mx.managers.DragManager;
			import mx.events.*;
			import mx.containers.Canvas;
			
			private function mouseMoveHandler(event:MouseEvent):void 
			{
				// 获取拖放的源组件
				var dragInitiator:Canvas = Canvas(event.currentTarget);
				// 获取组件的颜色值
				var dragColor:int = dragInitiator.getStyle('backgroundColor');
				// 创建一个 DragSource 对象.
				var ds:DragSource = new DragSource();
				// 添加数据到对象中
				ds.addData(dragColor, 'color');
				// 调用 DragManager 类的 doDrag() 方法
				DragManager.doDrag(dragInitiator, ds, event);
			}
			
			private function dragEnterHandler(event:DragEvent):void 
			{
				// 判断源的数据格式
				if (event.dragSource.hasFormat('color')) 
				{
					// 获取目标对象
					var dropTarget:Canvas = Canvas(event.currentTarget);
					// 接受拖放
					DragManager.acceptDragDrop(dropTarget);
				}
			}
			
			private function dragDropHandler(event:DragEvent):void 
			{
				var data:Object = event.dragSource.dataForFormat('color');
				// 设置颜色.
				myCanvas.setStyle("backgroundColor", data);
			}
		]]>
	</mx:Script>
	<!-- 可以拖放两种颜色的箱子. -->
	<mx:VBox x="29" y="23">
		<mx:HBox>
			<mx:Canvas
				width="30" height="30"
				backgroundColor="red"
				borderStyle="solid"
				mouseMove="mouseMoveHandler(event);"/>
			<mx:Canvas
				width="30" height="30"
				backgroundColor="green"
				borderStyle="solid"
				mouseMove="mouseMoveHandler(event);"/>
		</mx:HBox>
		<!--  使用 dragEnter and dragDrop 事件允许拖放. -->
		<mx:Canvas id="myCanvas"
				   width="100" height="100"
				   backgroundColor="#FFFFFF"
				   borderStyle="solid"
				   dragEnter="dragEnterHandler(event);"
				   dragDrop="dragDropHandler(event);"/>
		<mx:Button id="b1"
				   label="清空"
				   click="myCanvas.setStyle('backgroundColor', '0xFFFFFF');"/>
	</mx:VBox>
</mx:Application>

三、使用View States
通过View States可以改变一个组件或是应用程序的外观，以相应用户的操作。例如，Adobe Reader阅读器中，当单击侧边栏相应按钮时，就会显示或隐藏书签和页面的导航栏。

3.1 使用View States改变局部视图
在Flex内置提供的View States组件中，可以向目标容器添加任意组件，还可以使用SetProperty设置其任意属性的值。通过这些特性，可以更新局部视图。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<!-- 定义 view states 组件的属性.-->
	<mx:states>
		<mx:State name="Register">
			<!-- 在表单中添加一个 TextInput 控件. -->
			<mx:AddChild relativeTo="{loginForm}"
				position="lastChild">
				<mx:FormItem id="confirm" label="再次确认密码:">
					<mx:TextInput/>
				</mx:FormItem>
			</mx:AddChild>
			<!-- 设置属性.-->
			<mx:SetProperty target="{loginPanel}" name="title" value="注册"/>
			<mx:SetProperty target="{loginButton}" name="label" value="注册"/>
			<!-- 移除相应控件.-->
			<mx:RemoveChild target="{registerLink}"/>
			<!-- 添加相应控件-->
			<mx:AddChild relativeTo="{spacer1}" position="before">
				<mx:LinkButton label="返回登录"
					click="currentState=''"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	
	<mx:Panel id="loginPanel"
		title="登录"
		horizontalScrollPolicy="off"
		verticalScrollPolicy="off">
		
		<mx:Form id="loginForm">
			<mx:FormItem label="用户名:">
				<mx:TextInput/>
			</mx:FormItem>
			<mx:FormItem label="密码:">
				<mx:TextInput/>
			</mx:FormItem>
		</mx:Form>
		
		<mx:ControlBar>
			<mx:LinkButton id="registerLink"
				label="是否注册?"
				click="currentState='Register'"/>
			<mx:Spacer width="100%" id="spacer1"/>
			<mx:Button label="登录" id="loginButton"/>
		</mx:ControlBar>
		
	</mx:Panel>
</mx:Application>

3.2 View States之间的继承关系
为了更好地应付复杂的代码，在View States组件中内置了继承的功能。所谓的继承，就是可以从其他的View States组件中继承相同的功能，而不需要再创建或设置一次。这样就大大增强了代码的重用性，使得开发更加快速，代码维护更加容易。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:states>
		<mx:State name="NewButton">
			<mx:AddChild relativeTo="{v1}">
				<mx:Button id="b2" label="添加按钮 B2"/>
			</mx:AddChild>
			<mx:SetProperty target="{b1}"
							name="enabled" value="false"/>
		</mx:State>
		<!-- 基于NewButton创建一个新的state -->
		<mx:State name="NewButton2" basedOn="NewButton">
			<mx:AddChild relativeTo="{v1}">
				<mx:Button id="b3" label="添加按钮 B3"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	
	<mx:VBox id="v1" x="36" y="29">
		<mx:Button id="b1" label="Initial Button"/>
		<mx:Button label="NewButton状态"
				   click="currentState = 'NewButton';"/>
		<mx:Button label="NewButton2状态"
				   click="currentState = 'NewButton2';"/>
		<mx:Button label="返回到原始状态"
				   click="currentState = '';"/>
	</mx:VBox>
	
</mx:Application>

3.3 使用比较运算符
通过使用比较运算符，可以使得在同一个组件中，控制不同的视图。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:states>
		<mx:State name="Register">
			<mx:SetProperty
				target="{loginPanel}"
				name="title" value="注册"/>
			<mx:SetProperty
				target="{loginButton}"
				name="label" value="注册"/>
		</mx:State>
	</mx:states>
	
	<mx:Panel id="loginPanel" title="登录"
			horizontalScrollPolicy="off" verticalScrollPolicy="off" 
			fontSize="12" x="65" y="30">
		<mx:Form id="loginForm">
			<mx:Button label="登录" id="loginButton"/>
		</mx:Form>
		<mx:ControlBar width="100%">
			<mx:Button label="改变视图"
				click="currentState =
				currentState=='Register' ? '':'Register';"/>
		</mx:ControlBar>
	</mx:Panel>
</mx:Application>

四、过渡特效Transitions
View States是用来改变一个组件或是应用程序的外观。Transitions则是定义了在视图之间切换的动作行为。可以通过使用effect类，来定义视图切换的动画效果。

4.1 使用Transitions
Transitions组件通过使用effect类，可以设置切换视图的不同动画特效。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			// 导入 Bounce 特效
			import mx.effects.easing.Bounce;
		]]>
	</mx:Script>
	<!-- 定义 transition 效果 -->
	<mx:transitions>
		<mx:Transition>
			<mx:Parallel
				targets="{[loginPanel, registerLink, loginButton, confirm]}">
			<mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
			<mx:Sequence target="{confirm}">
			<mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>
			<mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/>
			</mx:Sequence>
			</mx:Parallel>
		</mx:Transition>
	</mx:transitions>
	<!-- 定义 states -->
	<mx:states>
		<mx:State name="Register">
			<mx:AddChild relativeTo="{loginForm}"
				position="lastChild">
			<mx:FormItem id="confirm" label="确认密码:">
			<mx:TextInput/>
				</mx:FormItem>
			</mx:AddChild>
			<mx:SetProperty target="{loginPanel}"
				name="title" value="注册"/>
			<mx:SetProperty target="{loginButton}"
				name="label" value="注册"/>
			<mx:RemoveChild target="{registerLink}"/>
			<mx:AddChild relativeTo="{spacer1}" position="before">
			<mx:LinkButton label="返回登录界面"
				click="currentState=''"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	<!-- 设置视图 -->
	<mx:Panel title="登录" id="loginPanel" fontSize="12"
		horizontalScrollPolicy="off" verticalScrollPolicy="off">
		<mx:Form id="loginForm">
			<mx:FormItem label="用户名:">
				<mx:TextInput/>
			</mx:FormItem>
			<mx:FormItem label="密码:">
				<mx:TextInput/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar>
			<mx:LinkButton id="registerLink"
				label="是否注册?"
				click="currentState='Register'"/>
			<mx:Spacer width="100%" id="spacer1"/>
			<mx:Button label="登录" id="loginButton"/>
		</mx:ControlBar>
	</mx:Panel>
</mx:Application>

五、使用ToolTips
ToolTips用来向用户提供一些相关的帮助信息，这有助于用户的操作。当用户把鼠标移动到可视化的控件中时，ToolTips就会引导用户进一步的操作程序。

5.1 使用ToolTips属性
在很多应用程序中，ToolTips都是一个标准性的功能。在Flex中也不例外，同样也提供了这样的属性。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:VBox toolTip="VBOX" fontSize="12">
		<mx:Button id="b1" label="Button 1" toolTip="这是一个按钮控件"/>
		<mx:Button id="b2" label="Button 2"/>
	</mx:VBox>
</mx:Application>

5.2 设置ToolTips样式
如果默认的ToolTips样式不理想，可以通过Style组件，自己定义一个ToolTips样式。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Style>
		ToolTip 
		{
			fontFamily: "微软雅黑";
			fontSize: 19;
			fontStyle: "italic";
			color: #FF0000;
			backgroundColor: #5596EE;
		}
	</mx:Style>
	<mx:Button id="b1" label="按钮" 
		toolTip="这是 toolTip 效果." fontSize="12"/>
</mx:Application>

5.3 使用ToolTips管理器
在Flex中提供了一个ToolTipManager类，是用来设置ToolTips相关特性的，如是否显示。ToolTipManager类位于mx.managers包中。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			// 导入 ToolTipManager 类
			import mx.managers.ToolTipManager;
			
			private function toggleToolTips():void 
			{
				if (ToolTipManager.enabled) 
				{
					//  设置提示框不可用
					ToolTipManager.enabled = false;
				} 
				else 
				{
					//  设置提示框可用
					ToolTipManager.enabled = true;
				}
			}
		]]>
	</mx:Script>
	<mx:Button id="b1"
			   label="单击改变提示框状态."
			   width="150" fontSize="12"
			   click="toggleToolTips();"
			   toolTip="这是按钮提示框."
			   />
</mx:Application>

5.4 创建一个自定义的ToolTips
在ToolTipManager类中，提供了两种方法来使用ToolTips。一个是createToolTip，用来创建ToolTips。另一个是destroyToolTip，用来销毁ToolTips。使用这两个方法，就可以在所有的组件中定义ToolTips。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Script>
		<![CDATA[
			import mx.managers.ToolTipManager;
			import mx.controls.ToolTip;
			
			public var myTip:ToolTip;
			
			// 鼠标经过事件
			private function createBigTip():void 
			{
				var s:String = "这些按钮可以保存、应用、取消执行的操作。"
				// 创建ToolTip对象
				myTip = ToolTipManager.createToolTip(s,10,10) as ToolTip;
				// 设置ToolTip对象样式
				myTip.setStyle("backgroundColor",0xFFCC00);
				myTip.setStyle("fontSize",12);
				// 设置ToolTip对象宽度和高度
				myTip.width = 250;
				myTip.height = 30;
			}
			
			// 鼠标移除事件
			private function destroyBigTip():void 
			{
				// 销毁ToolTip对象
				ToolTipManager.destroyToolTip(myTip);
			}
		]]>
	</mx:Script>
	
	<mx:Style>
		Panel 
		{
			paddingLeft: 15;
			paddingRight: 15;
			paddingTop: 15;
			paddingBottom: 15;
		}
	</mx:Style>
	
	<mx:Panel title="ToolTips" fontSize="12" x="50" y="50"
			  rollOver="createBigTip()" rollOut="destroyBigTip()">
		<mx:Button label="保存" toolTip="保存并退出"/>
		<mx:Button label="应用" toolTip="接受改变并继续"/>
		<mx:Button label="取消" toolTip="取消并退出"/>
	</mx:Panel>
	
</mx:Application>