计 算 器

点击浏览该文件

计算器的功能是进行数据计算。在计算器中主要要用到Flash中的重要元件­­­——按钮。我们可以看到，计算器的面板中整洁地分布着众多的按钮，包括输入数据的数字按钮和用于数据处理的符号按钮。我们可以为每一个按钮添加相关的Actions以实现鼠标单击与计算器处理的交互。

我们可以为每个按钮添加与其功能相对应的脚本，如为数字按钮“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：

其中在按数字和小数点键时调用函数PressNum，在按“+”、“-”、“×”、“÷”键时调用函数PressOper。clear表示是否清零，dot表示是否有小数点，operator代表当前的运算符，opernum记载第一个操作数。

（3）选择按钮0，在其动作面板中添加如下Actions：

（4）选择按钮1，在其动作面板中添加如下Actions：

（5）按照步骤（3）和步骤（4）的方法分别为按钮2~9添加相应的Actions。

（6）选择按钮“.”，在其动作面板中添加如下Actions：

（7）选择按钮“+”，在其动作面板中添加如下Actions：

（8）选择按钮“-”，在其动作面板中添加如下Actions：

（9）选择按钮“×”，在其动作面板中添加如下Actions：

（10）选择按钮“÷”，在其动作面板中添加如下Actions：

（11）选择按钮“=”，在其动作面板中添加如下Actions：

（12）选择按钮“C”，在其动作面板中添加如下Actions：

（13）选择按钮“MR+”，在其动作面板中添加如下Actions：

（14）选择按钮“MR-”，在其动作面板中添加如下Actions：

（15）选择按钮“MRC”，在其动作面板中添加如下Actions：

（16）按Ctrl+Enter键测试，OK！一个漂亮的计算器就做成功了。
源文件：
点击浏览该文件