银行利率表

来源： 作者： 出处：巧巧读书 2006-03-26 进入讨论组

• 关 键 词：
• window
• flash
• rip
• 快捷键
• 作品

精华网络内容 :http://www.qqread.com/network/

实例说明：随着银行业务向网络方面倾斜，网上可查询的利率表已是银行网站不可缺少的一部分。通过这个例子，你可以了解到flash会给这些死板的数字赋予多大的可观性。

有关知识：通过action从外部文件（txt文本文件）读取变量（利率值），界面的设计、布局的均衡，动画效果的加入。
操作步骤：

（一）构思。
      无论哪种作品，规模大小，这都是不可缺的一步，在进入flash前，起码脑子里，最好在稿纸上，都应该有一个草图（剧本），想好这个作品的主题，布局，镜头、界面的变换，制作步骤，每个步骤应用到哪种技术，全部都大致想好了， 才进入flash进行创作。这样才能事半功倍，高效地完成任务。反之，什么都没准备好，就开软件制作，只会“开始得越早，结束得越晚。”但我并不是说，创作过程中不可以对原有构思再创作，总之，我的目的是让大家高质高效地创作出好作品来。

下面就来谈谈这个利率表的剧本：

由于此作品是商业运用，界面应尽量典雅，简洁，花俏的动画，文字效果要适可而止。

两条彩带从屏幕右边向左飞出，把观众的视线带到左上方，Gbank的立体文字在那里逐渐显现，其中G字闪耀着金色的光芒，然后，屏幕中间弹出一个方框，逐渐变大，接着表格及其文字提示显示，利率数字犹如滚动字条逐步显示出来（充满动感）。

再想想大致的实现步骤、手段：

彩带，方框及立体文字的制作、显现、动画是最容易的，不用细想，其中G字的金属光芒可通过遮罩，加色彩渐变完成。

重点要想想的是利率数字的滚动显示：因为利率是变动的，而一般的flash产生的作品swf文件是不变的，要想改动其中的文字，图像只能在flash里重新编辑原文件，再编译产生新的swf文件。显然，对这个例子来说，这并不是最佳方法。这就需要用flash的一个关键功能――“从外部文件读取变量”来解决。处理步骤：先做一个0-9的动画显示mc，加遮罩（每次只显示一个数字），在时间轴上显示每个数字时都加一个判断和stop，再读取变量做相应的处理，控制这个mc在哪个数字显示时停止。

好，基本上想好了，（现在没看明白不要紧，我只是想大家有一个大概的印象）就进入下一步吧：

（二）实际操作：

1.       打开flash。

2.       新建立一个文件，取名为gbank.fla。

3.       按ctrl+m设置屏幕参数，宽度600高度450 。

4.       选缺省的工具栏、面板显示：菜单Window->Panel Sets->Default Layout。

5.    画渐变背景。

  在工具栏按 设置填充颜色，在右上角的fill菜单选择线性渐变色（line Gradient）（如图L-1）并按面板右下角的小磁盘存盘。

图L－1填充面板

6.     再选择tools面板下的 矩形工具（Rectangle ），选边界色 为无，在工作区域上画一个矩形（大小随便，用 点选矩形后在右上角的info面板（图L-2）

图L-2 info面板

里调整矩形的参数。再调整好渐变色的方向（详细见我的另一篇教程《立体电话》），再用 点选矩形后按F8功能键把他变成一个图像（Graphic），起名为“背景”。再把当前图层命名为 并按 锁住。
      tips:对于已完成的层（layer），为免在编辑其他层时影响该层，一般要养成此习惯，用 锁定。
      为使背景更加时髦，现加入当今流行的电视线，按ctrl＋F8新建一个symbol名为电视线，在工作区画一条紫色的细线，在info窗口把w参数设定为屏幕宽度x坐标为零参照点为中心点，点选后按ctrl＋c复制，再按ctrl＋v粘贴五次，再全选，再复制、粘贴八次，就产生出了45条电视线，全选，按ctrl＋k弹出align面板（图L-3）

      

图L-3对齐面板                    图L－4对齐面板

，再按如图按钮线中心点对齐，再按选其中一条线移动到工作区的最底端，再全选所有线按图L-4使所有线上下等距。于是这个symbol就做好了，按 回到场景1，按 新建一个图层，命名为“电视线”，按ctrl＋L把library控制窗弹出，把刚作的symbol“电视线”拖拽到场景中，调整好位置，再按ctrl＋I在effect面板设定Alpha（透明度）参数为5（图L-5）。

图L-5 效果Effect面板

7.     制作题目彩条，先选边界颜色为白色，再选填充色为橙色渐变色（图L-6），再点选右边的渐变色，在mixer面板把alpha值设定为0（图L-7），点选矩形工具，新建一个元

    

          图L-6 填充面板                   图L-7调色Mixer面板

素命名为“彩条”，点选矩形工具，画一个细长的矩形，回到场景1，建新层“题目彩条”，把元素“彩条”从library拖拽到场景中，设定info（图L-8），再复制一个在下方。

 

图L-8 Info面板                        图L-9 字体面板

8.     制作银行英文“bank”，锁其他层，建新层“bank”，用 在左上角键入白色的bank，参数如图L-9：，用 点选按F8把他变成一个元素（命名随意），按右键选Edit In Place编辑，复制关键帧（ctrl+alt+c）建新层，粘贴关键帧（ctrl+alt+v），在下面那层把字体颜色设定为黑色，按 ，再按键盘的下箭头和右箭头分别两次。有阴影效果的bank就完成了。

9.        G字特效的制作：
         回到场景1，建新层“G标志”。在场景左上角打入黑色的G字，把它变为符号“G标志”。对它进行编辑，把当前图层命名为“G遮罩”，复制图层两遍，分别命名为“立体效果”，和“阴影”。在此三层的40帧都按F5插入帧，在立体效果层全选再按ctrl＋B打散，再选菜单Modify->Shape->Expand Fill…，接着设定参数如图L-10。选填充色为 ，选“阴影”层，同样打散，选填充色为黑色，同上选Expand Fill参数如图L-11

   

图L-10扩展填充面板      图L-11扩展填充面板     图L-12扩展填充面板

再选Expand Fill下的Soften Fill Edges（柔化边界）（图L-12），全选，往右下移动适当的位置阴影就完成了。再在“G遮罩”和“立体效果”之间建新层“动态颜色”（图L-13）

     

图L-13 建“动态颜色”层      图L-14 矩形（G主色）

并把“G遮罩”定义为mask，取消“G遮罩”和“动态颜色”的锁定，编辑“动态颜色”层，画一个矩形（图L-14），把其变成一个符号，在40帧按F6插入一个关键帧，在首帧设定移动渐变motion tween，如图设定其参数（图L-15）（逆时针旋转一圈），好，锁定全部层，播放一下，怎么样，cool吧！（注：图L-15a分别是“立体效果”、“阴影”层和整体效果。）

 

图L-15渐变参数面板                    图L-15a 立体G的分层显示

10.         利率表文字，表格线，背景的制作（略）
         完成了前面的步骤，这几个简直是小菜一碟了吧！要点是分别建层，并都要在“G标志”层上面，还有：要对齐元素先全选再用ctrl+k弹出对齐窗口操作。

 

11.    利率数字的制作：
          这才是本例子的重头戏，步骤：
         a.制作一个0-9的动画mc，
       先做一个0-9的竖条（图L-16），命名为“0-9数字”。再新建一个mc命名为“滚动数字”，建三层如图L-17，“变量层 ”用 画一个文本框参数如图L-18，

图L-17 “0-9动画”mc的工作界面

图L-18 文本框参数

“遮罩”层画一个和 同样大小的黑色矩形，“0-9数字”层将符号“0-9数字”做一个移动渐变motion tween（2-29帧），第一帧“0-9数字”和遮罩的相对位置为

        

图L-16  图L-19 图L-20

图L-19，29、30帧为图L-20，（遮罩不动），在“0-9数字”层中，当每个数字与遮罩重合时在时间轴按F6建关键帧，在每个关键帧按鼠标右键选action，数字‘0’跟遮罩重合的帧写上action(图L-21) 然后加stop()，如此类推，‘1’的帧里，将Number(“0”)

图L-21 action输入

里的0改为1，将其余的2-9的帧全部改好。
      tips：在action面板上按住ctrl选择多条action语句再按右键复制（图L-22）

图L-22 action操作

再选其他帧粘贴（paste）就省却重新输入类似语句的麻烦。，
      30帧加入action 上面两层分别用F5延长至30帧。再在“数字”层的第一帧写入stop()，这个数字动画mc就完成了。
       b.建立“利率”mc：
         按ctrl＋F8新建mc“利率”，把新层命名为“数字”。接着就把刚做好的符号“滚动数字”从library拖拽到此层，因本例涉及到十个利率，每个利率包括一个位数字和小数点后两位数字。故把符号“0-9数字”复制至30个，用打字工具加入小数点，对齐排列好。然后回到场景1，把此mc放入新建的一层“利率”里。这时，读者可能会问，怎么把刚做mc里的数字对齐上面步骤里做的表格与数字呢？这个容易，在此mc上按鼠标右键选Edit In Place，接下来的事就不用我多说了吧！别忘了给每个

图L-23 动画片断命名

“滚动数字”mc起名M1－M30(如图L-23)，接下来的一步更为关键，前面说过，利率的显示是通过读取外部文件作相应处理的，这个外部文件是给银行工作人员用的，当然要按银行的规矩定义变量名，活期、定期（利率）分别对应hq、dq；零存整取对应lz；时间呢？3、6个月分别对应03、06；1、3、5年分别对应81、82、85；于是就有以下语句：

Action语句	说明（不包含在action语句里）
hq=099	活期利率相当于0.99
&dq03=198	定期三个月
&dq06=216	定期六个月
&dq81=225	定期一年
&dq82=243	定期两年
&dq83=270	定期三年
&dq85=288	定期五年
&lz81=198	零存整取一年
&lz83=216	零存整取三年
&lz85=225	零存整取五年

（注意：&是分隔变量表达式的符号，不可缺。还有，利率本来是有小数点的数字，但在flash里，还是把小数点去掉好处理。）
用文本编辑工具把以上语句输入并存入“ckll.txt”文件，并把该文件放在跟gbank.fla同一个目录下。
     怎么在mc里写action script来建立这个外部文件与滚动数字的联系呢？让我们回到“利率”mc的编辑场景，建一新层“action”，在第一帧建立action如图L-24，

图L-24 action编写

那么，该mc运行到第一帧变量便读入了吗？不是，要到第三帧才可以。这是flash5的一个迷，要是上一个版本的话，第2帧便可以用变量了，真是……，总之，我们知道就是了。好，废话少说，这一步，我们给M1－M30里的变量digit赋值，这需要用到flash里的一个函数substring（在制定的字符串中抽取字符），于是我们在“利率”mc的“action”层的第三帧写入：
M1:digit = substring(/:hq, 1, 1);

M2:digit = substring(/:hq, 2, 1);

M3:digit = substring(/:hq, 3, 1);

M4:digit = substring(/:dq03, 1, 1);

M5:digit = substring(/:dq03, 2, 1);

M6:digit = substring(/:dq03, 3, 1);

M7:digit = substring(/:dq06, 1, 1);

M8:digit = substring(/:dq06, 2, 1);

M9:digit = substring(/:dq06, 3, 1);

M10:digit = substring(/:dq81, 1, 1);
M11:digit = substring(/:dq81, 2, 1);

M12:digit = substring(/:dq81, 3, 1);

M13:digit = substring(/:dq81, 1, 1);

M14:digit = substring(/:dq82, 2, 1);

M15:digit = substring(/:dq82, 3, 1);

M16:digit = substring(/:dq83, 1, 1);
M17:digit = substring(/:dq83, 2, 1);

M18:digit = substring(/:dq83, 3, 1);

M19:digit = substring(/:dq85, 1, 1);

M20:digit = substring(/:dq85, 2, 1);

M21:digit = substring(/:dq85, 3, 1);

M22:digit = substring(/:lz81, 1, 1);

M23:digit = substring(/:lz81, 2, 1);

M24:digit = substring(/:lz81, 3, 1);

M25:digit = substring(/:lz83, 1, 1);

M26:digit = substring(/:lz83, 2, 1);

M27:digit = substring(/:lz83, 3, 1);

M28:digit = substring(/:lz85, 1, 1);

M29:digit = substring(/:lz85, 2, 1);

M30:digit = substring(/:lz85, 3, 1);

是不是长了点，还好，flash5的action编写有Expert Mode（图L-25）复制和粘贴

图L-25 action界面

copy&paste，再改一改，很快就输入完了。现在，M1-M30都知道在显示哪个数字时停了，接下来就让他们播放吧！在第4帧写入：

Action语句	说明（不包含在action语句里）
abc = 1;	设定循环变量
while (Number(abc)<=30) {	设定循环条件，循环次数为30遍
tellTarget ("M" add abc) {	命令M1-M30
play ();	播放
}
abc = Number(abc)+1;	循环变量累加
}

然后在第五帧写入stop()，把“数字”层在时间轴上用F5延长至第五帧。“利率”mc就完成了（如图L-25a）。

图L-25a “利率”mc

（注意：在每一帧写入action前，先在这一帧按F6建一关键帧）

12. 现在，大体上完成了。我们返回到场景1，按ctrl+enter试放电影。还可以吧。可是，是不是欠缺点什么呢？标题G字的动感出来了，可是标题右边有少许空洞的感觉，就加点动画吧。新建一个mc“gbank”，也是文字的滚动效果，也是遮罩加3个字符“gbank”的横向移动Motion tween，看了“滚动数字”mc的制作，这个不难吧。返回场景1，建新层“bank动画”，把“gbank”mc放进去，选 进行旋转30度左右（图L-25a），再在Effect

            

图L-25a G-bank图                  L-26透明度设定  

面板把透明度alpha设定为36％（图L-26），复制多两个“gbank”mc，透明度分别设定为20％和10％，排好位置。再新建一遮罩层“动画遮罩”（图L-27），画一个黑色的矩形，高度为两个彩条之间的距离。再试放电影，是不是好点了？！

    图L-27建遮罩

      tips:次要元素要调得透明些，毕竟这些都是辅助的，不要太显眼，喧宾夺主。

13. 细心的读者可能会问，开头构思中的开始动画在那里？不用着急，我的习惯是最后才做这些开头过渡动画的。
        先做彩条动画，建一新层“题目彩条2”，把“题目彩条”里下面的彩条剪切后按ctrl＋shift＋v按原位置粘贴进新层。然后在17帧拖拽鼠标选择后插入关键帧（图L-28）。

图L-28 时间轴操作

在17帧把两个彩条都搬到出工作区右边，然后分别，再分别在第一帧做动态渐变motion tween，选择时间轴上的相应时段（按住shift键进行多选），按鼠标右键选Reverse Frames（图L-28a），再设定渐变参数（图L-29），在第一帧分别纵向翻转选菜单

图L-28a 反向操作

Modify->Transform->Flip Vertical，彩条动画完成。

图L-29渐变设定

  下面做G标志和bank英文的逐渐显现，把其对应的层的第一帧（关键帧）移动到第18帧，在27帧同上各做一个关键帧，18帧的两个元素分别设定其透明度alpha为0%，设移动渐变。
     表格背景的效果就更加简单了，把第一帧搬到27帧，37帧做关键帧，在27帧选定表格背景后按ctrl＋alt＋s设定变形scale为20％（图L-30）透明度alpha为20%，

     图L-30 变形设定

产生移动渐变，OK。
      接下来把没有编辑到的其他层（除“背景”和“电视线”层）的第一帧搬到37帧，有的层37帧是空帧的画按F5补足帧，接着在37帧加个stop()。最后导出swf文件（注意要同ckll.txt同一目录），本例就圆满完成了。
      （小结）通过这个实例的制作，除了教给大家在flash中读取外部变量的处理方法外，还想大家熟悉一下一个完整flash作品的全部步骤，要注意的是各步骤的执行先后，执行关系，快捷键、有条理的操作能节省大量的时间，事半而功倍。平时要多做多练，注意总结经验，找出最适合你，最快捷的方法，这也是作者希望大家做到的。

进入讨论组讨论。

【收藏此文】【大 中 小】【打印】【关闭】

较早的文章：简单的鼠标拖放效果

较新的文章：用Flash MX制作飞舞的蝴蝶