“按钮生产线”
用Button.Applet制作交互按钮和高级动态图像地图
刘永波
引子
会做网页交互按钮吗？你听了一定会撇撇嘴，不就是用Javascript加上两幅图，当鼠标移到按钮上方时，显示另一张图——稀松平常；可是，要求在一二十分钟里，制作几十个这样的按钮呢？你可能会有些吃惊，要处理上百个图形，又要编辑网页代码这可有些难度。或许你会想起Frontpage 98,用微软的Frontpage 98的theme这一自动处理特性，但是只能用现成的theme，如果要创建新的主题，三十多张基本图形的制作工作就要花不少时间，啊，不容易；且慢，还有更进一步的要求呢：这些交互按钮要具有声音效果，在浏览器的状态栏要显示相应说明文字，当鼠标移到按钮上方时，还要显示一个包括按钮名称等内容的浮动提示……这可让人头大了。
像这样复杂的效果用Javascript是很难实现的，用Java可以，但是对大多数人来说，写一个好的Java小程序却不是一朝一夕能够做得到的。幸运的是，已经有一个很好的软件来帮助我们做这个工作。
Ulead公司的Button.Applet是一个设计基于Java的网页交互按钮的工具，在同类软件里，因操作方便、功能丰富而显得特别突出。它能创建各种各样、独具特色、令人眩目的网页按钮，它们随着鼠标的移动而变化。按钮上面的文字能够改变颜色、凸起或者具有阴影、霓虹灯、彩虹效果。软件能自动生成所需要的Java Applet和相应代码，并将它们输出到网页文件。
从Ulead公司的各FTP站可下载Button.Applet 1.0的全功能试用版，试用期15天，网址如下：ftp://ftp.ulead.com/pub/Trial/Button.Applet/Ba10t.exe。该程序支持Win95/98和NT 4.X。
一、创建网页交互按钮
●界面简介
安装后，运行Button.Applet，它的界面如图1。
图1
窗口被划分为左右两个面板，从左面板可以看到applet的按钮分布,右面板则是关于左面板的Applet和按钮的属性设定，这些标签随着用户在左面板选定的对象而改变。单击选单Edit/Insert button（或者按Insert键）可以添加按钮。
从选单File/Output HTML将制作好的按钮输出到一个网页文件，或者通过选单Edit/Copy HTML将代码拷贝到剪贴板。从工具栏可以看到，用户可以随时在浏览器IE或者Netscape Navigator里预览制作的效果。
●制作换图效果的按钮
正如前面说到的，基于Javascript的交互按钮要两张图。浏览网页时，两张图都被下载，但是在网页上只显示一张，另一张则放到内存缓冲区，当鼠标移到这张图上方，触发图像改变函数，立即显示预载入的图像，通过这种方式实现动态图像效果。而用Button.Applet做出的基于Java的按钮则只需要一张图，或者不要图，它的动态效果却比前者丰富得多。
示例一:制作只有一张图的交互按钮
首先设定Applet的属性，点击左面板里的Applet，右面板有两个属性标签，“General”标签设定Applet的大小、背景颜色、背景图案；“Advanced”标签设定Applet在网页上的位置、边框。
再设定button的外观，在相应的“General”标签的上面一栏输入按钮的大小和它在Applet里的位置，都是以像素为单位，“url”框输入这个按钮链接的网址，并可通过其右边的按钮打开一个对话框来确定在哪里打开目标网址；在下方“Button face”栏选定Image file按钮，然后选择事先做好的按钮图形文件。
单击“Label”标签，在“Label text”栏输入在这个按钮上显示的文字，如果是一个竖直的按钮，则将文字竖直排列，并设定字体风格；在文字属性栏设定文字的颜色、对齐方式、大小；下方的文字效果（Text effect）栏可以设定文字的3种效果——Up、Over、Down，分别表示按钮未按下时、当鼠标越过时、按钮按下时的文字外观，单击右边的按钮可以对文字的效果作更细致的设定。
在Button.Applet里，对象的属性都是非常多，这是用它制作的交互按钮动态效果非常丰富的原因。
使用Button.Applet来作交互按钮，图像处理的工作少了很多，一张图就可以了，而且不需要把文字做在图上。
示例二：在没有图形的时候，用Button.Applet创建具有专业图形效果的按钮。制作步骤与上例相似，只不过在设定按钮外观时，不选取“Image file”，而是其他3个选项。在“shape”标签可以详细设定按钮的形状，边框。
示例三：创建多个按钮。在Button.Applet里，有两种基本对象：Applet和Button。按钮在Applet内，Applet包括一个或多个按钮，各按钮的位置可以通过它的“General”标签的“x”、“y”坐标值来设定，它们的单位也是像素，是相对于Applet左上角的位置。
示例四：加入特殊效果。
特殊效果有三种：状态栏文字、浮动提示、声音效果。
状态栏文字：浏览时把鼠标放在按钮上，在浏览器的状态栏就会显示一些说明文字。不过笔者发现这一功能在简体中文Windows平台上使用Navigator 4.X浏览（Navigator 3.X、IE所有版本正常），有时存在令人困惑的中文乱码问题。
浮动提示：在标准的Windows程序里经常可以看到这个东西，通过这个Button.Applet也可以在网页上作出来。当鼠标经过按钮上时，出现一个黄底黑字的小框。这个提示与在IE 4.X或者Navigator 4.X里显示的图形提示（alt=“xxx"里的文本）并不相同，它兼容3.X的浏览器。
声音效果：鼠标移到按钮上方时播放声音。
给按钮加入这些特殊效果在Button.Applet里非常容易实现。在左面板选择按钮，然后在右面板打开Advanced标签，选取需要添加的特殊效果。在输入框添入和选择相应的文字及声音文件。
Button.Applet只支持＊.au格式的声音文件，这是很重要的，因为比起其他的声音文件格式，au的格式非常小(注意虽然使用＊.au文件，也要选择尽可能小的，以方便访问)。可以从RealNetworks的网站（http://www.real.com）下载制作au文件的工具，将常见的＊.wav文件转换成＊.au文件。
●输出到HTML
Button.Applet将建立如下文件：Java class文件（＊.class）、图形文件和工程文件（＊.uab）。所有的Applet及按钮的设置都保存在＊.uab文件里，可以随时打开这个文件来修改Applet和按钮的外观和动态效果。
如前所述，当创建一个Applet以后，输出HTML代码的方式有两种：一种是作为一个单独的HTML文件保存，另一种是拷贝代码到剪贴板，后一种方式更灵活。以下是示例一的代码：
〈Applet code=″UAButton.class″ name=″UAButton″ alt=″万水千山″ width=″85″ height=″35″ hspace=″50″ vspace=″50″〉
〈param name=image1 value=″0,85,35,an2.gif,″〉
〈param name=buttontype1 value=″7,1,85,35,0″〉
〈param name=face1 value=″ffffff,－1,0,0,0,,″〉
〈param name=text1 value=″4040,万水千山,3,0,0,Helvetica,1,12,,″〉
〈param name=text2 value=″8080c0,万水千山,3,0,0,Helvetica,1,12,,″〉
〈param name=text3 value=″4040,万水千山,3,0,0,Helvetica,1,12,UleadNeon,ffffff|1|1″〉
〈param name=button1 value=″0,0,1,http://www.netease.com/～yingboy,_blank,,,0,0,1,1,1,0,UleadAntiAlias,1,1,1,2,0,1,1,3,0″〉
〈param name=number value=″1,1,1,0″〉
〈param name=background value=″ffffff,0,0,0,0,167776348,Ulead Button.Applet V1.0,,,0″〉
〈/Applet〉
把上述代码插入到HTML文件里。除＊.uab文件以外，其他所有的文件都要上载到Web服务器。
虽然几个＊.class文件加起来有几十KB，但是如果一个网站的许多页的交互按钮都用Button.Applet来作的话，不仅美观，而且不会因图形过多而造成下载时间过长；对于制作者来，可随时编辑按钮文字内容，修改外观与效果，省掉了许多图像处理的工作。
二、一些使用技巧
●使用Mask
在Shape标签，可以为按钮选择4种规则形状的一种，也可以使用一个Mask来创建形状不规则的按钮。首先用图形编辑软件，制作一个不规则形状的透明GIF图形；然后切换到Button.Applet，在Button主窗口的Shape标签的下拉列表里，选择“Import Mask”；在接下来的窗口打开刚才作好的GIF文件，这个GIF图形的透明区域在按钮里也是透明的。
●使用通用属性进行流水化作业
在制作一组按钮时，使用“Edit/Global attribute change”可以提高工作效率。通用属性以一个按钮为模板，将它的部分或者全部属性拷贝到其他按钮。选择部分按钮的方法是用鼠标左键点选工作区左面板Applet层下的按钮前面的复选框，如果不选，则作用于全部按钮。
●使用Layout
如果按钮较多，大小不一，排列不整齐，那么Layout功能很有必要，它能直观地对Applet和按钮进行布置。从选单“View/Layout”或者单击工具栏的按钮打开Layout窗口。
可以设定格栅的疏密，使按钮对齐格栅；改变按钮的上下层次序等等，如图2所示。
图2
示例五：改变按钮文字
当鼠标放到按钮上和按下按钮时，上面的文字内容依次变化。这个功能Ulead公司没有说明，直接从Button.Applet程序也得不到。
看看上面的示例一的那段代码，修改“text2”、“text3”的参数值就可以了(注意这个修改不会保存在＊.uab文件里)。
虽然开发者的目的是用Button.Applet来制作网页交互按钮，但是正如以上所示，我们可以创造性地发挥它的功能，将它的应用扩展到按钮以外，下面将介绍如何制作高级动态图像地图。
三、制作高级动态图像地图
之所以称为高级动态图像地图，是因为它不仅具有图像地图（Image map）的“热点”功能，而且可以加入浮动提示、说明文字、动态外观及声音效果。请看示例。
跟图像地图一样，首先需要一张图，将这张图设定为“Applet”的背景图案，“Applet”的大小与图像一致；然后加入按钮，按钮的个数与图像地图的“热点”数目一样。因为“Layout”不能够显示背景图像，所以要确定“热点”的位置比较繁琐。可以先在一个所见所得的图像地图制作工具里（如Frontpage98，Ulead Webrasor等）将图像地图做好，再把各个热点（Hot spot）的数据加入到Button.Applet的按钮的“General”标签。
链接地址、浮动提示、说明文字、声音效果等依照上面说的方法加入。
也可以将图像分割成许多块，每块作为一个Button.Applet的按钮的外形。与一般在网页布置图片不同的是，在这里每一块是一个单独的层，可以重叠、排序，因而能将不规则的透明图案拼成一幅完整的图，这一点前者是不可能作到的。在此就不多说了。
很显然这样作出的东西本质上与图像地图是两回事，它是充分应用Button.Applet的特性实现的。有兴趣的读者可以继续摸索，看使用这个工具还可以开发什么更精彩的内容来。
四、其他经验
1.对于新装Windows系统的用户，如果没有msvcrt20.dll、msvcrt40.dll、mfc40.dll三个常用的动态链接库文件，Button.Applet将无法运行，可以从别处拷贝这三个文件到windows/system目录下，也可在Ulead的FTP站下载：ftp://ftp3.ulead.com/PUB/Trial/wr4ps/wr10sl.exe，下载后直接运行即可。
2.在浏览用Button.Applet V1.0做出的网页时，当鼠标移到Applet上时，状态栏会出现“Ulead Button.Applet V1.0”的字样（正式版也不例外）。如果不喜欢它们，可事先用一个文本编辑器打开网页文件，将Applet参数“background"的值里的上述字串删除或修改。
3.Button.Applet能够与Microsoft Frontpage集成。在正常安装Button.Applet后，运行Frontpage98 Explorer，打开任意一个Frontpage网站，单击选单Tools/Recalculate Hyperlinks，在接下来的对话框单击Yes。以后要在Frontpage 98里使用时，单击Frontpage Editor窗口的选单Insert/Frontpage Component，在列表框选择Ulead Button.Applet（第一次进行这个操作时，将被提示下载组件），这时就可以像使用其他Frontpage的部件一样地用了。
Frontpage里的＊.class文件都是放在网站的_fpclass文件夹，但是使用Button.Applet时，其＊.calss文件却和相应的网页文件在同一个文件夹，如果一个网站的许多网页都有这种Java按钮，那么不同的文件夹里都有一份相同的＊.class文件。当浏览这些网页时会重复下载相同的文件，造成资源浪费也不便于网站管理。可以这样解决，在文件夹_fpclass将Button.Applet生成的所有＊.class文件复制一份，其余的全部删除；用文本编辑器（不要用Frontpage editor）打开有Java按钮的网页文件，在〈Applet ……〉行的code=″UAButton.class″后添加“codebase=″_fpclass/′”或者“codebase=″../_fpclass/″"等来指定＊.class文件的路径。对于其他参数的值，如图形文件、声音文件等也作相应修改。
4.为了完全兼容IE、Navigator的所有版本的浏览器，凡是与Button.Applet建立的文件相关的目录，不要用中文名称；使用的图形、声音文件最好放在跟它建立的＊.class文件相同的目录或者子目录。
摘自：《中国计算机报》