Flex中利用mx:Sequence标签实现顺序效果(Sequencing effects)以及划变效果(Wipe effects)的例子

最近留意到 全文检索博客 的服务器方面的一部分压力来自于外部引用，转载的时候留不留原文的链接我已经无所谓了，不过拜托转的同志们把图片，SWF，ZIP之类的也一起转到自己的空间上去， 全文检索博客 目前用的还是虚拟主机，按照目前的状况可能很快我就要被迫在 htaccess进行限制 ，禁止一切形式的外部调用。非常抱歉，实在是出于无奈……

接下来的例子演示了Flex中如何利用<mx:Sequence />这个MXML标签，创建一个按顺序执行的组合效果。例子中演示了一个用于显示的对象如何进入，停止以及消失的过程，同样的过程也用于了一个划变效果(Wipe effects)。

让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

下面是完整代码(或 点击这里察看)：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Script>
8.         <![CDATA[
9.             private function fade_click():void {
10.                 fader.stop();
11.                 fader.play([box]);
12.             }
14.             private function wipe_click():void {
15.                 wiper.stop();
16.                 wiper.play([box]);
17.             }
18.         ]]>
19.     </mx:Script>
21.     <mx:Sequence id="fader">
22.         <mx:Fade alphaFrom="0.0" alphaTo="1.0" />
23.         <mx:Pause duration="{slider.value}" />
24.         <mx:Fade alphaFrom="1.0" alphaTo="0.0" />
25.     </mx:Sequence>
27.     <mx:Sequence id="wiper">
28.         <mx:SetPropertyAction name="alpha" value="1.0" />
29.         <mx:WipeRight showTarget="true" />
30.         <mx:Pause duration="{slider.value}" />
31.         <mx:WipeRight showTarget="false" />
32.         <mx:SetPropertyAction name="alpha" value="0.0" />
33.     </mx:Sequence>
35.     <mx:ApplicationControlBar dock="true">
36.         <mx:Button label="fade box"
37.                 click="fade_click();" />
38.         <mx:Button label="wipe box"
39.                 click="wipe_click();" />
41.         <mx:Spacer width="100%" />
43.         <mx:Label text="effect pause ({slider.value} ms):" />
44.         <mx:HSlider id="slider"
45.                 minimum="1000"
46.                 maximum="3000"
47.                 value="1500"
48.                 labels="[1000,2000,3000]"
49.                 liveDragging="true"
50.                 showTrackHighlight="true"
51.                 snapInterval="100"
52.                 tickInterval="500"
53.                 dataTipPrecision="0" />
54.     </mx:ApplicationControlBar>
56.     <mx:Box id="box"
57.             width="100%"
58.             height="100%"
59.             backgroundColor="haloSilver"
60.             alpha="0.0" />
62. </mx:Application>

0人

了这篇文章

类别： Flex+Asp.net┆阅读( 0)┆评论( 0) ┆ 返回博主首页┆ 返回博客首页

上一篇 Flex中如何利用PopUpButton控件创建一个弹出Ti.. 下一篇 Flex的RichTextEditor控件中如何利用textAreaS..