×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 10607|回复: 24

[AS] 3D菜单[本文已收录教程库]

  [复制链接]
发表于 2009-5-18 08:37:13 | 显示全部楼层 |阅读模式
本帖最后由 xyl7422 于 2009-9-2 13:50 编辑

3D旋转的升级—3D菜单

效果演示:

〖本教程是3D旋转的升级版,添加交互性。前一部分的制作请参看3D旋转教程,版本AS3.0〗

使图标具有交互性:

当鼠标单击某个图标时使之旋转,并让图标显示在屏幕的最前面。

//定义旋转的最终角度
var endAngle:Number = 90;
//保存已经旋转的角度
var tempAngle:Number = 0;
//保存旋转的状态
var isRotating:Boolean = true;
//注册图标的单击事件
mc.addEventListener(MouseEvent.MOUSE_DOWN,startRotation);
//定义侦听器函数
function startRotation(e:MouseEvent):void
{
   //得到图标
     var currentIcon::MovieClip = e.target;
   //得到图标的角度
     enaAngle = atan2D(currentIcon.y,cosD(currentIcon.angle) * disy);
   //计算旋转的度数
     endAngle = (endAngle > -180&&endAngle < -90) ? - 270 - endAngle:90 - endAngle;
    //单击后旋转,需要注册enterFrame事件侦听器
     menu.addEventListener(Event.ENTER_FRAME,moveMenu);
}

每次旋转前要重新初始化旋转角度
function initAngle(b:Boolean)
{
     //如果处于旋转状态保存角度
     if (isRotating)
     //保存图标角度
     tempAngle += speed;
     //旋转速度重新设置为0
     speed = 0;
     //设置旋转状态
     isRotating = b;
}

修改函数moveMenu():

function moveMenu(e:Event):void
{
    var iconCount:int = menu,numChildren;
    var depthArrat:Array = new Array();
    var angle:Number = 360 / iconCount;
    for (var z:int; z < iconCount; z++)
    {
          var mc:MovieClip = menu.getChildAt(z);  
          mc.gotoAndStop(z + 1);
          //把图标角度保存在mc的动态属性中
          mc.angle = tempAngle + speed + angle * z;
          mc.x = cosD(mc.angle) * disy;
          mc.y = sinD(mc.angle) * disy;
          depthArray[z] = mc;
          setProp(mc,  "alpha");
          setProp(mc,  "scaleX", .2, .7);
          setProp(mc,  "scaleY", .2, .7);
     }
     arrange(depthArray);
     //利用缓冲公式把图标旋转到endAngle角度
     speed += (endAngle - speed) * .2;
     if (Math.abs(speed - endAngle) < 1)
     {
     //移除事件侦听器
     menu.removeEventListener(Event.ENTER_FRAME,moveMenu);
     initAngle(false);
  }
}
完整代码:
  1. include "Math2.as"
  2. stage.frameRate = 30;

  3. var disx:Number = 200;
  4. var disy:Number = 10;
  5. var speed:Number = 0;

  6. var endAngle:Number = 90;
  7. var tempAngle:Number = 0;
  8. var isRotating:Boolean = true;

  9. var menu:Sprite = new Sprite();
  10. menu.x = 300;
  11. menu.y = 200;
  12. menu.addEventListener(Event.ENTER_FRAME,moveMenu);
  13. this.addChild(menu);

  14. initMenu(5);
  15. function initMenu(n:int) {
  16.         for (var i:int; i<n; i++) {
  17.                 var mc:MovieClip = new IconMenu();
  18.                 mc.scaleX = mc.scaleY = .5;
  19.                 mc.addEventListener(MouseEvent.MOUSE_DOWN,startRotation);
  20.                 menu.addChild(mc);
  21.         }
  22. }
  23. function initAngle(b:Boolean) {
  24.         if (isRotating) {
  25.                 tempAngle += speed;
  26.         }
  27.         speed = 0;
  28.         isRotating = b;
  29. }
  30. function startRotation(e:MouseEvent):void {
  31.         var currentIcon:MovieClip = e.target;
  32.         endAngle = atan2D(currentIcon.y,cosD(currentIcon.angle)*disy);
  33.         endAngle = (endAngle> -180&&endAngle < -90)? -270 - endAngle:90 - endAngle;
  34.         initAngle(true);
  35.         menu.addEventListener(Event.ENTER_FRAME,moveMenu);
  36. }
  37. function moveMenu(e:Event):void {
  38.         var iconCount:int = menu.numChildren;
  39.         var depthArray:Array = new Array();
  40.         var angle:Number = 360 / iconCount;
  41.         for (var z:int; z<iconCount; z++) {
  42.                 var mc:MovieClip = menu.getChildAt(z);
  43.                 mc.gotoAndStop(z + 1);
  44.                 mc.angle = tempAngle + speed+angle * z;
  45.                 mc.x = cosD(mc.angle) * disx;
  46.                 mc.y = sinD(mc.angle) * disy;
  47.                 depthArray[z] = mc;
  48.                 setProp(mc,"alpha");
  49.                 setProp(mc,"scaleX",.2,.7);
  50.                 setProp(mc,"scaleY",.2,.7);
  51.         }
  52.         arrange(depthArray);
  53.         speed += (endAngle-speed) * .2;
  54.         if (Math.abs(speed - endAngle) < 1) {
  55.                 menu.removeEventListener(Event.ENTER_FRAME,moveMenu);
  56.                 initAngle(false);
  57.         }
  58. }
  59. function arrange(depthArray:Array):void {
  60.         depthArray.sortOn("y", Array.NUMERIC);
  61.         var i:int = depthArray.length;
  62.         while (i--) {
  63.                 menu.setChildIndex(depthArray[i], i);
  64.         }
  65. }

  66. function setProp(mc:MovieClip,prop:String,n1:Number = .5, n2:Number = 1):void {
  67.         mc[prop] = ((mc.y + 2 * disy) / disy - 1) / 2 * (n2 - n1) + n1;
  68. }
复制代码
完成测试。
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=246328
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 3金币 +15 威望 +1 热心度 +4 收起 理由
祁连山 + 1 支持教程哈,辛苦啦.
xyl7422 + 7 + 2 感谢发布原创教程,辛苦了:)
清风掠影 + 8 + 2 辛苦了,谢谢分享~^0^

查看全部评分

发表于 2009-10-23 09:47:33 | 显示全部楼层
酷素材

谢谢!改好了,我在其他论坛看到的就是这个教程,用他的标题在教程网没有找到这帖子。我抠图太马虎,当初没有好好看,边缘不齐。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
zctmh0336 + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-10-24 17:53:35 | 显示全部楼层
本帖最后由 zctmh0336 于 2010-1-7 10:09 编辑

学过as.20   ,这个3.0有点看不懂   是面向对象的语言吧

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
sanbos + 3 做得不错

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-10-24 17:56:42 | 显示全部楼层
板凳的作业:
回复 支持 反对

使用道具 举报

发表于 2010-1-7 09:24:41 | 显示全部楼层
酷素材
var mc:MovieClip = menu.getChildAt(z);


为什么我会在这句上面出错?
回复 支持 反对

使用道具 举报

发表于 2010-1-7 09:31:17 | 显示全部楼层
酷素材
jc:victory问题解决了,是LZ的另一个帖子里看到的
http://bbs.jcwcn.com/viewthread. ... p;extra=&page=1

=================
用强制转换还比较可以接受,那个去掉严谨模式会不会对动画有影响的?心里毛毛的
回复 支持 反对

使用道具 举报

发表于 2010-5-26 13:54:41 | 显示全部楼层
老大,怎么把那做成导航??
回复 支持 反对

使用道具 举报

发表于 2010-6-12 11:34:43 | 显示全部楼层
cao4811 老师用得是算法吧。要是想改下位置那还真的很难呀。比如下面这些位置的,能出个教程嘛?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2010-6-12 12:18:03 | 显示全部楼层
学习了,效果看起来很好。
回复 支持 反对

使用道具 举报

发表于 2010-7-1 00:41:14 | 显示全部楼层
老师...如果我不按的话,它都会自动旋转,该怎么做啊?
回复 支持 反对

使用道具 举报

发表于 2010-7-2 09:31:44 | 显示全部楼层
本帖最后由 hbwh风云岁月 于 2010-7-2 09:39 编辑

1# cao4811


我来交作业
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-7-2 10:36:48 | 显示全部楼层
10# 359502479

看3D旋转教程
回复 支持 反对

使用道具 举报

发表于 2010-7-2 13:32:32 | 显示全部楼层
汗照着教程做怎么都不对。。虽然没报错。。。那个旋转按钮出现只要点击下就闪没了。。
一定要图片元件格式么?。。一模一样都没用只好照着改了。。做了3个。。
想知道大家自己是怎么做出来的~HELP!jc:yun

以下分别是第一次到第三次做的。。。请指教。。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2010-7-12 16:54:16 | 显示全部楼层
想要8楼的效果。呵呵,有的能否加我Q.22612256
回复 支持 反对

使用道具 举报

发表于 2010-7-12 16:54:57 | 显示全部楼层
这个教程很好很强大,顶楼主
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则

2345