· 用户注册 · 设为首页 · 加入收藏 · 联系站长 · · ·
 | 网站首页 | 文章中心 | 图片中心 | 影音在线 | 下载中心 | 许愿祝福 | 我要投稿 | 
您现在的位置: 生物小吧 >> 文章中心 >> 网站建设 >> 正文 今天是:
第1课 推门而入——制作第一个简单动画
作者:佚名    文章来源:不详    点击数:1745    更新时间:2010/6/4
        ★★★ 【字体:

第1课 推门而入——制作第一个简单动画

     素材和源文件素材和源文件下载

   Flash MX 2004是创作性的工具,可以创建简单的动画到复杂的交互式 Web 应用程序。在创作的过程中可以发挥个人的创意与Flash的技术结合做出有声有色的动画作品来。这一课将开始Flash之旅的第一站,制作一个简单的“小球运动”实例,让大家熟悉Flash MX 2004的工作环境,掌握一些常用工具和功能菜单的使用方法,系统的学习应用Flash MX 2004完成基本动画的全过程。

 
     本实例是一个小球跳动的动画效果。紫色的小球在美丽的背景衬托下,自由的跳动。如图1-3-1是实例运行效果。

图1-3-1小球运动预览效果
知识要点:
  • 熟悉Flash的工作环境
  • 文档属性的设置方法
  • 图形元件的创建方法
  • 绘图工具的使用方法
  • 渐变填充的设置和调整
  • 创建补间动画的技巧
  • 导入和应用外部的图片
  • 如何测试、保存和导出影片
制作步骤:
1.新建文档设置文档属性
    步骤1 新建文档
              单击Windows系统的【开始】菜单,执行【开始】|【程序】|【Macromedia】|【Macromedia Flash MX 2004】命令,启动Flash MX 2004,系统现弹出Flash MX 2004的启动界面。单击中间“开始页”【创建新项目】下的【Flash 文档】项目,创建一个新空白文档,如图1-3-2所示。

图1-3-2创建空白新文档
     说明:还有一种创建新文件的方法,启动Flash MX 2004,执行【文件】|【新建】命令,在【常规】选项卡上选择【Flash 文档】,打开一个新的空白文档。
     步骤2 打开属性检查器
     执行【窗口】|【属性】命令(快捷键Ctrl+F3),打开【属性检查器】面板。【属性检查器】面板位于舞台的下方,新建文档以后,用【属性检查器】面板来指定文档的【舞台】大小、【背景颜色】、【帧频】 (fps也就是播放速度)以及文档的【发布设置】等参数,如图1-3-3所示。
   
图1-3-3【属性检查器】面板
    步骤3 设置文档属性
    单击【属性检查器中】面板上【大小】右边的“控件按钮”,弹出设置【文档属性】对话框,最上面【尺寸】是用来设定【舞台】大小尺寸的,输入宽度的值:400 px(像素);高度的值不变:400 px(像素),如图1-3-4所示。
图1-3-4【文档属性】对话框
    说明:设置【舞台】的大小尺寸,最小可设定为高和宽均为 18 px (像素);最大可设定高和宽均为 2880 px (像素)。系统默认的尺寸是 px (像素),可以在【标尺单位】的下拉菜单里面选择其他的单位,如:厘米、毫米等。
单击【背景颜色】右边的“取色按钮”,在弹出的【颜色样本】面板上选取颜色,选取颜色的同时鼠标指针变成【滴管工具】,找到天蓝色样本并拾取,同时可以查看在“十六进制文本框”中显示颜色值为 “#00CCFF”,如图1-3-5所示。

图1-3-5【背景颜色】选择
    说明:除了用【滴管工具】直接在颜色样本中拾取颜色外,如果知道颜色的十六进制数值,可以在“十六进制文本框”中直接输入,颜色的十六进制值以“井”开头。
保持【文档属性】的其它参数不变,单击【确定】按钮,完成文档属性的设置,场景效果如图1-3-6所示。

图1-3-6完成属性设置的场景
说明:
【匹配】︱【打印机】:匹配打印机,让底稿的大小与打印机的打印范围相同。
【匹配】︱【内容】:匹配内容,在舞台上将内容四周的空间都设置为对称。
【匹配】︱【默认】:匹配默认,使用默认值。
【帧频】:默认为12 fps。是动画每秒播放的帧数,默认的播放速度是每秒钟播放时间轴上的 12 帧,这是在 Web 上播放动画的最佳帧频。根据特殊需要可以修改。
【设为默认值】:将所有设定保存成默认值,当下次再开启新的影片文档时,影片的舞台大小和背景颜色会自动调整成这次设定的值。
     2.创建图形元件
     元件是在 Flash 中创建的图形、按钮或影片剪辑,是Flash动画中的基本构成重要元素之一。元件只需创建一次,即可在整个文档或其他文档中重复使用。而且多次使用它不会明显增大动画文件的体积大小。创建的任何元件都会自动成为当前文档的【库】的一部分。可以随时打开【库】面板进行调用,元件的应用使动画制作变得轻松快捷。
    步骤1 新建图形元件:
    执行【插入】︱【新建元件】命令(快捷键 Ctrl+F8),打开【创建新元件】对话框。在【创建新元件】对话框中,输入元件的【名称】为“小球”,【行为】选择【图形】前面的单选按钮,然后单击【确定】按钮,如图1-3-7所示。

图1-3-7创建小球元件的设置
    步骤2 进入元件编辑状态
    创建元件完成以后,编辑动画的【舞台】已经从“场景1”切换到“小球”图形元件的编辑状态,在【时间轴】的上方有“场景1”|“小球”的提示,如图1-3-8所示。

图1-3-8小球图形元件的编辑场景
     3.绘制图形
     步骤1 设置圆形的颜色
    选择【工具】面板上的【椭圆工具】,单击【工具】面板下面“颜色”区域的【笔触颜色】,在弹出的【颜色样本】面板上选择【没有颜色】;再单击【填充颜色】,在弹出的【颜色样本】面板上选择蓝色“#0000FF”,如图1-3-9和图1-3-10 所示

图1-3-9设置圆形的笔触颜色图1-3-10设置圆形的填充颜色

说明:在绘制某个形状时,它的颜色有两个部分:外部线条称为【笔触颜色】,它描绘形状的轮廓;形状内部的着色称为【填充颜色】。在绘制图形之前,通常要先设置【笔触颜色】和【填充颜色】。

步骤2 绘制圆形

  移动鼠标到【舞台】的中间,按住键盘“Shift”键同时按住鼠标左键拖动,绘制出一个随意大小的圆形,如图1-3-11所示。


图1-3-11绘制出的小球

  说明:按住 Shift 键拖动可以将形状限制为正圆形,否则为不规则的椭圆形状。

步骤3 设置圆形的属性

选择【工具】面板上的【选择工具】,然后单击【舞台】上的“圆形”,执行【窗口】|【属性】命令(快捷键Ctrl+F3),打开【属性检查器】面板,在【属性检查器】面板中设置【宽】和【高】都为“66”像素,【X轴】和【Y轴】的坐标都为“-33”,如图1-3-12所示。

图1-3-12设置圆形的属性

4.改变圆形为渐变填充

步骤1 选择渐变色填充类型

  保持【舞台】上的“圆形”处于被选中状态,执行【窗口】︱【设计面板】︱【混色器】命令(快捷键Shift+F9), 打开【混色器】面板。单击【填充样式】后面的下拉按钮,在弹出菜单中选择【放射状】渐变填充,如图1-3-13所示。


图1-3-13选择【填充样式】

  说明:【混色器】面板可以创建并编辑纯色和渐变填充,还可以设置无色和位图的填充。渐变填充有两种方式,【线性】渐变填充是从起始点到终点沿直线逐渐变化的渐变方式;【放射状】渐变填充是从起始点到终点按照环形模式向四周逐渐变化。

步骤2 设置渐变填充颜色

  单击中间【渐变定义栏】的下面“左边”的【渐变指针】,设置【放射状】渐变填充的起始点颜色,也就是圆心中间部位的颜色。在下面的“颜色空间”单击选择一种浅蓝颜色“#939BFD”,如图1-3-14所示。

图1-3-14调整起始点填充色

  然后再单击【渐变定义栏】下面“右边”的【颜色指针】,设置【放射状】渐变填充的终点颜色,也就是圆形周围的颜色。在下面的“颜色空间”单击选择一种深蓝颜色“#36027D”,如图1-3-15所示。

图1-3-15调整终点填充色

步骤3 完成渐变色填充

  颜色设置好以后,因为舞台上的“圆形”处于被选中状态,编辑颜色的同时被选中的“圆形”会自动添加编辑的渐变填充颜色,很像一个小球的形状,如图1-3-16所示。


图1-3-16渐变填充的小球

  说明:如果没有事先选中绘制的图形,在【混色器】面板上编辑颜色以后,选择【工具】面板上的【颜料桶工具】,鼠标指针变成“颜料桶”形状,移动鼠标到舞台上单击绘制的形状也可以完成填充,这是填充颜色的另外一种方法。

步骤4 调整渐变填充

  渐变填充完成以后,“圆形”有了立体感,但是不符合光源的照射规律,我们来调整“圆形”渐变填充的起始位置,使其看起来更接近自然界中的球体。
选择【工具】面板上的【填充变形工具】,移动鼠标到舞台上单击“圆形”,“圆形”的中间和周围出现4个【填充变形控制点】,如图1-3-17所示。

图1-3-17【填充变形工具】选中小球

  移动鼠标到“圆形”中间的【填充变形控制点】上,鼠标指针变成“十字方向”,按住鼠标左键向左上方拖动,将“高光区”拖放到“圆形”的左上方,如图1-3-18所示。调整后的效果如图1-3-19所示。

图1-3-18移动填充变形控制点



图1-3-19调整后的效果

5.制作动画

步骤1 打开库面板

  执行【窗口】︱【库】命令(快捷建F11),打开【库】面板。在【库】面板中看见我们刚才创建的“小球”图形元件,如图1-3-20所示。

图1-3-20【库】面板

步骤2 布局第1帧上的小球

  单击【时间轴】的上方“场景1”,切换到“场景1”的舞台,选中【库】面板中的“小球”图形元件,按下鼠标左键并拖动它到【舞台】的上边中间位置,如图1-3-21所示。

图1-3-21舞台上的小球位置

  说明:按下快捷键Ctrl+L,可以快速打开【库】面板。【库】中保存的对象是创建好的可以重复使用的图形、影片剪辑或按钮。将【库】中的元件拖放到【舞台】上以后,【舞台】上的对象叫做元件的实例。
新建文档的主场景在【时间轴】上只有一个【图层1】和一个【空白关键帧】,“小球”拖放到【舞台】上以后,就直接加到【图层1】的第一帧上,同时第一帧变成【关键帧】。【关键帧】是用来定义动画变化状态的帧,显示为实心圆,如图1-3-22所示。

图1-3-22小球第一帧的图层结构

步骤3 改变图层名称添加关键帧

  鼠标双击【图层1】的图层名称处,输入“小球”将【图层1】重新命名为【小球】。单击选中【小球】图层的第20帧,执行【插入】|【时间轴】|【关键帧】命令(快捷键 F6),在第20帧处插入一个【关键帧】,用同样的方法在【小球】图层的40帧插入一个【关键帧】,效果如图1-3-23所示。

图1-3-23插入关键帧的图层结构

  说明:改变图层名称是为了图层数量增多时,可以一目了然分清每个图层所放置的内容是什么,因此重新命名时尽量和放置的元件名称接近。另外除了使用【插入】菜单中的命令插入帧,还可以用快捷键实现插入帧的操作。选中某个帧以后,按下F5键可以插入一个【普通帧】;按下F6键可以插入一个【关键帧】;按下F7键可以插入一个【空白关键帧】。

步骤4 调整20帧上小球位置

  单击选中【小球】图层的第20帧,选择【工具】面板上的【选择工具】,然后移动鼠标到【舞台】的“小球”图形元件上,按住键盘上的“Shift” 键同时按住鼠标左键拖动“小球”到舞台的正下方,如图1-3-24所示。

图1-3-24调整后的小球位置

  说明:按住“Shift”同时拖动舞台上的元件,可以保持水平或垂直移动元件。也可以45度的角度,向四个斜面方向移动。

步骤5 定义动作补间动画

  选中【小球】图层的第1帧,打开【属性检查器】面板,在【属性检查器】面板中,单击【补间】后面的下拉按钮,在弹出的菜单中选择【动作】,如图1-3-25所示。

图1-3-25定义动作补间动画

  【小球】图层的第1帧到第20帧之间出现一条浅蓝色背景的带黑色箭头的实线。 这样就实现了第1帧到第20帧的【动作】补间动画。用同样的方法,再实现第20帧到40帧之间的动画,完成后的图层结构如图1-3-26所示。


图1-3-26定义补间动画的图层结构

  说明:所谓补间动画,是指只要做好起点【关键帧】和终点【关键帧】的图形,Flash就会自动补上中间的动画过程。要构成补间动画,同一个图层上至少有两个不同位置的【关键帧】。

步骤6 在场景中测试动画

  拖动【时间轴】上的红色【播放头】到第一帧的位置,按下键盘的“Enter”键,动画开始播放,观察小球的【动作】补间动画效果,看见“小球”以平均的速度从上到下又回到上面。

步骤7 使动画更符合客观规律

  我们观察到的“小球”是均速的上下运动,现实生活中受地球吸引力的因素,应该是向落下的速度越来越快,弹起以后到上面速度逐步减慢,下面我们来对补间动画属性进行一些设置,使“小球”的运动更符合客观规律。

  选中【小球】图层的第1帧,打开【属性检查器】面板,在【属性检查器】面板中【简易】的参数文本框中输入“-100”,如图1-3-27所示。用同样的方法选中【小球】图层的第20帧,在【属性检查器】面板中【简易】的参数文本框中输入“100”。

图1-3-27设置补间动画的【简易】参数

  说明:在定义补间动画时,通过设置一些相关参数可以使动画效果更丰富,比如上面定义的【简易】参数,可以将运动表现为先慢后快和先快后慢的效果。默认状态下,【简易】参数值为“0”,表示平均速度的运动,更改这个参数值,就可以实现加速运动或者减速运动。当值为正数时,运动为减速运动;当值为负数时,运动为加速运动。

步骤8 再次在场景中测试动画

  拖动【播放头】到第一帧的位置,再按下键盘的“Enter”键,观察发现“小球”运动效果比较符合客观规律了。

6.给动画添加背景

步骤1 新建图层

  单击【时间轴】左边“图层名称”底部的【插入图层】按钮,新建【图层2】,如图1-3-28所示。

图1-3-28插入图层

步骤2 改变图层顺序并重新命名

  单击选中新建的【图层2】图层名称处,按住鼠标左键并拖动到【小球】图层的下面,然后双击【图层2】的图层名称处,输入“背景”将【图层2】重新命名为【背景】,如图1-3-29所示。


图1-3-29重新命名图层名称

  说明:【时间轴】是控制动画的合成和播放的地方,它可以有不同的图层组成,可以把图层看成是堆叠在一起的多张幻灯胶片一样,每个层都包含一个显示在舞台中的不同图像,一层层地向上叠加。层可以帮助组织文档中的插图,可以在层上绘制和编辑对象,而不会影响其它层上的对象。上面的图层可以遮挡住下面图层的内容,当有很多图层时,可以组合出各种复杂的动画效果。

步骤3 导入背景图片

  我们要给“小球运动”加上一个背景图片,使动画更加美观,事先选好一张和场景大小一致的图片。本例中的背景图片参见随书附带的光盘中的第一章的素材文件。
选中【背景】图层的第一帧,执行【文件】|【导入】|【导入到舞台】命令(快捷键Ctrl+R),弹出【导入】对话框,在【导入】对话框中选择要导入的图片文件“背景.jpg”,然后点击【打开】按钮,如图1-3-30所示。

图1-3-30【导入】对话框

步骤4 设置图片在舞台上的位置

  单击【打开】按钮以后“背景.jpg”导入到舞台上。默认状态没有摆放到【舞台】的中间,看起来很不美观,如图1-3-31所示。

图1-3-31刚导入的背景图片位置

  执行【窗口】|【设计面板】|【对齐】命令(快捷键Ctrl+K),打开【对齐】面板,保持右边【相对于舞台】按钮处于按下状态,分别单击【对齐】下面的“水平中齐”和“垂直中齐”按钮,如图1-3-32所示。

图1-3-32【对齐】面板

  说明:“相对于舞台”处于按下的状态的,这样实现的是对于舞台为中心的对齐和分布,如果处于非“相对于舞台”状态下,则是两个以上对象之间的相互对齐和分布。

7.测试和保存动画

步骤1 测试动画

  执行【控制】︱【测试影片】命令(快捷键 Ctrl+Enter),弹出(.SWF)测试窗口,可以观看整个动画的播放效果,测试动画效果是否满意。单击 (.SWF)测试窗的关闭按钮即可关闭。如果有不满意的地方可以继续回到场景对动画进行编辑和调试,直到满意为止。测试窗口如图1-3-33所示。

图1-3-33小球运动的测试窗口

  说明:前面我们通过在场景中按下“Enter”键,观察了“小球”的动画效果,这是一种常用测试效果的方法,但是如果结构比较复杂,比如主时间轴上有影片剪辑对象,那么这样的测试方法就不能观察到动画的全部效果。必须通过上面的方法测试动画。

步骤2 保存动画

  执行【文件】︱【保存】命令(快捷键 Ctrl+S),弹出【另存为】对话框,指定文件保存的路径,输入文件名“小球运动”,保存类型:Flash MX 2004 文档(*.fla)即文件的扩展名为 .fla。最后单击【保存】按钮保存动画,如图1-3-34所示。

图1-3-34【另存为】对话框

  说明:在制作动画的过程中,按Ctrl+S键可以快速保存文件,养成经常保存的好习惯,以免突然断电等意外发生文件丢失。

8.导出动画

步骤1 导出动画

  执行【文件】︱【导出】︱【导出影片】命令(快捷键 Ctrl+Alt+Shift+S),弹出【导出影片】对话框,指定文件导出的路径和源文件保存在一个目录下,输入文件名“小球运动”,保存类型:Flash 影片(*.swf)即文件的扩展名为 .swf。然后单击【保存】按钮,如图1-3-35所示。

图1-3-35【导出影片】对话框

步骤2 导出设置

  单击【保存】按钮以后,弹出【导出Flash Player】设置对话框,如图1-3-36所示。在这个对话框中可以设置导出动画文件的相关参数,本实例不作改动,保持目前默认的参数,单击【确定】按钮,导出动画完成。

图1-3-36【导出Flash Player】对话框

  说明:在【导出Flash Player】对话框的最上边有个【版本】下拉菜单,在菜单里面可以选择将要导出的影片版本FlashPlayer1至FlashPlayer7,默认是Flash Player7,即FlashMX2004的播放器。如果别人的电脑没有安装FlashPlayer7的播放器,而是比较低的版本,可以选择导出低版本的播放器,这样在别人的电脑上才能观看到你做的动画影片。但是Flash MX 2004 新增加了一些新的功能,导出低版本的播放器播放就会丢失这些功能实现的效果。
【加载顺序】:设置Flash加载影片各层显示影片第一帧的顺序,此选项控制着Flash在速度较慢的网络或调制解调器连接上先显示影片的哪些部分,可以选择“由下而上”或“由上而下”的显示画面。默认设置即可,没有特殊要求不需改动。
【动作脚本版本】:到Flash MX 2004动作脚本也得到扩展升级到2.0,比以前的动作脚本语法要求严格了,如果你的动作脚本中用到2.0新增的扩展函数,就要发布成2.0版本的动作版本,不然在导出的影片文件中有些动作脚本不能正常执行。

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    生物小吧