Flex中如何利用ActionScript代替mx:Sequence标签实现顺序效果
2008-10-17 17:32
567 查看
原: http://elanso.com/ArticleModule/ONU0RRHGGJGJHlKeS4SYTgIi.html
在前面的Flex中利用mx:Sequence标签实现顺序效果(Sequencing effects)以及划变效果(Wipe effects)的例子中,我们了解了如何利用<mx:Sequence />这个MXML标签,创建一个按顺序执行的组合效果。接下来的例子演示了如何用ActionScript来代替MXML,实现相同的效果。
下面是完整代码(或点击这里察看):
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[
import mx.effects.Fade;
import mx.effects.Pause;
import mx.effects.Sequence;
import mx.effects.SetPropertyAction;
import mx.effects.WipeRight;
private var fader:Sequence;
private var wiper:Sequence;
private function fade_click():void {
var fadeIn:Fade = new Fade();
fadeIn.alphaFrom = 0.0;
fadeIn.alphaTo = 1.0;
var fadeOut:Fade = new Fade();
fadeOut.alphaFrom = 1.0;
fadeOut.alphaTo = 0.0;
var pause:Pause = new Pause();
pause.duration = slider.value;
fader = new Sequence();
fader.addChild(fadeIn);
fader.addChild(pause);
fader.addChild(fadeOut);
fader.stop();
fader.play([box]);
}
private function wipe_click():void {
var wipeIn:WipeRight = new WipeRight();
wipeIn.showTarget = true;
var wipeOut:WipeRight = new WipeRight();
wipeOut.showTarget = false;
var pause:Pause = new Pause();
pause.duration = slider.value;
var alphaOn:SetPropertyAction = new SetPropertyAction();
alphaOn.name = "alpha";
alphaOn.value = 1.0;
var alphaOff:SetPropertyAction = new SetPropertyAction();
alphaOff.name = "alpha";
alphaOff.value = 0.0;
wiper = new Sequence();
wiper.addChild(alphaOn);
wiper.addChild(wipeIn);
wiper.addChild(pause);
wiper.addChild(wipeOut);
wiper.addChild(alphaOff);
wiper.stop();
wiper.play([box]);
}
]]>
</mx:Script>
<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>
在前面的Flex中利用mx:Sequence标签实现顺序效果(Sequencing effects)以及划变效果(Wipe effects)的例子中,我们了解了如何利用<mx:Sequence />这个MXML标签,创建一个按顺序执行的组合效果。接下来的例子演示了如何用ActionScript来代替MXML,实现相同的效果。
让我们先来看一下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[
import mx.effects.Fade;
import mx.effects.Pause;
import mx.effects.Sequence;
import mx.effects.SetPropertyAction;
import mx.effects.WipeRight;
private var fader:Sequence;
private var wiper:Sequence;
private function fade_click():void {
var fadeIn:Fade = new Fade();
fadeIn.alphaFrom = 0.0;
fadeIn.alphaTo = 1.0;
var fadeOut:Fade = new Fade();
fadeOut.alphaFrom = 1.0;
fadeOut.alphaTo = 0.0;
var pause:Pause = new Pause();
pause.duration = slider.value;
fader = new Sequence();
fader.addChild(fadeIn);
fader.addChild(pause);
fader.addChild(fadeOut);
fader.stop();
fader.play([box]);
}
private function wipe_click():void {
var wipeIn:WipeRight = new WipeRight();
wipeIn.showTarget = true;
var wipeOut:WipeRight = new WipeRight();
wipeOut.showTarget = false;
var pause:Pause = new Pause();
pause.duration = slider.value;
var alphaOn:SetPropertyAction = new SetPropertyAction();
alphaOn.name = "alpha";
alphaOn.value = 1.0;
var alphaOff:SetPropertyAction = new SetPropertyAction();
alphaOff.name = "alpha";
alphaOff.value = 0.0;
wiper = new Sequence();
wiper.addChild(alphaOn);
wiper.addChild(wipeIn);
wiper.addChild(pause);
wiper.addChild(wipeOut);
wiper.addChild(alphaOff);
wiper.stop();
wiper.play([box]);
}
]]>
</mx:Script>
<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>
相关文章推荐
- Flex中利用mx:Sequence标签实现顺序效果(Sequencing effects)以及划变效果(Wipe effects)的例子
- Flex中如何利用mx:HTTPService标签读取文本文件中的name/value这样的一对数据并显示在DataGrid中的例子
- Flex中如何利用Style Sheet和<mx:style>标签嵌入图片/图标的例子
- Flex:如何实现利用Flex隐藏任务栏图标
- 如何利用matrix实现图片倒影效果
- 切换导航标签实现当前标签颜色改变以及利用js如何准确获取当前页面url网址信息
- 一个符合w3c标准的可以代替marquee标签实现翻滚效果的javascript 脚本
- Flex中如何利用mx.utils.UIDUtil类的createUID()函数创建UID的例子
- Unity3D教程:如何利用Shader实现钻石渲染效果
- 利用SpannableString实现标签TAG效果(可加圆角)
- Flex中如何利用width属性,将CheckBox的label标签截去。
- Dojo之路:如何利用Dojo实现Drag and Drop效果
- Flex:思考--如何实现TrayIcon PPT放映效果??
- 如何利用GridView与UpdatePanel组合实现无刷新:新增、编辑、删除、分页效果?
- 利用CSS3如何实现翻转卡牌效果?
- [ActionScript 3.0] 利用ColorTransform实现对象(图片)的曝光过渡效果
- 如何实现列表滑动标签置顶效果(以天天动听、网易云音乐、虾米音乐的歌手页为例)
- 如何利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
- 如何利用css3来实现网页中钟表的效果
- Dojo之路:如何利用Dojo实现Drag and Drop效果