3D旋转菜单

3D旋转菜单

3D旋转菜单目前好像满火的，正好自己也做了一个，分享一下吧（感谢gotoAndLearn提供视频下载）

先来看看效果吧：click here（忘了做loading了 ）

先来说说思路，首先要形成一个椭圆轨迹，这个函数可以这样写

复制内容到剪贴板

代码:

function move_me() {
    this._x = s(this.angle)*r_x+c_x;
    this._y = Math.sin(this.angle)*r_y+c_y;
    this.angle += speed;
    ratio = this._y/(r_y+c_y);
    this._xscale = this._yscale=ratio*100;
    this.swapDepths(ratio*100+100);
} cos是邻边比斜边，所以对应_x，同理sin对应_y，这里的r_x和r_y分别是在函数外定义的椭圆的x半径和y半径，c_x和c_y是椭圆的中心
缩放比例是采用y坐标与椭圆的y半径与椭圆的中心之和

这样再加个onEnterFrame，就可以旋转了，当然要先将参数定义好

如果要多个不同的mc进行旋转的话，其实也很好办，只要事先分配给每一个mc一个angle就行了 复制内容到剪贴板

代码:

for (var i = 0; i<item_num; i++) {
        var t:MovieClip = home.attachMovie("item", "item"+i, i+1);
        t.angle = (i/item_num)*(Math.PI*2);
} item_num是先前定义的mc的数量

倒影那块，倒是卡了我一段时间，原来要实现渐变遮罩，要将遮罩与遮罩都启用位图缓存

还要说一下，上面这个item其实只是个壳，里面有icon_mc，和ref_mc，而这两个也还是壳，真正要执行loadMovie的其实是t.icon_mc.icon_loader和t.f_loader，为什么要这么做呢，一层套一层多麻烦，开始我也这么认为，所以直接用t.icon_mc来loadMovie，结果遮罩失效。

里面还用到了easing类，这个是在点击mc时要使用的。

最后还有一个难点就是提示效果，这里用到了Delegate类，她的作用就是定义函数的作用域。

为了方便修改，所以采用了xml载入的方式

全部的AS： 复制内容到剪贴板

代码:

import mx.utils.Delegate;
ansitions.Tween;
ansitions.easing.*;
var item_num:Number;
var r_x:Number = 350;
var r_y:Number = 125;
var c_x:Number = Stage.width/2;
var c_y:Number = Stage.height/2;
//这个是定义旋转的速度的
var speed:Number = 0.01;
//定义home，相当于_root
var home:MovieClip = this;
//这个将来要显示内容的
theText._visible = false;
//将tooltip从库中载入
var tooltip:MovieClip = this.attachMovie("toolTip", "tooltip", 1000);
var xml:XML = new XML();
xml.ignoreWhite = true;
Load = function() {
    icons = xml.firstChild.childNodes;
    item_num = icons.length;
    for (var i = 0; i<item_num; i++) {
        var t:MovieClip = home.attachMovie("item", "item"+i, i+1);
        t.angle = (i/item_num)*(Math.PI*2);
        t.icon_mc.icon_loader.loadMovie(icons[i].attributes.url);
        t.f_loader.loadMovie(icons[i].attributes.url);
        t.txt = icons[i].attributes.intro;
        t.content = icons[i].t;
        t.onEnterFrame = move_me;
        t.RollOver = over;
        t.RollOut = out;
        t.Release = released;
    }
};
function released() {
    for (var i = 0; i<item_num; i++) {
        var t:MovieClip = home["item"+i];
        EnterFrame;
        delete t.RollOver;
        delete t.RollOut;
        EnterFrame;
        delete t.Release;
        speed = 0;
        tooltip._x = 8000;
        if (t != this._parent) {
            var tw:Tween = new Tween(home["item"+i], "_alpha", Strong.easeOut, 100, 0, 1, true);
        }
        if (this._t.indexOf("|")>-1) {
            var tmp_arr:Array = this._t.split("|");
            this._t = tmp_arr.join("<br>");
        }
        this.x = this._parent._x;
        this.y = this._parent._y;
        this.scale = this._xscale;
        var tw2:Tween = new Tween(this._parent, "_x", Regular.easeIn, this._parent._x, 200, .5, true);
        var tw3:Tween = new Tween(this._parent, "_y", Regular.easeIn, this._parent._y, 250, .5, true);
        var tw4:Tween = new Tween(this._parent, "_xscale", Regular.easeIn, this._parent._xscale, 100, .5, true);
        var tw5:Tween = new Tween(this._parent, "_yscale", Regular.easeIn, this._parent._yscale, 100, .5, true);
        theText._visible = true;
        theText.htmlText = this._t;
        var s:Object = this;
        MotionStopped = function() {
            s.onRelease = unreleased;
        };
    }
}
function unreleased() {
    theText._visible = false;
    var tw2:Tween = new Tween(this._parent, "_x", Regular.easeIn, 200, this.x, .5, true);
    var tw3:Tween = new Tween(this._parent, "_y", Regular.easeIn, 250, this.y, .5, true);
    var tw4:Tween = new Tween(this._parent, "_xscale", Regular.easeIn, 100, this.scale, .5, true);
    var tw5:Tween = new Tween(this._parent, "_yscale", Regular.easeIn, 100, this.scale, .5, true);
    speed = 0.01;
    for (var i = 0; i<item_num; i++) {
        var t:MovieClip = home["item"+i];
        t.onEnterFrame = move_me;
        t.RollOver = over;
        t.RollOut = out;
        t.Release = released;
        if (home["item"+i] != this._parent) {
            var tw:Tween = new Tween(t, "_alpha", Strong.easeIn, 0, 100, 1, true);
        }
    }
}
function over() {
    tooltip._x = this._parent._x;
    tooltip._y = this._parent._y-this._parent._height/2;
    tooltip.NextHighestDepth());
    tooltip.tip_txt.htmlText = this._;
    EnterFrame = ate(this, moveTip);
}
function moveTip() {
    tooltip._x = this._parent._x;
    tooltip._y = this._parent._y-this._parent._height/2;
}
function out() {
    EnterFrame;
    tooltip._x = 8000;
}
xml.load(&#l");
function move_me() {
    this._x = s(this.angle)*r_x+c_x;
    this._y = Math.sin(this.angle)*r_y+c_y;
    this.angle += speed;
    ratio = this._y/(r_y+c_y);
    this._xscale = this._yscale=ratio*100;
    this.swapDepths(ratio*100+100);
}
MouseMove = function() {
    speed = (this._xmouse-c_x)/6000;
};
//这个是为了防止鼠标移走后，旋转的速度太快
var mouseListener:Object = new Object();
MouseMove = function() {
    if (home._xmouse>=Stage.width-20) {
        speed = 0.01;
        EnterFrame;
        tooltip._x = 8000;
    }
    if (home._xmouse<=20) {
        speed = -0.01;
        EnterFrame;
        tooltip._x = 8000;
    }
};
Mouse.addListener(mouseListener);

感觉鼠标移出场景和移入场景那块，处理的不是很完美

 

.html