“按钮生产线” 用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文件相同的目录或者子目录。 摘自:《中国计算机报》 |