跳到主要內容

簡易版 3D Banner 效果

大家好,我是奶綠茶
最近學生問起了一個 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

留言