昨天看了下window phone下有个播放器,有一个翻转效果。于是在网上找了下,用 TweenLite就可以简单的实现了。不过,有一点需要注意,翻转的中心点在哪里呢。如何去设置呢。这个翻转,中心点是要设置在中间位置才好看。于是,通过了一层转换就可以实现了下边贴出代码和demo。

请点击图片,以实现翻转:


package com.vini123
{
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import com.greensock.TweenLite;
    import com.greensock.easing.Quad;
    import flash.media.Sound;
    import flash.net.URLRequest;
    import flash.media.SoundChannel;
    import flash.utils.setTimeout;

    public class Main extends Sprite
    {
        private var img1:Img1;
        private var img2:Img2;
        private var sp1:Sprite;
        private var sp2:Sprite;
        
        public function Main():void
        {
            Init();
        }
        
        private function Init():void
        {
            sp1 = new Sprite();
            addChild(sp1);
            sp2 =  new Sprite();
            addChild(sp2);
            
            img1 = new Img1();
            img2 = new Img2();
            img1.y = - img1.height * 0.5;
            img2.y = - img2.height * 0.5;
            sp1.addChild(img1);
            sp2.addChild(img2);
            sp1.y = img1.height * 0.5;
            sp2.y = img2.height * 0.5;
            stage.addEventListener(MouseEvent.CLICK,clickHandler);
            sp2.alpha = 0;
            
            var mySound:Sound = new Sound();
            mySound.load(new URLRequest("http://vini123.sinaapp.com/player/sounds/shouzhangxin.mp3"));
            var myChannel:SoundChannel = mySound.play();
        }
        
        private function doFlip():void
        {
            sp2.alpha = 0;
            sp2.rotationX = -90;
            TweenLite.to(sp1,0.8,{rotationX:90,ease:Quad.easeIn,overwrite:0});
            TweenLite.to(sp2,0.8,{delay:0.8,alpha:1,rotationX:0,ease:Quad.easeOut,overwrite:0,onComplete:flipComplete});
        }
        
        private function flipComplete()
        {
            setTimeout(function ():void
                       {  
                        sp1.alpha = 0;
                        sp1.rotationX = -90;
                        TweenLite.to(sp2,0.8,{rotationX:90,ease:Quad.easeIn,overwrite:0});
                        TweenLite.to(sp1,0.8,{delay:0.8,alpha:1,rotationX:1,ease:Quad.easeOut,overwrite:0,onComplete:abc});
                      },3000);
        }
        
        private function clickHandler(e:MouseEvent):void
        {
            doFlip();
        }
        
        private function abc():void
        {
            
        }
    }
}