《web信息系统设计基础第3章动画设计软件flash》由会员分享，可在线阅读，更多相关《web信息系统设计基础第3章动画设计软件flash（51页珍藏版）》请在金锄头文库上搜索。
1、第三章 Flash CS3入门及制作实例,内容提要,3.1 Flash CS3的工作环境简介 3.2 基本绘图工具 3.3 基本动画制作 3.4 动画制作实例,3.1 Flash CS3的工作环境简介,菜单栏,时间轴,舞台,工具箱,属性面板,浮动面板,时间轴,时间轴：用于组织和控制文档内容在一定时间内播放的图层数和帧数,舞台,工作区（舞台的后台 ）,常用面板,“属性”面板：舞台的下方 “对齐”面板：“窗口”|“对齐” “颜色”面板：“窗口”|“颜色” “样本”面板：颜色库面板 “信息”面板：在编辑操作的过程中为用户提供一些相关的信息。 “场景”面板：显示了当前动画的场景数量和播放的先后顺序 “
2、变形”面板：对选定对象执行缩放、旋转、倾斜和创建副本的操作 “动作”面板：方便使用Flash的脚本编程语言ActionScript而专门提供的操作界面 “组件”面板：动作集合,3.2 基本绘图工具（工具箱）,选择工具 部分选取工具 直线工具 套索工具 钢笔工具 矩形工具 铅笔工具,刷子工具 任意变形工具 渐变变形工具 墨水瓶工具与颜料桶工具 滴管工具 橡皮擦工具 文本工具,3.3 基本动画制作,3.3.1 逐帧动画方法与实例,创建逐帧动画的几种方法： 1用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画。 2绘制矢量逐帧动画 用鼠标或压感
3、笔在场景中一帧帧的画出帧内容。 3文字逐帧动画 用文字作帧中的元件，实现文字跳跃、旋转等特效。 4指令逐帧动画 在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化。 5导入序列图像 可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift 3D等）产生的动画序列。,3.3.1 逐帧动画方法与实例,例1：奔驰的汽车 步骤1：新建一个大小为550*400的动画文件，在第1帧处按F6插入关键桢。 步骤2：选择“文件|导入|导入到舞台”，将小汽车的图片导入到舞台上 步骤3：单击第2帧，插入关键桢(F6) ，选中舞台上的小汽车并水平平移一段距离。 步骤4：单击第3帧，插入关键
4、桢(F6) ，选中舞台上的小汽车继续水平平移一段距离。 步骤5：按照3和4的步骤重复几次直至小骑车平移到最右边。 步骤6：同时按下Ctrl+回车键，即可观看最后的动画效果。,3.3.1 逐帧动画方法与实例,例2：奔驰的骏马-（导入连续图片 ） 步骤1：新建一个影片文档，在“属性”面板上设置文件大小为460290像素，“背景色”为白色。 如下图所示。,3.3.1 逐帧动画方法与实例,步骤2：创建背景图层。将当前图层重命名为“背景”，选择第一帧，选择菜单命令“文件|导入|导入到舞台”，将背景图片导入舞台中，在第8帧处按F5键插入普通帧，使帧内容延续到第8帧。 步骤3：导入素材到库。选择菜单命令“文
5、件|导入|导入到库”，在弹出的对话框中找到素材所在的文件夹，按Ctrl+A，把素材全部选中，再点击右下角的“打开”按钮，这样所有的素材都导入到库中。如左图所示。,3.3.1 逐帧动画方法与实例,步骤4：将马的图片添加到舞台上。插入一个新的图层并选中第1帧，单击库里名为“马1”的图形元件，按住鼠标左键拖动到舞台上，然后释放鼠标，这样“马1”图形就拖到舞台上了。选中第2帧，按F7键插入7个空白关键帧，依次在各个空白关键帧上，分别从库里拖出“马2”、“马3”、“马4”、“马5”、“马6”、“马7”、“马8”到舞台上，时间轴上所有空白关键帧都变成关键帧了。下图为导入的图片序列。,3.3.1 逐帧动画方
6、法与实例,步骤5：调整对象位置。单击“时间轴”面板下方的“编辑多个帧”按钮，再单击“修改绘图纸标记”按钮，在弹出的菜单中选择“绘制全部”命令。最后执行“编辑”菜单下的“全选”命令，此时时间轴和场景效果。此时时间轴和场景效果如下图所示。 步骤6：测试存盘 。,3.3.2 形状补间动画实例,例：变形文字 步骤1：新建一个文档。在“属性”面板中设置影片的大小为500400像素，背景色为白色。 步骤2：选中“工具栏”中的“文本工具”，在舞台上单击并输入大写字母“A”，选中字母“A”，在文本“属性”面板中设置字体为“黑体”、字号“96”、“粗体”、颜色为“红色”（#FF0000）。 步骤3：在第10、2
7、0、30帧处分别按F6键建立关键帧，用“文本工具”将第10帧的文字改为“B”、颜色改为“绿色”（#00FF00），将第20帧的文字改为“C”、颜色改为“蓝色”（#0000FF），将第30帧的文字改为“D”、颜色改为“黄色”（#FFFF00）。,3.3.2 形状补间动画实例,步骤4：分别选择各关键帧的文字，选择菜单命令“修改|分离”，将各关键帧上的文字打散。 步骤5：创建形状补间动画。分别选择第1、10、20帧，将其“属性”面板中的“补间”设为“形状”。设置后时间轴如图所示。,步骤6： Ctrl+Enter快捷键预览动画,3.3.3 动作补间动画方法与实例,两种方式： 1) 先创建好两个帧的状态
8、，然后在两个关键帧之间建立动作补间关系。 2) 先创建好起点关键帧，然后给此帧赋予动作补间模式，再去创建终点关键帧，两帧之间就建立了动作补间关系。,3.3.3 动作补间动画方法与实例,动作补间动画的属性面板,“缓动” 选项: -1到-100 :动画运动速度从慢到快，朝运动结束的方向加速补间。 1到100:动画运动的速度从快到慢，朝运动结束的方向减慢补间。 默认 :补间帧之间的变化速率是不变的,3.3.3 动作补间动画方法与实例,动作补间动画的属性面板,“旋转”选项: 无:禁止元件旋转 自动:使元件在需要最小动作的方向上旋转对象一次 顺时针或逆时针+N:使元件在运动时顺时针或逆时针旋转相应的圈数
9、,3.3.3 动作补间动画方法与实例,例：跳动的弹球，且落地时还有弹性的效果。 步骤1：新建一个文档。在“属性”面板中设置影片的宽为300像素，高为300像素，背景色为白色。 步骤2：绘制图形。 选择菜单命令“文件”|“导入”|“导入到库”，选择弹球图片后，将弹球导入到库。 在绘制时，最好是选择菜单命令“视图”|“网格”|“显示网格”，在舞台上显示网格。 步骤3：选择菜单命令“插入”|“新建元件”，新建图形元件名称填为弹球并将库中的弹球位图拖动到舞台上。 步骤4：回到场景编辑界面，打开“库”面板，将图形元件“弹球”从库中拖到舞台上。 步骤5：创建动画。,注意,3.3.3 动作补间动画方法与实例
10、,（1）在第20帧按F6键插入关键帧，按向下的方向键将图形放到场偏下的位置，模拟弹球着地的样子。为了模拟弹球着地时被压缩的样子，应该在随后的几帧里将图形压缩再恢复。在第25帧处按F6键插入关键帧，将图形进行压缩，即上下端点距离缩短，左右距离拉长，但图形的着地点不应该变化，所以压缩前必须记住最下端的位置。压缩完后，将图形下移到刚才记下的位置上。 （2）单击第20帧，选择菜单命令“编辑”|“时间轴”|“复制帧”，复制这一帧，再单击第30帧，选择菜单命令“编辑”|“时间轴”|“粘贴帧”，把第20帧的内容粘贴过来。在这一帧上，弹球将恢复原形，准备跳起。 （3）按照第（2）步的方法，将第1帧的内容复制到
11、第50帧。这一弹球将完成一个循环。,3.3.3 动作补间动画方法与实例,（4）现在为每一帧的运动加上渐变。由于重力作用，图形下落的时候加速，上升的时候减速，所以在第1帧的属性中将“补间”设置为“动画”，将“缓动”值改为-60。如下图：,3.3.3 动作补间动画方法与实例,（5）在第20帧至第25帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令。在第25帧至第30帧之间右击，在弹出的快捷菜单中选择“创建补间动画”命令。在第30帧的属性中将“补间”设置为“动画”，将“缓动”值改为60。创建后的时间轴如下图：,步骤5：测试动画。按Ctrl+Enter快捷键测试动画。,3.3.4 遮罩动画方法与
12、实例,1.遮罩和遮罩的创建 1）遮罩及其作用 遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。 在Flash动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。,3.3.4 遮罩动画方法与实例,2）创建遮罩的方法 （1）创建遮罩 （2）构成遮罩和被遮罩层
13、的元素 （3）遮罩中可以使用的动画形式 3）遮罩层的基本原理： 能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。,3.3.4 遮罩动画方法与实例,要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。 可以用“Actions”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置_Alpha属性。 不能用一个遮罩层试图遮蔽另一个遮罩层。 遮罩可以应用在gif动画上。 在制作过程中，遮罩层经常挡住下层的元件，影响视线，无
14、法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮，使之变成，使遮罩层只显示边框形状，在这种情况下，你还可以拖动边框调整遮罩图形的外形和位置。 在被遮罩层中不能放置动态文本。,技巧,3.3.4 遮罩动画方法与实例,例：扫描文字,步骤1：新建一个Flash文档。 步骤2：按Ctrl+F8快捷键插入一个“图形”元件，并命名为“文字”。选中“工具栏”中的“文本工具”在舞台上单击，输入文字“HELLO,FLASH!”，然后在下面的“属性”面板中设置字体为“Arial Black”、字号为“45”、颜色任意。文字元件如图。,3.3.4 遮罩动画方法与实例,步骤3：按Ctrl+F8快捷键插入一个“图形”元
15、件，并命名为“彩条”。将工具箱中的填充颜色设置为彩色。,选择工具箱中的“矩形工具”，画出如图3-67所示彩条。注意，彩条的宽度应长于文字的宽度。,3.3.4 遮罩动画方法与实例,步骤4：单击文档窗口右上方的“场景”按钮，回到主场景中。从“库”面板中拖动图形元件“彩条”到舞台上适当的位置。 步骤5：右击当前图层，在弹出的快捷菜单中选择“插入图层”命令，在当前图层的上方插入一个新的图层“图层2”。从“库”面板中拖动图形元件“文字”到舞台上 。,3.3.4 遮罩动画方法与实例,步骤6：在“图层2”的第30帧处按F5键，插入普通帧。在“图层1”的第30帧处按F6键，插入关键帧。 步骤7：在“图层1”的
16、第1帧至第30帧之间右击鼠标，在弹出的菜单中选择“创建补间动画”命令。选择“图层1”的第15帧，用工具箱中的选择工具选中彩条，拖动向向右平移，使第一个字母与矩形的左边线对齐。 步骤8：右击“图层2”，在弹出的快捷菜单中选择“遮罩层”命令，将“图层2”图层设置成遮罩层，这时“图层1”自动成了被遮罩层。 步骤9：本例制作完成，按Ctrl+Enter快捷键预览动画。,3.3.5 引导路径动画方法与实例,1)创建引导层和被引导层,方法：,3.3.5 引导路径动画方法与实例,2)引导层和被引导层中的对象 引导层是用来指示元件运行路径的，所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。 而“被引导层”中的对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮、文字等，但不能使用形状。 由于引导线是一种运动轨迹，不难想象，“被引导”层中最常用的动画形式是动作补间动画，当播放动画时，一个或数个元件将沿着运动路径移动。,方法：,3.3.5 引导路径动画方法与实例,3)向被引导层中添加元件 “引导动画
