flash10.双面画的制作原理与方法

教学目的：通过本节教学了解和掌握flash10.3D功能及相关工具的使用、相关参数的设置，进而运用此功能制作逼真的翻转效果。 　　教学对象：本教材是针对有一定动画制作基础和对属性面板及工具箱有所了解的朋友们编制的，因此省略了一些步骤，还望谅解。     教学要点：3D旋转工具。

作前准备 准备两张照片，规格均为400*300像素，经过制图软件（ps、fw）处理后，放置在指定的文件夹中待用。     制作步骤     1.启动FLASH10 软件。首先进入“欢迎”界面。如图1所示： screen.width-333)this.width=screen.width-333" border=0> 图1 选择“新建－flash文件（ActionScript3.0）”点击进入工作区。如图2所示： screen.width-333)this.width=screen.width-333" border=0> 图2 *我用的是传统版screen.width-333)this.width=screen.width-333" border=0>，此外还有动画、基本功能版等，那就要看你的习惯和爱好了。     2.确立文档属性 点击右边属性下方的编辑，如图3所示： screen.width-333)this.width=screen.width-333" border=0> 进入属性设置界面，设置动画尺寸为600*500，帧频为24，背景颜色随意，其它默认。如图4所示： screen.width-333)this.width=screen.width-333" border=0> 图4     3.导入素材 选择“文件－导入－导入到库”，将准备好的两张图片导入的库中。其素材图，如图5、6所示： screen.width-333)this.width=screen.width-333" border=0> 图5 screen.width-333)this.width=screen.width-333" border=0> 图6     4.创建影片剪辑 （共三个）     （1）选择“插入－新建元件”，建立一个名为“元件1”的影片剪辑元件，点击确定，进入元件编辑区。点击图层1第一帧，选择“窗口－库”，点开库面板。如图7所示： screen.width-333)this.width=screen.width-333" border=0> 图7 从库中拖出图片1到舞台，在右边属性面板设置其规格为400*300，如图8所示： screen.width-333)this.width=screen.width-333" border=0> 图8 选中舞台实例，点击右边的对齐图标screen.width-333)this.width=screen.width-333" border=0>，打开对齐面板，第一次用该软件须点白“相对于舞台”按钮，全居中。     （2）同理同种方法完成元件2影片剪辑元件的操作。     （3）选择“插入－新建元件”，建立一个名为“翻转”的影片剪辑元件，点击确定，进入元件编辑区。就一个图层。选择图1图层第一帧，从库中拖出元件1影片剪辑元件到舞台，全居中。在第50帧插入帧，右键第1－49帧任何一帧，创建本区域间的补间动画。其时间轴变化，如图9所示： screen.width-333)this.width=screen.width-333" border=0> 图9 再将鼠标放到第50帧处，用3D旋转工具screen.width-333)this.width=screen.width-333" border=0>点击该实例，将鼠标放倒绿色直径处，此时光标下出现一个小y，按住鼠标沿着逆时针绕y轴拖转（不要越过中心点）,使该实例形状，如图10、11所示： screen.width-333)this.width=screen.width-333" border=0> 图10 screen.width-333)this.width=screen.width-333" border=0>

图11

其时间轴变化，如图12所示：

screen.width-333)this.width=screen.width-333" border=0>

图12

在第51帧插入空白关键帧，从库中拖出元件2影片剪辑到舞台，全居中。在第100帧插入帧，创建本区域补间动画，如图13所示：

screen.width-333)this.width=screen.width-333" border=0>

图13

再将鼠标放到第51帧处，用3D旋转工具screen.width-333)this.width=screen.width-333" border=0>点击该实例，将鼠标放倒绿色直径处，此时光标下出现一个小y，按住鼠标沿着逆时针绕y轴拖转（不要越过中心点）,使该实例形状，如图14、15所示：

screen.width-333)this.width=screen.width-333" border=0>

图14

screen.width-333)this.width=screen.width-333" border=0>

图15

再将鼠标放到第100帧处，用3D旋转工具screen.width-333)this.width=screen.width-333" border=0>点击该实例，将鼠标放倒绿色直径处，此时光标下出现一个小y，按住鼠标沿着逆时针绕y轴拖转,使该实例形状，如图16所示：

screen.width-333)this.width=screen.width-333" border=0>

图16

在第150帧插入帧，再将鼠标放到第150帧处，用3D旋转工具screen.width-333)this.width=screen.width-333" border=0>点击该实例，将鼠标放倒绿色直径处，此时光标下出现一个小y，按住鼠标沿着逆时针绕y轴拖转（不要越过中心点）,使该实例形状，如图17所示：

screen.width-333)this.width=screen.width-333" border=0>

图17

在第151帧插入空白关键帧，从库中拖出元件1影片剪辑到舞台，全居中。在第200帧插入帧，如图18所示：

screen.width-333)this.width=screen.width-333" border=0>

图18

再将鼠标放到第151帧处，用3D旋转工具screen.width-333)this.width=screen.width-333" border=0>点击该实例，将鼠标放倒绿色直径处，此时光标下出现一个小y，按住鼠标沿着逆时针绕y轴拖转（不要越过中心点）,使该实例形状，如图19、20所示：

screen.width-333)this.width=screen.width-333" border=0>

图19

screen.width-333)this.width=screen.width-333" border=0>

图20

再将鼠标放到第200帧处，用3D旋转工具screen.width-333)this.width=screen.width-333" border=0>点击该实例，将鼠标放倒绿色直径处，此时光标下出现一个小y，按住鼠标沿着逆时针绕y轴拖转,使该实例形状，如图21所示：

screen.width-333)this.width=screen.width-333" border=0>

图21

这时第200帧是实例和第1帧是实例形状位置相同。

    5.编辑制作场景 添加一个图层，共两个图层，自下而上命名为背景、翻转。

   （1）选择背景图层第一帧，导入或制作一个背景，规格为600*500，全居中。上锁。如图22所示：

screen.width-333)this.width=screen.width-333" border=0>

图22

   （2）选择翻转图层第一帧，从库中拖出翻转影片剪辑到舞台，全居中。上锁。如图23所示：

screen.width-333)this.width=screen.width-333" border=0>

图23

点击该实例，在属性面板重新设置其“透视角度”和“消失点”。其参数，如图24所示：

screen.width-333)this.width=screen.width-333" border=0>

图24

    6.该作业完成后的时间轴如图25所示：

screen.width-333)this.width=screen.width-333" border=0>

图25

    7.测试存盘

    *说明：

    1.flash10〔即flash cs4〕是2008年下半年在flash8、flash9的基础上的升级版本，该版本在原有的基础之上又增添了许多新功能，尤其是3D功能深受广大动画爱好者的欢迎。Adobe Flash CS4 下载及新功能

    2.本教程讲解详细，配图较多主要是考虑到有的朋友们对flash10软件不太熟悉，也是为了对该软件做点滴介绍，如有照顾不到之处，还望谅解。相关习作：flash10 3D功能习作 ，flash10 习作《掌中宝》

    3.按照此教程之原理与方法，在翻转影片剪辑元件中再添加若干图片切换，就是一个很不错的翻转相册。有兴趣的话，试试看。

 

最终效果显示：

http://hsb345./domName/hsb345/20096620291076227.swf

全屏下载