首先为这个实验做个UI代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="10" y="10" width="200" height="300" layout="absolute">
<mx:Button x="40" y="60" label="View" id="myButton" />
<mx:Label x="40" y="100" text="4 8 15 16 23 42" id="myLabel" visible="false"/>
</mx:Panel>
</mx:Application>
然后我们为按钮添加一个效果,步骤如下
1.定义一个动态效果标签
<mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/>
2.将其和按钮进行绑定
<mx:Button x="40" y="60" label="View" id="myButton" mouseUpEffect="{buttonGlow}" />
另外一种方法就是可以在设计模式下右侧的面板中的Flex Properties> Effects > mouseUpEffect中的值填写 {buttonGlow}实现效果
3.运行一下吧,然后做更棒的效果改变
现在来为Label作个淡出的效果,一样首先也是添加效果标签,代码如下:
<mx:Blur id="numbersBlur"
blurYFrom="10.0" blurYTo="0.0"
blurXFrom="10.0" blurXTo="0.0"
duration="2000" target="{myLabel}"/>//具体的参数不在这里面详细说明
然后将这个效果的发生添加一个触发事件,触发器自然就是按钮喽,要在按钮里面做一下小的改动:
<mx:Button x="40" y="60" label="View" id="myButton"
mouseUpEffect="{buttonGlow}"
click="numbersBlur.play(); myLabel.visible=true;"/>
然后发布,秀一下效果看看。
上面的做完了肯定会有和我一样不满足的朋友问,怎么做多个动作的实现,下面有两个标签可以用于实现效果:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="10" y="10" width="200" height="300" layout="absolute">
<mx:Button x="40" y="60" label="View" id="myButton" />
<mx:Label x="40" y="100" text="4 8 15 16 23 42" id="myLabel" visible="false"/>
</mx:Panel>
</mx:Application>
然后我们为按钮添加一个效果,步骤如下
1.定义一个动态效果标签
<mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/>
2.将其和按钮进行绑定
<mx:Button x="40" y="60" label="View" id="myButton" mouseUpEffect="{buttonGlow}" />
另外一种方法就是可以在设计模式下右侧的面板中的Flex Properties> Effects > mouseUpEffect中的值填写 {buttonGlow}实现效果
3.运行一下吧,然后做更棒的效果改变
现在来为Label作个淡出的效果,一样首先也是添加效果标签,代码如下:
<mx:Blur id="numbersBlur"
blurYFrom="10.0" blurYTo="0.0"
blurXFrom="10.0" blurXTo="0.0"
duration="2000" target="{myLabel}"/>//具体的参数不在这里面详细说明
然后将这个效果的发生添加一个触发事件,触发器自然就是按钮喽,要在按钮里面做一下小的改动:
<mx:Button x="40" y="60" label="View" id="myButton"
mouseUpEffect="{buttonGlow}"
click="numbersBlur.play(); myLabel.visible=true;"/>
然后发布,秀一下效果看看。
上面的做完了肯定会有和我一样不满足的朋友问,怎么做多个动作的实现,下面有两个标签可以用于实现效果:
<mx:Parallel>
和
<mx:Sequence>
从字面上的意思也能够看出来有什么区别,不过还是自己来试一下吧。
<mx:Parallel id="BlurMoveShow" target="{myLabel}">发现区别了吧,那就是
<mx:Blur id="numbersBlur"
blurYFrom="10.0" blurYTo="0.0"
blurXFrom="10.0" blurXTo="0.0"
duration="2000"/>
<mx:Move id="numbersMove" yBy="20" duration="2000" />
</mx:Parallel>
然后再试试另一个标签
<mx:Sequence
id="BlurMoveShow" target="{myLabel}">
<mx:Blur id="numbersBlur"
blurYFrom="10.0" blurYTo="0.0"
blurXFrom="10.0" blurXTo="0.0"
duration="2000"/>
<mx:Move id="numbersMove" yBy="20" duration="2000" />
</mx:Sequence
>
<mx:Parallel>
是同时执行里面的动作而 <mx:Sequence>是按照标签的排列顺序由上至下来执行的。