论文部分内容阅读
摘要:本文针对Flash与Firework在制作交互式动画网页过程中的缺陷,提出了新的解决方案,即A+M方案。并对该方案的具体操作过程进行了准确的阐述。
关键词:交互式动画网页 ImageReady Dreamweaver
网页的外观是给用户强烈的第一印象,好的网页设计有时更胜于优秀的后台程序。网页的设计除了优秀的静态美工设计,还在于新技术的运用。动画,作为网页设计的一大亮点,已广泛地应用于各类网页之中。然而,由于网络本身的速度限制和交互式动画制作的困难性,整幅页面的交互式动画网页应用还非常少。当然,网络上也有不少利用Flash或Firework制作的整幅页面的交互式动画网页,但是由于Flash本身属于矢量动画,对于富于颜色变化的动画处理较为困难;而Firework虽然也有较强的位图处理能力,但对于动画的支持者较差;这两个软件就图形处理能力而言,和一些专业图形处理软件相比功能和效果上都差许多。本文要讨论的就是基于位图模式的交互式动画网页的完全解决方案。
优秀的交互式动画网页应具备以下特点:
1.动态性:通过醒目的动画吸引用户的注意力。
2.交互性:部分动画应当由用户的操作来触发,并非单纯的播放。
3.链接性:部分动画可以链接到指定的网页或动画,起到网页的最基本作用。
针对上述交互式动画网页的特点,以及常用软件及方法的缺陷,经我们研究及实验提出了新的解决方案:Adobe ImageReady +Macromedia Dreamweaver,以下简称A+M方案。具体操作步骤如下:
一、动画的制作
软件:Adobe ImageReady3.0
Adobe ImageReady是由Adobe Photoshop演化而来的专门针对网页的动画制作软件。由于ImageReady与Photoshop已作为一套软件捆绑发售,两者具有良好的数据共享交换功能,使得ImageReady具备强大的图形处理能力。
首先使用Photoshop制作用于实现动画的图片,由于此过程不属于本文讨论范围,在此省略。再使用“跳转至ImageReady”功能将数据传送至ImageReady。
由于ImageReady是通过作用区域来实现交互式动画的,所以得使用“切片”功能将图片按交互功能的作用区域分割成若干切片。对将要被用户操作的切片定义各种鼠标事件:悬停(over),点击(click),按下(down),松开(up),移出(out)。确定当某个切片被事件触发后将要产生动画的切片,并对其制作相应的动画。
定义链接的作用区域,可以对切片定义,也可以定义为图像映射。ImageReady本身具有加入超链接的功能,但由于其缺乏站点管理功能,所以将这一工作留给Dreamweaver。
将动画输出为超文本文件(html),这一步是决定文件大小的关键。实际上ImageReady是按切片的划分将图片分为几块,再生成一个表格,并将图片放入相应的表格中,拼接成为完整的图像。所以可以将切片按性质的不同对切片进行不同的优化。Jpg格式文件较小,但不能包含动画;gif文件较大,但可以包含动画。所以在进行优化时应将不包含动画的切片存为jpg格式,包含动画的存为gif格式。还要按照实际的要求对图片的质量进行有损压缩,以取得更小的文件,加快网页下载速度。
二、改进交互性
软件:Macromedia Dreamweaver4.0
Macromedia Dreamweaver是长期以来备受推崇的网页开发工具。Dreamweaver有以下特色功能:层(layer)、时间线动画(timeline animation)、行为(behaviors),这些都是实现交互式动画的关键。
用ImageReady制作的网页还要用Dreamweaver进行再加工。最为重要的是改变鼠标事件的影响。用Dreamweaver打开网页后,点击相应的图形区域,在Behaviors一栏中可以看到一些鼠标点击事件所触发的代码,将不必要的事件删去,因为有一些动画会产生一些不必要的关联。经研究,这一功能是通过自定义函数changeimage()来实现的,参数中包含的就是将要用来替换的文件。找到不必要的关联动画文件,并记下其文件名,在changeimage()函数的参数中将这些文件去掉即可。
三、加入网页内容
由于图片构成了整个网页,所以不能再在其上加入文字和web组件。此时只需要加入层,并在其上加入文字或web组件,然后再在需要超连接的文字或图片上加入超连接即可。对于一些需要条件才显示的内容,则可以在事件上加入show hide-layer的方法来显示就行了。
四、需要注意的地方
当要改变图片内容时,经常需要用ImageReady来重新生成html文件,这样会将已加工好代码的html文件覆盖掉,所做的代码工作就浪费了。此时只要对已经加工后的文件另存一份,然后用ImageReady修改后再生成html文件,并用新的图片文件覆盖原来的图片文件,这样就可以避免代码丢失这一问题。
A+M方案可以克服常用软件和方法的缺陷,做出交互功能强大且漂亮的交互式动画网页,给访问用户耳目一新的感觉。该方案已在新晨网络AUTO OFFICE网站后台管理系统、四川轻化工学院学生处网站(新晨版)、自贡市公安局网站、重庆交通大学教学质量评估系统V3.0等B/S系统中运用,并收到良好的效果。
关键词:交互式动画网页 ImageReady Dreamweaver
网页的外观是给用户强烈的第一印象,好的网页设计有时更胜于优秀的后台程序。网页的设计除了优秀的静态美工设计,还在于新技术的运用。动画,作为网页设计的一大亮点,已广泛地应用于各类网页之中。然而,由于网络本身的速度限制和交互式动画制作的困难性,整幅页面的交互式动画网页应用还非常少。当然,网络上也有不少利用Flash或Firework制作的整幅页面的交互式动画网页,但是由于Flash本身属于矢量动画,对于富于颜色变化的动画处理较为困难;而Firework虽然也有较强的位图处理能力,但对于动画的支持者较差;这两个软件就图形处理能力而言,和一些专业图形处理软件相比功能和效果上都差许多。本文要讨论的就是基于位图模式的交互式动画网页的完全解决方案。
优秀的交互式动画网页应具备以下特点:
1.动态性:通过醒目的动画吸引用户的注意力。
2.交互性:部分动画应当由用户的操作来触发,并非单纯的播放。
3.链接性:部分动画可以链接到指定的网页或动画,起到网页的最基本作用。
针对上述交互式动画网页的特点,以及常用软件及方法的缺陷,经我们研究及实验提出了新的解决方案:Adobe ImageReady +Macromedia Dreamweaver,以下简称A+M方案。具体操作步骤如下:
一、动画的制作
软件:Adobe ImageReady3.0
Adobe ImageReady是由Adobe Photoshop演化而来的专门针对网页的动画制作软件。由于ImageReady与Photoshop已作为一套软件捆绑发售,两者具有良好的数据共享交换功能,使得ImageReady具备强大的图形处理能力。
首先使用Photoshop制作用于实现动画的图片,由于此过程不属于本文讨论范围,在此省略。再使用“跳转至ImageReady”功能将数据传送至ImageReady。
由于ImageReady是通过作用区域来实现交互式动画的,所以得使用“切片”功能将图片按交互功能的作用区域分割成若干切片。对将要被用户操作的切片定义各种鼠标事件:悬停(over),点击(click),按下(down),松开(up),移出(out)。确定当某个切片被事件触发后将要产生动画的切片,并对其制作相应的动画。
定义链接的作用区域,可以对切片定义,也可以定义为图像映射。ImageReady本身具有加入超链接的功能,但由于其缺乏站点管理功能,所以将这一工作留给Dreamweaver。
将动画输出为超文本文件(html),这一步是决定文件大小的关键。实际上ImageReady是按切片的划分将图片分为几块,再生成一个表格,并将图片放入相应的表格中,拼接成为完整的图像。所以可以将切片按性质的不同对切片进行不同的优化。Jpg格式文件较小,但不能包含动画;gif文件较大,但可以包含动画。所以在进行优化时应将不包含动画的切片存为jpg格式,包含动画的存为gif格式。还要按照实际的要求对图片的质量进行有损压缩,以取得更小的文件,加快网页下载速度。
二、改进交互性
软件:Macromedia Dreamweaver4.0
Macromedia Dreamweaver是长期以来备受推崇的网页开发工具。Dreamweaver有以下特色功能:层(layer)、时间线动画(timeline animation)、行为(behaviors),这些都是实现交互式动画的关键。
用ImageReady制作的网页还要用Dreamweaver进行再加工。最为重要的是改变鼠标事件的影响。用Dreamweaver打开网页后,点击相应的图形区域,在Behaviors一栏中可以看到一些鼠标点击事件所触发的代码,将不必要的事件删去,因为有一些动画会产生一些不必要的关联。经研究,这一功能是通过自定义函数changeimage()来实现的,参数中包含的就是将要用来替换的文件。找到不必要的关联动画文件,并记下其文件名,在changeimage()函数的参数中将这些文件去掉即可。
三、加入网页内容
由于图片构成了整个网页,所以不能再在其上加入文字和web组件。此时只需要加入层,并在其上加入文字或web组件,然后再在需要超连接的文字或图片上加入超连接即可。对于一些需要条件才显示的内容,则可以在事件上加入show hide-layer的方法来显示就行了。
四、需要注意的地方
当要改变图片内容时,经常需要用ImageReady来重新生成html文件,这样会将已加工好代码的html文件覆盖掉,所做的代码工作就浪费了。此时只要对已经加工后的文件另存一份,然后用ImageReady修改后再生成html文件,并用新的图片文件覆盖原来的图片文件,这样就可以避免代码丢失这一问题。
A+M方案可以克服常用软件和方法的缺陷,做出交互功能强大且漂亮的交互式动画网页,给访问用户耳目一新的感觉。该方案已在新晨网络AUTO OFFICE网站后台管理系统、四川轻化工学院学生处网站(新晨版)、自贡市公安局网站、重庆交通大学教学质量评估系统V3.0等B/S系统中运用,并收到良好的效果。