Flex图片擦除效果实例源码

<?xml version="1.0" encoding="utf-8"?>
<!--
alwaysInFront="true"表示窗体始终位于其他组件之前
useHandCursor="true"鼠标滑过组件是鼠标显示为手型
-->
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx" width="1000" height="650" 
					   alwaysInFront="true" usePreloader="true" useHandCursor="true" title="长沙理工大学图形创意">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<!-- 为组件定义的视图状态 -->
	<s:states>
		<!-- 定义组件的特定视图home1、home2 -->
		<s:State name="home1"/>
		<s:State name="home2"/>
	</s:states>
	<!-- 一个Transitions对象的Array，其中每一个Transition对象都定义一组效果，用于在视图状态发生改变时播放 -->
	<s:transitions>
		<s:Transition>
			<!-- Wipe 效果通过在第一个和第二个位图之间运行定向划出来执行位图过渡效果。
			此划出操作会在动画过程中沿着 direction 属性所指定的方向展示第二个位图 
			id：指定组件名字；
			direction="right":动画过程中划出的移动方向向左；
			target={holder}:要应用此效果的对象。当效果触发器触发某个效果时，会自动将 target 属性设置为触发该效果的对象；
			duration="1000":效果的持续时间（以毫秒为单位）。 在 Parallel 或 Sequence 效果中，可通过 duration 属性设置每种效果的持续时间。
			例如，如果 Sequence 效果的 duration 属性设置为 3000，则 Sequence 中的每个效果都会播放 3000 毫秒。			
			对于重复播放的效果来说，duration 属性将指定效果各个实例的持续时间。因此，如果某个效果的 duration 属性设置为 2000，
			并且 repeatCount 属性设置为 3，则播放此效果共需要 6000 毫秒（6 秒）。
			-->
			<s:Wipe id="wipe" direction="right" target="{holder}" duration="1000"/>
		</s:Transition>
	</s:transitions>
	<!--  
	VGroup 容器是使用 VerticalLayout 类的 Group 容器的一个实例。不要修改 layout 属性。
	可以修改 VGroup 类的属性和 VerticalLayout 类的特征。 
	特征 说明 
	默认大小  
	最小大小 0 个像素 
	最大大小 10000 个像素宽 × 10000 个像素高
	-->
	<s:VGroup  width.home1="1000">
		<!--
		Group 类是可视元素的容器基类。希望管理可视子项（可视组件和图形组件）时，使用此容器。 
		为了改进性能和最小化应用程序大小，不能设置 Group 容器的外观。如果希望应用外观，请改用 SkinnableContainer。
		-->
		<s:Group id="holder" width.home1="1000">
			<!--
			BitmapImage 元素在其父元素的坐标空间中定义一个矩形区域，使用从源文件提取的位图数据进行填充。
			用于位图填充的源。可以呈现基于各种图形源的填充，其中包括： 
			Bitmap 或 BitmapData 实例。 
			表示 DisplayObject 子类的类。BitmapFill 会将该类实例化并为其创建位图呈现。 
			DisplayObject 的实例。BitmapFill 将其复制到 Bitmap 中以供填充使用。 
			如果使用某个图像文件作为源，则它可以是 PNG、GIF 或 JPG 类型。			
			若要指定某个图像作为源，则必须使用 @Embed 指令，如以下示例所示： 			
			source="@Embed('image_location')"
			图像位置可以是 URL 或文件引用。如果是文件引用，则其位置是相对于要编译的文件的位置的。			
			如果该源是 Bitmap 或 BitmapData 实例，则一旦不再需要该源时，调用者有责任清除该源。
			如果 BitmapImage 创建了 BitmapData 实例，则一旦该源已更改，它将清除 BitmapData。
			-->
			<s:BitmapImage source="@Embed('assets/home1.jpg')"
						    visible="true" visible.home2="false" x.home1="200" y.home1="0"/>
			<s:BitmapImage source="@Embed('assets/home2.jpg')"
						    visible="false" visible.home2="true" width.home1="530" height.home1="590" x.home1="270" y.home1="10"/>
			<!--
			Label 是可以呈示一行或多行统一格式文本的低级 UIComponent。要显示的文本由从 TextBase 继承的 text 属性确定。
			文本格式由元素的 CSS 样式指定，例如 fontFamily 和 fontSize。 			
			Spark 体系结构提供三个文本“原型”（Label、RichText 和 RichEditableText）作为其“仅在用户需要时支付”基本原理的一部分。
			Label 运行速度最快且占用内存最少，但其功能有限：无复杂格式、不可滚动、不可选择、不可编辑且无超链接。
			RichText 和 RichEditableText 基于 Text Layout Framework (TLF) 库，而不是 FTE。
			RichText 新增了使用复杂格式程示 HTML 等富文本的功能，但仍然完全是非交互式的。您应该使用能够满足需求的最快速的文本原型。	
			与 MX Label 相比，Spark Label 可提供更佳的印刷效果，且能更好地支持各国语言。 
			Spark Label 可以显示多行，但 MX Label 不可以。 
			MX Label 可以显示 HTML 的有限子集，但 Spark Label 只能显示统一格式的文本。 
			在 Spark Label 中，将以下三个字符序列识别为显式换行符：CR（“\r”）、LF（“\n”）和 CR+LF（“\r\n”）。
			如果确实指定了某种类型的宽度，则指定的文本将在组件边界的右边缘换行，因为 lineBreak 样式的默认值为“toFit”。
			要禁用此自动换行，请将 lineBreak 样式设置为“explicit”。
			如果文本超出了显示这些文本的空间，Label 可以截断文本。截断文本意味着使用截断指示符（如 "..."）替换超额文本。
			请参阅继承的属性 maxDisplayedLines 和 isTruncated。
			可以使用 lineHeight 样式控制行间距。可以使用 textAlign、textAlignLast 和 verticalAlign 样式水平和垂直对齐元素范围内的文本。
			可以使用 paddingLeft、paddingTop、paddingRight 和 paddingBottom 样式从元素边缘插入文本。
			默认情况下，Label 没有背景，但是可以使用 backgroundColor 和 backgroundAlpha 样式绘制一个背景。
			不支持边框。如果需要边框或更复杂的背景，请在 Label 后面使用单独的图形元素，例如 Rect。
			Label 支持显示从左到右 (LTR) 书写的文本、从右到左 (RTL) 书写的文本以及双向书写的文本。
			如果文本的主要书写方向为从右到左，可以将 direction 样式设置为“rtl”。
			textAlign 样式默认为“start”，这样，当 direction 为“ltr”时，文本左对齐；当 direction 为“rtl”时，文本右对齐。
			要获得反向对齐，请将 textAlign 设置为“end”。
			Label 在 Flash Text Engine 中使用 TextBlock 类创建一个或多个 TextLine 对象，以采用由其 CSS 样式确定的格式静态显示其文本 String。
			由于性能原因，其 TextLine 不包含有关各个字型的信息。
			-->
			<s:Label includeIn="home1" x="270" y="263" width="209" height="296" id="lblHome1"/>
			<!-- 
			Tree 控件使用户可以查看排列为可扩展树的层次结构数据。树中的每个项目都可以是叶或分支。
			叶项目是树中的端点。分支项目可以包含叶或分支项目，也可以为空。 
			默认情况下，叶由文件图标旁边的文本标签表示。分支由文件夹图标旁边的文本标签表示，其中带有一个公开三角形，
			用户可打开该三角形以显示子项。
			Tree 类使用 ITreeDataDescriptor 或 ITreeDataDescriptor2 对象分析和操作数据提供程序。
			默认树数据描述符（DefaultDataDescriptor 类的一个对象）支持 XML 和 Object 类；
			Object 类数据提供程序必须包含 children 字段中的所有子项。 
 			-->
			<mx:Tree includeIn="home1" x="0" y="0" width="201" height="600"></mx:Tree>
		</s:Group>
		<!--
		Button 组件是常用的矩形按钮。Button 组件看起来可以按压。默认外观具有一个文本标签。 
		当用户选择 Button 控件时，该控件通常使用事件侦听器来执行操作。当用户在 Button 控件上单击鼠标时，就会启用 Button 控件，
		此控件分派 click 事件和 buttonDown 事件。无论按钮是处于启用状态还是禁用状态，总是会分派 mouseMove、mouseOver、mouseOut、
		rollOver、rollOut、mouseDown 和 mouseUp 等事件。
		此处，当用户点击按钮时，就触发图片过渡效果。实现代码在click事件中。
		-->
		<s:Button label="图片左侧替换" click="currentState=(currentState='home2')?'home1':'home2';"/>
	</s:VGroup>
</s:WindowedApplication>

评论

1 楼 bence 2010-07-14  

写得很详细