Flex 特效一部分 转
1:glow(发光)
代码:
<mx:Glow id="glow" duration="1000"
??????? alphaFrom="0.6" alphaTo="0.2"
??????? blurXFrom="0.0" blurXTo="50.0"
??????? blurYFrom="0.0" blurYTo="50.0"
??????? color="0xffffff"/>
?
duratuion 是特效的时间 1000 毫秒
alphaFrom 是透明度从 0.6 开始
alphaTo 是透明度到 0.2
blurXFrom 是X放向的模糊开始位置(相对于控件的)
blurXTo 是X放向的模糊结束位置(相对于控件的)
blurYFrom 是Y放向的模糊开始位置(相对于控件的)
blurYTo 是Y放向的模糊结束位置(相对于控件的)
color 是发光的颜色
?
作用到控件:
<mx:Image source="../assets/zh_cn_msdn_T_20070606.png" rollOverEffect="{glow}" id="back"/>
?
rollOverEffect 是鼠标经过时触发。
?
效果图参看:
?
?
?
2:Blur(模糊)
代码:
<mx:Blur id="blurImage" duration="1000"
??????? blurXFrom="0.0" blurXTo="10.0"
??????? blurYFrom="0.0" blurYTo="10.0"/>
duratuion 是特效的时间 1000 毫秒
blurXFrom 是X放向的模糊开始位置(相对于控件的)
blurXTo 是X放向的模糊结束位置(相对于控件的)
blurYFrom 是Y放向的模糊开始位置(相对于控件的)
blurYTo 是Y放向的模糊结束位置(相对于控件的)
?
作用到控件:
<mx:Image source="../assets/zh_cn_virtual_tab1_090803.png"????????????? ????? mouseDownEffect="{blurImage}"
????? mouseUpEffect="{unblurImage}"
toolTip="Welcome"/>
?
mouseDownEffect 是鼠标按下时的特效。
mouseUpEffect 是鼠标松开时的特效
?
效果图参看:
?
?
3:Sequence (顺序) Bounce(弹跳)
代码:
import mx.effects.easing.*;
<mx:Sequence id="movePauseMove">
??????? <mx:Move yBy="-150" duration="1000" easingFunction="Bounce.easeOut"/>
??????? <mx:Move yBy="150" duration="1000" easingFunction="Bounce.easeIn"/>
??? </mx:Sequence>
yBy 是作用在Y方向。
duratuion 是特效的时间 1000 毫秒
easingFunction 是松开动作
Bounce.easeOut 是跳出的动作
Bounce.easeIn 是跳回的动作
?
作用到控件:
<mx:Image source="../assets/zh_cn_ptn_090722.png"?
mouseDownEffect="{movePauseMove}"
id="image4"/>
?
mouseDownEffect 是鼠标按下时的特效。
?
效果参看:
?
?
4:Zoom(放大)
代码:
<mx:Zoom id="zoomAll"
zoomWidthFrom="1" zoomWidthTo="1.5"
zoomHeightFrom="1"? zoomHeightTo="1.5" />
?
zoomWidthFrom 放大的宽度从 1 倍开始
zoomWidthTo 放大的宽度到 1.5 倍
zoomHeightFrom 放大的高度从 1 倍开始
zoomHeightTo 放大的高度到 1.5 倍
?
<![CDATA[
import flash.events.MouseEvent;
???????????
public function doZoom(event:MouseEvent):void {
?????? if (zoomAll.isPlaying) {? //判断动作是否正在进行中
??????????????????? zoomAll.reverse();?? //如果是就返回(如果是放大就变成缩小)
??????????????? }
??????????????? else {
???
??????????????????? zoomAll.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false);? //判断事件是否是 鼠标移出事件,如果是就为true否则的话就为false
??????????????? }
??????????? }
???????????
]]>
?
作用到控件:
<mx:Image source="../assets/zh_cn_ptn_090722.png"?
????? rollOver="doZoom(event)"
????? rollOut="doZoom(event)"
id="image4"/>
?
rollOver:鼠标经过事件。
rollout:鼠标移出事件。
?
参看效果图:
?