框架的制作

题外话:据说中国的数学是学得最难的,而这个题目印象中也在高考备考的时候曾做过类似的,也许对于搞数学的中国人来说,要证实这么个式子完全没有问题,可能韩国人还没有谁证实出来呢,但是把这条式子应用到这个实际问题上的居然是韩国人!唉,中国的教育有待改进.
由此可知,假如把这段代码用setInterval调用,或者在onEnterFrame里调用的话,ObjPos的值将在targetPos两边振动,并且无限接近targetPos.这个式子用到我的鼠标效果里,这里要控制的点就是整个框的最高点.最高点的变动带动整个外形的变动,当然带动外形变动是后面的事情,我们当前先要把最高点振动的效果实现.因此,targetPos就是框架最高点最终停留的位置,而ObjPos则是框架最高点当前的位置.
下面笔者介绍的将是如何根据算出的最高点把图形描绘出来.
首先,矩形的四个顶点都是常量,而且有三条边都是直线,因此,这里用lineTo就可以实现了.
lineTo(x,y)方法比较简单,对MC调用该方法时,lineTo将在点x,y和当前MC的画图标记点连一直线,一开始默认为(0,0),所以第一次对该MC调用lineTo的时候,将在该MC上画一条从(0,0)到(x,y)的直线,然后画图标记点就改为(x,y)了.假如不希望一开始画上这条线的话,或者画完一根线以后,希望再画一根,并且不要跟现在的线连在一起的话,可以先用moveTo(x,y)方法改变画图标记点.
curveTo(controlX,controlY,anchorX, anchorY)方法则是该教程的一个重点,因为波形的绘制都是通过该方法实现的.而且过两点有无数条曲线,所以,如何保证波形曲线的平滑性,是个很重要的问题.
下面先做一个小测试:
新建一个Flash文档,在帧上添加下面的代码:

然后,测试影片,在舞台上移动鼠标,观察曲线的变化(其中,鼠标所在的点是控制点)
也可以直接在这里预览:


你会发现,不管控制点怎样变化,画出来的曲线都有一个特点,就是控制点跟曲线两个顶点的连线都和曲线相切,并且弧线总是C形,不是S形.这就是指导我们画出平滑曲线的重要结论.
观察下面的图:

可以发现,在除红线以外的所有曲线中,跟红线的切线相切,并且方向跟红线相反的两根蓝线是可以跟红线平滑过渡的,数学上这种现象称为连接.另外,切线本身也能跟红线实现平滑过渡.
由此可以正确控制波形的外形.
波形的草图如下:

红色是曲线部分,一看就知道不是个简单的C形,你尝试在Flash,或FW或者PS里把这条路径画出来,再看看锚点的组成,你就可以发现,这么条曲线可以分成三条C形曲线.

假如就这样画三段,那么,波形最高点的坐标是由控制点决定的,很难精确,所以,最好在最高点再添加一个锚点,这样最高点的位置就准确了.

但是,其它锚点怎么确定呢?

其实根据已知的条件,是无法得出其它锚点的位置的,这个一般凭感觉来确定就好了.姑且让整条曲线的宽度为width,然后假设最高点的横坐标是x_m,那么,曲线最左点的横坐标是x_m-width/2,最右点的横坐标是x_m+width/2,中间两个过渡点的横坐标,一个在x_m-width/2和x_m之间,一个在x_m和x_m+width/2之间,为了方便,也为了自然,选取中点,x_m+width/4,x_m+3*width/4,纵坐标的选取也相似.

现在要讨论的是控制点的问题,就是怎么让每段曲线之前能实现平滑的连接.
首先,作出曲线各锚点的切线.那么,相邻曲线段的切线之间的交点(A,B,C,D)就是相应曲线的控制点.


可见,A,D均位于波形最低点,而B,C位于波形最高点.另外,A,A₁,B三点共线,C,C₁,D三点也共线,这样就可以保证整个波形都是平滑的.
但是,这样A,B,C,D的位置还是不能确定下来,但可以肯定的一点是,四个点的横坐标从左到右的顺序依次是A,B,C,D.那么,比较方便而且比较美观的选择是让A的横坐标位于A₀和A₁的中间,那么可以算出B点的位置恰好位于A₁和顶点的中间,同样道理,C点在顶点和和C₁点的中间,D点在C₁点和D₀点的中间.

理论基础基本齐全,下面可以开始动手写程序了.

不过笔者发现,有个这个基础原来还不足够,依然会碰到很多很棘手的问题.在测试的时候才发现的.
做法:
1 新建一个Flash文档,大小用默认的550*400好了.
2 然后,在舞台上画一个全透明的矩形,大小:550*100,位置:(0,300)
3 转换为元件,实例名bg.虽然叫bg,但是是用来检测碰撞的时候用的,也是测试出问题以后才加的.
4 就是添加帧代码了,这里将会结合上面的理论对重要的代码添加注释.
代码如下:

//画一个图,就要创建一个MC,name就是MC的名称,depth就是MC的深度,然后highpointx,highpointy则是最高点的坐标值,width是波形的宽度,这个值之所以设为变量,是因为框架拉得越厉害,波形的宽度越高,这样动作才不致于过分的生硬,这个读者可以尝试让width为常量.然后,alpha是MC的透明度,当然,你还可以把颜色之类的数值放到参数里面,不过这个不是重点,所以笔者就没放进去了.

这样,文件就完成了,才800多字节就可以把效果实现了.
当然,这只是一些简单的图形,没有任何美工成分,这靠大家去发挥了!
源文件也就这么段代码和一个矩形的MC,我想也不用传给大家了.
还有,这里涉及数学的东西比较多.大家假如对数学不感爱好,只对效果感爱好的话,就直接用它好了.当然了解一下还是对大家在程序上发挥创意有一定的帮助.不过作为Flash创作者,数学就没必要学得太精,懂得应用才是最重要的.
中国的数学教育哪怕到了大学,也只重视把具体问题抽象化了,然后教学生去解题,解完以后,应用的问题早就忘得一干二净了.所以,在学校,数学很多时候显得非凡枯燥乏味,考试的失利更让很多的学生丧失了对数学的爱好.哪怕是学的很好的学生,甚至数学家,也有大部分只不过是数学的奴隶,是为了学数学而学数学的.
从考试的角度说,我的数学学得并不好.为了证实缓冲公式,我花了近4小时,而这则是高考会考到的东西,所以数学高考成绩并不好,689分(满分900),但是跟很多700多800多的学生比起来,我更会把数学应用到实际的问题上面,直接应用缓冲公式,我10分钟就把程序写出来了,当然,为了一些BUG我又花了10分钟.因此,分数跟我差不多,在500~700左右分数段的学生就有不少写这些数学程序写得比我好的.所以,在此教程的末尾,我想给大家一些建议:
不要因为自己是菜鸟,就觉得AS好难学,很多时候,AS是应用性的东西,做一些程序是靠自己对事物的观察,然后产生一些想法而实现的,而并不是说你对AS理解得越透彻,就越能做出好的程序来.因此,我觉得,衡量学好AS的标准是你对AS的应用能力,而不是你对它内容理解,把握的透彻性.所以,有人用Flash4就能做出很酷的AS效果,有人用Flash8还比不上呢!Flash4的AS很少,所以,这说明其中的差异在于你能否把学到知识的应用到位,而非学到知识的多少.
不要觉得自己数学,物理,或者英语学不好而丧失对AS学习的信心.在中国的教育模式下,很多东西对于除了极少数的学专科以外的大部分的人来说,其实都是垃圾.现在,不少的人以自己的学习成绩作为衡量自己学得好否的重要标准,导致自己潜能一直埋没在深处,无法挖掘.所以,自认为学得不好的朋友们,你们也许是最优秀的,也许最能够学以致用,用学到的知识,用AS为Flash作品添加光线的也许就是你们!
最后补充一点就是我上面所说的并不是否定学习成绩优异的朋友们.你们也许应该问问自己,有没有曾经为了"其所以然"而一直在某个抽象的问题上钻牛角尖.假如有,最好走出来,看看"知其然"能否会对实际应用已经有很大帮助了.当然,假如钻牛角尖能钻出成绩,钻出名气来(像华罗庚,陈景润等),也可以试试,不过能有好结果的究竟占极少数.
PS:其实我在缓冲公式方面我觉得自己也有点钻牛角尖了,也不知道钻出来的结果有什么用.