南开区实验学校 刘瑞祥
八年级劳动与技术教材中的项目三——服装裁剪,其中讲到颜色是服装最明显的要素。为了帮助学生理解不同颜色组合给人带来的不同感觉,笔者制作了一个为人物服装着色的Flash课件,结合Flash内部的AS语言,很好地完成了教学任务。下面笔者将制作方法按照用到的技术由易到难公布出来,希望和大家共同提高课件制作技术,为劳技学科的教学服务。
限于篇幅,这里只包含了核心部分,次要内容做了最大的省略。
一、Flash简介
Flash软件是基于矢量图的功能强大的动画制作软件,可以不失真地放大图像,文件短小,同时可以内嵌各种语句和用户进行交互,控制各种信息的显示。
如图,Flash软件界面中,菜单下方是时间轴(有的在菜单和时间轴之间有工具栏),中间是舞台区域,也就是最终作品显示的区域,左边是绘图工具,下方和右边是各种面版。最终生成的动画是在舞台上按照一定的时间顺序进行播放的,孰先孰后要按时间轴上的设定进行,只有那些重要的画面(一幅画面称为一帧)才是作者要绘制的内容,叫做关键帧,而其余过渡性质的画面则是过渡帧,由Flash自动生成,用户一般无须关心。
编辑好的源文件扩展名为fla,选择菜单“文件/导出”即可导出为swf文件,到安装了适当版本播放器的计算机上播放,也可以进一步编译成exe程序,到任何一台windows计算机上播放。
二、绘制关键帧和图形导入
Flash在启动后,时间轴上默认只有一条时间轴,时间轴上只有一个空白关键帧,如果为了课件各部分内容安排有条理,可以再多加几条时间轴,但是帧数足够了。
利用左侧的工具栏,可以在舞台上绘制各种图形,也可以导入外部图形文件。要注意的是,导入的文件必须是矢量格式的,也就是扩展名应该是wmf或者emf,这样才能完成我们后面的任务。
选择菜单“修改/打散”把导入的图片打散成为一个个线条和色块,选中全部上衣部分的色块(不含线条),然后再选择菜单“修改/转变为元件”,变成一个名字叫“上衣”的按钮元件,对裤子(或裙子)部分的色块也做类似操作,这两个元件留作后面改变颜色时用到。两个元件在舞台上默认设为白色。
人物其他部分的线条和色块都选上,保存成一个普通的图形元件。
三、制作色相环
单击菜单“插入/元件…”,选择制作按钮元件,进入如下界面:
可以看出按钮制作界面是一个四帧的动画,其中按钮平时状态的样子在“弹起”帧定义,鼠标经过按钮表面的样子在“指针经过”帧定义,按下的样子在“按下”帧定义。这里第1为关键帧,第2、3帧为普通帧,第4帧为空白帧。
以中间的十字为起点,绘制两条直线:一条水平,一条和水平成15度角,再绘制两个同心圆,圆心在十字位置,直径分别为150和180,把其中相交部分所成的曲四边形填充为某种颜色,去掉所有线条。
回到原来的舞台(单击上图鼠标指针附近的场景一),把刚才的元件从元件库里拖到舞台上,连续拖二十次,中心位置对齐,依次旋转18度,摆成一个环。
通过在软件界面下方的属性面板,设置每个按钮的颜色:选择一个按钮,在底部属性对话框里,设置颜色(单击前面图中的调色板按钮,弹出颜色对话框):饱和度240、亮度120始终不变,不同的按钮色调值依次设为0、12、24……228,在设置颜色时要记录下来每一次的红绿蓝值。
二十个颜色按钮分别命名为C1、C2……C20。
四、编程
Flash的强大功能主要是体现在日益完善的编程功能上。
1、基本概念
Flash可以对时间轴中的关键帧、按钮和影片剪辑进行编程。选中时间轴上的关键帧,或者选择舞台上的一个按钮、剪辑,然后打开软件界面下方的“动作”对话框就可以输入语句了。
在Flash中,一个影片剪辑叫做一个“类”,放置在舞台上的一个具体的剪辑叫做“实例”,两者的关系就好比“人类”和某一个具体的人一样,“人类”是整体的名称,而每个人还得有自己的名字。人有性别、身高、生日、所处地点这样的属性,还可以执行吃饭、走路等等动作,对象则有很多属性和方法(可以执行的动作)。具体到本例,就是通过单击按钮,获得一个颜色值,然后再单击影片中的上衣或者裤子,改变对应的颜色。具体到本例,“上衣”剪辑在舞台上的实例就叫做jacket,裤子的实例叫pants吧。
Flash中不但影片剪辑是对象,颜色也是一种对象,只是针对这种对象的编程语句和影片剪辑不同。所谓编程,很大一部分就是对这些对象实例的操作,改变它们的属性、或者命令它们作一些事情。
Flash中的语句,风格和语法都类似于C++和Java语言,并且针对Flash自身特点做了增减。
2、正式编程
现在,选择按钮所在的时间轴,进行编程(我们的动画只有一个关键帧,也就是时间轴的第一帧)。
输入下面的语句:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var ColorC:Number=0xFFFFFF;//当前颜色 C1.onRelease=function(){ ColorC=0xFF0000; } C2.onRelease=function(){ ColorC=0xFF4D00; } …… color_pants = new Color(pants); jacket.onRelease =function(){ color_jacket.setRGB(ColorC); } pants.onRelease =function(){ color_pants.setRGB(ColorC); } |
实际编程时,只输入右侧的语句而不要输入左边的数字,这些数字只是为了接下来说明方便。
从前面的程序可看出:
每行语句以分号为结束符,//后面可以写注释文字,一段程序要用大括号括起来(即使有的一段只有一句)。适当的缩进有助于阅读程序,但决非必要。
第1行声明一个数字型变量并把初始值设为0xFFFFFF,这个变量代表颜色,现在的值代表白色,是还没有单击过颜色按钮的颜色(前面已经把上衣和裤子的实际颜色设成白色的了)。当然,实际上Flash并不“知道”它表示一个颜色,但是我们在后面的代码中要把这个数值赋给上衣(或者裤子)作为颜色值。如果要做一个比喻的话,现在仅是把白色这个“词”放在ColorC这个锦囊中而已,要怎么用这个词,全靠后面语句的安排。
第2行,含义是当单击C1按钮时,执行等号后面用大括号括起来的内容。
第3行是要执行的内容,设置ColorC的值。这一行等号后边的0x代表是一个十六进制值,六位十六进制数值的前两位代表红色分量,中间两位是绿色分量,最后是蓝色分量。这一句的作用是把刚才锦囊中的词替换掉。不论锦囊中的词汇是什么,反正单击一次颜色按钮,就把原有值换成新的。
第4行结束单击这个按钮的代码。
第5到第7行与前面大致相同,仅颜色代码不同。
第8行的省略号实际代表其余18个按钮的代码,本文从略。
第9和第10行声明了两个颜色对象,并分别代表上衣和裤子的颜色。颜色对象和前面接触到的可视的影片剪辑对象不同,必须声明后才能使用。
第11行的含义可以参考第2行语句,当单击上衣时执行后面代码。
第12行通过执行一个颜色对象的方法,把上衣颜色对象的值改变成刚才最后一次单击过的颜色值。到了这时,前面提到的那个“锦囊”中的词被派上了用场,可是如果没有这个锦囊,那么颜色值也没有地方可以存放。注意,如果课件启动后还没有单击过颜色按钮,则由于第1行语句的存在,上衣颜色仍为白色,如果已经单击过某个颜色按钮,这时就把上衣颜色设为单击过的颜色。
后面设置裤子的颜色代码类似。
注意,在前面的程序中,除了颜色值的十六进制代码不区分大小写,关键字一律要区分大小写,变量名的大小写要始终保持一致。
前面所述程序,其实并不是实现本课件功能的最好办法,主要是重复工作太多,C1.onRelease、C2.onRelease一直到C20.onRelease,如果需要更多颜色按钮、更多需要填色的部分,或者设置多个角色的服装,工作量可想而知。另外,就颜色按钮的制作而言,无论是鼠标滑过按钮表面还是按下按钮,都没有向用户提供适当的视觉反馈。不过本文的目的重在实现基本功能,就选择了目前最简单的“笨”方法,更高级的方法和更美观的效果将来可以共同讨论。
欢迎大家和笔者共同交流提高。
评论