Flash CS5动画制作项目教程
郑州市电子信息工程学校 冯淑婷
目 录
项目一 Flash CS5基础知识. 1
任务一:初识Flash CS5 2
任务二 Flash CS5文件基本操作. 7
任务三 Flash CS5动画制作原理. 10
项目二 Flash CS5基本绘图. 12
任务一 Flash CS5绘图基础. 13
任务二 Flash CS5绘图常用工具. 15
任务三 编辑图形图像. 21
任务四 填充图形图像. 24
项目三 Flash CS5文本工具. 27
任务一 文本工具. 28
任务二 常见文字特效实训. 30
任务三 常见文字滤镜. 32
项目四 Flash CS5动画制作基础. 34
任务一 帧和图层的操作. 35
任务二 元件的创建. 39
任务三 元件、实例与库. 42
任务四 场景与图片素材的使用. 45
项目五 Flash CS5简单动画制作. 48
任务一 动画的基本类型之——逐帧动画. 49
任务二 动画制作之——形状补间动画. 52
任务三 动画制作之——动作补间动画. 54
任务四 形状补间动画实例——变形小球. 56
任务五 动作补间动画实例——转动的风车. 58
项目六 制作特殊动画. 62
任务一 制作引导动画. 63
任务二 制作遮罩动画. 66
任务三 引导层动画实例. 69
任务四 遮罩层动画实例——画轴打开. 72
任务五 遮罩层动画实例二——电影片尾字幕. 75
项目七 声音设置. 78
任务一 添 加 声 音. 79
任务二 制 作 MTV 83
项目八 交互式动画制作. 84
任务一 “动作”面板动作工具箱. 85
任务二 Actions语句. 87
任务三 ActionScript 的应用(一). 91
任务四 ActionScript 的应用(二). 93
项目九 动画的测试、优化和发布. 95
任务一 动画的测试与优化. 96
任务二 动画的导出与发布. 99
项目十 综合实例. 102
任务一 用Flash制作跳动的小球. 103
任务二 用Flash制作鼠标跟随. 109
任务三 用Flash制作生日贺卡. 113
项目一 Flash CS5基础知识
- 项目导读
Flash CS5是Adobe公司推出的一款经典、优秀的矢量动画编辑软件,Flash CS5版本目前比较新的版本。利用该软件制作的动画尺寸要比位图动画文件(如GLF动画)尺寸小的多,用户不但可以在动画中加入声音、视频和位图图像,还可以制作交互式的影片或者具有完备功能的网站。
Flash CS5对动画制作者的计算机知识要求不高,简单易学,效果流畅生动,对于动画制作初学者来说是非常适合的一款软件。在学习制作动画之前,通过本项目的学习,学生莹熟悉Flash CS5动画的特点,Flash CS5的界面组成元素,动画制作的步骤,并通过制作实例了解Flash CS5动画制作的一般步骤。
- 项目学习目标
了解Flash概念和功能
熟悉Flash CS5的工作环境和文档基本操作
理解动画制作的一般过程
- 项目重点
熟悉Flash CS5的工作环境
- 项目难点
Flash CS5动画的制作原理
- 项目内容
初识Flash CS5
Flash CS5文件基本操作
制作Flash CS5动画的简单实例
任务一:初识Flash CS5
- 主要内容
了解Flash CS5
新增功能
运行环境
一、了解Flash CS5
1.Flash主要用于制作矢量图像和网络动画。它是一种创作工具,设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。
2.Flash的用途很广泛,网页、网络动画、网络广告、Flash游戏以及教学软件等领域。Flash特别适用于创建通过Internet提供的内容,因为它的文件非常小。
3.在Flash中创作内容时,需要在Flash文档文件中工作。Flash文档的文件扩展名为.fla (.FLA)。
FFlash文档有4个主要部分:
1)舞台:舞台是在回放过程中显示图形、视频、按钮等内容的位置。在后面的章节中将对舞台做详细介绍。
2)时间轴:用来通知Flash显示图形和其它项目元素的时间,也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。
3)库面板:库面板是Flash显示Flash文档中的媒体元素列表的位置。
4)ActionScript代码:可用来向文档中的媒体元素添加交互式内容。例如,可以添加代码以便用户在单击某按钮时显示一幅新图像,还可以使用ActionScript向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash包括两个版本的ActionScript,可满足创作者的不同具体需要。
4.完成Flash文档的创作后,可以使用“文件”→“发布”命令发布它。这会创建文件的一个压缩版本,其扩展名为.swf(SWF)。
二、Flash CS5的新增功能
1.增强的集成功能
(1)界面的改变
(2)Adobe Bridge
(3)Adobe Photoshop导入
(4)Adobe Illustrator导入
2.增强绘图、动画和视频功能
(1)增强的钢笔工具
(2)增强的基本矩形和椭圆绘制工具
(3)滤镜复制和粘贴
(4)复制和粘贴动画
(5)增强了QuickTime视频支持
(6)为Flash视频保存和加载提示点
3.全新的ActionScript开发环境
(1)增加了新的ActionScript 3.0语言
(2)将动画复制为ActionScript 3.0
三、Flash CS5的工作环境
安装好Flash CS5后,就可以通过“开始”→“程序”→“Adobe Flash CS5 Professional”命令或双击“桌面”上的快捷图标启动它,该软件启动新建文档后的主界面如图1-1所示。
图1-1
在Flash CS5的主界面中,位于主界面最上面的是标题栏和菜单栏;主界面的左侧是工具箱,其中包括Flash CS5中最常用的绘图工具和辅助工具选项;主界面的底部和右侧是浮动面板。在默认的情况下,底部有“属性”、“滤镜”和“参数”3个面板,右侧主要有“颜色”和“库”面板。
1.开始页
(1)打开最近的项目
(2)新建
(3)从模板创建
(4)扩展
2.菜单栏
Flash CS5的菜单栏包含了11个菜单,包括“文件”、“编辑”、“视图”、“插入”、“修改”、“文本”、“命令”、“控制”、“调试”、“窗口”和“帮助”菜单。 如图1-2
图1-2
3.工具栏
(1)主工具栏
默认情况下,主工具栏是不显示的。如果要显示它,可以选择“窗口”→“工具栏”→“主工具栏”命令,显示主工具栏。
(2)控制器工具栏
默认情况下,控制器工具栏也是不显示的。如果要显示它,可以选择“窗口”→“工具栏”→“控制器”命令,显示控制器工具栏。
(3)编辑栏
编辑栏位于舞台的顶部,提供了隐藏时间轴、编辑元件、场景的信息和控件。另外,编辑允许用户增加或减少舞台的缩放比例。
4.时间轴面板
时间轴的主要组件是图层、帧和播放头。图层就像堆叠在一起的多张幻灯胶片一样,在舞台上一层层地向上叠加。如果上面一个图层上没有内容,那么就可以透过它看到下面的图层。如图1-3
图1-3
5.场景与舞台
场景是指Flash工作界面的中间部分,即整个白色和灰色的区域,它是进行矢量图形的绘制和展示的工作区域。在场景中的白色区域(默认)部分又称“舞台”,是创建Flash文档时放置图形内容的矩形区域,这些图形内容包括矢量插图、文本框、按钮、导入的位图图形或视频剪辑。
Flash中各种动画活动都发生在舞台上,在舞台上看到的内容就是导出的Flash影片中观众看到的内容。在场景中的灰色区域部分又称“工作区”,工作区是环绕于舞台,导出的Flash影片中观众将看不到工作区的内容,就象戏曲中的台后。如图1-4
图1-4
6.工具箱
默认情况下,工具箱中包含了绘制和编辑图形的各种工具,分为“工具”、“查看”、“颜色”和“选项”4个区域。
7.常用的面板
面板是Flash CS5界面的重要组成部分,使用它们可以查看、组织和更改文档钟的元素。面板中可用选项控制着元件、实例、颜色、类型、帧和其它元素的特征。可以通过显示特定任务所需的面板并隐藏其它面板来自定义Flash界面。
(1)属性面板
大小:设置舞台的大小,以像素为单位。默认的舞台大小为550像素×400像素。
发布:设置发布属性,可以设置使用哪个版本的Flash影片播放器发布影片。
背景颜色:设置舞台的背景色。
帧频:每秒钟播放多少帧动画。默认的帧频为12帧(fps)。
属性面板是动态的,因为它所显示的属性将根据所选择的对象而变化。
(2)动作面板
动作面板可以创建和编辑对象或帧的ActionScript代码,主要由“动作工具箱”、“脚本导航器”和“脚本”窗格组成。
(3)帮助面板
帮助面板包含了大量信息和资源,对Flash的所有创作功能和ActionScript语言进行了详尽的说明。帮助面板可以随时对软件的使用或动作脚本语法进行查询,使用户更好地使用软件的各种功能。
(4)滤镜面板
Flash CS5的滤镜功能大大增强了其设计方面的能力。这项新特性对制作Flash动画产生了便利和巨大影响。它们几乎颠覆了长期以来,对Flash设计能力欠缺的固有偏见,使大家不得不对其刮目相。默认情况下,滤镜面板和属性面板、参数面板组成一个面板组。
(5)项目面板
选择“窗口”→“项目”命令或按【Shift+F8】键,可以打开项目面板,这个面板为用户提供了管理和处理Flash项目的一个中心位置。
(6)对齐面板
选择“窗口”→“对齐”命令或按【Ctrl+K】键,可以打开对齐面板,这个面板可以根据一系列预置的标准来对齐对象。每一种预置的标准都被表示为一个按钮。
(7)信息面板
选择“窗口”→“信息”命令或按【Ctrl+I】键,可以打开信息面板,这个面板为用户提供了通过数字更改选定对象的尺寸和位置的方法。在信息面板的底部提供了鼠标当前所处位置的相关信息,左下角显示鼠标当前位置的颜色(为RGB模式),右下角则显示鼠标当前位置的精确定位。
(8)颜色面板
选择“窗口”→“颜色”命令或按【Shift+F9】键,可以打开颜色面板,这个面板可以创建RGB、HSB或十六进制代码的颜色,并可以保存到样本面板中。颜色面板还可以将颜色指派给笔触或填充。
(9)样本面板
选择“窗口”→“样本”命令或按【Ctrl+F9】键,可以打开样本面板,这个面板帮助用户从当前的调色板中组织、加载、保存和删除单独的颜色。
(10)场景面板
选择“窗口”→“其它面板”→“场景”命令或按【Shift+F2】键,可以打开场景面板,这个面板为用户提供了在场景之间切换、重命名场景、添加场景和删除场景等功能。
(11)库面板
选择“窗口”→“库”命令或按【Ctrl+L】键,可以打开库面板,这个面板为用户存储Flash影片所创建的元件或影片所要使用的元件的地方。不管是影片剪辑、图形元件还是按钮,库中都有。
(12)历史记录面板
选择“窗口”→“其它面板”→“历史记录”命令或按【Ctrl+F10】键,可以打开历史记录面板,面板中显示了当前操作文档自创建或打开以来曾经执行的操作。
(13)输出面板
选择“窗口”→“输出”命令或按【F2】键,可以打开输出面板,这个面板是一个非常不错的小工具,但无法与其它面板插接在一起,当用户导出Flash影片后,它将为用户提供有关所有场景的文件大小、对象、文字、元件和实例的数据。
8.使用标尺、辅助线和网格
(1)使用标尺
选择“视图”→“标尺”命令或按【Ctrl+Alt+Shift+R】键,打开标尺。如果要隐藏标尺,再执行一次上述同样命令即可。
(2)使用辅助线
如果显示了标尺,可以将水平和垂直辅助线从标尺拖动到舞台上。可以移动、锁定、隐藏和删除辅助线,也可以使对象贴紧至辅助线,更改辅助线颜色和贴紧容差。
选择“视图”→“网格”→“显示网格”命令或按【Ctrl+''】键(引号),打开网格。如果要隐藏网格,再执行一次上述同样命令即可。
- 思考:Flash CS5的文件是如何操作的?
任务二 Flash CS5文件基本操作
- 主要内容
新建文件
保存文件
关闭文件
打开文件
测试影片
一、文件相关操作
1.新建文件
制作Flash动画之前必须新建一个Flash文件,这也是制作动画的第一步,通常新建Flash文件有以下3种方法:
1)启动Flash CS5后,出现“开始页”界面,在“新建”栏中单击“Flash文件(ActionScript 3.0)”选项即可新建一个Flash文件。
2)单击“主工具栏”中的“新建”按钮,也即可创建一个Flash文件,如图1-5所示。
图1-5
3)选择“文件”→“新建”命令或按【Ctrl+N】键,打开如图1-23所示的“新建文档”对话框中选择“Flash文件(ActionScript 3.0)”选项,单击“确定”按钮即可。在“新建文档”对话框中单击“模板”标签,在其中选择相应的模板类型,这里选择“广告”下的“468×60(横幅)”,如图1-6所示,单击“确定”按钮即可新建一个基于模板的Flash文件。
图1-6
2.保存文件
对于制作过程中的Falsh文件,要不间断地进行保存,便于当软件或计算机出现异常时Flash文件的数据不丢失。制作完Flash文件,也应将其保存起来,便于以后使用。保存Flash文件常用有以下两种方法:
1)选择“文件”→“保存”命令或按【Ctrl+S】键即可。如果用户之前并未保存过此文档,那么将打开如图1-7所示的“另存为”对话框,选择保存的位置,为文档命名并选择保存类型后,单击“保存”按钮即可。
图1-7
2)单击“主工具栏”中的“保存”按钮即可。具体保存方法与“保存”命令相同。
F思考:在Flash CS5中,为什么选择的是“保存”命令,而弹出的是“另存为”对话框?
因为这是软件自身的设置,在Flash CS5软件中首次保存文档都显示“另存为”对话框,不是用户的失误操作。
3.关闭文件
当不需要使用当前的动画文件时,需要将其关闭,关闭Flash有“关闭当前文档”和“关闭软件”两方面。具体操作说明如下:
1)关闭当前文档
选择“文件”→“关闭”命令或按【Ctrl+W】键或单击文档窗口右上角的按钮将其关闭。如果此文档没有保存,将打开“Adobe Flash CS5”对话框让用户确认是否需要保存当前文档。
2)关闭软件
选择“文件”→“退出”命令或按【Ctrl+Q】键或单击软件窗口右上角的按钮将退出软件程序。如果此文档没有保存,将打开“Adobe Flash CS5”对话框让用户确认是否需要保存当前文档,用户可以根据情况单击相应的按钮。
4.打开文件
如果要编辑或查看一个已有的Flash文件,只需要打开此Flash文件即可。打开Flash文件常用有以下两种方法:
1)选择“文件”→“打开”命令或按【Ctrl+O】键,打开如图1-27所示的“打开”对话框,然后在“查找范围”下拉列表框中选择要打开的文档所在的位置,再在“文件名”下拉列表框中输入要打开文档的文件名,或直接在列表中选中要打开的文件图标,最后单击“打开”按钮即可。
2)单击“主工具栏”中的“打开”按钮,具体操作方法与“打开”命令相同。
5.测试影片
在Flash CS5动画制作过程或完成动画制作后,要对动画进行效果测试,这就是通常所说的发布动画。对于动画文件的测试,最简单的方法就是按【Ctrl+Enter】键或选择“控制”→“测试影片”命令,即可测试并浏览动画效果。
按【Ctrl+Enter】键或选择“控制”→“测试影片”命令后,除了测试动画文件的效果外,还将在保存源文件的目的文件夹下生成一个扩展名为.SWF的文件。
二、制作Flash动画的简单实例
1.Flash动画制作的一般过程
要制作出一个出色的Flash动画作品,应该用心把握每个环节,其制作过程大致可分为以下5个步骤。
1.策划主题
2.收集材料
3.创作动画
4.测试优化
5.发布动画
2.制作一个简单的Flash动画
本节通过一个网页片头的实例来了解Flash的动画制作过程。本实例利用Flash CS5制作动画的基本工具,制作出字符特殊的动画效果。一般动画制作过程中有设置舞台场景、导入素材、插入图层、使用工具箱、设置动画效果、预览和测试动画等步骤,要注意的是制作动画过程中不一定要完全遵循以上步骤。本实例涉及到一些新的知识将在后续章节中详细讲解。
任务三 Flash CS5动画制作原理
- 主要内容
动画制作原理
工作环境
制作流程
一、Flash CS5动画制作基本原理
- 动画原理
动画(Animating)在词典中的解释是“赋予生命”的意思,从这个意义上来讲它是一种手段,使得本来没有生命的的形象活动起来,它的应用范围广泛,除了作为电影的一种类型之外,还有在电影特技制作的动画、科学教育动画、介绍产品形象的广告动画、电子游戏动画、远程教育动画、网页动画等。
- Flash动画制作原理
Flash动画,就是让一系列的静态画面连续播放。连续的实现靠的是人的“视觉暂留(人观察某个景物时,光作用结束后,视觉形象仍保留一段时间的现象。视觉形象会停留大约十分之一秒的时间)”效应。
二、Flash CS5动画制作工作环境
- 舞台
就是工作区,最主要的可编辑区域。在这里可以直接绘图,或者导入外部图形文件进行安排编辑,再把各个独立的帧合成在一起,以生成电影作品。
- 时间轴窗口
用它可以调整电影的播放速度,并把不同的图形作品放在不同图层的相应帧里,以安排电影内容播放的顺序。
- 图层窗口
使用图层能够更好地对同一时间点的对象进行位置的调整。
- 绘图工具栏
放置了可供图形和文本编辑的各种工具,用这些工具可以绘图,选取,喷涂,修改以及编排文字,还有些工具可以改变查看工作区的方式。在选择了某一工具时,其所对应的修改器(Modifier)也会在工具条下面的位置出现,修改器的作用是改变相应工具对图形处理的效果。
- 标准工具栏
列出了大部分最常用的文件操作,打印,剪贴板,撤消和重做,修改器以及控制舞台放大比例的图标和选项,便于进行更为快捷的操作。
- 库窗口
用以存放可以重复使用的称为符号的元素。符号的类型包括有图片(Graphics),按钮(Button)和电影片断(Movie Clip)。其调用的快捷键为Ctrl-L。
- 控制器面板
控制电影的播放操作的工具集合,一般不大常用,处于隐藏状态。
三、Flash CS5动画制作操作过程演示
例1:使用工具制作一个“笑脸”或“哭脸”
矢量图形
矢量图形使用直线和曲线来描述图像,它是由一个个单独的点构成的,每一个点都有其各自的属性,如位置、颜色等。 如图2-1
图2-1
位图
位图使用像素点来描述图像,并将它们安排在网格内。
编辑位图时,修改的是像素而不是直线和曲线。位图和分辨率有关,因为描述图像的数据被固定到特定大小的网格中。编辑位图可以改变其外观质量,尤其是调整位图的大小会使图形的边缘产生锯齿,这是因为像素被重新分配到网格中的缘故。 二者的区别如图2-2
图2-2
二、绘图模式
在Flash中有两种绘图模型,即“合并绘制”模式和“对象绘制”模式,为绘制图形提供了极大的灵活性。
- “合并绘制”模式
“合并绘制”模式时,重叠绘制图形时,会自动进行合并。如果选择同一个图层中的图形与另一个图形合并,移动它则会永久改变其下方的图形。
当你所绘制的线条穿过别的线条或图形时,它会象刀一样把其他的线条或图形切割成不同的部分。同时,线条本身也会被其他线条和图形分成若干部分。
- “对象绘制”模式
“对象绘制”模式允许将图形绘制成独立的对象,且在叠加时不会自动合并。分离或重排重叠图形时,也不会改变它们的外形。Falsh CS4将每个图形创建为独立的对象,可以分别进行处理。
使用“对象绘制”模式绘制图形,只需选择一个支持“对象绘制”模式的绘图工具,如线条工具、钢笔工具、椭圆工具、矩形工具、多角星形工具、铅笔工具和刷子工具,然后单击“工具箱”中“选项”下的“对象绘制”按钮或按“J”键,就可以从“合并绘制”模式切换到“对象绘制”模式。
- 注意:当选择使用【对象绘制】模式创建的图形时,Flash CS5会在图形上添加矩形边框。
使用【选择】工具 移动对象,只需单击边框然后拖曳图形到舞台上的任意位置即可。
三、选择工具
- 选择工具
主要功能是选择对象,对对象进行变形等。对象被选中后,选中部分会填充小的亮点。
基本操作有:选取单一对象;选取多个对象;选取填充区和轮廓钱;选取连续线条;选取对象的某一区域;取消选择对象;移动对象;修改形状
- 部分选取工具
主要用于调整线条上的节点,改变线条的形状。部分选取工具没有选项。
基本操作有:删除节点;移动节点;角点转换为曲线点;调节曲率
- 套索工具
主要作用也是选择物体。与选择工具不同的是,套索工具可以用来选取任何形状范围的对象,而选择工具只能拖出矩形的选取范围,因此它的功能更强一些。
四、绘图工具
Flash CS5常用绘图工具包括:线条工具、铅笔工具、钢笔工具、椭圆工具、矩形工具、刷子工具、橡皮擦工具等。
任务二 Flash CS5绘图常用工具
- 主要内容
绘图工具
修饰工具
编辑工具
一、绘图工具
- 线条工具
- 在Flash中,绘制直线的工具有多种,线条工具是其中最简单的工具,可以直接绘制所需直线。
- 线条工具用来绘制矢量线条。
- 线条工具的使用方法就是在舞台中确认一个起点后按下鼠标,然后拖动鼠标到结束点松开鼠标就可以了。
- 注意:拖动鼠标时,按住【Shift】键可以限制绘制以45°的倍数的线条。
【例2.1】利用线条工具绘制一条“红色”、粗细为“5”、宽高度为“100 150”、位置在“120 150”的点直线。
- 钢笔工具
- 利用钢笔工具可以绘制各种线条和任意形状的图形,也可作为选取工具使用。
- 钢笔工具的主要功能有画直线、画曲线、曲线点转换为角点、添加节点、删除节点。
【例2.2】利用钢笔工具绘制一片树叶,效果如图2-3所示。
图2-3
- 铅笔工具
- 使用铅笔工具可以随意地绘制线条和形状,就象在纸上用真正的铅笔绘图一样,但Flash CS5会根据所选择的绘图模式,对线条自动进行调整,使之更笔直或平滑。
- 选择工具栏中的铅笔工具,鼠标光标变为铅笔形状,在舞台中按住鼠标左键随意拖动即可绘制任意线条和形状。按住【Shift】键拖动鼠标可绘制垂直或水平方向的线条。
- 铅笔工具的选项栏中除“对象绘制”按钮外还有一个“铅笔模式”按钮,单击此按钮弹出三种绘图模式:伸直、平滑、墨水。
【例2.2】利用铅笔工具绘制一片树叶,效果如图2-4所示。
图2-4
- 椭圆工具
Flash提供了两种绘制椭圆的工具,椭圆工具和基本椭圆工具。
- 椭圆工具
使用椭圆工具可以绘制椭圆和圆。选择工具箱中的椭圆工具,在舞台中按住鼠标左键向任意方向拖动即可绘制一个椭圆。按住【Shift】键,同时按住鼠标左键拖动可绘制一个圆。
- 基本椭圆工具
基本椭圆工具也称为图元椭圆工具,使用基本椭圆工具可以绘制图元椭圆。基本椭圆工具操作方法与椭圆工具相同。
- 注意:基本椭圆工具的选项区域只有“贴紧至对象”按钮。而“属性”面板与椭圆工具的“属 性”面板相同。
- 所画出的椭圆分为两部分:轮廓线与填充色块。
- 通过设置笔触颜色和填充色,能画出实心椭圆,空心椭圆和实心无边框椭圆。
- 椭圆工具选项栏中只有“对象绘制”和“贴紧至对象”两个按钮。
【例2.2】利用椭圆工具绘制餐盘,效果如图2-6所示。
图2-6
- 矩形工具
矩形工具是一个工具组,包括矩形工具和多角星形工具,通过单击右下角的黑色三角进行切换。矩形工具与椭圆工具用法相似,注意矩形圆角的设置。
- 矩形工具
选择矩形工具,在舞台中按住鼠标左键向任意方向拖动即可绘制一个矩形。按住【Shift】键,同时按住鼠标左键拖动可绘制一个正方形。
- .基本矩形工具
基本矩形工具也称为图元矩形工具,使用基本矩形工具可以绘制图元矩形。基本矩形工具操作方法与矩形工具相同。
- 注意:若要在使用基本矩形工具拖动时更改角半径,请按向上箭头键或向下箭头键。当圆角达到所需圆度时,松开鼠标键即可。
【例2.3】绘制如图2-7树叶,利用例2.1中的树叶组合成一棵树 。
- 多角星形工具
使用多角星形工具,在舞台上按住鼠标左键向任意方向拖动即可绘制一个多边形或星形。
多角星形工具“属性”面板与线条工具的“属性”面板相比多了“选项”按钮,如图2-8所示。
图2-8
在此对话框中设置“样式”为“多边形”或“星形”,设置“边数”一般介于3~32之间的数值,设置“星形顶点大小”一般介于0~1之间的数值以指定星形顶点的深度,此数值越接近0,创建的顶点就越深(如针)。如果是绘制多边形,应保持此设置默认(也就是数值为0.50),它不会影响多边形的形状。
【例2.4】绘制如下图2-9所示的星星和五角星。
图2-9
- 刷子工具
- 刷子工具就像画刷一样可以在舞台中绘制不同颜色的图形,也可以为各种图形对象着色。
- 刷子工具的选项栏有五个选项:“对象绘制”刷子的颜色由填充色设置。、“刷子模式”、“刷子大小”、“刷子形状”和“锁定填充”。
- 刷子工具能绘制出刷子般的笔触,就像在涂色一样。它可以创建特殊效果,包括书法效果。可以使用“刷子工具”功能键选择刷子大小和形状。
【例2.3】绘制图2-10图形,利用钢笔工具绘制。
图2-10
- 橡皮擦工具
- 橡皮擦工具就像日常生活中使用的橡皮擦一样,用来擦除图形的线条和填充区。
- 橡皮擦工具的选项栏有三个选项:“橡皮擦模式”,“橡皮擦形状”和“水龙头”。
二、修饰图形工具
- 墨水瓶工具
墨水瓶工具用于更改线条的颜色、线宽和样式等属性,线条的颜色可以使用纯色、渐变色以及位图图像,
- 颜料桶工具
与墨水瓶工具相对应,颜料桶工具的功能是更改填充区域的颜色。它可以填充封闭区域或不完全封闭区域,填充时可以使用纯色、渐变色以及位图图像。
- 吸管工具
吸管工具用于拾取填充或线条的颜色值,选择吸管工具后,鼠标图标变成一个吸管,用吸管单击对象的任意位置,可获得此位置的颜色值及其它属性。
- 任意变形工具
使用任意变形工具可以对图形做出各种各样的变形,制作各种Flash特效。选择任意变形工具后,在选项栏中有四个选项按钮
自动变形工具一共可以做出五种变形处理:旋转、倾斜、缩放、扭曲和封套。其中旋转、倾斜、缩放对所有的对象都有效,而扭曲和封套只对形状对象有效,对组对象、符号和位图都不起作用。
三、查看工具
- 手形工具
使用手形工具可以移动舞台。
- 缩放工具
使用缩放工具可以缩放舞台。
四、相关工具列表
图标 |
说明 |
具体描述 |
图2-11
如果需要绘制的图形和已有图形相同,可以将已有图形进行复制。在Flash中,复制图形的方法有如下3种: (1)选择要复制的对象,选择“编辑”→“复制”命令或按【Ctrl+C】键复制,再选择“编辑”→“粘贴到中心位置”命令或按【Ctrl+V】键粘贴即可,若选择“编辑”→“粘贴到当前位置”命令或按【Ctrl+Shift+V】键可以将对象粘贴到原位置。 (2)用选择工具选择对象后,按住【Ctrl】键不放并拖动鼠标进行复制。 (3)用任意变形工具选择对象后,按住【Alt】键不放并拖动鼠标进行复制。
删除对象可以将其从文件中删除。删除舞台上的实例不会从库中删除元件。选中要删除的对象后,按【Delete】键或按【BackSpace】键或选择“编辑”→“清除”命令或选择“编辑”→“剪切”命令,还可以在该对象上单击鼠标右键,在弹出的快捷菜单中选择“剪切”命令,即可将对象删除。
在图层内,Flash CS5会根据对象的创建顺序层叠对象,将最新创建的对象放在最上面。对象的层叠顺序决定了它们在层叠时出现的顺序。使用图层操作和菜单命令可以在任何时候更改对象的层叠顺序。 三、变形与排列对象 在Flash CS5中,可以使用选择工具、部分选取工具和任意变形工具来变形对象,通过些工具来编辑图形,可以使图形达到理想的变形效果。在制作Flash动画时,如果创建了多个图形对象,并且要把这些图形对象按相对的位置排列在一起,可以使用Flash CS5提供的辅助线和“对齐”面板来排列对象。
部分选取工具常常与钢笔工具配合使用。它能象选择工具一样选择并移动对象,还能编辑普通线条和图像的轮廓线条,通常用来编辑曲线上锚点。该工具的“属性”面板和“选项”区域无相应的内容。
在Flash CS5中,使用任意变形工具是最常用的方法。根据所选的元素,可以任意变形、旋转、倾斜、缩放和扭曲该元素。 任意变形工具是一个功能强大的编辑工具,利用它可以对对象进行4种变形设置,分别是旋转与倾斜、缩放、扭曲和封套操作,制作出特殊的效果。
在移动对象时,对象的边缘会出现水平或垂直的虚线,该虚线自动与另一个对象的边缘对齐,便于确定对象的位置,这种虚线就是辅助线。移动对象时会出现辅助线。
除了用辅助线功能来对齐对象外,还可以用“对齐”面板来对齐对象。 四、群组与打散对象
群组又叫组合,是将多个元素组合为一个对象来处理。例如,创建了一幅绘画后(如树或花),可以将该绘画的元素组合成一组,这样就可以将该绘画当成一个整体来选择和移动。当选择某个组时,“属性”面板会显示该组的x和y坐标及其像素尺寸。 群组对象的方法是先用选择工具选择需要群组的多个对象,然后选择“修改”→“组合”命令或按【Ctrl+G】键,即可将多个对象组合成一个整体。群组后这几个对象就变为一个对象,在群组对象外围有一个蓝色边框。 选择“修改”→“取消组合”命令或按【Ctrl+Shift+G】键,可以取消组合。
打散又叫分离,是指将位图、文字或群组后的图形打散成一个一个的像素点,以便对其中的一部分进行编辑。 打散位图会将图像中的像素分散到离散的区域中,可以分别选中这些区域并进行修改。 在选择位图过程中,用选择工具框选位图时,会发现不能选中其中的一部分,只能用鼠标单击选中整个位图,位图四周会出现灰色边框,此时选择“修改”→“分离”命令或按【Ctrl+B】键即可打散位图,再用选择工具框选位图的一部分,会发现这部分出现许多像素点,这时就可以对这部分进行编辑了。 五、
|
||
使用专用测试窗口测试影片操作方法: (3)、“HTML”选项卡 打开“HTML”选项卡,在此可以设置发布网页格式后的相关属性,如影片在浏览器窗口中出现的位置、背景色、电影尺寸等。。 在【发布设置】对话框中,设置动画的发布格式后,可以对发布的动画格式进行预览。其具体操作如下: (1)选择”文件/发布预览”命令,将弹出其子菜单。 (2)在该菜单中选择一种要预览的文件格式,即可在动画预览界面中看到该动画发布后的效果。 对动画进行了测试、优化、导出和发布设置后,就可以将动画上传到网上了。 在“发布设置”对话框中分别对选定的文件格式进行具体设置后,单击 按钮即可完成动画的发布,并在Flash源文件所在位置生成一个网页格式的文件。选择该文件,然后单击鼠标右键,在弹出的快捷菜单中选择“打开”命令即可打开发布的文件,动画发布后的文件可以在IE浏览器中观看。 本次上机练习将把名为“花飘落”的动画发布到网上,发布预览效果。
在项目中,讲解了测试动画、优化动画、导出动画、发布动画的相关知识,其中包括以下几个方面的内容: (1)选择“视图”→“数据流图表”命令或“帧数图表”命令测试动画。 (2)学习优化动画、优化动画元素、优化文字的操作方法。 (3)掌握导出图像文件、导出声音文件、导出影片文件的操作方法。 (4)了解发布设置、发布flash影片、发布html网页、发布gif图像、发布JPEG图像的选项设置。 通过对项目内容的学习,读学生可以掌握到测试影片和优化作品的方法,同时还学习到发布影片和其他文件类型的设置方法。
项目十 综合实例 Flash动画常运用于搞笑动画、游戏、广告、MTV、网页、多媒体课件等多个领域,而本项目将以3个综合动画为例,来熟练掌握用Flash制作动画的方法、流程和技术要点。
了解Flash动画的制作方法和流程 掌握Flash动画制作的技术要点
Flash各案例的技术要点 Flash作品的制作步骤
Flash动画的制作方法和流程
跳动的小球 鼠标跟随效果 生日贺卡 任务一 用Flash制作跳动的小球 制作一个简单的“小球运动”实例,添加按钮,控制小球的跳动。
启动Flash CS5,创建一个新空白文档。
图10-2-1
图10-2-2 2、进入元件编辑窗口,执行【文件】菜单→【导入】→【导入到舞台】命令,找到蝴蝶飞的GIF图片选中,单击“打开”按钮,图片即导入,我们发现时间轴上已有多帧。如图10-2-3所示。
图10-2-4
图10-2-5 1、执行【插入】菜单→【新建元件】命令,打开“创建元件”对话框,名称框中输入“蝴蝶飞隐”,“行为”选择“影片剪辑”,单击“确定”,进入元件编辑窗口。 打开库窗口,从库中把“按钮”元件拖动到元件编辑工作区,与工作区中的“+”号对齐,并将此层命名为“圆形”,并将此层延伸到15帧。 2、单击时间轴上“添加图层”按钮,添加新图层,并命名为“蝴蝶”。 3、选取“蝴蝶”层第2帧,插入关键帧,将“蝴蝶飞“元件,从库中拖到工作区,并且调整“蝴蝶”元件大小,且与“圆形”按钮重合。 图10-2-6
单击“圆形“按钮,添加对象脚本:图10-2-8 on(rollover)﹛gotoAndplay(2)﹜
单击“蝴蝶”层的第一帧,添加帧脚本: stop( )
单击“场景1”回到场景,单击时间轴上“添加图层”按钮,添加新图层,并命名为“蝴蝶飞隐”。在此图层将库中的“蝴蝶飞隐”影片剪辑,拖到舞台上,一个挨一个的紧密排在一起,直到布满整个舞台。如图10-2-9所示。
六、按【Ctrl】+【Enter】键测试影片,并保存文件。
如果使蝴蝶飞向远方,越来越小,并渐渐隐去,你如何修改此动画?
任务三 用Flash制作生日贺卡 制作生日贺卡动画。共分五个场景。 片头:点明主题,标出制作者 主体(3个场景):制作生日贺卡 片尾:祝词
一、制作场景1。 1、修改文档属性,设置背景色为黑色。 打开【修改】菜单→【文档】,在“文档属性”对话框中设置背景颜色为“黑色”,单击【确定】 2、导入背景图片:执行【文件】菜单→【导入】→【导入到舞台】命令项,找到图片文件,单击【打开】,图片导入到舞台,调整图片位置、大小,在舞台右侧留出一块,准备写字。延伸此层到100帧,重命名此图层为“背景”,锁定此层。 3、单击时间轴上的“插入图层”按钮,新建一个图层,命名为“文字”。利用文字工具A,输入两文本框,右侧为“朋友”:华文行楷,70磅,红色,加粗,左侧为:“记得今天是什么日子吗?”:华文行楷,40磅,红色,加粗,注意把文本框变窄,就会成竖排文字,单击“选择工具”,按下【shift】键,同时单击两文本框,选中两文本框,执行【修改】菜单→【转换为元件】命令。“名称”栏,输入“文字”“行为”选择“影片剪辑”,单击【确定】,文字周围出现蓝线,说明转换成了元件,双击此元件,进入元件编辑界面,此时背景图片为灰色,在元件编辑时间轴上把图层1延伸到100帧,插入新图层,命名为“遮罩”,单击“矩形”工具,笔触颜色选择无,在工作区拖动出一矩形,把“朋友”两字正好盖住,在40帧处,插入关键帧,选中第1帧,利用任意变形工具,把矩形变形成一个扁矩形,在“朋友”字的上方,不能遮住文字,选中第一帧,打开“属性”面板,“补间”栏,选择“形状”。如图10-3-1
右击图层名称,在快捷菜单中选择“遮罩层”。如图10-3-2所示。
图10-3-2 4、修改“文字”元件。 新建小狗元件:执行【插入】菜单→【新建元件】,名称框输入“小狗”,行为选“影片剪辑”,单击确定,进入元件编辑区,执行【文件】菜单→【导入】→【导入到舞台】打开对话框,把小狗.GIF图片,导入到舞台。如图10-3-3
图10-3-4 单击“场景”标签,回到场景,插入一个新图层,命名为“按钮“,然后,执行【窗口】菜单→【其它面板】→【公用库】→【按钮】,在场景右侧面板中出现【库-按钮】面板,展开此面板打开【Playback】项,找到【gel Right】按钮如图10-3-5所示,把它拖到场景的左下角,适当调整大小,单击选中此按钮,打开“动作-按钮”面板添加如下命令: on(release){gotoAnd play(“场景2”,1)} 请注意引号和逗号均用英文半角字符, 单击第一帧,添加“stop()”命令。
二、制作场景2 执行【插入】菜单→【场景】,进入新场景编辑区。 1、制作几个元件 执行【插入】→【新建元件】命令,打开“新建元件”对话框,“名称”输入“小精灵”, “确定”,进入文件编辑窗口,导入小精灵.GIF 图片,执行【文件】→【导入】→【导入到舞台】,打开导入时对话框,找到“小精灵”图片,单击【打开】。图10-3-6
同样利用“女孩.gif”图片,制作“跳舞”影片剪辑元件。 利用“唱歌.gif”图片制作“唱歌”影片剪辑元件。 利用“一桌饭菜.jpg”图片制作“饭菜”图形元件。
利用“生日蛋糕.jpg”图片制作“生日蛋糕”图形元件。如图10-3-6 利用“吹蜡烛.jpg”图片制作“吹蜡烛”图形元件。 插入新图层,命名为“文字”。执行【插入】→【新建元件】,名称框输入“文字2”,“行为”选择“影片剪辑”,单击【确定】,进入元件编辑区。单击文本工具“A”,在工具区输入:“今天是你的生日”,设置成隶书、40磅、红色、加粗,在40帧插入帧(F5键),插入新图层,命名为:“遮罩”,利用矩形工具,在文字左侧画一窄矩形、高度比文字略高,在40帧插入关键帧,利用“任意变形工具”,使矩形完全覆盖住文字,单击第一帧,打开“属性”面板,补间栏选择“形状”。右击图层名称,从快捷菜单中选择“遮罩层”命令。 单击场景标签,回到场景,把刚创建的“文字2”元件拖动到“女孩”头部。 插入新图层,命名为“脚本”。在第一帧添加脚本:stop()
on(release){gotoAnd play(“场景3”,1)} 请注意引号和逗号均用英文半角字符。 图10-3-7 三、制作场景3 执行【插入】菜单→【场景】,进入新场景编辑区。 重命名图层1为“图片”,把库中的“饭菜”,拖到舞台中部,缩小图片,利用“属性”面板,颜色的Alpha值设为10% ,在50帧处插入关键帧,并放大图片,Alpha值设为100%。 插入新图层,重命名为“文字”,在舞台右侧,插入竖排文字:“给你准备了一桌酒席”。 插入新图层,重命名为“遮罩”,在文字正上方,用矩形工具画一个矩形,在50帧处插入关键帧,利用“任意变形工具”,使矩形完全覆盖住文字,单击第一帧,打开“属性”面板,补间栏选择“形状”。右击图层名称,从快捷菜单中选择“遮罩层”命令。如图10-3-8所示:
图10-3-8 在“图片”图层51帧处插入空白关键帧,把库中的“生日蛋糕”元件拖动到舞台外左侧,利用“任意变形工具”缩小图片,在100帧处插入关键帧,放大图片至整个舞台。 在“文字”图层51帧处插入空白关键帧,利用文本工具输入一横排文字:“送上一盒蛋糕,送上一份祝福”,设置成隶书、30磅、绿色、加粗。在100帧处插入帧。 在“遮罩” 图层51帧处插入空白关键帧,在文字左方,用矩形工具画一个矩形,在100帧处插入关键帧,利用“任意变形工具”,使矩形完全覆盖住文字,单击第51帧,打开“属性”面板,补间栏选择“形状”。
图10-3-9 制作“生日快乐”元件:执行【插入】→【新建元件】命令,打开“新建元件”对话框,“名称”输入“生日快乐”,行为选“影片剪辑”,单击确定,进入元件编辑区,新建三个层共四个层,由下到上分别命名为:“生”、“日”、“快”、“乐”;分别在1、3、5、7帧插入关键帧,用 “文本工具”分别输入“生”、“日”、“快”、“乐”,各层分别在17、25帧插入关键帧,调整各层各关键帧文字位置,使每个字上下跳动。分别在起始帧和17帧设置“动作”补间。如图10-3-10所示。
回到场景,在“文字”图层101帧处插入空白关键帧,把库中的刚制作“生日快乐”元件拖到舞台的右侧中部,调整位置大小。 导入声音“祝你生日快乐”(同导入图片文件),打开“属性”面板,在“声音”框选中刚导入的声音文件“祝你生日快乐”,“同步”框选择“事件”、“循环”。
图10-3-11 四、制作片头——场景4 1、打开【插入】菜单→【场景】,进入新场景编辑区,重命名图层为“文字”,单击工具栏文本工具A,在舞台中部单击,输入“生日快乐”,单击箭头工具,退出编辑状态,打开“属性”面板,文本栏一定为“静态文本”,选择“颜色”为红色,字体为“华文行楷”字号为“72磅”,然后,鼠标拖动文字到舞台中部合适位置。在此层60 帧处插入“帧”。 2、单击时间轴上的“插入图层”按钮,插入新图层,并命名为“遮罩”,单击第一帧,选择矩形工具,设笔触颜色为“无”。在“生日快乐”左边开始,画一矩形,使之正好完全遮住文字为准,单击任意变形工具,在60帧插入“关键帧”(可用F6键),单击第一帧,利用任意变形工具,把矩行缩到文字的左边,注意不能遮住文字。 选中此图层第一帧,打开属性面板,“补间”栏选择“形状”。
图10-3-12 3、 单击时间轴上“插入图层”按钮,命名此图层为“作者”,在60帧插入关键帧,在舞台下方插入静态文本框,输入文字“制作者:XXX”,XXX是自己姓名,(具体过程参照文字层制作),设置文字颜色、大小,选中“制作者:XXX”,打开【修改】菜单→【转化为元件】,打开“转化为元件”对话框,名称栏输入“作者”,行为选择“图形”,单击【确定】,在100帧处插入“关键帧”,再次单击第60帧,打开属性面板,单击“制作者”,从“颜色”框中选择Alpha,设置Alpha值为10%,单击第60帧,在属性面板“补间”栏,选择“动作”单击,制作出“作者”颜色由淡变深到完全显示的过程。把下面两层延伸到100帧。 4、 单击时间轴“插入图层”按钮,插入新图层,双击图层名称,输入“按钮”,命名此图层。 执行【插入】菜单→【新建元件】命令项,制作出一个“play”按钮(过程略) 回到场景,打开库面板,把“play”按钮拖到舞台左下方,调整大小、位置。单击此按钮,打开动作面板,添加如下命令: on(release){play()} 在此层的100帧处插入关键帧,打开动作面板,添加命令: stop()//在此帧处停止播放动画片
图10-3-13 五、制作场景5——片尾 1、执行【插入】菜单→【场景】命令,进入场景编辑区. 2、双击图层名称修改为“文字”,在工作区中输入文字: “送你一份祝福: 开心每一秒, 快乐每一天, 幸福每一年, 健康到永远! 送你一件礼物, 我自做的外套: 前面是平安, 后面是幸福, 吉祥是领子, 如意是袖子, 快乐是扣子, 口袋里满是温暖, 穿上吧, 让它相伴你的每一天! 生日快乐” 在200帧处插入关键帧,把文本移到舞台上方。 3、单击时间轴“插入图层”按钮,插入新图层,双击图层名称,输入“遮罩”,命名此图层。在舞台中部画一个大椭圆,宽度大于文本框宽度。右击图层名称,在打开的快捷菜单,单击“遮罩层”命令,把此层设为遮罩层。 4、单击时间轴“插入图层”按钮,插入新图层,双击图层名称,输入“生日快乐”,重命名此图层。打开库面板,把“生日快乐”元件拖到椭圆上方。按【Ctrl】+【Alt】+【Enter】组合键,测试本场景,回到文档编辑窗口,调整各对象位置,直到满意为止。
图10-3-14 最后,在200帧添加脚本:stop()。场景5如图10-3-15所示:
六、调整场景顺序: 执行【窗口】菜单→【设计面板】→【场景】命令项,打开如下对话框:如图10-3-16
图10-3-16 利用此面板可进行场景的排序、复制、添加、删除操作。最下面三个按钮从左到右分别是“复制、添加、删除”场景按钮,影片的播放是按场景的前后顺序播放的,我们想先播放“场景4”即片头,就应把“场景4”即片头拖到场景1前。
充分发挥你的想象,制作一贺卡
|