积少成多Flash(12) Flex 3.0验证控件(Validator),缓动效果(easin -电脑资料

介绍

演示 Flex 3.0 中的验证控件的应用，以及各种缓动效果(easing)的 应用

Validator - 各种验证控件的基类，其可用于必填验证

DateValidator - 日期验证控件

EmailValidator - Email 验证控件

RegExpValidator - 正则表达式验证控件

缓动（easing） - 系统自带的动 画缓动效果，以及自定义缓动效果

加密/解密 - 常用加密算法的 AS3 库的应 用

其他 - 其他一些常用的东西

在线DEMO

http://www.cnblogs.com/webabcd/archive/2009/11/09/1598980.html

1、Validator.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
    各种验证控件的基类 Validator 的 Demo，其可用于必填验证
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute" width="400" height="300"
    title="Validator - Validator (其他验证器的基类，可用于必填验

证)">
    <mx:Validator id="validator"
        source="{txtInput}" property="text"
        required="true" requiredFieldError="请输入必填字段"
        trigger="{btnSubmit}" triggerEvent="click"
    />
    <mx:Form>
        <mx:FormItem label="必填字段: ">
            <mx:TextInput id="txtInput"/>
        </mx:FormItem>
        <mx:FormItem >
            <mx:Button id="btnSubmit" label="验证" />
        </mx:FormItem>
    </mx:Form>
</mx:Panel>

2、DateValidator.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
    应用日期验证控件的 Demo
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute" width="400" height="300"
    title="Validator - DateValidator (日期验证)">
    <mx:DateValidator source="{txtDate}" property="text"
        required="true" requiredFieldError="请输入日期"
        allowedFormatChars="-" inputFormat="YYYY-MM-DD"
        trigger="{btnSubmit}" triggerEvent="click"
        valid="mx.controls.Alert.show('验证成功');"
        invalid="mx.controls.Alert.show('验证失败');"
        wrongDayError="日输入错误"
        wrongMonthError="月输入错误"
        wrongYearError="年输入错误"
        wrongLengthError="日期长度错误"
        invalidCharError="日期分隔符错误"
        formatError="inputFormat 配置错误"
    />
     <mx:Form>
        <mx:FormItem label="日期(格式 yyyy-MM-dd): ">
            <mx:TextInput id="txtDate"/>
        </mx:FormItem>
        <mx:FormItem >
            <mx:Button id="btnSubmit" label="验证" />
        </mx:FormItem>
    </mx:Form>
</mx:Panel>

3、EmailValidator.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
    应用 Email 验证控件的 Demo
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute" width="400" height="300"
    title="Validator - EmailValidator (Email验证)">
    <mx:EmailValidator id="emailValidator" source="{txtEmail}" 

property="text"
        missingAtSignError="缺少@"
           valid="mx.controls.Alert.show('验证成功');"
    />
    <mx:Form>
        <mx:FormItem label="Email: ">
            <mx:TextInput id="txtEmail"/>
        </mx:FormItem>
        <mx:FormItem >
            <mx:Button id="btnSubmit" label="验证" 

click="emailValidator.validate();" />
        </mx:FormItem>
    </mx:Form>
</mx:Panel>

4、RegExpValidator.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
    应用正则表达式验证控件的 Demo
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute" width="400" height="300"
    title="Validator - RegExpValidator (正则表达式验证)">
    <mx:Script>
        <![CDATA[
            import mx.events.ValidationResultEvent;
            import mx.validators.*;
            import mx.controls.Alert;
            private function handleResult(e:ValidationResultEvent):void
            {
                if (e.type == ValidationResultEvent.VALID)
                {
                    Alert.show("验证成功");
                }
            }
        ]]>
    </mx:Script>
    <mx:RegExpValidator id="regExpValidator"
        source="{txtInput}" property="text"
        flags="g,i" expression="^[a-z]+$"
        valid="handleResult(event)" invalid="handleResult(event)"
        trigger="{btnSubmit}" triggerEvent="click"
        noMatchError="请输入正确的英文字母"
        required="false"
    />
    <mx:Form>
        <mx:FormItem label="请输入英文字母: ">
            <mx:TextInput id="txtInput"/>
        </mx:FormItem>
        <mx:FormItem >
            <mx:Button id="btnSubmit" label="验证" />
        </mx:FormItem>
    </mx:Form>
</mx:Panel>

5、Easing.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
    演示各种缓动（easing）的 Demo
    和 Silverlight 中的缓动一致 

http://www.cnblogs.com/webabcd/archive/2009/08/20/1550334.html
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute" width="400" height="300"
    title="easing 的应用(TweenEffect 的 easingFunction 属性)">
    <mx:Script>
        <![CDATA[
            import mx.events.TweenEvent;
            import mx.effects.easing.Back;
            import mx.effects.easing.Bounce;
            import mx.effects.easing.Circular;
            import mx.effects.easing.Cubic;
            import mx.effects.easing.Elastic;
            import mx.effects.easing.Exponential;
            import mx.effects.easing.Linear;
            import mx.effects.easing.Quadratic;
            import mx.effects.easing.Quartic;
            import mx.effects.easing.Quintic;
            import mx.effects.easing.Sine;
            private function moveImage(e:MouseEvent):void
            {
                effectMove.end();
                effectMove.xTo = 240;
                effectMove.yTo = 120;
                effectMove.play();
            }
            private function radioChangeHandler():void
            {
                switch (radioGroup.selectedValue)
                {
                    case "Back" :
                        effectMove.easingFunction = Back.easeOut;
                        break;
                    case "Bounce" :
                        effectMove.easingFunction = Bounce.easeOut;
                        break;
                    case "Circular" :
                        effectMove.easingFunction = Circular.easeOut;
                        break;
                    case "Cubic" :
                        effectMove.easingFunction = Cubic.easeOut;
                        break;
                    case "Elastic" :
                        effectMove.easingFunction = Elastic.easeOut;
                        break;
                    case "Exponential" :
                        effectMove.easingFunction = 

Exponential.easeOut;
                        break;
                    case "Linear" :
                        effectMove.easingFunction = Linear.easeOut;
                        break;
                    case "Quadratic" :
                        effectMove.easingFunction = Quadratic.easeOut;
                        break;
                    case "Quartic" :
                        effectMove.easingFunction = Quartic.easeOut;
                        break;
                       case "Quintic" :
                        effectMove.easingFunction = Quintic.easeOut;
                        break;
                    case "Sine" :
                        effectMove.easingFunction = Sine.easeOut;
                        break;
                    default :
                        break;
                }
            }
            private function effectEndHandler():void
            {
                image.x = 24;
                image.y = 24;
            }
        ]]>
    </mx:Script>
    <mx:Move id="effectMove" target="{image}" duration="5000"
        easingFunction="{Bounce.easeOut}"
        effectEnd="effectEndHandler();" />
    <mx:Canvas id="canvas" width="100%" height="100%">
        <mx:Image id="image" source="@Embed('images/logo.png')"
            x="24" y="24" width="48" height="48" />
        <mx:Button id="btnMove" label="移动" click="moveImage

(event)" x="10" y="80"/>
        <mx:RadioButtonGroup id="radioGroup" 

change="radioChangeHandler();"/>
        <mx:RadioButton x="10" y="140" label="Back" 

groupName="radioGroup"/>
        <mx:RadioButton x="97" y="140" label="Bounce" 

groupName="radioGroup" selected="true"/>
        <mx:RadioButton x="199" y="140" label="Circular" 

groupName="radioGroup"/>
        <mx:RadioButton x="294" y="140" label="Cubic" 

groupName="radioGroup"/>
        <mx:RadioButton x="10" y="170" label="Elastic" 

groupName="radioGroup"/>
        <mx:RadioButton x="199" y="200" label="Exponential" 

groupName="radioGroup"/>
        <mx:RadioButton x="10" y="200" label="Linear" 

groupName="radioGroup"/>
        <mx:RadioButton x="97" y="200" label="Quadratic" 

groupName="radioGroup"/>
        <mx:RadioButton x="294" y="170" label="Quartic" 

groupName="radioGroup"/>
        <mx:RadioButton x="199" y="170" label="Quintic" 

groupName="radioGroup"/>
        <mx:RadioButton x="97" y="170" label="Sine" 

groupName="radioGroup"/>
    </mx:Canvas>
</mx:Panel>

6、CustomEasing.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
    实现自定义 easing 的 Demo
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute" width="400" height="300"
    title="自定义 easing">
     <mx:Script>
        <![CDATA[
            /**
             *  @param t 当前时间，介于 0 - 持续时间 之间
             *  @param b 动画属性的初始值
             *  @param c 动画属性的总计变化值
             *  @param d 运动的持续时间
             */
            private function myEasingFunction(t:Number, b:Number, 

c:Number, d:Number):Number
            {
                if ((t /= d) < (1 / 2.75))
                {
                    return c * (7.5625 * t * t) + b;
                  }
                  else if (t < (2 / 2.75))
                  {
                    return c * (7.5625 * (t-=(1.5/2.75)) * t + .75) + 

b;
                  }
                  else if (t < (2.5 / 2.75))
                  {
                    return c * (7.5625 * (t-=(2.25/2.75)) * t + .9375) 

+ b;
                  }
                  else
                  {
                      return c * (7.5625 * (t-=(2.625/2.75)) * t + 

.984375) + b;
                  }
            };
            private function moveImage(e:MouseEvent):void
            {
                var position:Point = new Point(stage.mouseX, 

stage.mouseY);
                var localPosition:Point = canvas.globalToLocal

(position);
                effectMove.end();
                effectMove.xTo = localPosition.x - (image.width / 2)
                effectMove.yTo = localPosition.y - (image.height / 2)
                effectMove.play();
            }
        ]]>
    </mx:Script>
    <mx:Move id="effectMove" target="{image}" 

easingFunction="myEasingFunction" />
    <mx:Canvas id="canvas" width="100%" height="100%" 

mouseDown="moveImage(event)">
        <mx:Image id="image" source="@Embed('images/logo.png')"
            x="24" y="24" width="48" height="48"
         />
    </mx:Canvas>
</mx:Panel>

7、Encyption3DES.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
    用 AS3 封装好的常用加密算法，
积少成多Flash(12)  Flex 3.0验证控件(Validator),缓动效果(easin
，
电脑资料
《积少成多Flash(12)  Flex 3.0验证控件(Validator),缓动效果(easin》(https://www.unjs.com)。详情 http://crypto.hurlant.com
    以下以 3DES 加密/解密为例
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute"
    title="3DES - ECB 加密解密算法 Demo" width="424" height="382">
    <mx:Script>
        <![CDATA[
            import com.hurlant.crypto.symmetric.ICipher;
            import com.hurlant.crypto.symmetric.PKCS5;
            import com.hurlant.crypto.symmetric.IPad;
            import com.hurlant.util.Base64;
            import com.hurlant.util.Hex;
            import com.hurlant.crypto.Crypto;
            private function encryptHandler():void
            {
                var key:String = txtKey.text;
                var keyData:ByteArray = Hex.toArray(Hex.fromString

(key));
                var plain:String = txtPlainText.text;
                var plainData:ByteArray = Hex.toArray(Hex.fromString

(plain));
                var name:String = "des3-ecb";
                var pad:IPad = new PKCS5;
                var mode:ICipher = Crypto.getCipher(name, keyData, 

pad);
                pad.setBlockSize(mode.getBlockSize());
                mode.encrypt(plainData);
                var result:String = Base64.encodeByteArray(plainData);
                txtCipherText.text = result;
            }
            private function decryptHandler():void
            {
                var key:String = txtKey.text;
                var keyData:ByteArray = Hex.toArray(Hex.fromString

(key));
                var cipher:String = txtCipherText.text;
                var cipherData:ByteArray = Base64.decodeToByteArray

(cipher);;
                var name:String = "des3-ecb";
                var pad:IPad = new PKCS5;
                var mode:ICipher = Crypto.getCipher(name, keyData, 

pad);
                pad.setBlockSize(mode.getBlockSize());
                mode.decrypt(cipherData);
                var result:String = Hex.toString(Hex.fromArray

(cipherData));
                txtPlainText.text = result;
            }
        ]]>
    </mx:Script>
    <mx:Label text="加密结果以 Base64 编码输出" x="10" y="10"/>
    <mx:Button x="286" y="184" label="加密" id="btnEncrypt" 

click="encryptHandler()"/>
    <mx:Button x="342" y="184" label="解密" id="btnDecrypt" 

click="decryptHandler()"/>
    <mx:TextInput x="53" y="34" width="337" id="txtKey" 

text="#s^un2ye31<cn%|aoXpR,+vh"/>
    <mx:Label x="10" y="36" text="密钥:"/>
    <mx:TextInput x="10" y="88" width="380" height="88" 

id="txtPlainText"/>
    <mx:TextInput x="10" y="240" width="380" height="88" 

id="txtCipherText"/>
    <mx:Label x="10" y="62" text="原文: "/>
    <mx:Label x="10" y="214" text="密文: "/>
</mx:Panel>

8、Other.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" 

height="300">
    <mx:Label text="懒了，Flex 还有好多东西啊，不过暂时先到这里

吧"/>
    <mx:Label text="SoundEffect 用于播放声音"/>
    <mx:Label text="VideoDisplay 用于播放视频"/>
    <mx:Label text="调用 Flash 开发的 swc 组件时，一般将其放入 libs 

目录内"/>
    <mx:Label text="减小主 Flex 程序的大小，可以把子模块写成 Module

（被编译成独立的 swf） ，然后在需要的时候加载"/>
    <mx:Label text="编译 Flex 的两种方式：Merged into code；Runtime 

shared library (RSL)"/>
</mx:VBox>

OK

来源：

http://www.cnblogs.com/webabcd/archive/2009/11/23/1608449.html