大家好,我是奶綠茶
最近學生問起了一個 3D 的 Banner 效果要如何製作
寫了一個簡單的 Demo, 程式碼也很短,
只用到 TweenMax , 和 FlashPlayer10 的 3D 即可做到
SourceCodeDownload
最近學生問起了一個 3D 的 Banner 效果要如何製作
寫了一個簡單的 Demo, 程式碼也很短,
只用到 TweenMax , 和 FlashPlayer10 的 3D 即可做到
/*
milkmidi.blogspot.com
*/
import com.greensock.TweenMax;
var container:Sprite = new Sprite();
container.x = stage.stageWidth >> 1;
addChild( container );
addEventListener(Event.ENTER_FRAME , enterFrameHandler);
var back:MovieClip = new Back_mc;
back.x = stage.stageWidth >>1;
back.y = 40;
back.visible=false;
addChild( back );
back.addEventListener(MouseEvent.CLICK , function(){
showBack(false);
});
(function () {
for(var i:int = 0 ; i<6 ; i++){
var _mc:MovieClip = new Item_mc;
_mc.width = 100;
_mc.scaleY = _mc.scaleX;
_mc.x = 110*i - (110*3);
_mc.y = 40;
_mc.addEventListener(MouseEvent.ROLL_OVER , itemOverOutHandler);
_mc.addEventListener(MouseEvent.ROLL_OUT , itemOverOutHandler);
_mc.addEventListener(MouseEvent.CLICK , itemOverOutHandler);
_mc.gotoAndStop(i+1);
container.addChild( _mc );
}
function itemOverOutHandler (e:Event) :void{
switch(e.type){
case MouseEvent.ROLL_OVER:
TweenMax.to( e.currentTarget , .5 , {z:-50});
container.addChild( e.currentTarget as Sprite);
break;
case MouseEvent.ROLL_OUT:
TweenMax.to( e.currentTarget , .5 , {z:0});
break;
case MouseEvent.CLICK:
showBack(true);
break;
}
}
})();
function showBack (pShow:Boolean):void {
var _targetV:int = pShow ? 180 : 0;
var _update:Function;
var _onComplete:Function;
if(pShow){
removeEventListener(Event.ENTER_FRAME , enterFrameHandler);
_update = function () {
if( container.rotationY > 90 ){
container.visible = false;
back.visible = true;
}
}
}else{
_update = function () {
if( container.rotationY < 90 ){
container.visible = true;
back.visible = false;
}
}
_onComplete = function () {
addEventListener(Event.ENTER_FRAME , enterFrameHandler);
}
}
TweenMax.to( container , .7 , {
rotationY:_targetV,
onUpdate:_update,
onComplete:_onComplete
});
TweenMax.to( back , .7 , { rotationY:_targetV });
}
function enterFrameHandler (e:Event):void {
var _value:Number = stage.stageWidth*.5 - mouseX;
_value *= 0.05;
container.rotationY += (_value - container.rotationY)/10;
}
SourceCodeDownload
留言