+++++三角法（flash中实现伪3D效果基础入门）+++++
请勿转载，请勿做商业用途
作者：不详 简译：eeyi 整理：tuliping
说明： 这是国外网站上一篇关于在flash中实现伪3D效果的基础入门教程，此教程的原地址为http://www.codylindley.com/Tutorials/trigonometry/index.htm
如果你的E文好，建议你去看原教程。这个教程并不是全文翻译，鉴于本人能力有限
不妥的地方请大家见谅。
------------------------------------------------------------------------
目的：在flash actionscript 中实际应用三角法。在中学的时候我学数学很少去关心三角法,今天我正在为在数学课上没有较多注意它而自责。
理由：为了提示人们在写/程序设计 actionscript 时在 2D空间中做出 3D效果的flash。这是我自己做过的一些笔记，但我决定把它拿出来给其他人分享，这样或许有些用处。
警告：三角法是给有一些常识和学习愿望的人的一篇回顾。我期望这材料给读者一些有关 actionscript 程序设计的知识，并能为flash写 代码,就是说,将会很少有关于flash和code本身的解释。然而它对于一个独立思考的flash actionscript 专家来说应该很不错，你需要数学来了解三角法，你需要 Colin Moocks 的书来了解在flash中 actionscript 的手写技术。再者，请注意我不是一个作家，这也不是为产生一些flash想法为目的而写的东西。这个材料是关于三角法概念的一节指导课，对于flash，真的只是一个概述。
声明：我知道，这种东西并不新鲜，而且大致上我只是在重复我在书中看的例子。因此不要去想我是一个超级聪明的家伙，事实上我只是读了很多书，而且写那些书的人就是读了许多书的人。写那些书的人，嗯，都会在这页的底部给显示出来，这是一种信用。
标准的笛卡尔坐标系统：
Flash 中的笛卡尔坐标系统：
请注意二者的区别。
首先flash 使用弧度而不是度来测量角度。在任何笛卡尔 坐标系统中左右最大的旋转角度是360 度。但在flash中，记住全部旋转从0度开始，用电影剪辑的_rotation属性时其返回值将会在0度到180度或者在0度到-180度之间。
我们使用degrees（角度） 因为每个人懂得什么是90度，但是很少人知道75 radians（弧度）是什么意思。 下面的内容将给一个变量命名为degrees，是角的degrees(度)而不是radians（弧度）。当你想把radians（弧度）转换成degrees(度)的时候请使用一个数学函数：
Degrees=Math.round(your_angle*180/Math.PI)
记住，在你转换它之前，你的角度用radians（弧度）表示。
如果你没有将radians（弧度）转换成degrees，就象下面的swf则显示为弧度
/*
onClipEvent (mouseDown)
{ startDrag (this, true, 0, 0, 150, 150); }
onClipEvent (mouseUp) { stopDrag ( ); }
onClipEvent (enterFrame)
{ radians = Math.atan2((this._y-_root.center._y), (this._x-_root.center._x));
this.radiantextbox = radians; } */
我们再来看看勾股定理。
很简单,这个定理可以给出两个movie clips 的距离．我们所有的人都需要知道Ｘ坐标和Ｙ坐标是为计算任何两个 movie clips 距离的．想象一下在下面的图片中两个黑色小圆点所描述的两个不同的电影剪辑（flash中)．
*用鼠标拖动Clip A ：
注意：Clip A 到Clip B或Clip B到Clip A的距离,二者的显示是一样的，都表示两个电影剪辑之间的距离。
/*code:
This is the code from flash for clip a
onClipEvent (load) {
var y1 = 0;
var y2 = 0;
var x1 = 0;
var x2 = 0; }
onClipEvent (mouseDown) { startDrag (this, true, 0, 0, 150, 150); }
onClipEvent (enterFrame){
y1 = _root.aclip._y;
x1 = _root.aclip._x;
y2 = _root.bclip._y;
x2 = _root.bclip._x;
x_cord = x2-x1;
y_cord = y2-y1;
_root.aclip.distance_from_bclip = Math.round(Math.sqrt(x_cord*x_cord + y_cord*y_cord)); }
onClipEvent (mouseUp) { stopDrag( ); }
This is the code from flash for clip b
onClipEvent (load) {
var y1 = 0;
var y2 = 0;
var x1 = 0;
var x2 = 0; }
onClipEvent (enterFrame) {
y1 = _root.aclip._y;
x1 = _root.aclip._x;
y2 = _root.bclip._y;
x2 = _root.bclip._x;
x_cord = x2-x1;
y_cord = y2-y1;
_root.bclip.distance_from_aclip = Math.round(Math.sqrt(x_cord*x_cord + y_cor爀楳湯???? ?????d*y_cord)); } */
知道一个直角三角形任何两边的长度就可以为计算其余的边角提供足够的信息．当你需要找到cos（余弦）,sin（正弦） 和正切的三角关系的时候，这就有用了．因此，为什么你需要寻找cos（余弦）,sin（正弦）和正切的三角关系，答案是简单的，在一个圆周上计算某一点．如果你不能计算出来，你仍然能获得一个点的余弦和正弦从而在flash中用一个点的radians（弧度）表示出来．下次你就会明白这为什么有用了，我确信你能想象出为什么．
在我继续讲述之前，考虑一下flash中数学函数的作用，下面将会涉及到角度、正切，余弦和正弦的应用．另外在下面图片中讨论余弦，正弦和正切的关系．
*这点很重要：很可能你会知道三角形对边和邻边的长度，因为他们表明了一个点Ｘ轴和Ｙ轴的坐标．通过研究下面这幅图看看你是否能理解．
Math.Atan2(y, x);........calculates the angle (in radians) from the x-axis to a point on the y-axis.
Math.cos(angle);.............................................calculates the cosine of an angle in radians
Math.sin(angle);..............................................................calcualtes the sine of an angle in radians
Math.round(number);.....rounds the number to the nearest interger Ex. math.round(5.16) returns 5
Math.Sqrt(any number);.............................................................calcuates the square root
Math.PI( )....................................the circumference of a circle divided by its diameter
好，在这里，如果我们知道直角三角形的角度，我们就能在flash actionscript下用数学函数cos( ) 和 sin( )，就能计算出圆周的周长．我显示了在flash舞台上如何获得目标的角度．现在我们将随便挑选４５度的角度．假如有这个角度，我们计算一个角与一个圆交叉的坐标．这意味着我们能在一个中心点或原始点周围计算一个圆的路径．
&n爀楳湯???? [?bsp; *重点：记住半径是圆周中心到圆周边缘的距离．并且在笛卡尔坐标系统中余弦描述水平方向（Ｘ轴） 、正弦描述竖直方向（Ｙ轴）
*你的目标是找出下面橙色圆周中心的X坐标和Ｙ坐标．
*记得你必须首先把角度转换成radians，因为我们正在谈关于４５度的角，但是flash默认的是radians 而不是degrees．举个例子，下面的代码将把角度转变成radians，然后用数学函数cos( ) 和 sin ( )返回到橙色圈（Ｘ，Ｙ）坐标．
var degrees=45;
radians = degrees* (Math.PI/180);
xcoordinate = radius * cos(radians);
ycoordinate = radius * sin(radians);
OK，让我们试着解释下面这张图片．半径决定了橙圆有多大，角度决定了橙圆的路径位置，这将规定一个原始的点或者笛卡尔坐标系统的中心( 0，0) ，借此用cos()找到Ｘ坐标，用sin()找到Ｙ坐标，我们就可以确定橙圆的圆周上的（Ｘ，Ｙ）坐标（淡灰色圈）．然后想想，如果我增加２度，角度就是４７度，那意味着在上述的 ActionScript中我的变化会改变橙球圆周的坐标，如果我继续不断增加２度，一直到当前度数，环绕橙圆周围的灰色圈圈的位置也会不断地增加． 在下一个例子里,我将用flash来真实的反映这个效果．也注意圆周是围绕Ｚ轴旋转，稍后会有更多介绍．
下面的代码放在一个叫“ball”的电影剪辑中，另外的一个电影剪辑其实例名称为：“center_cross_hairs”。“center_cross_hairs”用来标注一个点或电影中心的原始点。如果你不知道为什么，则需要从复习这节指导课开始。如果我没有使用“center_cross_hairs”这个MC，则flash将认为（0，0）位于场景左上角。记得给MC起实例名称。
为了获得第三维，我们现在需要给我们的代码增加一些东西， 这包含给我们的坐标系统增加另一个轴，这个轴就是Z轴。因此现在我们总共有3个坐标轴，他们是X轴，Y轴和Z轴。想象Z轴的最好方法就象这样，如果某个人向你的头（眼睛水平）射出一支箭，那支正在运行的箭的轴就是Z轴。如果射箭的人是在你前面500尺远的地方，箭射出，在你眼睛看来，箭是从一个很小的圆点到变成一支大箭。这得考虑透视的方法，因为当箭运行接近你的头时，你的眼睛就会扩大箭的实际尺寸。
如果你看下面的动画，第一个例子是一个球绕着Y轴旋转的。在我们继续下去之前你可以轻易的理解我的用意，这是一个绕着Y轴旋转的视觉效果。这幅图像显示一个橙圆能够绕着任何三根不同的坐标轴旋转。
下面的swf中，我伪造一个绕着Y轴旋转的远景，当球沿着X轴移动时，使它变大然后又变小。球当然不会变小，只是离我们的视觉更远些了。检查代码看看与上面的代码爀楳湯???? [?有什么不同. 我想请你注意，它仍然是不真实的远景，因为我只是改变圆周的比例。对于真实的远景我得必须给那个球的路径增加远景。我不继续详细说明这个例子了，但是我会提供两个例子让你看看差异。考虑到第一个例子没有显示球穿过Z轴。它只是看起来象沿着z轴离开你。但是灰色球确实旋进了Z轴的负边。看见不同了吗？ 上面全部的解释选自Flash 5 Studio from friends of Ed, chapter 15 - page。
现在我们懂得了一些第三维或者说Z轴的知识，我们可以开始考虑在flash中画很多点来伪造3D 效果。如果你考虑到这一点，知道另一坐标轴制作的用法，这些点则很容易精确把握。下面这张图里，显示在笛卡尔坐标系统中怎样去设置这种效果。在flash中没有Z轴，Z轴只不过是一个概念和数学方法，我们可以在一、二维空间里设置绕着特定的点来达到伪造第三维的目的。
如果你想要的目标深度是10，然后想象四个顶点的坐标离你最远的是点（X，Y，5）。并且如果你有一个完全平方，那么所有角将会有相同的坐标。因此，知道靠近你的四个角将有坐标（X，Y，-5）。记住，精确的中心或原点在盒子的中间（0，0）。那表明你必须沿着X轴运动-5和+5，这将实现深度为10或者总长度为10。看一看下面这幅图像。
下面的SWF显示了在笛卡尔坐标系统中用任意坐标怎样绘制这些点,由于没有Z轴，我们必须想出怎样将一个点放置于flash屏幕上.没有Z轴，但我们为了获得三维效果我们必须考虑数学中Z轴的位置。下面的SWF中，代码是加在球电影剪辑上的。下面的代码我用来复制小球，另外，再次提醒不要忘记使用电影剪辑center_cross_hairs的目的。
num_of_balls = 15;
for (var i = 0; i < num_of_balls; i++)
{ _root.ball.duplicateMovieClip ("ball" + i, i); }
远景（透视）的问题真的很简单。你试图在flash中获得三维空间的点，但是你必须通过三维空间的概念，把平面坐标转换成三维坐标。
这是三维空间坐标表示方法：（X，Y，Z）
这是平面坐标表示方法：（X，Y）
你想要做的事情是改变其中一个坐标，因此你有一组平面坐标，然后让flash通过用远景伪造第三坐标。这意味着flash将改变object的scale，当它围着一个特别的轴旋转的时候通过远景来转变。
看这些例子你是否能够理解我的意思。如果你想要在flash中复制这些例子，只需下载在举例的电影中看见的代码.我用一个橙色球来替代"center_cross_hairs"MC来定位，当然你也可以用一个空MC。“center_cross_hairs”MC必须是在场景的中心，另外，不要忘记给它取实例名称。
这是朋友 Ed的书Flash 5 Studio那里第15章的参考下的更进一步的解释。
[IMG][/IMG]
The following are the books I referenced for this information:
1. ActionScript the Definitive Guide, Colin Moock (http://www.Moock.org/)
2. Super Samurai (http://www.supersamuraiflash.com/)
3. Flash Studio 5, Friends of ed (http://www.friendsofed.com/)
4. Flash Game Studio, Friends of ed (http://www.friendsofed.com/)
5. Visual QuickPro Guide Flash Advanced, Russel Chun
Contact: email@codylindley.com
- 最近更新