3D旋轉菜單目前好像滿火的,正好自己也做了一個,分享一下吧(感謝gotoAndLearn提供視頻下載)
先來看看效果吧:click here(忘了做loading了 )
先來說說思路,首先要形成一個橢圓軌跡,這個函數可以這樣寫
複製內容到剪貼板
cos是鄰邊比斜邊,所以對應_x,同理sin對應_y,這裏的r_x和r_y分別是在函數外定義的橢圓的x半徑和y半徑,c_x和c_y是橢圓的中心代碼:
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);
}
縮放比例是採用y座標與橢圓的y半徑與橢圓的中心之和
這樣再加個onEnterFrame,就可以旋轉了,當然要先將參數定義好
如果要多個不同的mc進行旋轉的話,其實也很好辦,只要事先分配給每一個mc一個angle就行了
複製內容到剪貼板
item_num是先前定義的mc的數量代碼:
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其實只是個殼,裏面有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);
感覺鼠標移出場景和移入場景那塊,處理的不是很完美