动画制作与创意

1. 动画制作与创意 第1课 夏耘 http://jsjjx.usst.edu.cn

2. 主 要 内 容 验 1： 2： 3： 4： 5： 课程介绍 软件环境介绍 案例演示 DIY 课堂小结

3. 课程介绍 • 动画在当代艺术中的重要性是众所周知的， 本课程将通过动画制作环境（FlashCS4)，介绍动画制作核心技术，并通过实验使学生了解动画创意的方法，并将这些方法与动画制作技术有机融合，最终制作自己的作品（动画短片），在实践中培养学生创新能力是本课程的目标。

4. 课程介绍 • 课程教学具体安排如下：

5. 课程介绍 • 课程考核： • 平时：10% • 实验：20% • 作品：40% • 综合：30%

6. General Information • Instructor 夏耘 • Office: 601 图文信息中心（东）军工路580号 • 214 教学楼 基础学院 • Phone: 021-55275055 • Email: 1679352974@qq.com • QQ号：1679352974 • Office hours: 12:30pm-13:00pm 每周一,基础学院 15:00pm-16:00pm 每周三,基础学院 13:00pm-16:00pm 每周二，军工路 or by appointment

7. 1.1 认识Flash CS4 • 1.2 Flash CS4的安装 • 1.3 Flash CS4的创作环境 • 1.4 Flash CS4的文档操作

8. 1.1 认识Flash CS4 1.1.1 Flash 的发展及应用 1、Flash的发展 Flash是在1995年乔纳森·盖伊(Jonathan Gay)创造的“Future Splash Animator”版本的基础上发展起来的，也就是现在Flash的真正前身。随后Flash不断发展，增加了许多的新功能。 2、Flash的应用 Flash 的应用领域很广泛，主要包括以下方面： (1)广告宣传片：可以制作各类广告、宣传以及产品演示等。 (2)游戏制作:利用ActionScript语句编制程序，再配合Flash强大的交互功能来制作一些游戏，比如在线游戏等； (3)多媒体课件：制作教学课件或教学软件，现在已经被越来越多的教师和学生使用。 (4)网站建设：用Flash制作网页或开发网站。 (5)网络动画：由于Flash作品容易在网络传播，常用来制作网页动画、MTV或电子贺卡等。 (6)手机动画：Flash对矢量图、声音和视频等有良好的支持，因而用Flash制作手机动画目前非常流行。

9. 1.1.2 Flash CS4的新增功能 （1）全新 Adobe Creative Suite界面 （2）基于对象的动画 （3）动画编辑器 （4）动画预设 （5）3D 转换 （6）使用骨骼工具进行反向运动 （7）使用 Deco 工具进行装饰性绘画 （8）针对 Adobe AIR进行创作： （9）增强的元数据 (XMP) 支持 （10）H.264 支持 （11）其他的改进功能

10. 1.2 中文版Flash CS4的安装 1.2.1 安装Flash CS4的系统要求 由于安装Flash CS4的计算机配置要求要高于其他版本所需的配置要求，在安装Flash CS4应用程序之前，要注意该软件对计算机软、硬件系统的要求。 (1)Windows 环境下的配置要求建议如下： • Intel Pentium 4、Intel Centrino 以及更高频率的处理器 • Windows XP、Windows Vista以及更高版本的操作系统 • 1GB的内存 • 2GB的可用硬盘空间 • 分辨率1024×768像素（推荐1280×800像素），16位显卡以上 • DVD-ROM驱动器 • 需要QuickTime 7软件实现多媒体功能 • 宽带Internet连接实现在线服务 2014年10月14日星期二

11. (2)Macintosh 环境下的配置要求建议如下： • PowerPC G4或G5或multicore Intel处理器 • Macintosn OS X v10.4.8-10.5版本 • 1GB的内存 • 2GB的可用硬盘空间 • 分辨率1024×768像素（推荐1280×800像素），16位显卡以上 • DVD-ROM驱动器 • 需要QuickTime 7软件实现多媒体功能 • 宽带Internet连接实现在线服务 2014年10月14日星期二

12. 1.1.3 中文版Flash CS4的启动及退出 启动Flash CS4程序的方法有两种： （1）从“开始”菜单启动 （2）用桌面快捷方式快捷启动 2014年10月14日星期二

13. 1.3 Flash CS4的创作环境 • 1.3.1 欢迎屏幕 • 1.3.2 预设工作区 • 1.3.3 Flash CS4的工作界面 • 1.3.4 Flash 面板的管理 • 1.3.5 Flash CS4的环境设置

14. 1.3.1 欢迎屏幕 通常启动Flash CS4程序，或者关闭所有Flash文档时，都会自动弹出Adobe Flash CS4 Professional的欢迎屏幕，如图所示。

15. 1.3.2 预设工作区 Flash CS4 拥有有六种工作区，用户可以单击“工作区预设调板”，在弹出菜单中选择需要的工作区模式，默认的预设为“基本功能”工作区，如图所示。 1、预设工作区的类型 （1）“动画”工作区：此工作区中主要集中放置动画制作的相关面板，特别适合动画制作的爱好者。 （2）“传统”工作区：这是大家熟悉的之前Flash版本中所用的工作区样式。采用该种模式，可以方便习惯使用以前样式的用户。 （3）“调试”工作区：能够检查和测试动画或影片效果，调试脚本语句，对整个播放过程进行调整。

16. 1.3.2 预设工作区 （4）“设计人员”工作区：此工作区主要是针对专业的设计人员进行图形绘制和编辑等。 （5）“开发人员”工作区：对于开发大型项目或高级编程的开发人员而言，可以选择“开发人员”方便个人操作。 （6）“基本功能”工作区：是Flash CS4默认的预设工作区，具有Adobe化的界面风格，适合一般的Flash用户。 2、自定义工作区 用户可以根据个人的喜好和工作需要，来设计个性化的工作区。

17. 1.3.3 中文版Flash CS4的工作界面 这里主要介绍“基本功能”工作区的操作界面，它包括标题栏、菜单栏、时间轴、工具面板、文档选项卡、工作区和舞台、属性检查器和浮动面板组等，如图所示。 我们可以看到Flash CS4的工作界面与Premiere或After Effects的界面相似，更加Adobe风格化。全新的界面布局和人性化的设计，会让操作更加得心应手。

18. 1.3.4 Flash面板的管理 在Flash CS4中我们可以随意打开和移动面板，关闭面板组中不需要的子面板、将面板折叠图标，以及组合和拆分面板组等操作。 1、打开和关闭面板 2、关闭面板组中的子面板 3、切换面板 4、移动面板 5、组合和拆分面板组 6、将面板折叠为图标以及展开

19. 1.3.5 Flash CS4的环境设置 通过前面的介绍，用户全面的了解了Flash CS4的工作界面。为了更好地操作Flash CS4，我们可以对它的参数进行设置，设计自己个性化的操作环境。 1．首选参数设置 单击“编辑”→“首选参数…”命令（快捷键Ctrl+U），弹出“首选参数”对话框。直接选中对话框左侧的类别，然后在右侧就会出现相应的选项区，随时进行设置。

20. 1.3.5 Flash CS4的环境设置 2．快捷键设置 快捷键的使用可以方便用户的操作，系统提供了很多快捷键，并且允许用户自己设定快捷键。单击“编辑”→“快捷键…”，弹出“快捷键”对话框进行具体设置。

21. 1.3.5 Flash CS4的环境设置 3．自定义工具 单击“编辑”→“自定义工具面板…”命令，弹出“自定义工具”对话框。在对话框左边的“可用工具”栏中选择某个工具，通过单击“增加”或“删除”按钮可以添加或删除工具。单击“恢复默认值”按钮可以返回默认状态。

22. 1.4 Flash CS4的文档操作 • 1.4.1 Flash文档的基本操作 • 1.4.2 创建和管理Flash项目

23. 1.4.1 Flash文档的基本操作 Flash中的文档操作包括：创建新文档、打开指定的文档、保存编辑后文档、关闭文档以及设置文档属性等。 1、创建Flash文档 启动Flash CS4后，要新建一个Flash 文档，可以选择欢迎屏幕中的“新建” →“Flash文档”命令，或者单击“文件”→“新建”命令，弹出“新建文档”的对话框，在“常规”选项卡中选择“Flash文档”，单击“确定”按钮，即可新建一个文档。 2、打开Flash文档 单击“文件”→“打开”命令（快捷键Ctrl+O），弹出“打开”对话框，选择扩展名为fla的Flash文档，再单击“打开”按钮，就可以打开该程序并进行编辑、修改或调试。 3、设置文档属性 当文档创建或打开后，用户可根据需要对文档的属性进行设置或修改。单击“修改”→“文档”命令（快捷键Ctrl+J），弹出“文档属性”对话框，进行设置即可。

24. 4、保存Flash文档 （1）保存新文档 如果所需保存的文档是首次保存，单击“文件”→“保存”命令（快捷键Ctrl+S），在弹出的“另存为”对话框中指 定保存位置，在“文件名”的文本框中输入文件名称，并选择“保存类型”为Flash CS4 文档，默认扩展名为fla。最后 单击“保存”按钮。 （2）保存已经存在的文档 （3）压缩保存文档 （4）将文档保存为模板 5、关闭Flash文档 单击“文件”→“关闭”命令或者直接单击Flash文档名称标签右侧的“关闭”按钮，.弹出一个提示对话框，询问是否 对新文档或已经修改过的文档进行保存，用户可以根据实际情况选择所需的操作。如果文档在关闭之前已经保存 过，就可以直接关闭，不会出现提示对话框。

25. 1.4.2创建和管理Flash项目 Flash的项目可以将多个相关的文件组织在一起，用来创建复杂的应用程序，它包括任何Flash或其它文件类型。因而，用户可以利用Flash项目来管理某个项目中的多个文档。 1、创建项目 单击“窗口”→“其他面板”→“项目”命令，可以打开“项目”面板，如图1-4-7所示。下面我们通过一个操作实例，说明如何创建一个Flash项目。 操作：创建项目－产品宣传 2、管理项目 创建完项目之后，我们可以向项目添加新文件和文件夹。默认情况下，“项目”面板只显示 Flash 文档类型（FLA、SWF、SWC、AS、JSFL、ASC、MXML、TXT、XML）。 如果要在项目中新建文件夹，可以单击“项目”面板底部的“新建文件夹”按钮，弹出“创建文件夹”对话框，输入名称，然后单击“创建文件”按钮。 如果要在项目中创建文件，可以单击“新建文件”按钮，弹出“创建文件”对话框，输入文件名，选择文件类型（仅限文件）。如果选中“创建文件后打开”复选框可在 Flash 中打开新文件，最后单击“创建文件”按钮。 如果要创建ActionScript类，可以单击“创建类”按钮，弹出“创建类”对话框，输入类的名称，最后单击“创建类”按钮。 如果要删除文件或文件夹，可以选择不需要的文件或文件夹，单击“项目”面板底端的“删除”按钮即可。

26. 建立动画工作文档

27. 建立动画工作文档

28. 设置文档属性（舞台大小）

29. 设置文档属性（舞台大小）

30. 设置文档属性（舞台大小）

31. 设置文档属性（舞台大小）

32. 舞台网格便于定位

33. 舞台网格便于定位

34. 编辑网格的颜色、网格线间距

35. 编辑网格的颜色、网格线间距

36. 舞台工作区的辅助线

37. 舞台工作区的辅助线 （1）单击“视图”→“辅助线”→“显示辅助线”命令，再单击工具箱中的【选择工具】按钮，用鼠标从标尺栏向舞台工作区拖动，即可产生辅助线。再单击该命令，可取消辅助线。用鼠标拖动辅助线，可以调整辅助线的位置。 （2）单击“视图”→“辅助线”→“锁定辅助线”命令，即可将辅助线锁定，此时再无法用鼠标拖动改变辅助线的位置。 （3）单击“视图”→“辅助线”→“编辑辅助线”命令，会弹出“辅助线”对话框。利用该对话框，可以编辑辅助线的颜色，确定是否显示辅助线、是否对齐辅助线和是否锁定辅助线。 （4）单击“视图”→“辅助线”→“清除辅助线”命令，可清除辅助线。

38. 舞台工作区的辅助线 贴紧对象 （1）与网格贴紧：如果选中“网格”对话框中的“贴紧至网格”复选框，则以后在绘制、调整和移动对象时，可以使对象自动与网格线对齐。“网格”对话框内的“对齐精确度”下拉列表框中给出了“必须接近”、“一般”、“可以远离”和“总是贴紧”4个选项，表示贴紧网格的程度。 （2）与辅助线贴紧：在舞台工作区中创建了辅助线后，如果在“辅助线”对话框中选中“贴紧至辅助线”复选框，则以后在创建、调整和移动对象时，可以自动与辅助线对齐。 （3）贴紧精确度：下拉列表框中给出了“必须接近”、“一般”、“可以远离”3个选项，表示贴紧网格的程度。

39. 播放Flash动画的几种方法 播放与测试Flash动画，可执行“控制”菜单中的各命令或使用“控制器”面板。 （1）使用“控制器”面板播放：单击“窗口”→“工具栏”→“控制器”命令，可以调出“控制器”面板。单击该面板中的【播放】按钮，即可在舞台工作区中播放动画；单击【停止】按钮，可以使正在播放的动画停止播放；单击【后退】按钮，可以使播放头回到第1帧；单击【转到结尾】按钮，可以使播放头回到最后一帧；单击【后退一帧】按钮，可以使播放头后退一帧；单击【前进一帧】按钮，可使播放头前进一帧。 （2）单击“控制”→“播放”命令或按【Enter】键，即可在舞台窗口中播放该动画。对于有影片剪辑实例的动画，采用这种播放方式不能够播放影片剪辑实例。

40. 播放Flash动画的几种方法 （3）单击“控制”→“停止”命令或按【Enter】键，即可使舞台窗口中播放的动画停止播放。再单击“控制”→“播放”命令或按【Enter】键，又可以从暂停处继续播放。 （4）单击“控制”→“测试影片”命令或按【Ctrl+Enter】组合键，可在播放窗口内播放动画。单击播放窗口右上角的按钮，即可关闭播放窗口。这种方法可循环依次播放各场景。 （5）单击“控制”→“测试场景”命令，可循环播放当前场景的动画。

41. 导入图片

42. 导入图片

43. 显示库中图片

44. 显示库中图片

45. 库 （1）库的分类：库有两种，一个是用户库，也叫“库”面板，用来存放用户创建Flash动画中的元件；另一个是Flash 8系统提供的“公用库”，用来存放Flash 8系统提供的元件，根据存放元件的种类，“公用库”分为3种，一个是“按钮”库，第二个是“学习交互”库，第三个是“类”库。用户库和公用库存放元素（主要是元件）的方法是一样的。 单击“窗口”→“库”命令，可以调出“库”面板；单击“窗口”→“公用库”→“××”命令，可以调出相应的一种公用库的“库”面板。例如，单击“窗口”→“公用库”→“按钮”命令，可调出“库-按钮”面板。 （2）了解库中的元素：单击选中其中一个元素，即可在“库”面板上边的窗口（素材预览窗口）中看到元素的形状。要了解元件的动画效果和声音效果，可单击“库”面板上边窗口右上角的按钮。如果要暂停播放，可单击按钮。 （3）改变元素预览窗口的显示方式：将鼠标指针移至面板上边的显示窗口中，右击，弹出快捷菜单。利用该菜单中的命令可以改变素材面板预览窗口的显示方式。

46. 库 （4）“库”面板的两种显示方式：单击“库”面板右侧滚动条上边的按钮，可将“库”面板在水平方向扩展，以显示元件类型和制作日期等更多的元件信息。单击水平扩展的“库”面板中右侧滚动条上边的按钮，可使“库”面板在水平方向缩小。也可以用鼠标拖动“库”面板的边框来调整它的大小。 （5）“库”面板下边的窗口中列出了库中的所有元素的图标和名称等，可以看出不同的图标，表示不同的类型。该窗口中的按钮表示是一个文件夹，双击它可以打开该文件夹，在按钮的下边显示出该文件夹内元素的图标和名称等。再双击它，又可以关闭该文件夹。 （6）“库”面板下边一栏中按钮的作用如下。 【新建元件】按钮：单击该按钮可弹出“创建新元件”对话框。 【新建文件夹】按钮：单击该按钮可在“库”面板中创建一个新文件夹。 【属性】按钮：单击选中“库”面板中的一个元件，再单击它可弹出“元件属性”对话框，利用该对话框可以更改选中元件的属性。 【删除】按钮：单击该按钮，即可删除“库”面板中选中的元素。

47. 元件 制作动画时，会遇到某个对象在舞台中多处出现的情况。如果把每个对象都 分别制作，这样既费事又会增加动画文件空间的大小。为此，Flash设置了一个元件的“库”面板，用来存放各种元件。单击“窗口”→“库”命令，可以调出“库”面板。 常用的元件有3种，它们的特点如下。 （1）图形元件：它可以是矢量图形、图像、声音或动画等，通常用来制作电影中的静态图形，不具有交互性。声音元件是图形元件中的一种特殊元件，它有自己的图标 。

48. 元件 （2）影片剪辑元件：它是主影片中一段影片剪辑，用来制作独立于主影片时间轴的动画。它是一段动画可以包括图像、图形、文字、声音、一般动画、具有交互性控制的动画，甚至可以包括其他影片剪辑元件的案例。也可以把影片剪辑的实例放在按钮的时间轴中，从而实现动画按钮。为了实现交互性，单独的图像也可以做成影片剪辑。影片剪辑元件和图形元件均可以是一个动画。用影片剪辑元件创建的实例与图形元件创建的实例不同。影片剪辑实例只需要一个关键帧来播放动画，而图形实例必须出现在足够的帧中。

49. 元件 （3）按钮元件：可以在影片中创建按钮元件的实例。在Flash中，首先要为按钮设计不同形状的外观，然后为按钮的实例分配事件（例如鼠标单击等）和触发的动作。 在编辑时，单击“控制”→“播放”命令后，不能看到由影片剪辑元件和按钮元件产生的实例组成的动画和交互性效果，必须单击“控制”→“测试影片”命令或单击“控制”→“测试场景”命令，才能在播放器窗口中演示它的动画和交互效果。

50. 创建图形和影片剪辑元件 （1）单击“插入”→“新建元件”命令或单击“库”面板左下角的【新建元件】按钮，弹出“创建新元件”对话框。在“类型”选项区域中选择元件类型（例如选择影片剪辑），在“名称”文本框中输入元件名称（例如输入“元件1”），单击【确定】按钮，即可调出元件编辑窗口，该窗口内有一个十字标记，表示元件的中心。同时，在“库”面板中会出现一个新的、名称为“元件1”的影片剪辑元件。 （2）在该窗口中创建对象或导入对象，还可以制作动画等。此时，单击“库”面板中新增元件的名称或图标，即可在“库”面板上边素材预览窗口内显示出该元件的图形。 （3）单击“编辑”→“编辑文档”命令，或者单击元件编辑窗口中的场景名称图标或按钮，即可回到主场景舞台工作区。