伪3D菜单的实现
作者 佚名技术
来源 服务器技术
浏览
发布时间 2012-07-09
|
今天我们来讲这个互动的3D菜单。不过我们这里所讲述的方法是完全没有经过Z轴计算的，也就是说是一个伪3D的效果。 在解释结构之前，对整个作品的运动把握是很重要的。首先我们看例子，在这里有5个立方体柱子以画面最右方的某点为消失点向外沿伸。这个立方体的前侧会根据其与鼠标的距离而变换大小和左右移动。另外，立方体对鼠标的纵方向（Y）移动也有反应，可以随其上下移动。 如我们刚才说的，这个作品是没有Z轴运算的，场景中的实例会根据X和Y的坐标来模拟Z轴的空间感觉。在基本的立方体产生的过程中将运用AS的填充和画线命令。 ? 首先先做一个正方形的按钮，你可以自己为它定制大小，例子中的是一个75*75大小的正方形，将它的填充作成透明（alpha=0）。接着制作五个MC，我们把它们命名为MM-a1_typo~MM-a5_typo，将刚才作的透明按钮放进去，注意按钮对于中心点都要有一个递增的偏移植。比如MM-a5_typo在x=-150的位置，而MM-a4_typo则在x=-250，依次类推，到MM-a1_typo，x=550。这样一来当把所有这五个MC实例的中心点对齐后，它们便会均匀地分布在X轴上了，对它们进行放大或者缩小都会以相同“消失点”为中心，这样便会产生出透视效果。 在场景中给这五个MC的实例起实例名为“typo”，因为他们处在不同的父级中，所以起相同的名字就可以了，然后在这五个实例上加入AS—— onClipEvent (enterFrame) { ?ppp = getBounds(this); ?pointdataMin = {x:ppp.xMin, y:ppp.yMin}; ?pointdataMax = {x:ppp.xMax, y:ppp.yMax}; ?this.localToGlobal(pointDataMin); ?this.localToGlobal(pointDataMax); ?xMinData = pointdataMin.x; ?yMinData = pointdataMin.y; ?xMaxData = pointdataMax.x; ?yMaxData = pointdataMax.y; } 这里我们所用的函数getBounds会取得实例坐标的四个级值点（即X轴上的最大最小值和Y轴上的最大最小值，也就是矩形的四个顶点），分别存在xMin，yMin，xMax，yMax中。另外localToGlobal可以将MC中的空间坐标转为全局，也就是根目录中的坐标植。所以经过这一计算后，xMinData、 yMinData、xMaxData 、 yMaxData 这四个变量中会存储正方形的顶点信息并将之转为根目录下的坐标值。 ? 现在再将这五个typo都转化为MC（在场景中按F8即可），我们给它们起名为MM-a1~MM-a5，并将随之产生的实例命名为a1~a5。给它们都分别加入AS—— onClipEvent (load) { ??? objnum = _name.slice(1, 2); ??? _parent.init3D(objNum); } onClipEvent (enterFrame) { ??? tb = this.getBounds(this); ??? valueA = Math.pow(_parent._xmouse - tb.xMin, 2); ??? valueB = Math.pow(_parent._ymouse - tb.yMax, 2); ??? distance = Math.sqrt(valueA + valueB) * 0.5; ??? if (distance <= 200) { ??????? this._xscale = this._xscale + (((200 - distance) - this._xscale) * 0.1); ??????? this._yscale = this._yscale + (((200 - distance) - this._yscale) * 0.1); ??? } else { ??????? this._xscale = this._xscale + ((50 - this._xscale) * 0.1); ??????? this._yscale = this._yscale + ((50 - this._yscale) * 0.1); ???? } ??? this.typo._x = _parent._ymouse * 0.1; ??? this.typo._y = this.typo._y + (((_parent._ymouse - this.typo._y) * 0.1) * objNum); ??? _parent.move3D(objnum); } 这段AS一开始会把实例名的一部分切下来，也就是a1,a2,a3…的序号1，2，3……。并将之传递给父级目录下的init3D这个函数。接着，在每一帧都计算鼠标与正方形左下角顶点的距离，将对MC进行动态的放缩。 现在对这五个加入了AS的影片实例a1~a5进行排序，分别将他们放在不同的层中， |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: 进入Flash MX组件时代之四 组件的衍生下一篇: 循环旋转花边效果
关于伪3D菜单的实现的所有评论
