您好!欢迎您光临flash10.升国旗的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>fs10教程>>>flash10.升国旗的制作原理与方法
flash10.升国旗的制作原理与方法
发表日期:2012/9/19 10:00:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 6863

flash10.升国旗的制作原理与方法 

 

    教学目的:通过本节教学了解和掌握flash10.3D功能及相关工具的使用、相关参数的设置,遮罩及混色器的使用,进而运用此功能制作形象逼真的国旗随风飘扬的动画效果。

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

    教学要点:3D旋转工具、混色器、遮罩。

 

 

    作前准备

    下载一首国歌mp3歌曲,放到指定的文件夹待用。

    制作步骤

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

图1

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


图2

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

    2.确立文档属性

    点击右边属性下方的编辑,如图3所示:


图3

进入属性设置界面,设置动画尺寸为400*550,帧频为24,背景颜色随意,其它默认。如图4所示:


图4

    3.导入素材

    将国歌mp3素材导入到库中,待用。

    4.创建图形元件 (共两个)

    (1)选择“插入-新建元件”,建立一个名为“旗杆”的图形元件,点击确定,进入元件编辑区。就一个图层。选择图层1第一帧,用矩形工具打开填充色码表,选择最下一行左边第一个颜色,线性,右黑左白,在舞台拖一个规格为6*530的无边线矩形,全居中。再用椭圆形工具,同样选择线性,右黑左白 在舞台托一个规格为14*14的无边线的圆,并将其移到矩形的上端。如图5所示:


  图5

    (2)选择“插入-新建元件”,建立一个名为“五星”的图形元件,点击确定,进入元件编辑区。就一个图层。 打开矩形工具,选择多角星形工具,再在属性面板点击工具设置下方的“设置”,选择“星形”,边数5,其它默认,确定。如图6所示:

图6

在舞台拖一个规格约为31*30的,无边线的黄色五角星。全居中。

    5.创建影片剪辑元件 (共六个)

   (1)选择“插入-新建元件”,建立一个名为“红旗1”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。点击图层1第一帧,用铅笔工具,颜色蓝色,在舞台画一个下垂的、封闭的红旗边线框,如图7-1所示:

图7

再选择填充工具,点击“窗口-颜色”,打开混色器,选择线性填充,左边色码快为红色,右边色码快为黑红色。如图8所示:

图8

在蓝色红旗边线框空白处各点一下,实例变化,如图7-2所示;双击边线框,起麻点后删除。如图7-3所示。

   (2)选择“插入-新建元件”,建立一个名为“红旗2”的影片剪辑元件,点击确定,进入元件编辑区。添加一个图层,共两个图层。下层为旗套,上层为红旗。

    a.选择旗套图层第一帧,用矩形工具在舞台拖一个规格为7*135的,白色无边线的矩形。全居中。在第40帧插入帧,上锁。如图9所示:

图9

    b.选择红旗图层第一帧,从库中拖出红旗1影片剪辑元件到舞台,放置在旗套上,上边露出一点旗套,规格约为42*216,用任意变形工具点击该实例,并将其注册点移到红旗的上端点处,如图10-1所示;在第20帧插入帧,创建本区域间的动画补间。再将鼠标放到第20帧处,将该实例向上推至高约为190,适当加宽后,再将其下端向右旋转约10度,如图10-2所示;再在第40帧插入帧,再将该实例调整到第一帧的位置,如图10-3所示:

10

锁定该图层。本环节完成后的时间轴,如图11所示:

图11

   (3)选择“插入-新建元件”,建立一个名为“旗面”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。选择图层1第一帧,用矩形工具打开混色器,设置其参数,(五个色码快由左至右为:红色、稍白、红色、稍黑、红色)如图12所示:

图12


在舞台拖一个规格为200*130的,无边线的红色矩形。用线条工具在矩形中间自上而下画一条绿色的线段,如图13-1所示;再用选择工具将其调整为,如图13-2所示;右键该实例,复制-粘贴,一次。再将两个实例水平合并,如图13-3所示:

图13

   (4)选择“插入-新建元件”,建立一个名为“飘动”的影片剪辑元件,点击确定,进入元件编辑区。添加两个图层,共三个图层。自下而上命名为:红旗、遮罩、五星。

    a.选择红旗图层第一帧,从库中拖出红旗影片剪辑元件到舞台,全居中。在第25帧插入帧,创建本区域补间动画。上锁。

    b.选择遮罩图层第一帧,用矩形工具在舞台拖一个规格为200*160的,绿色无边线的矩形,用线条工具在该实例中间自左向右画一条蓝色的水平线,如图14-1所示;而后,用选择工具将其右边调整为正s形,选中该实例,左对齐-垂直中齐。如图14-2所示;在第13、25帧插入关键帧。

图14

    c.打开红旗图层的锁,点击第1帧,将该帧上的旗面实例水平移到和遮罩的右端对齐,如图15-1所示;鼠标放到第25帧,再将旗面实例水平移到遮罩的左端对齐。上锁。如图15-2所示;

    d.选择遮罩图层第13帧,将遮罩调整到,如图15-3的形状。点击图层名称处,再右键变成灰蓝色的时间轴-创建补间形状。右键该图层名称处,设置该图层为遮罩层。


图15
 

    e.选择五星图层第一帧,从库中拖出五个五星图形元件到舞台,调整好大小,位置,放置在红旗的适当位置上。如图16所示:


图16

在第5、10、15、20、25插入关键帧,并依次对各帧上的五星实例调整好所在红旗上的位置。上锁。本环节完成后的时间轴,如图17所示:


图17

   (5)选择“插入-新建元件”,建立一个名为“飘扬”的影片剪辑元件,点击确定,进入元件编辑区。添加一个图层,共两个图层。上层命名为旗套,下层命名为飘动。

    a.选择飘动图层第一帧,从库中拖出飘动影片剪辑元件到舞台,全居中。如图18所示:

图18

在第60帧插入帧,右键第1-59帧中任何一帧,创建本区域间的补间动画。将鼠标放到第60帧上,用3D旋转工具点击该实例,将鼠标放倒绿色直径处,此时光标下出现一个小y,如图19所示:

图19

按住鼠标沿着逆时针绕y轴拖转至,如图20所示:

图20

在第80帧插入帧,再将鼠标放到第80帧上,用3D旋转工具点击该实例,将鼠标放倒绿色直径处,此时光标下出现一个小y,按住鼠标沿着顺时针绕y轴拖转至和第1帧上的实例位置大约相同。上锁。如图21示:

图21

    b.选择旗套图层第一帧,用矩形工具沿着国旗的左边拖一个规格为7*140的,白色的无边线矩形。所放位置,如图22所示:

图22

在第80帧插入帧。上锁。

   (6)选择“插入-新建元件”,建立一个名为“升旗”的影片剪辑元件,点击确定,进入元件编辑区。添加三个图层,共四个图层。自下而上命名为:旗杆、国旗、国歌、停止。

    a.选择国歌图层第2帧插入空白关键帧,从库中拖出国歌mp3到舞台(点击第2帧,在属性面板设置数据流),位置随意。按f5,待歌曲放完时(第1246帧)松开。上锁。

    b.选择旗杆图层第一帧,从库中拖出旗杆图形元件到舞台,全居中。在第1246帧插入帧。上锁。如图23所示:

图23

    c.选择国旗图层第一帧,从库中拖出“红旗2”影片剪辑元件到舞台,将其放置在旗杆的下部,旗套和旗杆重合并覆盖。在第2帧插入关键帧。如图24-1所示:在第1245帧插入帧,右键第2-1244帧中的任何一帧,创建本区域间的补间动画。鼠标放在第1245帧上,将该帧上的红旗2实例垂直向上移到旗杆顶端(小球下方)。上锁。如图24-2所示:

图24

在第1246帧插入空白关键帧,从库中拖出“飘扬”影片剪辑到舞台,将其旗套放置在旗杆顶部(小球)之下,旗套和旗杆重合并覆盖。如图25所示:

图25

    c.选择停止图层第1246帧,按f9,打开动作面板,在as编辑区输入停止指令:stop(); 。上锁。

    该环节完成后的时间轴,如图26所示:


图26

    6.组织编辑场景

    返回场景1,添加两个图层,共三个图层。自下而上命名为:背景、升旗、文本。

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

图27

    (2)选择升旗图层第一帧,从库中拖出“升旗”影片剪辑元件到舞台,将其放置在背景中间偏左的位置。上锁。如图28所示:

图28

    (3)选择文本图层第一帧,用文本工具在旗杆两侧输入作品题目和相关内容,字体、规格、颜色随意。上锁。如图29所示:


图29

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

图30

    8.测试存盘

    *说明:

    1.为节省空间,压缩作品体积,国歌我仅选了第一段。实例图片有的也等比缩小或放大了规格。

    2.效果显示中我添加了一个开始按钮。flash10中as3.0不能在按钮和影片剪辑上添加动作指令语句,只可在帧上对监控事件添加动作语句。如果在制作前的“欢迎”界面选择as2.0的话,虽然可以在按钮、影片上添加动作指令,但是软件中有的工具不可用。比如“3D”工具。

  

最终效果显示:



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

 

全屏下载

 

祝你成功!

 

进入更多教程

 

 

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



chenguangde
(2012/10/28 15:46:00)

怎么没看到按钮代码?


jacksonhui
(2010/8/19 23:43:00)

晚上好,學習了,谢谢老師,祝安康!


改邪小妖
(2010/6/8 20:20:00) [119.250.22.]

老师一会不见就有新作品呵呵学习小妖

 发表评论:共有 3 条评论

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

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

联系电话: 联系人:翠柏

琼icp备09005167