JAVA & FLEX

一个分享java和flex开发经验的空间

   :: 首页 ::  :: 联系 ::  :: 管理 ::
  26 随笔 :: 2 文章 :: 44 评论 :: 0 Trackbacks

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 MyMoveMove = 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')"

posted on 2008-08-25 16:34 程序人生-天津 阅读(4543) 评论(5)  编辑  收藏 所属分类: Flex

评论

# re: 【原创】Flex特效初探 2008-09-21 21:34 rty
mxinkButton 是什么呀,根本就不能用  回复  更多评论
  

# re: 【原创】Flex特效初探 2008-09-22 16:08 程序人生-天津
@rty
这个是在我们自己的网站论坛:fireflys.vicp.net/bbs上拷贝过来的,所以有的是被转译成了图片,sorry,这个是<mx:linkButton>  回复  更多评论
  

# re: 【原创】Flex特效初探 2008-12-01 17:46 aaaaaa
Mylabel这个对象是在那里创建的阿?
还是控件的id忘写了?  回复  更多评论
  

# re: 【原创】Flex特效初探 2009-04-10 10:54 肥肥
@@ 有些Bug唷~  回复  更多评论
  

# re: 【原创】Flex特效初探 2009-04-10 11:00 肥肥
而且不太懂你陣列用意為何耶 :) 謝謝
  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: