《flash项目一剖析》由会员分享，可在线阅读，更多相关《flash项目一剖析（21页珍藏版）》请在金锄头文库上搜索。
1、项目一 动画初识,2012年8月,高等教育出版社,本项目目录,任务一、古韵折扇 任务二、骏马奔驰,动画效果,动画效果,本任务目标: 通过制作打开的扇子,学习逐帧动画的创建，了解flash动画的产生原理。,本任务重点: 掌握矩形工具、选择工具、任意变形工具的使用及简单逐帧动画的创建。,任务一、古韵折扇,任务提示： 把要展示的图形按先后顺序依次排列在时间轴的关键帧上，当我们按一定的帧频播放影片时，就产生了简单的逐帧动画。,自己动手：,1创建影片文档,启动flash程序，选择“新建”中的“ActionScript3.0”项。执行菜单“修改”“文档”命令打开“文档设置”对话框。在该对话框内设置文档的相
2、关属性。,2绘制扇片,（1）单击工具箱的“矩形”工具 ，然后在“颜色”选项内设置其笔触颜色为无，填充色为放射状渐变。,（2）按快捷键shift+F9打开“混色器”面板，将左侧色标设为浅紫色，右侧色标设为深紫色。按住鼠标拖动，在舞台中心位置绘制一个长条状矩形。,（3）单击选择工具，将鼠标移至矩形的上边线，当鼠标右下角出现一小段圆弧时，按住左键向上拖动，会在矩形顶端产生弧状。如图1-8所示。,图 1-8 用选择工具调整形状,同样，在矩形没有选中的状态下，将鼠标移至矩形右下角，当鼠标旁边出现垂直线时，直接向左侧拖动，使其变尖。如图1-9所示。,图 1-9 用选择工具调整形状,3. 调整素材大小和位置
3、,(2)选择任意变形工具 ,将扇片缩小,并把它向左旋转,然后将它放到舞台的中心位置。如图1-11所示。,(1)选择“视图”“标尺”命令显示标尺。从左侧的标尺上按住鼠标拖动，可拖出一条垂直的辅助线。把该辅助线定位在舞台中心位置。,图 1-11 用任意变形工具旋转图形,4. 创建扇子展开的逐帧动画,(1)选择第二帧，单击右键，从弹出的快捷菜单中选择“插入关键帧”命令(等效的快捷键为F6)，如图1-12所示。,用任意变形工具,(2)选中第二帧上的扇片，并把它的中心点移到扇片与中心线相交处，然后执行“编辑”“复制”命令或按快捷键Ctrl+C复制该扇片，接着执行“编辑”“粘贴到当前位置”命令或按快捷键C
4、trl+Shift+V将它在原位置粘贴。接着将粘贴的这块扇片向右旋转，其时间轴和舞台效果如图1-13所示。,图 1-12 插入关键帧,图1-13 第2帧的效果,(4)接下来，就按顺序在后面的帧上插入关键帧，然后Ctrl+Shift+V原位置粘贴，旋转到适当位置。完成后的时间轴和舞台效果如图1-15所示。,(3)选择第三帧，按F6插入关键帧，再次执行Ctrl+Shift+V（一次复制可以多次粘贴）。当然，粘贴的对象依然是第一帧的图形。同样将其向右旋转。如图1-14所示,图 1-14 第3帧的效果,图1-15 逐帧动画的时间轴效果,(5)选择该层的第40帧，单击右键，在弹出的快捷菜单中选择“插入帧
5、”命令，等效的快捷键是F5。本例修改后的时间轴如图1-16所示：,图1-16 插入帧使画面延时,5. 设置标题文字,(1)单击“插入图层”按钮 ，在刚才的图层之上建立一个新图层，双击图层名，将该图层改名为“文字”。选择第20帧，按F6插入关键帧。,（2）单击工具箱的“文本工具” ，在“属性”面板中设置文本类型为“静态文本”；字体为“华文行楷”；字体大小为38；文本方向为“水平”；颜色为深紫色。设置好的属性面板如图1-17所示。,图 1-17“文本工具”属性设置,（3）在舞台直接单击，出现文本框和一个闪烁的光标，在文本框中输入“古”字，再次单击，输入第二个字“韵”。用任意变形工具调整这两个字的位
6、置和方向，把它们分别放到扇子的左侧和右侧。如图1-18所示。,图1-18 添加文字,6.测试存盘,执行“控制”“测试影片”命令或按快捷键Ctrl+Enter，那么动画就会在一个新窗口中播放了。本动画最终效果如图1-19所示。执行“文件”“保存”命令，将文件保存。,图1-19 折扇效果图,举一反三,1.倒计时逐帧动画,2. 跳动的色彩,动画效果,动画效果,制作说明：在每一帧上输入不同的数字，测试影片时，即可看到不断变化的数字效果。,制作说明：在第一帧首先输入要展示的整个文字。在接下来的各帧上，依次用其它颜色的字来覆盖相应的文字。,3.制作简单的人物表情动画,动画效果,制作说明：在三个关键帧上绘制
7、三个人物表情，当播放影片时，即可看到人物表情变化效果。,任务二、骏马奔驰,本任务目标: 利用导入外部的gif来制作逐帧动画。,本任务重点: 掌握如何导入外部素材，以及利用绘图纸功能观察和编辑多个帧。绘图纸功能对于制作逐帧动画是非常有用的。,自己动手：,1创建影片文档,新建flash文档。执行菜单“修改”“文档”命令打开“文档属性”对话框，设置宽为“400px”,高为“260px”，背景色为白色，帧频为18fps。,2 创建背景层,选择第一帧，执行“文件”“导入”“导入到舞台”命令，弹出导入对话框，将素材库中名为“草原.jpg”的图片导入到场景中。将该图层重新命名为“背景”。选中该图片，打开属性
8、面板，在属性面板中将该图片的宽和高分别设为400、260，X坐标和Y坐标都设为0，0。使其尺寸和位置与舞台完全重合。如图1-28所示,图 1-28 背景图片的属性面板,3 导入gif动画,单击插入图层按钮 ，插入图层2。将图层2重命名为“马”。选择该层第一帧，执行“文件”“导入” “导入到舞台”命令，将素材库中的“奔跑的骏马.gif”导入。此时，Flash会自动把gif中的图片序列以逐帧形式导入舞台的左上角。其舞台和时间轴效果如图1-29所示。选择“背景”层的第24帧， 按F5键，使背景层的内容也延续到第24帧。如图1-30所示。,图1-29 导入gif动画后的时间轴和舞台效果,图 1-30
9、插入帧后的时间轴效果,4调整对象位置和大小,(1)缺省情况下，导入的对象被放在舞台 “0，0” 坐标处，我们必须移动它们到舞台合适的位置。单击“锁定图层”按钮，锁定“背景”层。然后按下时间轴面板下方的“编辑多个帧”按钮，再单击“修改标记”按钮，在弹出的菜单中选择“标记整个范围”选项，如图1-31所示：,图1-31 选择标记整个范围选项,“编辑多个帧”按钮,“修改标记”按钮,（2）执行“编辑”“全选”命令（快捷键Ctrl+A），此时时间轴和场景效果如图1-32所示：,图1-32 编辑多个帧,（3）用鼠标左键按住场景上方的骏马拖动，就可以把24帧中的图片一次全移到场景中央了。接着，单击工具栏的任意
10、变形工具 ，拖动图片四周的方向句柄，调整马的大小。使用“修改”“变形”“水平翻转”命令，可以使马儿水平翻转180度。,5设置标题文字,在场景中新建“文字”层，单击工具箱中的“文本工具”，在“属性”面板中设置文本类型为“静态文本”；字体为“华文行楷”；字体大小为25；文本方向为“垂直，从左向右”；颜色为黄色。然后在文本框中输入“骏马奔驰”四个字，并将其放到舞台的合适位置。如图1-35所示。,图1-35 添加文字层,6测试存盘,小知识 逐帧动画是flash中最基本的动画类型之一，其制作方法类似于我们传统动画的制作，需要把每一帧的图像制作出来。当然，图像可以是自己绘制，也可以是导入的外部素材。当我们按一定的帧频（即每秒播放的帧数）播放时，就产生了动画效果。它的制作原理简单，但实际操作起来比较复杂，多用于表现动画中一些细腻的动作，比如人物或动物的表情、动作等。,执行“控制”“测试影片”命令（快捷键Ctrl+Enter），观察动画效果，如果满意，执行“文件”“保存”命令，将文件保存。,举一反三,1.制作骏马在草原奔跑的动画。,2. 打字效果。,动画效果,动画效果,制作说明：将导入的gif 动画的每一幅图片放到舞台的不同位置即可产生马儿奔跑的动画效果。,制作说明：每一帧都比前一帧多输入一个字。,3. 小精灵,制作说明：分层、分解身体各个部分、逐帧制作小精灵的原地走的状态,动画效果,
