简单生活 发表于 2015-1-15 20:51:01

来谈谈:Flash as进门(17):Math类三角函数-Flash actionscript

用于设计和编辑Flash文档。1996年11月,美国Macromedia公司收购了FutureWave,并将其改名为Flash。后又被Adobe公司收购。
本例持续解说AS的基本常识,明天我们来进修FlashAS进门系列教程第七课:影片剪辑第11节三角函数,Math类为我们供应了良多数学盘算函数,明天我们来懂得一下三角函数,对Flash的AS编程有乐趣的伴侣能够到论坛与作者交换。
上一篇文章:Flashas进门(16):用AS绘制各类图形
三角函数
Math类为我们供应了良多数学盘算函数,明天我们来懂得一下三角函数。三角函数是研讨三角形的边与角的干系的学科。但愿不要看到这个标题就开跑,不要怕,往下看,你会温习到初中所学的三角课程,同时你会感到到三角函数会很复杂。固然所要先容的只是正弦,余弦和归正切三个经常使用的函数。
Flash为何要研讨三角函数呢?看看上面的图:



在flash坐标系统中(即舞台上),放上一个点a,然后经由过程a点将a点的x,y长度画出来,并将两条线的端点连起来,你看一个直角三角形呈现了。如许三角函数就有研讨头了。这个三角形跟这个点有甚么干系呢?最分明的就是这个三角形的两条直角边b,c断定了a点的地位。除两条直角边之外,另有斜边d,另有一个角e,(别的两个角我们不研讨)。这些边和角之间的干系就是三角函数。我们说过只研讨三个函数:
sin(e)=c/d;对边除以斜边
cos(e)=b/d;邻边除斜边
e=atan(c/b)
而flash为我们供应了一个更加公道的归正切函数:atan2(y,x)
即:e=atan2(y,x)
从下面的图中能够看出,实践上b就即是点a的x,c就即是点a的y.这换一下,就成:
sin(e)=y/d;
cos(e)=x/d;
将这两个式子变一下就成:
y=d*sin(e);
x=d*cos(e);
对这两个式子,必要申明的是:角e在三角函数的运转中必需利用弧度制,这与我们习气的角度制有所分歧,以是我们必要记着角度弧度转换的公式:
角度弧度转换公式:
角度=弧度*180/Math.PI;
弧度=角度*Math.PI/180;
PI是园周率,即3.14159,它属于Math类写法为:Math.PI.三角函数也属于Math类。以是下面的公式准确写法是:
x=d*Math.cos(e)e为弧度暗示
y=d*Math.sin(e)
三角函数的常识差未几温习这么多就好了,是否是很复杂呢?


园周活动:
下面先容的三角函数有甚么用呢?我们仍是来看看后面谁人图,假如直角三角形的斜边长度流动稳定,让角e不休地加年夜,会是个甚么效果呢?很简单了解它呈现的是上面的效果:
http://www.poluoluo.com/files/media/1_090124110900.swf
点a在做园周活动。看起来有点意义了哈。如何让它做园周动运的呢?要让工具挪动必要改动工具的x,y值,下面的公式已给了我们盘算这两个值的办法:
x=d*Math.cos(e)
y=d*Math.sin(e)
做园周活动时直角三角形的斜边长度d稳定,实在我们早已看出来了,斜边实践就上园周的半径。将角e不休增年夜,从而发生分歧的x,y值,将这些值赋给点a工具,就构成了园周活动了。在上例中,我们将点a做成MC,实例称号为:ball_mc,h上例的代码为:
vard=100;//半径为100
varcenterx=Stage.width/2;
varcentery=Stage.height/2;断定园心的地位在舞台中央
varzl=10;//设一个增量,即角e每次增添10度。
vari=1;
onEnterFrame=function(){
ball_mc._x=centerx+d*Math.cos(i*zl*Math.PI/180);//再次提示三角函数要用弧度
ball_mc._y=centery+d*Math.sin(i*zl*Math.PI/180);
i++;
if(i>36){//这个前提语句能够不要,但那样i会无穷度增年夜,我以为欠好,以是在i>36时,即转完1周时,让i=1。
i=1;
}
}
下面已完成了三角函数的第一个使用:园周活动。
园周活动公式:
MC._x=园心x+半径*Math.cos(i*增量*Math.PI/180);
MC._y=园心x+半径*Math.sin(i*增量*Math.PI/180);
i++;

你十分乐意,由于你已会让工具做园周活动了,你很快就想到了要做一个玉轮环绕地球运转的效果。但成绩呈现了,玉轮的运轨迹好象是椭园的。不要作急,我们来对照一下园和椭园的区分,很快我们发明椭园与园的区分就是x轴半径和y轴的半径不相称。因而乎,椭园活动公式出来了。
椭园活动公式:
MC._x=园心x+x轴半径*Math.cos(i*增量*Math.PI/180);
MC._y=园心x+y轴半径*Math.sin(i*增量*Math.PI/180);
i++;
祝贺,你如今连椭园活动城市了。我们再来研讨一下,看看三角函数还能弄点甚么花样。


下面说过,要研讨三个三角函数,下面只用了两个,好象另有个flash公用的归正切函数:atan2.这个函数是依据某点的x,y值盘算出该点与x轴之间的角度:
e=Math.atan2(y,x);
能不克不及算出两点之间的角度偏向呢?仍是来看看图:



在图中有两个点a和b,将两个点用一根线连起来,经由过程a点作y轴平行线,经由过程b点作x轴平行线,如许三根线就构成了一个直角三角形。有了三角形就好办了,我们的三角函数就该上场了。先来剖析一下这个直三角形,不丢脸出,三角形的两条直角边实践就是两点的坐标差,分离是:(x1-x2)和(y1-y2).而角e就是是两点间的角度差。有了角度差,就想假如将b点扭转一个角差,那末b点的偏向就与a点一样了。假如将a点换为鼠标,在鼠标挪动时一直盘算b点与鼠标的角差,然后让b点扭转这个角差,如许b点会一向指向鼠标跑都跑不脱。效果以下:
http://www.poluoluo.com/files/media/1_090124111148.swf
代码:
onEnterFrame=function(){
vardx=_xmouse-jt_mc._x;
vardy=_ymouse-jt_mc._y;
varangle=Math.atan2(dy,dx)*180/Math.PI;
jt_mc._rotation=angle;
}
跟从鼠标扭转公式:
onEnterFrame=function(){
vardx=_xmouse-MC._x;
vardy=_ymouse-MC._y;
varangle=Math.atan2(dy,dx)*180/Math.PI;
MC._rotation=angle;
}
这里要注重两点:1.atan2(dy,dx)是dy在前,dx在后,这一点简单弄错。2.由atan2()盘算出的角度是弧度,而我们要设置_rotation属性要用角度,以是要用180/Math.PI;弧度转为角度。硬是魔鬼得很,一会转已往,一会转过去。


如今你又想出了新名堂了,光是随着鼠标转还不可,还跑已往捉住它。仍是看下面谁人图,b点要到a点,是否是b点的x加上(x1-x2),b点的y加上(y1-y2)就好了呢。但即然是跟跟从一定不克不及一步到位,要不就不是跟从了,而是帖在一同了,也就是说趋于直角三角形的斜边一能一步到位,而是一点一点地增添,这就需在设一个增量。依据后面的三角函数公式便可算出每次增添的x和y的量了。
vx=增量*Math.cos(e);
vy=增量*Math.sin(e);
将b点的x,y一直地加上这个vx,vy,b点就一直地向a点接近了。
效果:
http://www.poluoluo.com/files/media/1_090124111330.swf
代码:
varspeed=3;
onEnterFrame=function(){
vardx=_xmouse-jt_mc._x;
vardy=_ymouse-jt_mc._y;
varangle=Math.atan2(dy,dx)*180/Math.PI;
jt_mc._rotation=angle;
jt_mc._x+=speed*Math.cos(angle);
jt_mc._y+=speed*Math.sin(angle);
}
鼠标跟从公式:
varspeed=一个数字;
onEnterFrame=function(){
vardx=_xmouse-MC._x;
vardy=_ymouse-MC._y;
varangle=Math.atan2(dy,dx)*180/Math.PI;
MC._rotation=angle;
MC._x+=speed*Math.cos(angle);
MC._y+=speed*Math.sin(angle);
}


将本节先容的内容与上节先容的画图办法分离,能够绘制出良多图形,如园,椭园,正,余弦波形等。这个留给人人研讨。上面做一个典范的实习,图片扭转,制造办法来历于收集:
上面是我的鼠绘作品的一个算是展现吧:
http://www.poluoluo.com/files/media/1_090124111521.swf
我选了6张作品,导进到库中。然后,新建一个MC,共6个关头帧,每一个关头帧,放一张图片,巨细一致调为150x200.然后在库中右击MC>“毗连”,点中“为ActionSpript运转时导出“前的钩,在标识符一栏内输出:imge.
回到主场景,翻开帧举措面板,输出:
varr=200;
varv=1;
for(vari=1;i<=6;i++){
attachMovie("imge","mc"+i,i);
_root["mc"+i].gotoAndStop(i);
_root["mc"+i].cita=i*60;
_root["mc"+i]._y=200;
}
onEnterFrame=function(){
v=(275-_root._xmouse)/25;
for(vari=1;i<=6;i++){
with(_root["mc"+i]){
cita+=v;
_alpha=50+(100+100*Math.sin(cita/180*Math.PI))/4;
_xscale=100*Math.sin(cita/180*Math.PI)*_alpha/100;
_yscale=75+(100+100*Math.sin(cita/180*Math.PI))/8;
_x=75+r-r*Math.cos(cita/180*Math.PI);
}
_root["mc"+i].swapDepths(Math.round(_root["mc"+i]._xscale));
}
};
代码剖析:
起首经由过程一个for轮回,将图片元件加载6次,每次加载后,让它停在分歧的帧上,如许舞台上实践上就有6张分歧的图片了,这是一个十分风趣的办法,值得进修。同时为每张图片设置了一个分歧的初始量Cita,共6张图片,一个园周是360度除以6即是60,如许6张图片被设为i*60,即匀称散布。最初将图片的y坐标流动在200,由于图的扭转实践就是图片从左到右往复活动罢了,y坐标是稳定的。
for(vari=1;i<=6;i++){
attachMovie("imge","mc"+i,i);
_root["mc"+i].gotoAndStop(i);
_root["mc"+i].cita=i*60;
_root["mc"+i]._y=200;
}
接上去的代码大概不是太好了解,请记着一点,正弦,余弦函数的值是从1到-1往返变更的,这一点很主要,鄙人面的代码中充实地使用了这个道理。经由过程onEnterFrame事务使动画不休反复,每反复一次,每个图片的Cita加上鼠标x坐标与舞台中线的差值除25,也就是说设置了一个增量,以是这25能够自行改动,值越年夜转得越慢。
onEnterFrame=function(){
v=(275-_root._xmouse)/25;
for(vari=1;i<=6;i++){
with(_root["mc"+i]){
cita+=v;
接上去设置图片的通明度,来了解一下这句:
_alpha=50+(100+100*Math.sin(cita/180*Math.PI))/4;
起首看:Math.sin(cita/180*Math.PI)这个函数的值下面说了是从1到-1往返变更的。那末100*Math.sin(cita/180*Math.PI)10到-100往返变更,100+100*Math.sin(cita/180*Math.PI))就是200到0之间的变更了,(100+100*Math.sin(cita/180*Math.PI))/4就是50到0之间变更了,50+(100+100*Math.sin(cita/180*Math.PI))/4;就是50到100之间变更了。这一句的感化就是使通明度在正面时为100,转到反面时为50.
接上去:
_xscale=100*Math.sin(cita/180*Math.PI)*_alpha/100;
100*Math.sin(cita/180*Math.PI)的值是100到-100,_xscale属性设为-100时的效果是程度翻转,这就构成了在正面的反面偏向纷歧样的效果,也行成了在两头时的翻转效果。*_alpha/100;应当是让图片的正不和与通明度同步。
下一句:
_yscale=75+(100+100*Math.sin(cita/180*Math.PI))/8;
算得出来这是让图片的高在75到100之间变更,即在反面时高度要小一些。
下一句:
_x=75+r-r*Math.cos(cita/180*Math.PI);
能够算出等号前面的式子值为75到475之间变更,这就确平方和了图片在75到475间摆布挪动。
最初一句:
_root["mc"+i].swapDepths(Math.round(_root["mc"+i]._xscale));
深度互换,让图片在最年夜时(正面),在最下面,以构成正面图片遮住反面图片的效果。

FlashScreensaversMaker能够迅速的将您的Flash作品转化为屏保程序。

灵魂腐蚀 发表于 2015-1-17 14:51:16

动画广告相对于传统广告而言,它的优势在于不受时间、地点等条件限制,可以通过动画的形式将那些复杂又抽象的广告内容更加简单化、生动形象化。

冷月葬花魂 发表于 2015-1-25 08:39:12

用户在观看广告的时候,无法通过正常点击鼠标来查看广告的尺寸、字节数、所链接的URL广告本身信息。

若相依 发表于 2015-2-2 21:42:28

都着重在优点方面,请尽量答的详细、深入一些,谢谢!拿了我全部的爱问分了已经

飘飘悠悠 发表于 2015-2-8 07:56:37

考虑到实际的效果,这些专业的网站并不会去单纯追求技术本身,广告设计是否FLASH不是目的,关键是获得最好的宣传效果。

活着的死人 发表于 2015-2-25 05:59:01

FLASH动画在如今的很多网站中都比较常见,其所独有的视觉效果和感染力成为各行各业宣传企业形象、推广产品的最佳平台。

柔情似水 发表于 2015-3-7 20:16:02

所以不要使用不必要的高祯率 - 否则老的、慢的计算机在显示动画时会阻塞。

仓酷云 发表于 2015-3-15 17:59:04

常见的富媒体广告形式有横幅广告(BANNER,旗帜广告)按钮广告(BUTTON)弹出窗口广告(pop-up ads,弹窗)浮动广告(floting ads,飘浮广告,floaters)插播式广告(Interstitial)全屏广告(full screen) 

简单生活 发表于 2015-3-22 04:09:36

只要用心 只要努力 在加上你无限的创意和想象。FLASH无敌了
页: [1]
查看完整版本: 来谈谈:Flash as进门(17):Math类三角函数-Flash actionscript