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>
