当前位置:主页 > 设计教程 > Flash > 正文

Flash cs4教程:CS4新特性之全新的动画理念Ⅳ

来源:|作者:|时间:2009-03-08|人气:|编辑:

本系列Flash教程由中国教程网Flash互助课堂专为Flash新手制作,更多教程和练习请点击这里,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临!

 

Flash cs4新特性之全新的动画理念(4)


Flash cs4新功能之3d效果

效果:

Flash cs4已正式发布了一阵子了,一个新的版本发布后我们特别渴望会有一些新鲜的玩眼,在升级到cs3时,我们的这种渴望的结果可能会有些失望,因为与flash8相比在动画设计上变化不是太大,但它却引入AS3,这应该也是一件欣喜的事情。对于喜欢在设计界面制作动画(非AS)的朋友来说,cs4的到来,应该会令他们兴奋地发出尖叫。他们会畅谈喷枪工具,Deco工具,全新的补间动画理念,3d功能,骨髂工具等。尽管我在flash方面较侧重于AS,但我也为flash cs4的新特性拍手叫好,于是也尝了一把鲜,试做了一个3d效果,同时我也十分愿意将我的体会与大家分享。

在以往的版本中,舞台的坐标体系是平面上的,它只有两维的坐标轴即水平方向(x)和垂直方向(y),我们只需确定x,y的坐标即可确定对象在舞台上的位置。cs4引入了三维定位系统,增加一个坐标轴z,那么在3d定位中要确定对象的位置就需要x,y,z三个坐标来确定对的位置了。

如下图:

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

在cs4中3d工具有两个一个是3d旋转,一个是3d平移,如图:

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

用3d旋转或3d平移工具绕z轴旋转或平移影片剪辑,将会产生3d效果。

还有两个新的概念我们需要了解:

透视角度:

在舞台上放一个MC,在保持它被选择的情况下,打开属性面板,在属性面板稍下面一点会有一个照像机的图标,这里就可以调整透视角度,如图:

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

简单地理解,透视角度就象照像机的镜头,通过调整透视角度值(上图中的蓝色55),可将镜头推近拉远。如上图,系统默认值为55.将鼠标放在这个数值上,会出现一个双箭头,这时左右拖动鼠标即可调整数值的大小,点击这个数值时会出现输入文本,你可以直接输入一个数值。透视角度的取值范围是1-180.

消失点:

如果我们看过一些美术基础教材的话,我们会熟悉一个叫“灭点”的概念。如图:

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

消失点确定了视觉的方向,同时消失点确定了z轴的走向,z轴始终是指向消失点的。

在MC被选中的情况下,打开属性面板,在属性面板的下部会有消失点调节设置,改变消失点的x,y坐,可将消失点设在舞台上的任何地方。如图:

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

系统默认的消失点在舞台的中心,即(275,200)处。

好了现在你可以体验一下3d工具的魅力,放一个MC在舞台上,然后用3d旋转工具点击MC,会出现如下图的图形:

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

从图中可以看出,一共有4种颜色的线条,拖动这些线条会出现不同的旋转效果:
红色线条:绕x轴旋转MC
绿色线条:绕y轴旋转MC
监色线条:绕z轴旋转MC

其实很好记的,RGB-红绿蓝-xyz

拖动橙色的圆圈则可在xyz每个方向都产生旋转。

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

3d平移,中间黑点是z轴。

好了,了解了上面的一些基础后我们来制做这个正方体。

新建一flash cs4文档,要使用3d效果必须建立AS3.0文档,同时必须发布成flash player10.

然后导入6张图片,分别制成MC,大小统一为200x200。

现在制作正方体,新建元件,取名为“正方体”。将一张图片MC拖入场景中,打开属性面板,设置其3d定位:x:0,y:0,z:-100

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

新插入一层,再从库中拖入一张图片MC,3d定位为:x:0,y:0,z:100

现在的效果是:

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

这样就把正方体的正面和背面的图放好了,下面放侧面的图。

新插入一层,从库中再拖入一个图片MC。这张图将放到左边侧面,那么容易理解它的x坐标应该是-100.所以3d定位是:x:-100,y:0,z:0. 然后用3d旋转工具将图片绕y轴旋转90度,这好理解哈,图片放上去时是平面摆放的,绕y轴转90度它自然就侧到侧面了,且正好与上两张图片对接。

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

第4层图片的3d定位:100,0,0,并将图片绕y轴逆时针转90度,右侧图片就放好了。

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

第5层,放底面的图片,因此y坐标为100,3d定位:0,100,0,绕x轴旋转90度:

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

第6 层放顶面的图片,3d定位:0,-100,0,绕x轴逆时针转90度:

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

这样正方体就做好了,为了看起来方便,我将一些图片的透明度降低了,这个不一定照做,你可根据自已的需要来做。
下面新建一MC,输入“中国教程网”几个字。

接下来回到主场景,将正方体元件拖到场景中,水平居中,稍下方些,为文字留下点地盘。在第40帧插入帧,在时间轴上点右键>创建补间动画,保第40 帧被选中的情况下,使用3d旋转工具将立方体绕y轴(绿色线)旋转一定角度,这时第40帧会自动被设为关键帧。打开“动画编辑器”,将“旋转y“的数字改为360,这样正方体将绕y轴旋转一周。

Flash cs4教程:CS4新特性之全新的动画理念之3D效果

回到时间轴面板,在第41帧插入空白关键帧,将第40帧复制到第41帧,这时你会发现一共被复制了40帧,即第1到40帧都被复制到后面了,这是因为在 cs4中补间动画被看作为1帧,关于新的补间动画的的介绍将在以后专门发文介绍。这里不管它,我定位到第80帧,在前面我们已经绕y轴转了,现在我们绕x 轴(红线)旋转一定角度,打开动画编辑器,将“旋转x”的值改为360,这样在第41到80帧中正方体将绕x轴旋转一周。在第81帧插入空白关键帧,将第 80帧复制到81帧,在第120帧,用3d旋转工具将橙色园圈拖动一定角度,让正方体在xyz三个方向同时旋转,在第121帧复制第120帧,在第160 帧,将正方体向反方向旋转一定角度。

新插入一层,将文字元件拖入,用3d旋转工具,与第一层同样的方法对文字进行你想要的旋转。旋转时你可以直接用3d工具旋转,也可以用动画编辑器作精确调整。

OK,试试吧,祝你成功!

    最近更新
    简而精致的MILKO牛奶包装欣赏

    简而精致的MILKO牛奶包装欣赏

    分 类: 包装设计
    日 期: 2015-07-14
    人 气: 93

    Irina Vinnik精美的童话书籍设计欣赏

    Irina Vinnik精美的童话书籍设计欣赏

    分 类: 封面设计
    日 期: 2015-07-14
    人 气: 113

    LOnde戏剧艺术中心2015-2016宣传册设计

    L'Onde戏剧艺术中心2015-2016宣传册设计

    分 类: 画册设计
    日 期: 2015-07-14
    人 气: 94

    耐克篮球探索主题立体字设计

    耐克篮球探索主题立体字设计

    分 类: 字体设计
    日 期: 2015-07-14
    人 气: 97

    耐克Kobe release系列视觉设计

    耐克Kobe release系列视觉设计

    分 类: 平面设计作品
    日 期: 2015-07-13
    人 气: 266