《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)向被引导层中添加元件 “引导动画