Apr 24

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

FlexAdd comments

最近留意到全文检索博客的服务器方面的一部分压力来自于外部引用，转载的时候留不留原文的链接我已经无所谓了，不过拜托转的同志们把图片，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">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             private function fade_click():void {
  10.                 fader.stop();
  11.                 fader.play([box]);
  12.             }
  13.  
  14.             private function wipe_click():void {
  15.                 wiper.stop();
  16.                 wiper.play([box]);
  17.             }
  18.         ]]>
  19.     </mx:Script>
  20.  
  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>
  26.  
  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>
  34.  
  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();" />
  40.  
  41.         <mx:Spacer width="100%" />
  42.  
  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>
  55.  
  56.     <mx:Box id="box"
  57.             width="100%"
  58.             height="100%"
  59.             backgroundColor="haloSilver"
  60.             alpha="0.0" />
  61.  
  62. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , , , , ,

Related Post

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

Trackbacks

Leave a Reply