FlextiggerEventEffect(二)

 

flex tiggerEventEffect

 

触发器名称	触发事件
addedEffect	组件作为一个子类被添加到一个容器中
creationCompleateEffect	组件被建立
focusInEffect	组件获得键盘的焦距
focusOutEffect	组件失去键盘的焦距
hideEffect	通过设定主键的visible 属性从true到false而成为不可见的
mouseDownEffect	当鼠标在某个组件上时，用户按下鼠标键盘
mouseUpEffect	用户释放鼠标按键
moveEffect	组件被移动
removedEffect	组件在容器中被删除
resizeEffectt	组件呗改变大小
rollOutEffect	用户将鼠标从组件上移开
rollOverEffect	用户将鼠标移动到组件
showEffect	通过设定主键的visible 属性从false 到 true 而成为不可见的

 

1.在mxml中使用 使用组件对应的 tiggerEventEffect
l例如：
<mx:WipeLeft id="myWL"
<mx:Button id="btn1" mouseDownEffect="{myWL}" />

2.在mxml中使用样式表来实现行为的控制
<mx:Style>
 Button
 {
  mouseDownEffect:slowWipe;
 } 
</mx:Style>
<mx:WipeLeft id="slowWipe" duration="500" />
<mx:Button id="btn1" />
当然也把某个组件对应的效果去除
<mx:Button id="btn1" mouseDownEffect="none"/>

3.使用setStyle()和getStyle()函数在mxml中定义效果
语法：setStyle("触发器",效果);
   getStyle("触发器"):返回的类型
<mx:WipeLeft id="slowWipe" duration="500" />
<mx:Button id="btn1"  mouseDownEffect="slowWipe"/>
//使用
var myStyle:Number=btn1.getStyle("mouseDownEffect").duration;

4.顺序显示控件的效果
slowWipe.play([btn1,btn2,btn3],true);

5.终止/暂停效果
<mx:WipeLeft id="slowWipe" duration="500" />
<mx:Button id="btn1" click="{slowWipe.play()}"/>
<mx:Button id="btn2" click="{slowWipe.end()}"/>

6.Effect.target和Effect.targets绑定组件
<mx:WipeLeft id="slowWipe" duration="500" targets="{[btn1,btn2]}" />
<mx:Button id="btn1" click="{slowWipe.play()}"/>
<mx:Button id="btn2" click="{slowWipe.end()}"/>

7.组合效果
平行(parallel):所有行为效果都在同一时间进行
排序(sequence):一个行为效果结束，下一个行为效果开始
 
<mx:Parallel id="zoomshow">
 <mx:Zoom id="myZoomshow" zoomHeightFrom="0.0" zoomWidthFrom="0.0"
  zoomHeightTo="1.0" zoomWidthTo="1.0"  />
  <mx:Rotate id="rotateshow" />
</mx:Parallel>
<mx:Sequence id="zoomhide">
  <mx:Zoom id="myZoomhide" zoomHeightFrom="1.0" zoomWidthFrom="1.0"
  zoomHeightTo="0.0" zoomWidthTo="0.0"  />
  <mx:Rotate id="rotatehide" />
</mx:Sequence>
    <mx:Panel x="257" y="168" width="389" height="273" horizontalAlign="center" verticalAlign="middle">
     <mx:TextInput id="txt" hideEffect="{zoomhide}" showEffect="{zoomshow}" />
           <mx:Button label="显示" click="{txt.visible=true;}"/>
           <mx:Button label="隐藏" click="{txt.visible=false;}"/>
    </mx:Panel>

8.使用动画属性(AnimateProperty)效果
<mx:Sequence id="zoomshow">
     <mx:AnimateProperty property="scaleY" fromValue="1" toValue="1.5" duration="1000" />
 <mx:AnimateProperty property="scaleY" fromValue="1.5" toValue="1" duration="1000" />
</mx:Sequence>
<mx:Panel  x="260" y="180" width="450" height="304" paddingTop="10" paddingLeft="10" paddingBottom="10">
  <mx:Image source="http://www.baidu.com/img/baidu_sylogo1.gif" mouseDownEffect="zoomhide" />
</mx:Panel>

9.重复(Repeating)效果
<mx:Rotate id="myRotate" repeatCount="0"/>
<mx:Panel  x="260" y="180" width="450" height="304" paddingTop="10" paddingLeft="10" paddingBottom="10">
<mx:Image id="image" source="http://www.baidu.com/img/baidu_sylogo1.gif" mouseDownEffect="myRotate" />
<mx:Button id="btn" label="停止转动" click="myRotate.end();" />
</mx:Panel>

10.延迟(Delaying)行为效果
<mx:Rotate id="myRotate" repeatCount="2" startDelay="1000"/>
<mx:Panel  x="260" y="180" width="450" height="304" paddingTop="10" paddingLeft="10" paddingBottom="10">
<mx:Image id="image" source="http://www.baidu.com/img/baidu_sylogo1.gif" mouseDownEffect="myRotate" />
<mx:Button id="btn" label="停止转动" click="myRotate.end();" />
</mx:Panel>

11遮罩(Mask)行为效果
<mx:Script>
 <![CDATA[
  public function createLargeMask(targ:Object,bounds:Rectangle):Shape{
   var largeMask:Shape=new Shape();
    largeMask.graphics.beginFill(0x00FFFF,1.5);
    largeMask.graphics.drawCircle(50,50,bounds.width/2);
    largeMask.graphics.endFill();
    return largeMask;
  }
 ]]>
</mx:Script>
<mx:WipeLeft id="customWL" createMaskFunction="createLargeMask"
showTarget="false" duration="1000"/>
<mx:Panel  x="260" y="180" width="450" height="304" paddingTop="10" paddingLeft="10" paddingBottom="10">

<mx:Image id="image" source="http://www.baidu.com/img/baidu_sylogo1.gif" mouseDownEffect="myRotate" />

<mx:Button id="btn" label="停止转动" mouseDownEffect="{customWL}" height="100" width="100" fillAlphas="[1.0,1.0]"
 fillColors="[#DBA65B,#5EDB5B]"
/>
</mx:Panel>