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半径与椭圆的中心之和
![](http://files.myopera.com/lzyy/files/3d_intro.gif)
这样再加个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);
感觉鼠标移出场景和移入场景那块,处理的不是很完美