原创 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>是按照标签的排列顺序由上至下来执行的。
5:30 | 添加评论 | 固定链接 | 引用通告 (0) | 记录它 | FLEX
11月4日

Flex学习进阶-使用<mx:ComboBox>和其他元件关联

首先在设计模式下拖拽出需要演示效果的FLEX组件其中包括ComboBox,Button,Panel,Label 将其排列整齐，方便自己看就可以了，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Panel  title="ComboBox" width="402" height="188" x="90.5" y="79" layout="absolute">
        <mx:ComboBox id="myComboBox" width="171" x="10" y="10">
        </mx:ComboBox>
        <mx:Button id="myButton" label="Send"  x="200" y="10"/>
        <mx:Label id="myText" maxWidth="20"  width="244" height="23" y="60" x="10" />
    </mx:Panel>
</mx:Application>

下面为添加内容并且将其改变后的值与Label属性值进行绑定
为ComboBox添加内容
        <mx:ComboBox id="myComboBox" width="171" x="10" y="10">
            <mx:dataProvider>
                <mx:Array>
                    <mx:String>ComboBox1</mx:String>
                    <mx:String>ComboBox2</mx:String>
                    <mx:String>ComboBox3</mx:String>
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
将两个进行连接：
<mx:Label id="myText" maxWidth="20"  width="244" height="23" y="60" x="10"  text="{myComboBox.value}"/>
可以在这个时候发布一下看看效果。因为下面会有一些其他效果要体现。
有人会问到我要取的值不是ComboBox1，ComboBox2，ComboBox3怎么办，当然有方法了，需要修改String为Object,再将其data属性为你想要取出的值，改变如下：
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="ComboBox1" data="1" />
                    <mx:Object label="ComboBox2" data="2" />
                    <mx:Object label="ComboBox3" data="3" />
                </mx:Array>
            </mx:dataProvider>
再次发布看看这次取的是不是data的值呀。
呦，我们的按钮还没有用上呢，你发现了没有，这回要用上代码了ActionScript3.0哦。给大家秀一下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;

            public function show(event:MouseEvent):void{
                myText.text = String(myComboBox.value);
            }
        ]]>
    </mx:Script>
    <mx:Panel  title="ComboBox" width="402" height="188" x="90.5" y="79" layout="absolute">
        <mx:ComboBox id="myComboBox" width="171" x="10" y="10">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="ComboBox1" data="1" />
                    <mx:Object label="ComboBox2" data="2" />
                    <mx:Object label="ComboBox3" data="3" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
        <mx:Button id="myButton" label="Send"  x="200" y="10" click="show(event);"/>
        <mx:Label id="myText" maxWidth="20"  width="244" height="23" y="60" x="10" />
    </mx:Panel>
</mx:Application>
 

发表于 @ 2006年12月29日 15:02:00|评论(loading...)

新一篇: Flex学习进阶-使用标签 | 旧一篇: Flex学习进阶-使用View States 和 Transitions
Csdn Blog version 3.1a
Copyright © Rocky820618