3D旋轉菜單

3D旋轉菜單目前好像滿火的,正好自己也做了一個,分享一下吧(感謝gotoAndLearn提供視頻下載)

先來看看效果吧:click here(忘了做loading了 )

先來說說思路,首先要形成一個橢圓軌跡,這個函數可以這樣寫

複製內容到剪貼板
代碼:
function move_me() {
    this._x = Math.cos(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.ref_mc.ref_loader,爲什麼要這麼做呢,一層套一層多麻煩,開始我也這麼認爲,所以直接用t.icon_mc來loadMovie,結果遮罩失效。

裏面還用到了easing類,這個是在點擊mc時要使用的。

最後還有一個難點就是提示效果,這裏用到了Delegate類,她的作用就是定義函數的作用域。

爲了方便修改,所以採用了xml載入的方式

全部的AS:
複製內容到剪貼板
代碼:
import mx.utils.Delegate;
import mx.transitions.Tween;
import mx.transitions.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;
xml.onLoad = 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.ref_mc.ref_loader.loadMovie(icons[i].attributes.url);
        t.txt = icons[i].attributes.intro;
        t.content = icons[i].attributes.content;
        t.onEnterFrame = move_me;
        t.icon_mc.onRollOver = over;
        t.icon_mc.onRollOut = out;
        t.icon_mc.onRelease = released;
    }
};
function released() {
    for (var i = 0; i<item_num; i++) {
        var t:MovieClip = home["item"+i];
        delete t.onEnterFrame;
        delete t.icon_mc.onRollOver;
        delete t.icon_mc.onRollOut;
        delete tooltip.onEnterFrame;
        delete t.icon_mc.onRelease;
        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._parent.content.indexOf("|")>-1) {
            var tmp_arr:Array = this._parent.content.split("|");
            this._parent.content = 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._parent.content;
        var s:Object = this;
        tw2.onMotionStopped = 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.icon_mc.onRollOver = over;
        t.icon_mc.onRollOut = out;
        t.icon_mc.onRelease = 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.swapDepths(home.getNextHighestDepth());
    tooltip.tip_txt.htmlText = this._parent.txt;
    tooltip.onEnterFrame = Delegate.create(this, moveTip);
}
function moveTip() {
    tooltip._x = this._parent._x;
    tooltip._y = this._parent._y-this._parent._height/2;
}
function out() {
    delete tooltip.onEnterFrame;
    tooltip._x = 8000;
}
xml.load("items.xml");
function move_me() {
    this._x = Math.cos(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);
}
this.onMouseMove = function() {
    speed = (this._xmouse-c_x)/6000;
};
//這個是爲了防止鼠標移走後,旋轉的速度太快
var mouseListener:Object = new Object();
mouseListener.onMouseMove = function() {
    if (home._xmouse>=Stage.width-20) {
        speed = 0.01;
        delete tooltip.onEnterFrame;
        tooltip._x = 8000;
    }
    if (home._xmouse<=20) {
        speed = -0.01;
        delete tooltip.onEnterFrame;
        tooltip._x = 8000;
    }
};
Mouse.addListener(mouseListener);

感覺鼠標移出場景和移入場景那塊,處理的不是很完美

 

http://bbs.blueidea.com/thread-2743271-1-1.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章