Flash CS5 动画制作项目化教程 () 采用流式播放技术, 拥有强大的网络传播能力 Flash 的影片文件采用流式下载, 即它的影片文件可以一边下载一边播放, 既节省空间又可以达到流畅的播放效果 () 交互性强, 能更好地满足用户的需要运用 Flash 内置的动作脚本, 不仅可以制作眩目的效

Size: px

Start display at page:

Download "Flash CS5 动画制作项目化教程 () 采用流式播放技术, 拥有强大的网络传播能力 Flash 的影片文件采用流式下载, 即它的影片文件可以一边下载一边播放, 既节省空间又可以达到流畅的播放效果 () 交互性强, 能更好地满足用户的需要运用 Flash 内置的动作脚本, 不仅可以制作眩目的效"

害宓
5 years ago
Views:

1 第章 Flash 项目化总览. Flash 的用途简介 Flash CS5 是 Adobe 公司最新推出的 Flash 动画制作软件, 它相比之前的版本在功能上有很多有效的改进及拓展, 深受用户青睐 Flash 动画是一种以 Web 应用为主的二维动画形式, 采用矢量技术和流式播放技术等手段, 生成的文件小质量高, 便于在网上发布和浏览因此, 它得到了网络界的广泛认可, 并使它在网页设计中占有一席之地, 成为网上最为流行的多媒体软件.Flash CS5 的功能 () 绘图功能 Flash CS5 可以完成图形绘制特殊字形处理等方面的工作 () 动画功能 Flash CS5 提供的动画工具可以制作出漂亮的动画 () 编程功能制作 Flash 交互式动画 Flash CS5 提供了几百个关键词, 可完成复杂的行为制作这部分功能是相对独立的, 在工作中通常分开进行例如, 由美工人员完成绘图及部分多媒体的制作, 由编程人员完成互动行为的编写, 由制作人员进行最后的加工制作.Flash CS5 的特点 () 使用矢量图形计算机的图形显示方式有矢量图和位图两种在 Flash 软件上绘制的图形是矢量图与位图相比, 矢量图的最大优点在于, 经任意放大或缩小不会影响图形质量同时, 文件所占用的存储空间非常小 () 支持导入音频视频在 Flash 中可以使用 MP 等多种格式的音频素材, 还提供了功能强大的视频导入功能, 并支持从外部调用视频文件

2 Flash CS5 动画制作项目化教程 () 采用流式播放技术, 拥有强大的网络传播能力 Flash 的影片文件采用流式下载, 即它的影片文件可以一边下载一边播放, 既节省空间又可以达到流畅的播放效果 () 交互性强, 能更好地满足用户的需要运用 Flash 内置的动作脚本, 不仅可以制作眩目的效果, 还可以让动画浏览者参与互动通过其强大的交互功能, 不仅为网页设计和动画制作提供了无限的创作空间, 从商业的角度来说, 还可以制作一流的商业演出动画或广告, 使企业的产品发布得到比传统广告模式更好的效果. Flash 动画制作工作过程简介要用 Flash 动手制作动画, 必须知道 Flash 动画的制作原理和动画的制作过程简单地说动画的制作原理就是为物体的每一个部分制作变化的连续图形, 这些变化的连续图形在一段时间内的延续 ( 通过时间轴 ) 播放, 从而组成动态效果 ; 再将众多的动态的部件, 层叠 ( 通过图层 ) 的组合在一起形成完整的动态的场景在 Flash 进行动画制作时一般只需要起始的动作和终止的动作, 持续时间的中间动作由系统完成所以在制作动画时就必须具备三项基本条件 : () 物体的部件 ( 在 Flash 里面通常存储为元件 ); () 部件的起始状态, 部件的终止状态 ; () 持续时间以及持续时间的状态 ( 补间 ) Flash 动画的制作过程可以概括为 : 动画元件的准备基本动画 ( 影片剪辑 ) 制作舞台文档的整体制作根据舞台的需要制作引导和遮罩效果并添加文字动画为动画文件添加控制和交互语言, 丰富和增强动画效果. 动画我的季节项目简介我的季节是以展示四季风光为主题制作一个完整的动画影片动画影片包含 6 个场景, 分别为 : 首春夏秋冬游戏等场景 () 首场景展示了我的季节主题, 附带作者信息在首场景应用按钮选择进入不同的季节场景和游戏场景, 如图所示 () 春夏秋冬的四个场景分别为 : ) 春场景展示动感的春暖花开, 如图所示 ) 夏场景展示飞舞的昆虫世界, 如图所示 ) 秋场景展示金黄的收获画卷, 如图所示

3 Flash 项目化总览第章图首场景图春场景图夏场景

4 Flash CS5 动画制作项目化教程图秋场景 ) 冬场景展示雪花纷飞的纯净世界, 如图 5 所示图 5 冬场景 () 游戏场景为 : 可以用键盘方向键控制昆虫 8 个方向移动, 如图 6 所示

Flash 项目化总览第章图 6 游戏场景根据项目的需求, 本教材将项目分为九个工作过程完成, 其中工作过程一是进行项目所需素材元件的绘制, 完成瓢虫蜻蜓和向日葵花等元件绘制并保存到库 ; 工作过程二和工作过程三是完成瓢虫飞蜻蜓飞向日葵花开等的基本动作动画和影片剪辑制作 ; 工作过程四是开始进入到多场景的制作, 应用影片剪辑和引导动画等实现春季的春暖花开夏季的昆虫飞舞 ;

5 Flash 项目化总览第章图 6 游戏场景根据项目的需求, 本教材将项目分为九个工作过程完成, 其中工作过程一是进行项目所需素材元件的绘制, 完成瓢虫蜻蜓和向日葵花等元件绘制并保存到库 ; 工作过程二和工作过程三是完成瓢虫飞蜻蜓飞向日葵花开等的基本动作动画和影片剪辑制作 ; 工作过程四是开始进入到多场景的制作, 应用影片剪辑和引导动画等实现春季的春暖花开夏季的昆虫飞舞 ; 工作过程五是应用文字和预设动画突出场景的主题, 其中 : 首场景加入作者信息文字动画, 夏场景加入虫虫飞文字动画, 春场景加入花韵文字动画 ; 工作过程六是应用遮罩技术实现首场景的探照灯效果, 秋场景的卷轴画效果 ; 工作过程七是应用按钮和交互语言, 控制场景的播放 ; 工作过程八是为动画添加音乐效果 ; 工作过程九是应用交互语言, 制作昆虫移动游戏, 制作纷飞飘雪漂浮泡泡碰落叶子等丰富场景. Flash CS5 的操作界面. 欢迎界面第一次打开 Flash CS5 时, 会显示欢迎界面, 如图 7 所示从图中可以看出, 欢迎界面包含 5 个区域 : 从模板创建可直接创建模板文档, 在这里列出了创建 Flash 文档最常用的模板打开最近的项目在这里, 可以打开最近操作过的 Flash 文档新建新建文档, 在这里列出了许多 Flash 文件的类型扩展链接到 Flash Exchange 网站, 可以在其中下载助手应用程序扩展功能及相关信息 5 学习关于 Flash CS5 的一些学习资料, 可以单击进行查看学习 6 若要隐藏欢迎界面, 可以选中不再显示复选框 5

6 Flash CS5 动画制作项目化教程 5 6 图 7 Flash CS5 欢迎界面.Flash CS5 的操作界面在欢迎界面上单击新建区域中的 Flash 文件 (ActionScript.0), 即可创建最常用的 Flash CS5 文档, 并迅速打开 Flash CS5 的操作界面 Flash CS5 的工作区界面形式可以根据自己的设计或制作需要进行设置, 一般在菜单的上侧有设置工作区的面板, 如图 8 所示其中的基本功能工作界面, 如图 9 所示, 包括菜单栏工具箱时间轴面板舞台属性面板面板组库面板等部分图 8 风格设置菜单栏 : 提供各种命令集, 如文件菜单中提供了对文件操作的命令, 修改菜单中提供了对对象操作的命令等时间轴面板 : 是控制和描述 Flash 影片播放速度和播放时长的工具, 如设置帧和 6

Flash 项目化总览第章图层的顺序工具箱 : 提供基本绘图和文字工具等舞台 : 编辑和展示动画的场所舞台分前台和后台, 后台的内容只有编辑时才能看见, 播放时不可见 5 属性面板 : 可以显示当前工具元件帧等对象的属性和参数, 在属性面板中可对当前对象的一些属性和参数进行修改 6 常用面板组 :Flash CS5 包括多种面板, 这里提供了很多常用的模板, 如颜色

7 Flash 项目化总览第章图层的顺序工具箱 : 提供基本绘图和文字工具等舞台 : 编辑和展示动画的场所舞台分前台和后台, 后台的内容只有编辑时才能看见, 播放时不可见 5 属性面板 : 可以显示当前工具元件帧等对象的属性和参数, 在属性面板中可对当前对象的一些属性和参数进行修改 6 常用面板组 :Flash CS5 包括多种面板, 这里提供了很多常用的模板, 如颜色面板变形面板对齐面板预设面板等 7 库面板 : 库面板是最常使用的面板, 这里存储编辑好的部件和剪辑, 称为元件任何元件都可以重复使用图 9 基本功能工作界面.5 Flash CS5 的常用面板 Flash CS5 除了提供命令的集合菜单栏外, 很多操作方式需要用浮动面板完成这些浮动面板可以在窗口菜单查看状态, 可以按照自己的需要打开和关闭浮动面板其中最常用的浮动面板有工具箱面板时间轴面板属性面板颜色面板等 7

8 Flash CS5 动画制作项目化教程. 工具箱面板 Flash 工具箱中的工具可以用来选择对象绘图填色修改图形等工具箱面板如图 0 所示在工具箱面板上的工具, 如果右下角有一个黑色的小三角形, 代表其包含多个项目, 多个项目用下拉的形式列出工具箱可划分为 6 个部分, 其中 : () 用于对象选择的工具, 包括选择工具部分选取工具套索工具等 () 用于绘图和输入文字的工具, 包括文本工具形状线条铅笔刷子钢笔工具等 () 用于辅助绘图的工具, 包括变形工具颜料桶填充颜色笔触颜色滴管橡皮擦前背景颜色转换工具紧贴至对象工具等 () 查看的工具, 包括手形工具缩放工具等 (5) 特殊工具, 包括 Deco 工具 D 旋转工具骨骼工具等 (6) 其中的选项区域, 当某个工具需要有多项操作时会显示多项以便进行选择选择工具变形工具部分选取工具 D 旋转工具套索工具钢笔工具线条工具文本工具形状工具下拉三角铅笔工具刷子工具 Deco 工具骨骼工具颜料桶工具滴管工具橡皮擦工具手形工具缩放工具笔触颜色填充颜色前背景颜色转换紧贴至对象选项图 0 工具箱. 时间轴面板时间轴面板是 Flash 制作动画不可缺少的重要面板,Flash CS5 的时间轴面板, 如图所示, 左侧含有图层的区域为图层选项区域, 右侧为时间轴顺序时间轴上方的编号为帧编号, 下方有状态显示, 显示当前的帧数帧频率和播放时间时间轴面板可以包含多个图层和多个帧图层可以看做是透明的纸, 图层上有对象和动画时则显示动画, 没有的地方是透明的, 一个图层可以制作一个对象的动画, 多个图层叠加在一起形成复杂的立体场景 8

Flash 项目化总览第章时间轴是制作动画的主要依据,Flash 将动画分成一帧帧来播放, 时间轴面板则记录了动画

面板可以查看或更改对象的所有属性值例如一个矩形形状的属性面板如图所示, 包含形状位置大小颜色状态等.

9 Flash 项目化总览第章时间轴是制作动画的主要依据,Flash 将动画分成一帧帧来播放, 时间轴面板则记录了动画中各层各帧的播放顺序, 在时间轴面板中, 可以方便地操作帧和关键帧从二维角度看, 时间轴面板包含时间和深度帧序号图层区域帧状态播放时间帧频率当前帧图时间轴面板. 属性面板属性面板是操作对象内部参数的重要面板面板的内容是不固定的, 选择的对象不同, 所具有的属性也不同在属性面板可以查看或更改对象的所有属性值例如一个矩形形状的属性面板如图所示, 包含形状位置大小颜色状态等. 库面板库面板是制作动画必须用到的面板, 按快捷键 Ctrl+L 可以打开和关闭库面板, 如图所示库面板中存放着制作动画用到的图形影片剪辑按钮等元件, 这些元件可以重复使用, 也可以不使用元件在库中的存储可以是单独的元件, 也可以存放到文件夹中图属性面板图库面板 9

即某个对象由一个位置到另一个位置的动画本节用个小案例礼花绽放和飞舞的叶子初步体会两种动画的制作过程.6.

10 Flash CS5 动画制作项目化教程.6 初步认识动画制作过程 Flash 的基本动画形式分为两种一种是形状改变动画, 即由一个形状改变到另一个形状的动画另一种是动作动画, 即某个对象由一个位置到另一个位置的动画本节用个小案例礼花绽放和飞舞的叶子初步体会两种动画的制作过程.6. 制作礼花绽放动画形变动画操作步骤 : () 新建 Flash 文件启动 Flash CS5 系统, 选择 ActionScrtipt.0 选项, 如图所示图新建文件 () 设置工作区布局形式为传统, 如图 5 所示选择菜单栏右侧的工作区布局菜单, 打开布局菜单的下拉列表选择传统项, 即将工作区界面设置为传统模式图 5 设置传统工作界面 0

11 Flash 项目化总览第章说明 : 完成传统模式布局后, 界面如图 6 所示这个布局与基本功能的布局格式有一定的区别, 但是布局格式不影响功能操作作为普通动画的制作人员可以选择传统设计人员基本功能等模式选择什么模式可以根据个人的操作习惯而定首次设置后下次进入不需要再设置, 系统会自动保留上次的设置图 6 传统工作界面 () 创建礼花动画的第帧效果, 如图 7 所示选择工具箱中刷子工具项设置刷子工具的形状为点状设置点状的大小选择工具箱中设置填充颜色项 5 选择填充颜色为红色 6 用刷子在舞台的底部点一个点 5 6 图 7 礼花动画第帧 () 创建礼花动画最后一帧效果, 如图 8 所示

礼花动画最后一帧 (5) 创建礼花绽放动画效果, 如图 9 所示选择工具箱中选择工具项在图层的时间轴上 ~0 帧之间任意位置, 单击鼠标右键, 选择创建补间形状

12 Flash CS5 动画制作项目化教程在时间轴上, 选择第 0 帧, 单击鼠标右键在弹出的快捷菜单中选择插入空白关键帧 ( 快捷键是 F5) 选择工具箱中刷子工具项, 设置点状的大小更小些选择工具箱中设置填充颜色项, 选择不同颜色 5 在场景上部任意位置单击多个点状重复步骤, 再画更多不同颜色的点, 形成像礼花散开一样的图形 5 图 8 礼花动画最后一帧 (5) 创建礼花绽放动画效果, 如图 9 所示选择工具箱中选择工具项在图层的时间轴上 ~0 帧之间任意位置, 单击鼠标右键, 选择创建补间形状礼花绽放的动画制作完成的时间轴图 9 礼花绽放动画效果 (6) 预览礼花绽放的动画效果, 如图 0 所示保存文件 : 保存制作的礼花绽放文件, 如图所示.6. 制作飞舞的叶子动画动作动画. 制作叶子元件操作步骤 : () 新建 Flash 文件, 图略

13 Flash 项目化总览第章选择菜单栏中的控制测试场景选项 ( 可按快捷键 Ctrl+Enter) 在弹出的窗口中可以看到动画的播放效果图 0 预览礼花绽放效果选择菜单栏中的文件保存在弹出的另存为对话框中, 填写文件名为礼花绽放 ( 文件的默认扩展名为 :fla) 单击保存按钮, 保存完成图保存礼花绽放文件 () 将舞台比例尺放大到 00%, 以便在比例尺下绘制图形更加清晰, 如图所示选择绘图区 ( 舞台 ) 右上角的比例尺下拉按钮选择 00% 项即可将舞台的比例放大到 00% 图设置舞台比例尺 () 设置椭圆工具, 如图所示

14 Flash CS5 动画制作项目化教程选择工具箱中形状工具项选择形状工具项下的椭圆工具选择工具箱中设置边线颜色项单击色板 5 选择边线颜色为深绿色 6 选择工具箱中设置填充颜色项 7 单击色板 8 选择填充颜色为浅绿色图设置椭圆工具 () 绘制叶子图形, 如图所示用刚刚设置的椭圆工具在舞台绘制一个椭圆选择工具箱中部分选取工具项单击椭圆形状的边线, 椭圆的边线会出现一些正方形空心的点, 称为锚点鼠标移动到边线, 当鼠标标志的下方为空心时, 可拉动锚点, 拖拽出叶片的基本形状图绘制叶子图形

15 Flash 项目化总览第章 5 选择工具箱中铅笔工具项 6 铅笔工具的选项设置为平滑 7 在图形上绘制叶片上的叶脉, 完成叶子的绘制 (5) 旋转叶子图形, 如图 5 所示图绘制叶子图形 ( 续图 ) 用选择工具圈选叶子的全部图形选择工具箱中任意变形工具项叶子的四周出现可变形的方框用鼠标移动和旋转外框使叶子达到理想的形状 ( 旋转时鼠标需要移动到四角的边缘并且有旋转的标志 ) 图 5 旋转叶子图形 (6) 选择所绘制的叶子图形保存到库, 如图 6 所示选择绘制的叶子图形 ( 全选 ), 单击修改菜单选择转换为元件弹出转换为元件对话框输入元件名称为 :leaf 5 选择元件的类型为图形 6 单击确定按钮 ; 7 保存到库的图形图 6 叶子转化为图形元件 5

在当前层的时间轴上, 选择第 5 帧单击鼠标右键, 在弹出的快捷菜单中选择插入关键帧 ( 快捷键是 F6) 用

16 Flash CS5 动画制作项目化教程. 制作飞舞的叶子动画操作步骤 : () 将舞台比例尺还原到 00%, 图略 () 创建动画第帧效果, 如图 7 所示在第帧将叶子移到场景外侧 ( 后台的位置 ) 选择工具箱中任意变形工具项旋转和缩放叶子到理想大小及角度图 7 叶子动画第帧 () 创建动画第个关键帧效果, 如图 8 所示在当前层的时间轴上, 选择第 5 帧单击鼠标右键, 在弹出的快捷菜单中选择插入关键帧 ( 快捷键是 F6) 用选择工具将叶子移到舞台另一个位置 ( 底部 ) 再用变形工具旋转和缩放叶子到理想大小及角度图 8 叶子动画第个关键帧 () 创建动画最后一个关键帧效果, 如图 9 所示 (5) 创建动画补间, 如图 0 所示 6

17 Flash 项目化总览第章用选择工具在当前层的时间轴上, 选择第 50 帧 ; 使用键盘快捷键 F6, 插入关键帧将叶子移到舞台的第个位置 ( 右上方 ) 用任意变形工具旋转和缩放叶子到理想大小及角度图 9 叶子动画最后一个关键帧在时间轴的 ~5 帧之间任一帧, 单击鼠标右键, 选择创建传统补间选择属性面板补间旋转, 单击下拉列表, 选择逆时针将下拉列表右侧的数字改成 ( 这里表示旋转的圈数 ) 在时间轴的 5~50 帧之间创建传统补间 5 选择属性面板补间旋转, 单击下拉列表, 选择顺时针 ; 将下拉列表右侧的数字改成 ( 换一个方向旋转 ) 5 图 0 创建动画补间 7

18 Flash CS5 动画制作项目化教程测试和保存文件 : () 和上节礼花绽放的测试方法一样, 可以测试影片的播放效果 () 将文件保存为叶子.fla 8

Photoshop CS6 艺术设计案例教程 ( 第二版 ) 1.1 Photoshop 的应用领域 Photoshop,,, Photoshop Photoshop 的用途 Photoshop CIS ( ) ( ) 案例展现 ~ 1

Photoshop CS6 艺术设计案例教程 ( 第二版 ) 1.1 Photoshop 的应用领域 Photoshop,,, Photoshop Photoshop 的用途 Photoshop CIS ( ) ( ) 案例展现 ~ 1 Chapter ０１ＰｈｏｔｏｓｈｏｐＣＳ６的基本操作本章内容 1.1 Photoshop 的应用领域 1.6 控制面板的显示与隐藏 1.2 位图和矢量图的特性 1.7 新建打开与保存文件 1.3 像素和分辨率的关系 1.8 图像的缩放 1.4 色彩模式 1.9 屏幕显示模式 1.5 Photoshop CS6 界面 1.10 计算机图形图像常用的色彩模式 Photoshop CS6 艺术设计案例教程