巴鲁's profile岩屋PhotosBlogListsMore Tools Help

Blog


    November 05

    Flex学习进阶-使用动态效果

    首先为这个实验做个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;"/>
    然后发布,秀一下效果看看。

    上面的做完了肯定会有和我一样不满足的朋友问,怎么做多个动作的实现,下面有两个标签可以用于实现效果:
    <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>是按照标签的排列顺序由上至下来执行的。

    Comments

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    Trackbacks

    The trackback URL for this entry is:
    http://snowyrock.spaces.live.com/blog/cns!B8CBEB7169880B1D!200.trak
    Weblogs that reference this entry
    • None