基于動(dòng)作腳本的文本框交互式練習(xí)題

蔣維

摘要：該文介紹了在Flash中如何利用文本框和動(dòng)作腳本實(shí)現(xiàn)隨機(jī)的加減乘除四則運(yùn)算練習(xí)題，最后可統(tǒng)計(jì)出做題的時(shí)間以及查看練習(xí)結(jié)果等。

關(guān)鍵詞：Flash；文本框；動(dòng)作腳本

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）25-0056-03

Flash的動(dòng)作腳本ActionScript（簡稱AS）為我們提供了各種命令，運(yùn)算符以及對(duì)象，我們可以使用AS在Flash中實(shí)現(xiàn)許多交互功能。Flash中有三種文本類型：靜態(tài)文本、輸入文本和動(dòng)態(tài)文本，靜態(tài)文本僅僅用于輸入需要顯示的文字，輸入文本用于數(shù)據(jù)的輸入，動(dòng)態(tài)文本內(nèi)容根據(jù)AS的指示變化而變化。文本框除了利用Flash提供的文本工具創(chuàng)建外，還可以利用AS進(jìn)行創(chuàng)建，利用文本工具只能在設(shè)計(jì)階段創(chuàng)建，比較直觀簡單，屬性設(shè)置可以利用屬性面板進(jìn)行，利用AS可以在動(dòng)作腳本運(yùn)行期間動(dòng)態(tài)創(chuàng)建，比較靈活，但使用的屬性設(shè)置只能通過代碼進(jìn)行。本程序把創(chuàng)建文本的兩種方法相結(jié)合靈活的實(shí)現(xiàn)了練習(xí)題中的某些功能。

1 程序的設(shè)計(jì)與實(shí)現(xiàn)

1.1 程序?qū)崿F(xiàn)的目標(biāo)

程序的主要目標(biāo)是實(shí)現(xiàn)用戶能夠選擇做練習(xí)題的數(shù)目，程序根據(jù)用戶所選擇的練習(xí)題目數(shù)隨機(jī)的出加減乘除四則運(yùn)算練習(xí)題。

1.2 程序主要的處理函數(shù)

1） Math.random（）函數(shù)與Math.round（）函數(shù)：這兩種函數(shù)結(jié)合使用產(chǎn)生隨機(jī)的運(yùn)算數(shù)。

2） addEventListener（）函數(shù)：此函數(shù)是偵聽器函數(shù)或事件處理函數(shù)，本程序中用了addEventListener（）函數(shù)的鍵盤事件處理和鼠標(biāo)事件處理。

3） String （）函數(shù)與Number （）函數(shù)：文本框中的數(shù)據(jù)是字符型數(shù)據(jù)，進(jìn)行四則運(yùn)算時(shí)需要數(shù)字型數(shù)據(jù)，利用這兩種函數(shù)可以實(shí)現(xiàn)數(shù)字和字符之間的轉(zhuǎn)換。

4） gotoAndStop（）函數(shù)與stop （）函數(shù)：本程序中stop（）函數(shù)用來使Flash停留在當(dāng)前幀，gotoAndStop（）函數(shù)是用來跳轉(zhuǎn)到指定幀并停留在指定幀。

1.3 程序的設(shè)計(jì)

本程序共分為三個(gè)界面：在第一個(gè)界面上用戶可以輸入需要做的練習(xí)題的數(shù)目，只能輸入1-30之間的數(shù)值，輸錯(cuò)會(huì)有提示，輸完題目數(shù)后，按開始答題按鈕進(jìn)入第二個(gè)界面；在第二個(gè)界面上會(huì)先隨機(jī)出現(xiàn)第一道練習(xí)題，界面上方會(huì)顯示出共需要做幾道題，同時(shí)會(huì)顯示當(dāng)前做的是第幾道題，當(dāng)用戶輸完當(dāng)前題目的計(jì)算結(jié)果按 enter鍵后，系統(tǒng)會(huì)自動(dòng)隨機(jī)的出下一道任意類型的練習(xí)題，當(dāng)最后一題做完后自動(dòng)進(jìn)入第三界面；在第三個(gè)界面上有兩個(gè)選擇按鈕，第一個(gè)按鈕是查看結(jié)果按鈕，點(diǎn)擊它可以查看所有做過的題目以及正誤判斷，第二個(gè)按鈕是重新做題按鈕，點(diǎn)擊它可以回到第一個(gè)界面重新開始做題，同時(shí)界面三上方會(huì)顯示出用戶做題所用的時(shí)間。

1.4 程序的實(shí)現(xiàn)過程

程序共分為三個(gè)界面，所以需要在新建的Flash文檔的時(shí)間軸面板的圖層1上創(chuàng)建三個(gè)關(guān)鍵幀，每一個(gè)關(guān)鍵幀實(shí)現(xiàn)一個(gè)界面的建立。

1） 界面一的建立

選中第一幀關(guān)鍵幀，在窗口舞臺(tái)上我們利用文本框和按鈕創(chuàng)建如下圖1的界面。

打開動(dòng)作面板輸入以下代碼：

stop（）；

var N，tishi；

tishi=new TextField（）； //生成文本域

tishi.defaultTextFormat = new TextFormat（"黑體"，20，0xff0000）； //設(shè)置文本格式

tishi.x = 200； tishi.y = 200； //設(shè)置文本在舞臺(tái)上的位置

mb.addEventListener（MouseEvent.CLICK ，f1）； //設(shè)置按鈕mb的鼠標(biāo)偵聽事件

function f1（evt：MouseEvent）

{N = Number（shumu.text）； //把輸入文本框中內(nèi)容轉(zhuǎn)成數(shù)字放入變量N

if （N>30||N==0） //輸入數(shù)字錯(cuò)誤分支

{ tishi.text = "請(qǐng)輸入1-30之間的數(shù)字！"； tishi.autoSize = TextFieldAutoSize.CENTER；

addChild（tishi）； gotoAndStop（1）；}

else { tishi.text = ""； } gotoAndStop（2）； } //輸入數(shù)字正確分支

2） 界面二的建立

選中第二幀關(guān)鍵幀，在窗口舞臺(tái)上利用文本框創(chuàng)建如下圖2的界面，界面上顯示的文字和符號(hào)皆由靜態(tài)文本框完成，如上述圖1。

打開動(dòng)作面板輸入以下代碼：

var timestart；

var now：Date = new Date（）；

timestart = now.hours * 3600 + now.minutes * 60 + now.seconds； //記錄做題開始時(shí)間

var i=0，m，n，t，j = 0；

var textStr：String = "+-×÷"； //定義符號(hào)字符

txt1.text = String（Math.round（Math.random（） * 100））； //隨機(jī)取初始算式的運(yùn)算數(shù)1

txt2.text = String（Math.round（Math.random（） * 100））； //隨機(jī)取初始算式的運(yùn)算數(shù)2

fuhao.text = textStr.charAt（i）； //取初始算式的運(yùn)算符號(hào)

j = j + 1；

tishu.text = N； tihao.text = j； //記錄題目總數(shù)和題號(hào)數(shù)

var TextSprite：Array = new Array（）； //定義數(shù)組TextSprite，用于存放做題記錄

var num = 0；

txt.addEventListener（KeyboardEvent.KEY_DOWN， KeyDown）； //設(shè)置鍵盤偵聽事件

function KeyDown（e：KeyboardEvent）：void

{ if （e.keyCode == Keyboard.ENTER） //以下是按鍵盤上enter鍵所執(zhí)行的操作

{ num=Number（txt.text）；

TextSprite[j-1] = new TextField（）； //數(shù)組TextSprite中每一元素生成一個(gè)文本域

if（（txt.text.length ！=0）&&（（i==0&&m+n==num）||（i==1&&m-n==num）||（i==2&&m*n==num）||（i==3&&m/n==num））） //判斷輸入內(nèi)容是否與左邊算式相等

{TextSprite[j - 1].text = txt1.text + fuhao.text + txt2.text + "=" + txt.text+" "+"√"；}

//輸入結(jié)果正確記錄下當(dāng)前所做題目及答案并判斷為正確

else

{TextSprite[j - 1].text = txt1.text + fuhao.text + txt2.text + "=" + txt.text+" "+"×"；}

//輸入結(jié)果錯(cuò)誤記錄下當(dāng)前所做題目及答案并判斷為錯(cuò)誤

txt.text = ""； //清除上一次輸入的答案，為下一道題做準(zhǔn)備

m = Math.round（Math.random（） * 100）； //隨機(jī)取下一道題的運(yùn)算數(shù)1放入變量m

n = Math.round（Math.random（） * 100）； //隨機(jī)取下一道題的運(yùn)算數(shù)2放入變量n

i = Math.round（Math.random（） * 3）； //隨機(jī)取下一道題的運(yùn)算符號(hào)的序號(hào)

if （m

while （i==3）

{ if （m%n==0&&n！=0）{ break； }

else

{ m = Math.round（Math.random（） * 100）； n = Math.round（Math.random（） *100）； }

}//符號(hào)為除號(hào)時(shí)除法算式應(yīng)沒有余數(shù)，如果取的數(shù)不滿足條件需要重新再取

txt1.text = String（m）； //運(yùn)算數(shù)1賦給txt1

txt2.text = String（n）； //運(yùn)算數(shù)2賦給txt2

fuhao.text = textStr.charAt（i）； //運(yùn)算符號(hào)賦給fuhao

j = j + 1； tihao.text = j； //取得當(dāng)前題號(hào)

if （j>N）{ gotoAndStop（3）； } //做完用戶輸入的題目數(shù)后轉(zhuǎn)到界面三

}}

3） 界面三的建立

選中第三幀關(guān)鍵幀，在窗口舞臺(tái)上我們利用文本框和按鈕創(chuàng)建如圖3的界面。

打開動(dòng)作面板輸入以下代碼：

var nowt：Date = new Date（）；

yongshi.text = String（nowt.hours * 3600 + nowt.minutes * 60 + nowt.seconds - timestart）；

mb1.addEventListener（MouseEvent.CLICK ，f3）； //設(shè)置按鈕mb1的鼠標(biāo)偵聽事件

function f3（evt：MouseEvent）

{var d = 0；

for （var k：uint=0； k

{ TextSprite[k].defaultTextFormat = new TextFormat（"黑體"，20，0xff0000）；

TextSprite[k].text = TextSprite[k].text；

if （k%2==0）{ TextSprite[k].x = mb1.x+100； TextSprite[k].y = mb1.y - 25 + d； }

else{ TextSprite[k].x = mb1.x+250； TextSprite[k].y = mb1.y - 35 + d； }

//if-else語句把TextSprite數(shù)組中的記錄結(jié)果分成奇偶兩列顯示

TextSprite[k].autoSize = TextFieldAutoSize.LEFT；

addChild（TextSprite[k]）；

d = d + 10；}}

mb2.addEventListener（MouseEvent.CLICK ，f2）； //設(shè)置按鈕mb2的鼠標(biāo)偵聽事件

function f2（evt：MouseEvent）

{for （var k：uint=0； k

gotoAndStop（1）；}

2 結(jié)論

本文利用Flash的動(dòng)作腳本實(shí)現(xiàn)了文本框交互式練習(xí)題，程序中需要注意幾點(diǎn)：第一，在CS3以上版本中，輸入文本框和動(dòng)態(tài)文本框沒有字體只允許輸入顯示制作時(shí)輸入的數(shù)據(jù)，解決辦法是嵌入字體或是在文本屬性中改為使用設(shè)備字體；第二，本程序中的輸入文本框需在屬性面板中把輸入行設(shè)為單行；第三，可以添加一些動(dòng)作腳本使程序更加完善，如：txt.restrict="0-9"限制輸入文本框只能輸入數(shù)字，txt1.borderColor = 0xff0000可設(shè)置文本框的外邊框顏色，txt1.backgroundColor = 0x00FF00可設(shè)置文本框的內(nèi)部填充顏色，等等。把Flash的三種文本類型結(jié)合使用，可以制作出豐富多彩的文本框交互效果。

參考文獻(xiàn)：

[1] 劉本軍，李登豐. Flash ActionScript 3.0互動(dòng)設(shè)計(jì)項(xiàng)目教程[M]. 北京：人民郵電出版社，2015：11.

[2] 李林. FlashCS動(dòng)畫制作教程[M].北京：清華大學(xué)出版社，2014：8.