论文部分内容阅读
摘要:Action Scripts是FLASH中一种面向对象的编程语言。运用Action编写一些程序,经过一系列语句的控制和位置及比例的调整,并结合FLASH的强大造型工具就可以用一根很细很小的线条,制作出文件量少,不同于传统手绘的比较适合网页上应用的波浪效果。
关键词:FLASH;波浪效果;ACTIONduplicateMovieClip;网页效果
中图分类号:TP37文献标识码:A 文章编号:1009-3044(2007)03-10832-02
在FLASH中制作海浪效果,传统的方法是通过手绘海浪形态,然后运用形状动画通过复制多条海浪产生最后连绵不绝的海浪效果(如图1所示)。
图1
这种做法在卡通片中应用很广泛,但在网页制作中有时不太合适,原因是网页上的空间有限制,如果波浪的条数太多,形态造型稍大就会引起网速太慢,毕竟现在保持一定的网页的的浏览速度还是最重要的,因此网页上的FLASH在横向和纵向的空间都不会很大,这样海浪造型大量复制的效果在有限的狭小空间里就很难展现了,所以寻求一种能够展现大量海浪效果,又不太影响网速的FLASH制作方法是目前网页设计者经常思考的问题。我在大量网页制作和FLASH实践中研究出一种方案,可以解决上述问题,现论述如下,与业内人员共享;我的整体构思是这样的,在FLASH中绘制一条线,然后运用Action(Action Scripts是FLASH中一种面向对象的编程语言[1]) 中的duplicateMovieClip命令,将线条进行多重复制,在复制过程中,再合理运用setProperty命令可以添加移动和放缩等变换命令,这样不用另行绘制,通过命令组织和一条曲线就解决海浪多重造型问题,最后将这些复制出的线条放到合适图案背景上,组合成一幅海潮汹涌、绵绵不绝的精美场景。如图2所示:
图2
首先要将FLASH页面设置成网页所需尺寸(本例为765×175),并将第一个图层名改为lang,然后在场景中插入一个影片剪辑起名为xian,在这个名为xian的影片剪辑中将组织主要的命令来制作多重海浪
(1)在这个影片剪辑的第一帧场景中用线条工具先画一条波浪线,长度约500左右,由于后续步骤中要在横向不断加宽,所以初始的线条长度不要太宽,这条线在画法上要注意两侧曲率要小,尽可能平缓一些,而中间波浪幅度稍大,并要有层次,在这个例子里,我设置两高两低并合理分配和调节,从而满足视觉需要;
(2)将这条波浪线选中,按F8转化成另一个影片剪辑命名为lang,目的很简单,要在这个影片剪辑中将这条波浪线进行形状动画,波浪就会不停进行波峰波谷起伏变化,视觉效果更佳,动画的设置为:以二十帧为界,中间第十帧为一个转折关键帧,两侧形态一致,中间关键帧形态变化;颜色的安排是这样,第一帧线条为白色,第十帧线条为蓝紫,第二十帧线条为绿色,白色的安排可以使海浪有光感和浪尖处白色浪花的感觉,紫色的安排是可以和蓝色背景图案相融合,绿色的是在画面中添加一定的对比色,使画面有丰富多彩的感觉;如图3所示:
图3
(3)退回到xian影片剪辑中,确定lang影片剪辑处于选中状态,在属性栏中为它起个名为0,注意此处只能命名为0(因为后期在赋值语句中调用的初始影片剪辑名字是数字,并且最小是0),现在第一帧上加入如下Action Script:
i = 1;(//设初始变量为1,在下一帧会调用一个i-1的影片剪辑,所以只处初始值设为1//)
max = 50; (//这个数值是由页面尺寸和波峰高度决定的,在本例中这个数值视觉效果好 //)
setProperty("0", _visible, false); (// 设置名为0的影片剪辑不可见//)
setProperty("0", _alpha, 0); (//设置名为0的影片剪辑不透明度为0//)
Properties(属性)是定义对象的attributes(属性)的[2],上面四条语句为引导语句并进行初始设定,不能放在第二帧上,原因是第二帧会重复五十次,如果将初始设定值放到第二帧处就会引起值混乱;
(4)在xian 影片剪辑中按F6加入第二个关键帧,如果此时播放,不会看到任何动画效果,因为动画仅播放了一帧,并且由于初始设定为不可见,所以在没有执行第二帧的语句时,没有动画效果,在第二帧上写入如下语句:
duplicateMovieClip(i-1, i, i); (//i-1是調用影片剪辑的名称,第二个i是复制出的影片剪辑的新名称,第三个i是深度级别,深度级别是复制的影片剪辑的堆叠顺序。这种堆叠顺序很像时间轴中图层的堆叠顺序;较低深度级别的影片剪辑隐藏在较高堆叠顺序的剪辑之下。必须为每个复制的影片剪辑分配一个唯一的深度级别,以防止它替换现有深度上的影片。这一步复制出一个名字叫i的影片剪辑,下面是对这个影片剪辑进行一定的属性设置 //)
setProperty(i, _y, getProperty(i-1, _y)+i/10); (//这个命令是对一个目标进行基本属性设置的,在这里是设置新产生的影片剪辑位置坐标y值增加i/10,这样复制出的线可以相对上一条线条向下窜一定距离,从而有一浪接一浪的感觉,//)
setProperty(i, _alpha, getProperty ( i-1, _alpha )+3); (//这个设置是调整新产生影片剪辑的不透明度,这里要计算一下,由于本例中在第一帧设定一共要复制50条,所以如果每条线的不透明度初始值为0,每条线不透明度+2就可以使最后一条线不透明度达到100,但是那样的效果不好看,所以经过实验,每条线alpha 值+3层次更好,最后实线也多一些,实虚的分布较合理,//)
setProperty(i, _xscale, getProperty(i-1, _xscale)+4); (//这个设置是将新产生的影片剪辑的x即水平方向的比例增加,数值是实验得出比较合适的值,要注意的是这数值在执行语句时是按百分数进行的,+4即为在上一条线上水平方面的比例增加4%,这样波浪线的变化更象海浪冲向岸边逐渐延伸的感觉//)
i = i+1; (//这个参数是为下一条线的复制进行赋值//)
需要说明的是,当影片正在播放时,运用duplicateMovieClip创建一个影片剪辑的实例。无论播放头在原始影片剪辑(或“父级”)中处于什么位置,复制的影片剪辑的播放头始终从第一帧开始。并在结束后如果没有进行stop控制,还会从第一帧开始下一个动画循环,父影片剪辑中的变量不拷贝到复制的影片剪辑中。如果删除父影片剪辑,则复制的影片剪辑也被删除。使用removeMovieClip命令可以删除由 duplicateMovieClip 创建的影片剪辑实例。另外,我在实际制作时,将第二帧的这初始线条的不透明度设为50%,最终输出的效果也很好,这可能是对比较明显的缘故;
现在,一条新的波浪线产生了,下面要进行的就是重复这过程,直到产生足够的线条
(5)继续在xian 影片剪辑中按F6加入第三个关键帧,为避免麻烦应将这帧场景中的线条删除,这一帧的主要用途是进行赋值的检查,如果赋值没到50,应使动画回到第二帧继续产生波浪线,超过50时,就停止不再产生新的波浪线条,具体帧命令如下:
if (i<=max) { gotoAndPlay(2);} else { stop();}
这里主要运用了if语句,对条件进行计算以确定影片中的下一步动作。如果条件为 true,则 Flash 将运行条件后面的语句。如果条件为 false,则 Flash 跳过花括号内的语句,运行else后面的语句[3]。脚本中创建了分支逻辑。具体来说,在本例中当参数i的赋值小于等于50时,动画跳转到第二帧,继续执行第二帧中的复制波浪线,并偏移y 方向位置和增加x方向的比例值这些语句;当i的赋值大于50时,执行else后的命令,即在第三帧处动画停止,而这时,前面已复制出的海浪线条继续各自的形状动画和位置及比例变化,这是由duplicateMovieClip所决定的,因而就产生了前面绵绵不绝的海浪效果;
(6)现在FLASH场景中的海浪效果基本完成,下面说一下如何合理地输出,有好多人在输出时,不太注意输出设置中的参数,FLASH默认输出参数中,有一个JPEG的品质选项值为80%,而本例中多重波浪效果的制作是由一根很细的线条产生的,所以质量低有可能使线条的输出不易分清,因而在这个输出设置中一定要将JPEG输出质量调为100%,这才能保证最后的效果;
现在可以退出xian这个影片剪辑了,在场景一中可以暂时导入一张在网页中用作背景的图片,将xian这个影片剪辑调好位置,为了减少flash文件的大小,最后要将这个参考背景图去掉,这么做的原因有两个,一是flash中进行图像输出时,要降低图像的质量,影响视觉效果,二是,flash中有图像会较大增加flash动画的调用时间,影响网页速度,所以在调整好海浪在图像中的位置后,将背景图删掉,然后就可以输出了;至于背景图像用html语言在网页填加;
这里还有个问题,这时输出来的flash,会有一个系统默认的颜色衬底,为了网页中flash的海浪动画效果能够透在选好的背景图像上,需要在网页中调入flash动画的程序下面加上如下语句,就可以去除flash输出影片的衬底从而在网页上展现出迷人的海浪效果;
(//这一步是调用制作好的flash影片//)
(//将flash影片质量设置为最好//)
(//将flash影片默认的背景透明,//)
以上步骤就可以将一根很细很小的波浪线,经过一系列语句和命令设置,产生出连绵不绝的海浪效果,合理调用在网页上,速度很快,我认为是一个很好的在网页上显现波浪效果的方案,而在实际应用也得到了认可,同行们可以到www.da.dl.gov.cn这个网页上去感受它的魅力。
网络是一个令设计者兴奋的、强大的可视化媒体,它具有全球范围的、数字庞大的访问者,和其它创造性的媒体一样,各种要素要结合在一起才能创造出一个成功的站点[4],因此如本文所述通过程序来代替传统手绘进行网页视觉效果的创作是一个新思路。
参考文献:
[1]袁建洲,编著.FLASH MX,FIREWORKS MX,DREAMWEAV
ER MX三合一实用教程[M].北京: 电子工业出版社,2004.139
[2]黄刚,于林,编著. MACROMEDIA FLASHMX 中文版标准教程.北京: 希望电子出版社,2003.216.
[3]贺凯,邹婷,编著.FLASHMX2004 完全征服手册.北京: 中国青年出版社,2004年.297.
[4]丹尼乐,多恩雷[美]编著. www设计:环球网页[M]. 北京:中国轻工业出版社,2001.6.
本文中所涉及到的圖表、注解、公式等内容请以PDF格式阅读原文。
关键词:FLASH;波浪效果;ACTIONduplicateMovieClip;网页效果
中图分类号:TP37文献标识码:A 文章编号:1009-3044(2007)03-10832-02
在FLASH中制作海浪效果,传统的方法是通过手绘海浪形态,然后运用形状动画通过复制多条海浪产生最后连绵不绝的海浪效果(如图1所示)。
图1
这种做法在卡通片中应用很广泛,但在网页制作中有时不太合适,原因是网页上的空间有限制,如果波浪的条数太多,形态造型稍大就会引起网速太慢,毕竟现在保持一定的网页的的浏览速度还是最重要的,因此网页上的FLASH在横向和纵向的空间都不会很大,这样海浪造型大量复制的效果在有限的狭小空间里就很难展现了,所以寻求一种能够展现大量海浪效果,又不太影响网速的FLASH制作方法是目前网页设计者经常思考的问题。我在大量网页制作和FLASH实践中研究出一种方案,可以解决上述问题,现论述如下,与业内人员共享;我的整体构思是这样的,在FLASH中绘制一条线,然后运用Action(Action Scripts是FLASH中一种面向对象的编程语言[1]) 中的duplicateMovieClip命令,将线条进行多重复制,在复制过程中,再合理运用setProperty命令可以添加移动和放缩等变换命令,这样不用另行绘制,通过命令组织和一条曲线就解决海浪多重造型问题,最后将这些复制出的线条放到合适图案背景上,组合成一幅海潮汹涌、绵绵不绝的精美场景。如图2所示:
图2
首先要将FLASH页面设置成网页所需尺寸(本例为765×175),并将第一个图层名改为lang,然后在场景中插入一个影片剪辑起名为xian,在这个名为xian的影片剪辑中将组织主要的命令来制作多重海浪
(1)在这个影片剪辑的第一帧场景中用线条工具先画一条波浪线,长度约500左右,由于后续步骤中要在横向不断加宽,所以初始的线条长度不要太宽,这条线在画法上要注意两侧曲率要小,尽可能平缓一些,而中间波浪幅度稍大,并要有层次,在这个例子里,我设置两高两低并合理分配和调节,从而满足视觉需要;
(2)将这条波浪线选中,按F8转化成另一个影片剪辑命名为lang,目的很简单,要在这个影片剪辑中将这条波浪线进行形状动画,波浪就会不停进行波峰波谷起伏变化,视觉效果更佳,动画的设置为:以二十帧为界,中间第十帧为一个转折关键帧,两侧形态一致,中间关键帧形态变化;颜色的安排是这样,第一帧线条为白色,第十帧线条为蓝紫,第二十帧线条为绿色,白色的安排可以使海浪有光感和浪尖处白色浪花的感觉,紫色的安排是可以和蓝色背景图案相融合,绿色的是在画面中添加一定的对比色,使画面有丰富多彩的感觉;如图3所示:
图3
(3)退回到xian影片剪辑中,确定lang影片剪辑处于选中状态,在属性栏中为它起个名为0,注意此处只能命名为0(因为后期在赋值语句中调用的初始影片剪辑名字是数字,并且最小是0),现在第一帧上加入如下Action Script:
i = 1;(//设初始变量为1,在下一帧会调用一个i-1的影片剪辑,所以只处初始值设为1//)
max = 50; (//这个数值是由页面尺寸和波峰高度决定的,在本例中这个数值视觉效果好 //)
setProperty("0", _visible, false); (// 设置名为0的影片剪辑不可见//)
setProperty("0", _alpha, 0); (//设置名为0的影片剪辑不透明度为0//)
Properties(属性)是定义对象的attributes(属性)的[2],上面四条语句为引导语句并进行初始设定,不能放在第二帧上,原因是第二帧会重复五十次,如果将初始设定值放到第二帧处就会引起值混乱;
(4)在xian 影片剪辑中按F6加入第二个关键帧,如果此时播放,不会看到任何动画效果,因为动画仅播放了一帧,并且由于初始设定为不可见,所以在没有执行第二帧的语句时,没有动画效果,在第二帧上写入如下语句:
duplicateMovieClip(i-1, i, i); (//i-1是調用影片剪辑的名称,第二个i是复制出的影片剪辑的新名称,第三个i是深度级别,深度级别是复制的影片剪辑的堆叠顺序。这种堆叠顺序很像时间轴中图层的堆叠顺序;较低深度级别的影片剪辑隐藏在较高堆叠顺序的剪辑之下。必须为每个复制的影片剪辑分配一个唯一的深度级别,以防止它替换现有深度上的影片。这一步复制出一个名字叫i的影片剪辑,下面是对这个影片剪辑进行一定的属性设置 //)
setProperty(i, _y, getProperty(i-1, _y)+i/10); (//这个命令是对一个目标进行基本属性设置的,在这里是设置新产生的影片剪辑位置坐标y值增加i/10,这样复制出的线可以相对上一条线条向下窜一定距离,从而有一浪接一浪的感觉,//)
setProperty(i, _alpha, getProperty ( i-1, _alpha )+3); (//这个设置是调整新产生影片剪辑的不透明度,这里要计算一下,由于本例中在第一帧设定一共要复制50条,所以如果每条线的不透明度初始值为0,每条线不透明度+2就可以使最后一条线不透明度达到100,但是那样的效果不好看,所以经过实验,每条线alpha 值+3层次更好,最后实线也多一些,实虚的分布较合理,//)
setProperty(i, _xscale, getProperty(i-1, _xscale)+4); (//这个设置是将新产生的影片剪辑的x即水平方向的比例增加,数值是实验得出比较合适的值,要注意的是这数值在执行语句时是按百分数进行的,+4即为在上一条线上水平方面的比例增加4%,这样波浪线的变化更象海浪冲向岸边逐渐延伸的感觉//)
i = i+1; (//这个参数是为下一条线的复制进行赋值//)
需要说明的是,当影片正在播放时,运用duplicateMovieClip创建一个影片剪辑的实例。无论播放头在原始影片剪辑(或“父级”)中处于什么位置,复制的影片剪辑的播放头始终从第一帧开始。并在结束后如果没有进行stop控制,还会从第一帧开始下一个动画循环,父影片剪辑中的变量不拷贝到复制的影片剪辑中。如果删除父影片剪辑,则复制的影片剪辑也被删除。使用removeMovieClip命令可以删除由 duplicateMovieClip 创建的影片剪辑实例。另外,我在实际制作时,将第二帧的这初始线条的不透明度设为50%,最终输出的效果也很好,这可能是对比较明显的缘故;
现在,一条新的波浪线产生了,下面要进行的就是重复这过程,直到产生足够的线条
(5)继续在xian 影片剪辑中按F6加入第三个关键帧,为避免麻烦应将这帧场景中的线条删除,这一帧的主要用途是进行赋值的检查,如果赋值没到50,应使动画回到第二帧继续产生波浪线,超过50时,就停止不再产生新的波浪线条,具体帧命令如下:
if (i<=max) { gotoAndPlay(2);} else { stop();}
这里主要运用了if语句,对条件进行计算以确定影片中的下一步动作。如果条件为 true,则 Flash 将运行条件后面的语句。如果条件为 false,则 Flash 跳过花括号内的语句,运行else后面的语句[3]。脚本中创建了分支逻辑。具体来说,在本例中当参数i的赋值小于等于50时,动画跳转到第二帧,继续执行第二帧中的复制波浪线,并偏移y 方向位置和增加x方向的比例值这些语句;当i的赋值大于50时,执行else后的命令,即在第三帧处动画停止,而这时,前面已复制出的海浪线条继续各自的形状动画和位置及比例变化,这是由duplicateMovieClip所决定的,因而就产生了前面绵绵不绝的海浪效果;
(6)现在FLASH场景中的海浪效果基本完成,下面说一下如何合理地输出,有好多人在输出时,不太注意输出设置中的参数,FLASH默认输出参数中,有一个JPEG的品质选项值为80%,而本例中多重波浪效果的制作是由一根很细的线条产生的,所以质量低有可能使线条的输出不易分清,因而在这个输出设置中一定要将JPEG输出质量调为100%,这才能保证最后的效果;
现在可以退出xian这个影片剪辑了,在场景一中可以暂时导入一张在网页中用作背景的图片,将xian这个影片剪辑调好位置,为了减少flash文件的大小,最后要将这个参考背景图去掉,这么做的原因有两个,一是flash中进行图像输出时,要降低图像的质量,影响视觉效果,二是,flash中有图像会较大增加flash动画的调用时间,影响网页速度,所以在调整好海浪在图像中的位置后,将背景图删掉,然后就可以输出了;至于背景图像用html语言在网页填加;
这里还有个问题,这时输出来的flash,会有一个系统默认的颜色衬底,为了网页中flash的海浪动画效果能够透在选好的背景图像上,需要在网页中调入flash动画的程序下面加上如下语句,就可以去除flash输出影片的衬底从而在网页上展现出迷人的海浪效果;
(//这一步是调用制作好的flash影片//)
(//将flash影片质量设置为最好//)
(//将flash影片默认的背景透明,//)
以上步骤就可以将一根很细很小的波浪线,经过一系列语句和命令设置,产生出连绵不绝的海浪效果,合理调用在网页上,速度很快,我认为是一个很好的在网页上显现波浪效果的方案,而在实际应用也得到了认可,同行们可以到www.da.dl.gov.cn这个网页上去感受它的魅力。
网络是一个令设计者兴奋的、强大的可视化媒体,它具有全球范围的、数字庞大的访问者,和其它创造性的媒体一样,各种要素要结合在一起才能创造出一个成功的站点[4],因此如本文所述通过程序来代替传统手绘进行网页视觉效果的创作是一个新思路。
参考文献:
[1]袁建洲,编著.FLASH MX,FIREWORKS MX,DREAMWEAV
ER MX三合一实用教程[M].北京: 电子工业出版社,2004.139
[2]黄刚,于林,编著. MACROMEDIA FLASHMX 中文版标准教程.北京: 希望电子出版社,2003.216.
[3]贺凯,邹婷,编著.FLASHMX2004 完全征服手册.北京: 中国青年出版社,2004年.297.
[4]丹尼乐,多恩雷[美]编著. www设计:环球网页[M]. 北京:中国轻工业出版社,2001.6.
本文中所涉及到的圖表、注解、公式等内容请以PDF格式阅读原文。