您好!欢迎您光临flash10.3D掌中宝的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>fs10教程>>>flash10.3D掌中宝的制作原理与方法
flash10.3D掌中宝的制作原理与方法
发表日期:2012/9/18 14:11:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 4173

flash10.3D掌中宝的制作原理与方法 

 

    教学目的:通过本节教学了解和掌握flash10.3D功能及相关工具使用、相关参数的设置,进而运用次功能制作立方体的旋转效果。

  教学对象:本教材是针对有一定动画制作基础和对属性面板及工具箱有所了解的朋友们编制的,因此省略了一些步骤,还望谅解。

    教学要点:3D旋转工具、元件交换。

 

 

    作前准备 准备6张照片,规格均为150*150像素,一张双手分开托起的图片规格在350*350左右。经过制图软件(ps、fw)处理后,放置在指定的文件夹中待用。

    制作步骤

    1.启动FLASH10 软件。首先进入“欢迎”界面。如图1-1所示:

图1-1

选择“新建-flash文件(ActionScript3.0)”点击进入工作区。如图1-2所示:

图1-2

*我用的是传统版,此外还有动画、基本功能版等,那就要看你的习惯和爱好了。

    2.确立文档属性 设置动画尺寸为550*400,帧频为24,背景颜色黑色,其它默认。如图2所示:


图2

    3.导入图片(照片) 选择“文件-导入-导入到库”,导入已准备好的六张照片和手掌图片导入库中待用。

    4.创建影片剪辑 (共七个)

    (1)选择“插入-新建元件”,建立一个名为“元件1”的影片剪辑元件,点击确定,进入元件编辑区。点击图层1第一帧,选择“窗口-库”,点开库面板。如图3所示:

图3

从库中拖出照片1到舞台,在右边属性面板设置其规格为150*150,如图4所示:

图4

选中舞台实例,点击右边的对齐图标,如图5所示:

图5

打开对齐面板,第一次用该软件须点白“相对于舞台”按钮,全居中。

    (2)同理同种方法完成元件2-元件6影片剪辑元件的操作。

    (3)选择“插入-新建元件”,建立一个名为“立方体”的影片剪辑元件,点击确定,进入元件编辑区。添加五个图层,共六个图层,自下而上命名为图1-图6。

    a.选择图1图层第一帧,从库中拖出元件1影片剪辑元件到舞台,在属性面板的“3D定位和查看”中设置x为0、y为0、z为-75;如图6所示:

图6

在点开“色彩效果”,设置Alpha为50%。上锁。如图7所示:

图7

此时舞台中实例效果,如图8所示:

图8

    b.右键复制图1图层第一帧,粘贴到图2图层第一帧,再右键“该帧实例-交换元件”,在交换元件界面选择“元件2”。点击确定。如图9所示:


图9

这时,图2图层的实例就换成了元件2了。点击元件2实例,在属性面板的“3D定位和查看”中设置x为0、y为0、z为75;如图10所示:

图10

在点开“色彩效果”,设置Alpha为50%。上锁。此时舞台中实例效果,如图11所示:

图11

    c.选择图3图层第一帧,从库中拖出元件3影片剪辑元件到舞台,在属性面板的“3D定位和查看”中设置x为-75、y为0、z为0;如图12所示:

图12

在点开“色彩效果”,设置Alpha为50%。再用3D旋转工具点击该实例,在将鼠标放到绿色直径上按下(鼠标处显示y),将该实例绕y轴旋转90°,将元件3调整到左右两条边和元件1、元件2的左边衔接对齐。上锁。如图13所示:


图13

调整好的效果,如图14所示:

图14

    d.右键复制图3图层第一帧,粘贴到图4图层第一帧,右键“该帧实例-交换元件”,在交换元件界面选择“元件4”,点击确定。

这时,图4图层的实例就换成了元件4了。点击元件4实例,在属性面板的“3D定位和查看”中设置x为75、y为0、z为0;如图15所示:

图15

此时,元件4实例就自动地和元件1、元件2的右边吻合衔接。在点开“色彩效果”,设置Alpha为50%。上锁。其效果,如图16所示:

图16

    e.选择图5图层第一帧,从库中拖出元件5影片剪辑元件到舞台,在属性面板的“3D定位和查看”中设置x为0、y为-75、z为0;如图17所示:


图17

在点开“色彩效果”,设置Alpha为50%。

再用3D旋转工具点击该实例,在将鼠标放到红色直径上按下(鼠标处显示x),将该实例绕x轴旋转90°,将元件3调整到左右前后四条边和元件1、元件2、元件3、元件4上边衔接对齐。上锁。如图18所示:

图18

    f.右键复制图5图层第一帧,粘贴到图6图层第一帧,右键“该帧实例-交换元件”,在交换元件界面选择“元件6”,点击确定。

这时,图6图层的实例就换成了元件6了。点击元件6实例,在属性面板的“3D定位和查看”中设置x为0、y为75、z为0;如图19所示:

图19

此时,元件6实例就自动地和元件1、元件2、元件3、元件4的下边相吻合衔接。在点开“色彩效果”,设置Alpha为50%。上锁。其效果,如图20所示:


图20

    g.本环节完成后的时间轴,如图21所示:

图21

    5.编辑制作场景 添加两个图层,共三个图层,自下而上命名为背景、手掌、立方体。

    (1)选择背景图层第一帧,导入或制作一个背景,规格为550*400,全居中。在第50帧插入关键帧,上锁。如图22所示:


图22

    (2)选择手掌图层第一帧,从库中拖出手掌位图到舞台,经过抠图后,将其转换为图形元件。规格约为320*280,将其放置在舞台的下半部,水平中齐。在第50帧插入帧。上锁。如图23所示:


图23

    (3)选择立方体图层第一帧,从库中拖出立方体影片剪辑元件到舞台到舞台,放置在手掌上方的适当位置。如图24所示:

图24

在第50帧插入,右键第1-49帧任何一帧,创建本区域间的补间动画。其时间轴变化,如图25所示:

图25

再将鼠标放到第50帧处,然后用3D旋转工具点击该实例,在将鼠标放到外圈的黄色圆上,按下鼠标拖动,使其围绕x、y轴旋转一定角度。经过测试,旋转流畅、满意为止。如图26所示:


图26

其时间轴变化,如图27所示:

图27

如果对立方体旋转还不满意,你还可以对第一帧的实例用上述方法调试,改变立方体的形状。如图28所示:

图28

为使其效果更加,你还可以在属性面板重新设置其“透视角度”和“消失点”。如图29所示:

图29


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

图30
 

    7.测试存盘

 

    *说明:

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

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

 

最终效果显示:



http://hsb345.16789.net/domName/hsb345/2009102116103026184.swf

 

全屏下载

 

祝你成功!

 

进入更多教程

 

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



南月
(2009/10/21 21:34:00) [58.22.85.]

谢谢老师提供的好教材,有空时我学学去。


hsb345
(2009/7/6 15:45:00)

欢迎smiecz朋友光临!保存还是可以的,只是保存的swf文件打开不是3D效果,上传后就可以看到你制作的效果了。常联系。


hsb345
(2009/7/6 15:41:00)

smiecz朋友你好!回复:我这也存在此问题,我也没有找到解决的办法。不过在软件中测试如果满意,导出后上传就好了。你试试看!


smiecz
(2009/7/6 13:42:00) [118.132.30.]

我用老师提供的下载网址下载了flash cs4精简版软件,也成功地制作了旋转立方体,但在导出影片时出错,它提醒说:java运行时初始环境出错,要重装软件。可是重装了也不行。有的朋友教我再装一个java软件,放在flash目录下面,我也装了,但还是不能导出,应该怎么办?希望老师们指教。

 发表评论:共有 4 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167