“按钮生产线”
  用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文件相同的目录或者子目录。

摘自:《中国计算机报》

返回软件助手




月光软件源码下载编程文档电脑教程网站优化网址导航网络文学游戏天地生活休闲写作范文安妮宝贝站内搜索
电脑技术编程开发网络专区谈天说地情感世界游戏元素分类游戏热门游戏体育运动手机专区业余爱好影视沙龙
音乐天地数码广场教育园地科学大观古今纵横谈股论金人文艺术医学保健动漫图酷二手专区地方风情各行各业

月光软件站·版权所有