昨天看了下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 { } } }