Flash高级技巧：框架的制作

　　这是两个月前答应一位网友写的教程,但是当初没有时间,所以拖到现在.而且这个效果还是有相当一部分的人曾在论坛上问过怎么做的.现在笔者挤出了点时间,给大家送上这个教程.

　　效果预览:

　　

　　这基本上是用AS实现的.主要用了MovieClip对象的lineTo和curveTo方法,此外更有很多人都很熟悉的韩式弹性菜单的算法.

　　在这里,先给大家介绍比较简单的韩式弹性菜单算法.框架弹性动作就是通过这种算法实现的.他要达到的效果就是让一个物体在目标位置两侧振动,而且振幅越来越小,最终停止在目标位置.

　　他的算法如下:

　　

ObjPos=targetPos-deceleration*(ObjPos-targetPos)

　　您尝试让ObjPos是任意的一个数,然后让deceleration取0~1(不包括0,1),然后targetPos取一个跟ObjPos相差比较大的数,不断地代入上式算一下,您会发现ObjPos会在targetPos两侧振动,并且当前一次大于targetPos时候,这一次将小于targetPos,而且无限接近于targetPos,于是就达到弹性振动的目的了.

　　当然明眼人一观察就出结果.但是这个认识是感性的,假如有兴趣的话,能够看下我对这条式子的证实过程(对数学没兴趣的能够跳过)

　　在证实之前,先解释一点,上式两边的ObjPos是不相同的,在AS里,他并不代表相等,而是先把ObjPos当前的值代到右边,算出结果后重新对ObjPos赋值.因此,假设ObjPos原始值为a1,该式子运行一次后左边的ObjPos的值记为a2,依此类推,执行到n次后左边ObjPos的值记为an 1,所以,在数学上,实际上是进行这么一个数列的递推运算:

　　

an=t-d(an-1-t)(其中d,t是常数)

　　当代码执行n次时,物体的位置就位于数列{an}的第n 1项.

　　因此,我们需要证实数列当a1!=t的时候,an两个相邻项之间的数值跟t的差的符号相反,并且当n趋向于无穷的时候,an=t

　　

　　题外话:据说中国的数学是学得最难的,而这个题目印象中也在高考备考的时候曾做过类似的,也许对于搞数学的中国人来说,要证实这么个式子完全没有问题,可能韩国人还没有谁证实出来呢,但是把这条式子应用到这个实际问题上的居然是韩国人!唉,中国的教育有待改进.

　　由此可知,假如把这段代码用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文档,在帧上添加下面的代码:

　　

varinitX=100;

　　varinity=200;

　　varcontrolX;

　　varcontrolY;

　　varanchorX=50;

　　varanchorY=50;

　　this.onMouseMove=function(){

　　this.createEmptyMovieClip("curve",1);

　　with(curve){

　　lineStyle(1,000000,50);

　　moveTo(initX,initY);

　　ControlX=_xmouse;

　　ControlY=_ymouse;

　　lineTo(controlX,controlY);

　　lineTo(anchorX,anchorY);

　　moveTo(initX,inity);

　　curveTo(controlX,controlY,anchorX,anchorY);

　　}

　　updateAfterEvent(this.onMouseMove)

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有