Flex中如何利用标签创建一个具有走马灯效果对象的例子

By Minidxer | October 5, 2008

接下来的例子演示了Flex中如何利用标签，创建一个具有走马灯效果对象。

让我们先来看一下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 翻译/整理/编译：中文Flex例子

Topics: Other | No Comments » | Tags: , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll