【原创】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"/>
<mxause duration="2000"/>
<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;

 

我们用Eclipse里面的自动功能，是无法出现Mylabel.x这样的属性的。再有一个是，如果你重新New了一个Label，设定Label.text的字体比较麻烦，我们可以直接使用CSS来完成,例如：

<mx:Style>

Label{

fontSize: 14;

}

</mx:Style>

 

也可以这样

<mx:Style>

Label.id{

fontSize: 14;

}

</mx:Style>
最后一个问题，就是LinkButton里面的添加图片了，代码如下：icon="@Embed(source='image/Button1.gif')"。

评论

1 楼 linzp007 2009-01-05  

挺不错的,这个可以封装成一个可重用组件