• 思缘论坛首页
  • 思缘图库
  • PS教程
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,PS下载
  • VIP素材区预览
  • VIP素材区下载
  • 缘分币充值
发新话题
打印

[AS教程] FLASH AS3教程:3D翻转效果(一)

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的方式导致的。在教程的第二部分会介绍如何修正这个问题。

附件

Flash-AS3-3DFlip-effect.rar (661.87 KB)
缘分币获取 缘分币充值

2011-11-4 16:17, 下载次数: 985

3DFlip.swf (41.16 KB)
缘分币获取 缘分币充值

2011-11-4 16:17, 下载次数: 662


人生一场虚空大梦  韶华白首  不过转瞬  唯有天道恒在  往复循环  不曾更改

TOP

看起来不错哇,感谢共享

TOP

不错,有个疑问,为什么翻转之后会摆动?

TOP

好思路

TOP

发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

工信部备案:沪ICP备09005587号 苏州市公安局备案编号:32058302001042

Powered by Discuz Copyright © 2005-2015 www.MissYuan.com All rights reserved.