[源码下载]
积少成多Flash(12) - Flex 3.0 验证控件(Validator), 缓动效果(easing)
作者：webabcd
介绍
演示 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 封装好的常用加密算法。详情 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
[源码下载]