分享
 
 
 

Flash高级技巧:框架的制作

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

效果预览:

这基本上是用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文档,在帧上添加下面的代码:

var initX = 100;

var inity = 200;

var controlX;

var controlY;

var anchorX = 50;

var anchorY = 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)

};

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

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

观察下面的图:

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

波形的草图如下:

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

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

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

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

现在要讨论的是控制点的问题,就是怎么让每段曲线之前能实现平滑的连接.

首先,作出曲线各锚点的切线.那么,相邻曲线段的切线之间的交点(A,B,C,D)就是相应曲线的控制点.

可见,A,D均位于波形最低点,而B,C位于波形最高点.另外,A,A1,B三点共线,C,C1,D三点也共线,这样就可以保证整个波形都是平滑的.

但是,这样A,B,C,D的位置还是不能确定下来,但可以肯定的一点是,四个点的横坐标从左到右的顺序依次是A,B,C,D.那么,比较方便而且比较美观的选择是让A的横坐标位于A0和A1的中间,那么可以算出B点的位置恰好位于A1和顶点的中间,同样道理,C点在顶点和和C1点的中间,D点在C1点和D0点的中间.

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

不过笔者发现,有个这个基础原来还不足够,依然会遇到很多很棘手的问题.在测试的时候才发现的.做法:

1 新建一个Flash文档,大小用默认的550*400好了.

2 然后,在舞台上画一个全透明的矩形,大小:550*100,位置:(0,300)

3 转换为元件,实例名bg.虽然叫bg,但是是用来检测碰撞的时候用的,也是测试出问题以后才加的.

4 就是添加帧代码了,这里将会结合上面的理论对重要的代码添加注释.

代码如下:

var deceleration = 0.5;

//deceleration是控制缓冲的一个变量,取值在0~1之间,decleration越大,弹性运动越持久.deceleration=0的话,就会一下子停住,decerlation=1的话,就会不停地作等幅振动.如果小于0大于-1,将做非弹性缓冲运动,大于1或小于-1将做振幅越来越大的弹性运动,有兴趣的话可以从上面公式的证明过程里得出这些结论.

//不过简单来说,要实现我们需要的效果,decelertaion根据你的感觉,在0~1之间取一个数就好了

var ypos = 300;

//ypos是波形最低点的纵坐标.在该文档里,建议取200~320范围以内的值.

//下面的函数就是绘制曲线的函数

function drawCurve(name, depth,&n

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有