蔣維
摘要:該文介紹了在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.