Flex中利用mx:Sequence标签实现顺序效果(Sequencing effects)以及划变效果(Wipe effects)的例子
2009-11-11 14:46
681 查看
最近留意到全文检索博客的服务器方面的一部分压力来自于外部引用,转载的时候留不留原文的链接我已经无所谓了,不过拜托转的同志们把图片,SWF,ZIP之类的也一起转到自己的空间上去,全文检索博客目前用的还是虚拟主机,按照目前的状况可能很快我就要被迫在htaccess进行限制,禁止一切形式的外部调用。非常抱歉,实在是出于无奈……
接下来的例子演示了Flex中如何利用<mx:Sequence />这个MXML标签,创建一个按顺序执行的组合效果。例子中演示了一个用于显示的对象如何进入,停止以及消失的过程,同样的过程也用于了一个划变效果(Wipe effects)。
下面是完整代码(或点击这里察看):
Download: main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function fade_click():void {
fader.stop();
fader.play([box]);
}
private function wipe_click():void {
wiper.stop();
wiper.play([box]);
}
]]>
</mx:Script>
<mx:Sequence id="fader">
<mx:Fade alphaFrom="0.0" alphaTo="1.0" />
<mx:Pause duration="{slider.value}" />
<mx:Fade alphaFrom="1.0" alphaTo="0.0" />
</mx:Sequence>
<mx:Sequence id="wiper">
<mx:SetPropertyAction name="alpha" value="1.0" />
<mx:WipeRight showTarget="true" />
<mx:Pause duration="{slider.value}" />
<mx:WipeRight showTarget="false" />
<mx:SetPropertyAction name="alpha" value="0.0" />
</mx:Sequence>
<mx:ApplicationControlBar dock="true">
<mx:Button label="fade box"
click="fade_click();" />
<mx:Button label="wipe box"
click="wipe_click();" />
<mx:Spacer width="100%" />
<mx:Label text="effect pause ({slider.value} ms):" />
<mx:HSlider id="slider"
minimum="1000"
maximum="3000"
value="1500"
labels="[1000,2000,3000]"
liveDragging="true"
showTrackHighlight="true"
snapInterval="100"
tickInterval="500"
dataTipPrecision="0" />
</mx:ApplicationControlBar>
<mx:Box id="box"
width="100%"
height="100%"
backgroundColor="haloSilver"
alpha="0.0" />
</mx:Application>
本文出自 “学无止境” 博客,请务必保留此出处http://dqk1985.blog.51cto.com/1005868/225178
接下来的例子演示了Flex中如何利用<mx:Sequence />这个MXML标签,创建一个按顺序执行的组合效果。例子中演示了一个用于显示的对象如何进入,停止以及消失的过程,同样的过程也用于了一个划变效果(Wipe effects)。
让我们先来看一下Demo(可以右键View Source或点击这里察看源代码
):
下面是完整代码(或点击这里察看):
Download: main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function fade_click():void {
fader.stop();
fader.play([box]);
}
private function wipe_click():void {
wiper.stop();
wiper.play([box]);
}
]]>
</mx:Script>
<mx:Sequence id="fader">
<mx:Fade alphaFrom="0.0" alphaTo="1.0" />
<mx:Pause duration="{slider.value}" />
<mx:Fade alphaFrom="1.0" alphaTo="0.0" />
</mx:Sequence>
<mx:Sequence id="wiper">
<mx:SetPropertyAction name="alpha" value="1.0" />
<mx:WipeRight showTarget="true" />
<mx:Pause duration="{slider.value}" />
<mx:WipeRight showTarget="false" />
<mx:SetPropertyAction name="alpha" value="0.0" />
</mx:Sequence>
<mx:ApplicationControlBar dock="true">
<mx:Button label="fade box"
click="fade_click();" />
<mx:Button label="wipe box"
click="wipe_click();" />
<mx:Spacer width="100%" />
<mx:Label text="effect pause ({slider.value} ms):" />
<mx:HSlider id="slider"
minimum="1000"
maximum="3000"
value="1500"
labels="[1000,2000,3000]"
liveDragging="true"
showTrackHighlight="true"
snapInterval="100"
tickInterval="500"
dataTipPrecision="0" />
</mx:ApplicationControlBar>
<mx:Box id="box"
width="100%"
height="100%"
backgroundColor="haloSilver"
alpha="0.0" />
</mx:Application>
本文出自 “学无止境” 博客,请务必保留此出处http://dqk1985.blog.51cto.com/1005868/225178
相关文章推荐
- Flex中如何利用ActionScript代替mx:Sequence标签实现顺序效果
- Flex中如何利用Style Sheet和<mx:style>标签嵌入图片/图标的例子
- 利用数据库管理国际化资源配置以及自定义标签实现国际化效果
- Flex中如何利用mx:HTTPService标签读取文本文件中的name/value这样的一对数据并显示在DataGrid中的例子
- unity3d射线的原理用法以及一个利用射线实现简单拾取的小例子
- 【unity3d游戏开发之基础篇】unity3d射线的原理用法以及一个利用射线实现简单拾取的小例子
- 【unity3d游戏开发之基础篇】unity3d射线的原理用法以及一个利用射线实现简单拾取的小例子
- Flex中利用HTTPService标签动态导入XML文件的例子
- VS2008 WINFROM 利用WeifenLuo +OUTLOOKBAR +IrisSkin2.dll实现换肤 标签页面 以及子动态加载子菜单的实实例
- 神奇的css实现圆角效果的标签以及其他一些今天学的css标签
- Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换
- Span使用之利用自定义Span解析Html中特殊标签实现类似微博@效果
- 【unity3d游戏开发之基础篇】unity3d射线的原理用法以及一个利用射线实现简单拾取的小例子
- Flex中如何利用mx.utils.UIDUtil类的createUID()函数创建UID的例子
- 射线的原理用法以及一个利用射线实现简单拾取的小例子
- 关于siamese network训练时,按同样的顺序打乱输入X1,X2以及对应的标签Y(Python实现)
- 利用SpannableStringBuilder实现标签TAG效果(圆角、背景色、字体色等)
- 利用ECharts3来实现ECharts2实例中的模拟迁徙效果,即背景地图为百度地图。 标签: ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅
- flex4 + spring + blazeds , 使用anonation(注解)机制,利用push技术的实现例子和过程。
- 剑指offer 01-06解答思路以及代码(顺序数组找特定数字,替换空格字符,链表反转输出,重建二叉树,两个栈实现队列效果,旋转数组最小元素)