小計算器/用flash製作計算器

出自 Tw.18dao.net
前往: 導覽搜尋


計算器的功能是進行資料計算。在計算器中主要要用到Flash中的重要元件­­­——按鈕。我們可以看到,計算器的面板中整齊地分佈著眾多的按鈕,包括輸入資料的數位按鈕和用於資料處理的符號按鈕。我們可以為每一個按鈕添加相關的Actions以實現滑鼠單擊與計算器處理的交互。

我們可以為每個按鈕添加與其功能相對應的腳本,如為數位按鈕“1”添加如下腳本:


on (release) {

display = display + 1;

}


以上語句實現單擊按鈕“1”在資料顯示區追加數位1的功能,並且還沒有考慮顯示區中的原有字元為操作符“+”、“-”、“*”、“/”等時的情況。使用這種方法為每一個按鈕編寫腳本將是煩瑣而沒有意義的。

1.製作計算器機殼 本實例不但要做一個有計算功能的作品,而且還要讓它美觀大方,所以先對計算器機殼的製作作一個較詳細的講解。

(1)啟動Flash MX,將其文檔尺寸設為450×500圖元,背景設為黑色。

(2)按快捷鍵Ctrl+F8新建一個圖形元件,並命名為face,下面製作計算器的機殼。

(3)選擇矩形工具,單擊選項區的按鈕,在出現的“矩形設置”對話方塊中將“角半徑”的值設為20,在舞臺中繪製一個大小為400×470圖元的無邊框圓角矩形。

(4)選中圓角矩形,選擇顏料桶工具,按快捷鍵Shift+F9打開混色器面板,在其中選擇線性漸變色並將其設置為藍色漸變,為矩形填充漸變色。然後選擇轉換填充工具,對漸變色進行調整。設置的漸變色及填充效果如圖2所示。



圖2 設置的漸變色及填充效果 (5)新建一個圖層,使用鋼筆工具繪製並用箭頭工具編輯如圖3中左圖所示的形狀並填充和調整漸變色,將其放到如圖3右圖所示的位置。



圖3 為計算器機殼添加裝飾形狀 (6)新建一個圖層,選擇矩形工具,單擊選項區的按鈕,取消圓角,繪製一個280×320的無邊框矩形,同樣將其填充成漸變色並進行調整。

(7)新建一個圖層,選擇直線工具,按住Shift鍵繪製一條長度為278,線粗為3的深藍色橫線,將其擺放到步驟(6)所繪矩形的頂邊位置。再繪製一條長度為318,線粗為3的深藍色豎線,將其擺放到步驟(6)所繪矩形的右邊位置。

(8)選中頂邊橫線,按住Ctrl鍵拖動複製一條,將複製出的橫線改為白色,線粗改為4,將其擺放到步驟(6)所繪矩形的底邊位置。按照同樣的方法將右邊豎線複製一條,將其改為白色,線粗為4,並擺放到矩形的左邊位置。

(9)新建一個圖層,選擇文本工具添加文本Flash MX,將其字體設為華文彩雲,字型大小設為30。

(10)連續選擇兩次“修改”/“分離”命令將文本打散,然後填充漸變色,注意在填充漸變色之前單擊按下繪圖工具欄中選項區的鎖定按鈕鎖定填充。使用箭頭工具選擇並刪除字母邊框,將其拖放到合適位置。face元件的最後效果如圖4所示。



圖4 face元件的最後效果 2.製作按鈕元件 本例計算器包括20個按鈕,所有按鈕可分為3類,即數位按鈕0~9(包括小數點“.”,符號按鈕 “+”、“-”、“*”、“/”、“=”以及“MR+”(與記憶數相加)、“MR-”(與記憶數相減)、“MRC”(記憶數清零)和“C”(清零)。我們將數位按鈕和“+”、“-”、“*”、“/”、“=”製作成一種樣式,將“MR+”、“MR-”、“MRC”和“C”製作成另外一種樣式。

(1)按快捷鍵Ctrl+F8新建一個圖形元件,命名為“buttonup”。

(2)在元件編輯場景中繪製如圖5所示的按鈕,注意令其邊線樣式為“極細”,並將按鈕中心圖形的上邊線顏色填充為白色,以體現邊緣高光效果。



圖5 buttonup元件及其參數 (3)按快捷鍵Ctrl+F8新建一個圖形元件,命名為“buttonover”。

(4)將如圖5所示的圖形複製一個,選擇“編輯”/“粘貼到當前位置”命令將其粘貼到buttonover元件的舞臺中央。

(5)將底面圖形填充為紅色,作為滑鼠經過時的按鈕狀態。

(6)按快捷鍵Ctrl+F8新建一個按鈕元件,命名為“0”

(7)將buttonup元件拖到按鈕“0”的第1幀“彈起”幀,並對齊舞臺中央。

(8)在按鈕“0”的第2幀“指針經過”幀插入一空白關鍵幀,將buttonover元件拖到舞臺中並對齊中心。

(9)在“彈起”幀單擊滑鼠右鍵,選擇快顯功能表中的“拷貝幀”命令;在第3幀“按下”幀單擊滑鼠右鍵,選擇快顯功能表中的“粘貼幀”命令,將拷貝的第1幀粘貼到第3幀。

(10)在第4幀“點擊”幀插入一個關鍵幀,選中舞臺中的buttonup元件,選擇“修改”/“分離”命令將其分離,然後刪除底層的圖形,將上層的圖形作為按鈕的熱區。

(11)新建一層,選擇文本工具輸入數位0,將其字型大小設為30,顏色設為白色,並可在屬性面板中通過調整寬高值,將其稍微壓扁一點。製作好的按鈕0的4個幀如圖6所示。



圖6 按鈕0及其4個幀 (12)在按鈕0的任意幀上單擊滑鼠右鍵,選擇“選擇所有幀”命令,再次單擊滑鼠右鍵,選擇“拷貝幀”命令。按快捷鍵Ctrl+F8新建一個按鈕元件,命名為“1”,在其第1幀上單擊滑鼠右鍵,選擇“粘貼幀”命令將按鈕0的所有幀粘貼到按鈕1中。

(13)選擇文本工具將粘貼過來的數位0修改成數位1。

(14)按照同樣的方法製作按鈕元件“2”~“9”以及“.”和“+”、“-”、“*”、“/”、“=”,如圖7所示。



圖7 第一種樣式的按鈕元件 (15)按快捷鍵Ctrl+F8新建一個按鈕元件,命名為“xbutton”。

(16)將按鈕xbutton編輯成如圖8所示。



圖8 xbutton元件及其參數 (17)新建一個按鈕元件,命名為“C”,將xbutton元件的所有幀拷貝並粘貼到C元件的時間軸上。

(18)新建一個圖層,選擇文本工具輸入字母C。

(19)按照同樣的方法製作按鈕“MRC”、“M+”和“M-”,如圖9所示。



圖9 第二種樣式的按鈕元件 3.佈局面板 所有元件製作好後即可以佈局計算器面板。

(1)將face元件拖放到主場景中。

(2)新建一層,將各按鈕拖放到主場景中的合適位置。

(3)新建一層,選擇文本工具繪製一個文本框,在屬性面板中將其設置成輸入文本,其他具體設置如圖10所示。佈局好的面板如圖11所示。



圖10 在屬性面板設置文本屬性

圖11 佈局好的計算器面板 4.添加Actions 計算器的面板做好了,但它現在只是一個沒有靈魂的空殼,現在我們就為它賦予靈魂——Actions,讓它成為一個真正的計算器。

(1)在主場景中新建一層,並命名為Actions。

(2)選中Actions層的第1幀,打開幀動作面板,在其中添加如下Actions:


stop();

memory = 0;

display = "0";

function PressNum(num) {

if (clear) {

clear = false;

dot = false;

display = "0";

}

if (display == "0" and num != ".") {

display = num;

} else {

display = display+num;

}

}

function PressOper(oper) {

if (operator == "+") {

display = Number(opernum)+Number(display);

}

if (operator == "-") {

display = opernum-display;

}

if (operator == "×") {

display = opernum*display;

}

if (operator == "÷") {

display = opernum/display;

}

clear = true;

dot = false;

operator = oper;

opernum = display;

if (oper != "=") {

display = oper;

}

}


其中在按數位和小數點鍵時調用函數PressNum,在按“+”、“-”、“×”、“÷”鍵時調用函數PressOper。clear表示是否清零,dot表示是否有小數點,operator代表當前的運算符,opernum記載第一個運算元。

(3)選擇按鈕0,在其動作面板中添加如下Actions:


on (release) {

PressNum("0");

}


(4)選擇按鈕1,在其動作面板中添加如下Actions:


on (release) {

PressNum("1");

}


(5)按照步驟(3)和步驟(4)的方法分別為按鈕2~9添加相應的Actions。

(6)選擇按鈕“.”,在其動作面板中添加如下Actions:


on (release) {

PressNum(".");

}


(7)選擇按鈕“+”,在其動作面板中添加如下Actions:


on (release) {

PressOper("+");

}


(8)選擇按鈕“-”,在其動作面板中添加如下Actions:


on (release) {

PressOper("-");

}


(9)選擇按鈕“×”,在其動作面板中添加如下Actions:


on (release) {

PressOper("*");

}


(10)選擇按鈕“÷”,在其動作面板中添加如下Actions:


on (release) {

PressOper("/");

}


(11)選擇按鈕“=”,在其動作面板中添加如下Actions:


on (release) {

PressOper("=");

}


(12)選擇按鈕“C”,在其動作面板中添加如下Actions:


on (release) {

display = "0";

dot = false;

}


(13)選擇按鈕“MR+”,在其動作面板中添加如下Actions:


on (release) {

memory = memory+Number(display);

display = "0";

}


(14)選擇按鈕“MR-”,在其動作面板中添加如下Actions:


on (release) {

memory = memory-Number(display);

display = "0";

}


(15)選擇按鈕“MRC”,在其動作面板中添加如下Actions:


on (release) {

display = memory;

memory = 0;

clear = true;

}


(16)按Ctrl+Enter鍵測試,OK!一個漂亮的計算器就做成功了。 原始檔案:

關于“小計算器/用flash製作計算器”的用戶留言:

目前暫無留言

新增相關留言✍