FLASH AS3教程：3D翻转效果（一）

这是本系列教程第一部分，我们将制作一个简单的绕x轴的3D翻转效果。下一部分将制作一个简单易用的3D引擎，可以用来绕各个轴旋转对象，也可以方便地通过XML文件输入旋转数值。

转自：FlashPerfection。翻译、整理：肖邦。转载请注明：思缘论坛。

先看看效果图



第一步：准备材料。

打开Flash,创建一个新的AS3文档。“文件”-“导入”-“导入到舞台”，导入2张图片。为了得到一种平滑的翻转效果，2张图片应该大小一致。将2张图片转化为影片剪辑，并将舞台上的2个实例分别命名为sdNumber1，adNumber2。2个图片在舞台上的位置无所谓，因为在后面的步骤中，我们将用actionscript来放置他们。

第二部：环境设置。

“文件”-“发布设置”，设置播放器为Flash Player 10 以上，保存文件，下载TweenLite类并将com文件夹放在与fla文档统一目录下。
TweenLite官网下载链接：http://www.greensock.com/tweenlite/

第三步：放置图片。

现在来实现3D翻转效果。首先导入TweenLite类。

import com.greensock.*; import com.greensock.easing.*;

导入图片时，默认情况下，旋转轴被放置在0（包括x轴和y轴），导致图片绕左上角旋转而不是绕中心旋转。为了达到我们想要的效果，是图片绕其中心旋转，创建一个sprite对象，将2个图片实例添加到sprite中。代码如下：

var imageC:Sprite = new Sprite();//containers for rotation X and Y var imageD:Sprite = new Sprite();//containers for rotation X and Y addChild(imageC); addChild(imageD); imageC.addChild(adNumber1); imageD.addChild(adNumber2);

以上代码定义了2个sprite对象，添加到舞台上，然后添加2个图片实例。

接着分别沿x轴和y轴向左和向上移动2个图片的坐标，使旋转轴心移动到图片的中心:

adNumber1.x =  - adNumber1.width/2; adNumber1.y =  - adNumber1.height/2; adNumber2.x =  - adNumber2.width/2; adNumber2.y =  - adNumber2.height/2;

设置初始旋转值为0:

imageC.rotationX = 0; imageD.rotationX = 0;

通过调整sprite的坐标设置两个图片在舞台上的位置：

imageC.x = stage.stageWidth - imageC.width - 15; imageC.y = stage.stageHeight - imageC.height / 2 - 15; imageD.x = stage.stageWidth - imageC.width - 15; imageD.y = stage.stageHeight - imageC.height / 2 - 15;

在保证两个sprite在同一位置的前提下，他们的坐标可以是任意数值，本教程把图片放到了舞台的中心位置。

第四步：实现3D效果。

终于来到了有趣的一步：构造2个实现3D效果的函数。

首先定义2个控制动画时间和静止时间的变量：

var animationTime:Number = 2; var imageOnStage:Number = 3;

接着设置第二张图片的初始状态，必须设置它的初始旋转角度为90或者-90度，不透明度为0。第一个函数旋转第一章图片到90度看不见，然后设置它的不透明度为0。第一步旋转完成后第二个接着开始，旋转第二个图片到0度，第一个函数执行完成。第二个函数设置第一个图片初始旋转角度为-90度，不透明度为0，接着执行与第一个函数相同的功能。第2个函数执行完成后，继续调用第一个函数，往复循环。两个函数互相调用，3D翻转一直进行下去。

function flip3D() {         imageD.rotationX = -90;         imageD.alpha = 0;         TweenLite.to(imageC, animationTime, {alpha:1,delay:imageOnStage,rotationX:90,ease:Quint.easeIn, onComplete:flip3DSecond, overwrite:0});         TweenLite.to(imageD,animationTime, {alpha:1,delay:imageOnStage + animationTime, rotationX:0, ease:Elastic.easeOut, overwrite:0}); } function flip3DSecond() {         imageC.alpha = 0;         imageC.rotationX = -90;         TweenLite.to(imageD, animationTime, {alpha:1,delay:imageOnStage, rotationX:90,ease:Quint.easeIn, onComplete:flip3D, overwrite:0});         TweenLite.to(imageC,animationTime, {alpha:1,delay:imageOnStage + animationTime, rotationX:0,delay:0, ease:Elastic.easeOut,overwrite:0}); } flip3D();

结论：

3D翻转效果已经实现，但是我们要做的工作还有很多。如果仔细观察，会看到图片会产生轻微的模糊。这是由于Flash渲染3D的方式导致的。在教程的第二部分会介绍如何修正这个问题。
本篇文章来源:站才网 (http://www.zhancai.com),本文详细出处请访问以上网站.