積少成多Flash(12) - Flex 3.0 驗證控件(Validator), 緩動效果(easing)

<a href="http://down.51cto.com/data/100162" target="_blank">[源碼下載下傳]</a>

介紹

示範 Flex 3.0 中的驗證控件的應用，以及各種緩動效果(easing)的應用

Validator - 各種驗證控件的基類，其可用于必填驗證

DateValidator - 日期驗證控件

EmailValidator - Email 驗證控件

RegExpValidator - 正規表達式驗證控件

緩動（easing） - 系統自帶的動畫緩動效果，以及自定義緩動效果

加密/解密 - 常用加密算法的 AS3 庫的應用

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

線上DEMO

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:Form>

</mx:Panel>

2、DateValidator.mxml

應用日期驗證控件的 Demo

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"/>

3、EmailValidator.mxml

應用 Email 驗證控件的 Demo

title="Validator - EmailValidator (Email驗證)">

<mx:EmailValidator id="emailValidator" source="{txtEmail}" property="text"

missingAtSignError="缺少@"

valid="mx.controls.Alert.show('驗證成功');"

<mx:FormItem label="Email: ">

<mx:TextInput id="txtEmail"/>

<mx:Button id="btnSubmit" label="驗證" click="emailValidator.validate();" />

4、RegExpValidator.mxml

應用正規表達式驗證控件的 Demo

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"

flags="g,i" expression="^[a-z]+$"

valid="handleResult(event)" invalid="handleResult(event)"

noMatchError="請輸入正确的英文字母"

required="false"

<mx:FormItem label="請輸入英文字母: ">

5、Easing.mxml

示範各種緩動（easing）的 Demo

和 Silverlight 中的緩動一緻 http://www.cnblogs.com/webabcd/archive/2009/08/20/1550334.html

title="easing 的應用(TweenEffect 的 easingFunction 屬性)">

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;

case "Circular" :

effectMove.easingFunction = Circular.easeOut;

case "Cubic" :

effectMove.easingFunction = Cubic.easeOut;

case "Elastic" :

effectMove.easingFunction = Elastic.easeOut;

case "Exponential" :

effectMove.easingFunction = Exponential.easeOut;

case "Linear" :

effectMove.easingFunction = Linear.easeOut;

case "Quadratic" :

effectMove.easingFunction = Quadratic.easeOut;

case "Quartic" :

effectMove.easingFunction = Quartic.easeOut;

case "Quintic" :

effectMove.easingFunction = Quintic.easeOut;

case "Sine" :

effectMove.easingFunction = Sine.easeOut;

default :

private function effectEndHandler():void

image.x = 24;

image.y = 24;

<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>

6、CustomEasing.mxml

實作自定義 easing 的 Demo

title="自定義 easing">

<mx:Script>

/**

* @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;

};

var position:Point = new Point(stage.mouseX, stage.mouseY);

var localPosition:Point = canvas.globalToLocal(position);

effectMove.xTo = localPosition.x - (image.width / 2)

effectMove.yTo = localPosition.y - (image.height / 2)

<mx:Move id="effectMove" target="{image}" easingFunction="myEasingFunction" />

<mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage(event)">

x="24" y="24" width="48" height="48"

7、Encyption3DES.mxml

用 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">

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 cipher:String = txtCipherText.text;

var cipherData:ByteArray = Base64.decodeToByteArray(cipher);;

mode.decrypt(cipherData);

var result:String = Hex.toString(Hex.fromArray(cipherData));

txtPlainText.text = result;

<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="密文: "/>

8、Other.mxml

<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>

本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/342258，如需轉載請自行聯系原作者

積少成多Flash(12) - Flex 3.0 驗證控件(Validator), 緩動效果(easing)

繼續閱讀

OC中的記憶體管理（kazuki Sakamoto）（上）

如何手動釋放Python的記憶體

程式員的工齡vs發量！剛實習的小夥，你要挺住！

【Android 性能優化】—— 詳解記憶體優化的來龍去脈1. 記憶體與記憶體配置設定政策概述2. Generational Heap Memory記憶體模型的概述3. GC機制概述4. Android記憶體洩漏分析6. 常見的記憶體洩漏總結：

Android代碼記憶體優化建議-Android資源篇 Android資源優化

Android 記憶體優化 - 禁用DrawingCache減少記憶體消耗

android記憶體優化之三記憶體分析工具的使用

Android ION機制_HAL與vendor層共享記憶體_流程簡介(1)

Java虛拟機(一)——Java記憶體區域劃分

深入了解java虛拟機之記憶體模型

Java記憶體區域與記憶體溢出異常OOM——深入了解Java虛拟機Java記憶體區域與OOM記憶體溢出異常

讀書筆記——深入了解java虛拟機第2章（java記憶體區域與記憶體溢出異常）

jvm 5塊記憶體堆，棧等

iOS開發深拷貝與淺拷貝

Memory中的Channel/Rank/Bank解析Memory中的Channel/Rank/Bank解析

JVM 記憶體模型和垃圾回收（二）：串行垃圾回收器