Flex特效实践-优快云博客

Flex特效初探

一个扩展后的LinkButton

当鼠标移动到LinkButton上的时候，在LinkButton上会出现一个向上移动的Label，并且会有一个振动的效果，当鼠标移走的时候，label消失，如图所示。
如何实现这个效果呢，下面是源码
演示下载地址：http://downloadnode.com/download.php?file=ea1d97c5e33d62ee4c470fb91b66a764

<? xml version="1.0" encoding="utf-8" ?>

< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" >

< mx:Style >

Label{

fontSize: 14;

}

</ mx:Style >

< mx:Script >

<![CDATA[

import mx.events.EffectEvent;

import mx.controls.Label;

import mx.effects.easing.*;

import mx.effects.Zoom;

import mx.controls.Alert;

public var testTry:Boolean = false;

public var testTx:Boolean = false;

public var Mylabelabel;

public function LabelMove():void{

movePauseMove.play();

}

internal function zoomMouseBig(targetStrinkButton):void{

if (testTry == false) {

Mylabel = new Label();

Mylabel.id = "Mylb";

Mylabel.text = "权限管理";

//Alert.show((targetStr.x/2).toString());

Mylabel.x = targetStr.x + (targetStr.width/4);

Mylabel.y = targetStr.y-targetStr.height/2+5;

Mylabel.fontContext = 14;

var fropShadowFilter = new DropShadowFilter(5,30,0xFFFFFF,.8);

var myFilters:Array = new Array();

myFilters.push(f);

Mylabel.filters = myFilters;

Mylabel.addEventListener(MouseEvent.MOUSE_OUT,txTry1);

Mylabel.text = "权限管理";

Mylabel.visible = true;

movePauseMove.target = Mylabel;

this.addChild(Mylabel);

movePauseMove.play();

//movePauseMove.addEventListener(EffectEvent.EFFECT_END,changeTry);

testTry = true;

//Alert.show(targetStr.scaleX.toString());

//创建Zoom对象

var newZoom:Zoom = new Zoom();

newZoom.zoomHeightTo=1.1;

newZoom.zoomWidthTo=1.1;

//指定作用对象

//Alert.show(targetStr);

newZoom.target = targetStr;

//设置播放时长

newZoom.duration = 300;

//开始播放动画

newZoom.play();

newZoom.addEventListener(EffectEvent.EFFECT_END, txTry1);

}

internal function zoomMouseNormal(targetStr:Object):void{

if (testTx == false) {

//创建Zoom对象

var newZoom:Zoom = new Zoom();

newZoom.zoomHeightTo=1;

newZoom.zoomWidthTo=1;

//指定作用对象

newZoom.target = targetStr;

//设置播放时长

newZoom.duration = 300;

//开始播放动画

newZoom.play();

Mylabel.parent.removeChild(Mylabel);

testTx = true;

testTry = false;

}

internal function txTry1(env:Event):void {

testTx = false;

}

]]>

</ mx:Script >

<!--

<mx:Sequence id="movePauseMove" target="{LinkBtTry}">

<mx:Move xBy="150" duration="2000" easingFunction="Bounce.easeOut"/>

<mx:Move xBy="-150" duration="2000" easingFunction="Bounce.easeIn"/>

</mx:Sequence>

-->

< mx:Move id ="movePauseMove" yBy ="-20" duration ="1000" easingFunction ="Bounce.easeOut" />

< mx:Move id ="movePauseMoveBack" yBy ="-30" duration ="2000" easingFunction ="Bounce.easeOut" />

< mx:LinkButton id ="LinkBtTry" x ="169" y ="169" label ="" height ="42" width ="172"

icon ="@Embed(source='image/Button1.gif')" mouseOver ="zoomMouseBig(this.LinkBtTry)"

mouseOut ="zoomMouseNormal(this.LinkBtTry)"

</ mx:Application >

全部的代码如上所示，现在就具体来说一下个部分的内容
首先是用到了Flex库中的Move组件，这个组件是用来做移动特效的，例如：从左向右移动，从上向下移动。
在引用这个组件的时候，有两种方式：一个是在组件里的绑定，如下：
<mx:Move id="movePauseMove" yBy="-20" duration="1000" target="{LinkBtTry}"
easingFunction="Bounce.easeOut"/>
就是说在这个组件里面，我们直接将target的属性绑定到一个控件中去了。
还有一种是在AS文件中定义的，如
Var MyMove：Move = new Move();
MyMove.target = 一个控件对象；
其实呢，是当鼠标移动到LinkButton的时候，我们自己创建了一个Label的对象，在这个里面有两个问题需要注意一下：
一个是当我们创建对象的时候，

Mylabel = new Label();

Mylabel.id = "Mylb";

Mylabel.text = "权限管理";

//Alert.show((targetStr.x/2).toString());

Mylabel.x = targetStr.x + (targetStr.width/4);

Mylabel.y = targetStr.y-targetStr.height/2+5;