圆在flash 当中的使用,是一种非常实用而且好玩的技术。它优点是简单,容易使用。对于一些不错的效果有很强的实用价值。例如,做一些圆周运动,旋转等都是很经常的做法。我们仅仅需要知道它的参数方程,和一般的方程就能够创造出一些不错的案例。

 圆的标准方程式:(x-a)2+(y-b)2=R2

而它的参数方程 可以x=a+R*cosA

                             y=b+R*sinA(A为角度,(a,b) 圆心坐标)

我们使用它的参数方程式,创建我们的点的分布。方法很容易,只要知道半径,和角度即可。

下面我们使用一张图片来实现这种情况。当你使用图片创建的时候,你会发现元件注册点会围绕着圆的轨迹分布。下面是一个程序生成的图片

观察到每一张图片都是按圆上轨迹点进行分布。不过你会发现,这一种情况 并不是我们所希望的效果,我们更加倾向于它围绕着一个圆阵。

这样。我们就需要对图片进行一些角度转变。

刚刚好,我们看到每一张图片都是平行于中间的那一条直径,而需要进行多少转角呢?才可以变成下面的情况呢?

答案刚刚好是就是他的补角值。

我们采用内角和的公式来判断需要转多少角度。

(n-2)*180度=多边形内角和公式。这个公式可以帮我们解决一些问题。

例如我们创造是10边形,则(10-2)*180/10 =这样就可以取得每一个内角角度值,而刚刚好,这个内角值整好是转角的值。

可以自行证明一下。最后加上90度这样就可以变成我们下面的图。

然后我们书写一下代码看看效果是怎样好。其中photo 为库链接出来的图片元件,它只是一个MC。

package { import flash.display.Sprite; import flash.events.*; import flash.geom.*; import flash.display.DisplayObject; public class Main extends Sprite { private var R:int=180;//圆半径 private var centerX:Number=stage.stageWidth/2; private var centerY:Number=stage.stageHeight/2; private var contain:Sprite=new Sprite();//创建容器 private var num:int=10;//边数 private var angle:Number=2*Math.PI/num;//每一个角度 private var perangle:Number=(num-2)*Math.PI/num;//多边形内角和除以边数 private var list:Array=new Array();//用于图片管理的数组 private var speedx:Number=0; private var speedy:Number=0; //private var pen:Sprite=new Sprite(); public function Main() { addChild(contain); //addChild(pen); contain.x=centerX; contain.y=centerY; contain.z=0; createSphere();//创建球体分布 addEventListener(Event.ENTER_FRAME,Run); stage.addEventListener(MouseEvent.MOUSE_MOVE,onMove); } private function createSphere():void { for (var j:int=0; j<num; j++) { var myphoto:Photo=new Photo(); contain.addChild(myphoto); list.push(myphoto); myphoto.x=R*Math.cos(j*angle);//采用圆的轨迹分布对圆进行分布 myphoto.z=R*Math.sin(j*angle); myphoto.y=0; myphoto.rotationY= (j*perangle) * (180/Math.PI)+90;//偏移角度计算 } //contain.rotationX=85; } //当鼠标与中心点产生一段距离的时候 private function onMove(event:MouseEvent):void { speedx=(mouseX-contain.x)*0.01; speedy=(mouseY-contain.y)*0.01; } private function Run(event:Event):void { contain.rotationY+=speedx; contain.rotationX+=speedy; sortZ(); } //深度排序管理 private function sortZ():void { list.sort(depthSort); for (var i:int=0; i<list.length; i++) { var myimage:Photo=list[i]; contain.setChildIndex(myimage,i); } } //摘录make thing move 姐妹篇一个管理方法 private function depthSort(objA:DisplayObject,objB:DisplayObject):int { var posA:Vector3D=objA.transform.matrix3D.position; posA=contain.transform.matrix3D.deltaTransformVector(posA); var posB:Vector3D=objB.transform.matrix3D.position; posB=contain.transform.matrix3D.deltaTransformVector(posB); return posB.z-posA.z; } } }

加上一个渐变色的背景。效果更加好。同样为了让这个程序不单调。我们对鼠标加入一些交互。通过距离监测办法来让他转速加快和加慢

private function onMove(event:MouseEvent):void { speedx=(mouseX-contain.x)*0.01; speedy=(mouseY-contain.y)*0.01; } private function Run(event:Event):void { contain.rotationY+=speedx; contain.rotationX+=speedy; sortZ(); }

小结

 最后的效果如下:程序很简单,扩展地方很多很多,例如结合xml 做法,换成不同的图片的做法。这些都是很容易进行扩展到。

再者我们加入多一层的做法。变成一个圆柱形状,效果又是如何呢?效果可以说很多很多。一下子说不完。所以这一部分就交给喜欢flash 的朋友了。一起来玩一下。

结合到数学当中原理。尝试这些效果。下面扩展成圆柱的效果。