Dreamweaver-CC第9章-动画制作基础课件.ppt

1、网页制作案例教程第9章 动画制作基础l 掌握导入外部素材的基本方法。l 掌握元件和实例的功能和操作方法。l 掌握库的功能和基本操作方法。l 掌握时间轴的功能和基本操作方法。l 掌握图层的功能和基本操作方法。学习目标9.1.1 导入图像9.1 导入素材 Animate CC 2017可以导入目前大多数主流图像格式，对普通用户来说使用最多的图像格式通常有BMP、JPEG、PNG和GIF等类型。在Animate CC 2017中，既可以将图像导入到舞台，也可以将图像导入到库，无论是导入到舞台还是导入到库，都是在当前文件下操作，也就是说必须新建或打开一个文档。选择菜单命令【文件】/【导入】/【导入到舞

2、台】打开【导入】对话框，选择要导入的图像。9.1.1 导入图像9.1 导入素材 选择菜单命令【文件】/【导入】/【导入到库】打开【导入到库】对话框，选择要导入的图像。9.1.1 导入图像9.1 导入素材 选择菜单命令【修改】/【位图】/【转换位图为矢量图】将位图图像转换为矢量图形。9.1.2 导入声音9.1 导入素材 选择菜单命令【文件】/【导入】/【导入到库】打开【导入到库】对话框，选择要导入的声音文件。9.1.2 导入声音9.1 导入素材 从【库】面板中拖动声音文件到舞台上，即可将其添加到当前文档中，此时在舞台上并不显现什么，但声音文件已经被添加到文档中。选择菜单命令【窗口】/【时间轴】，

3、打开【时间轴】面板，可以发现舞台上添加声音文件后，在时间轴的第1帧符号的变化，添加前只是一个圆圈，添加后圆圈上面多了一条横线。9.1.2 导入声音9.1 导入素材 【属性】面板。9.1.3 导入视频9.1 导入素材 选择菜单命令【文件】/【导入】/【导入视频】打开【导入视频-选择视频】对话框。9.1.3 导入视频9.1 导入素材 选择菜单命令【文件】/【导入】/【导入视频】打开【导入视频-选择视频】对话框。9.1.3 导入视频9.1 导入素材 选择菜单命令【文件】/【导入】/【导入视频】打开【导入视频-选择视频】对话框。9.1.3 导入视频9.1 导入素材 保证舞台上的视频组件处于选中状态，然

4、后选择菜单命令【窗口】/【属性】打开【属性】面板。9.2.1 创建元件9.2 元件和实例 创建元件的方法主要有两种：一种是直接创建一个空元件，然后在创建元件内容；另一种是将舞台上的某个对象转换为元件。直接创建元件：选择菜单命令【插入】/【新建元件】打开【创建新元件】对话框9.2.1 创建元件9.2 元件和实例 进入元件编辑模式，在该模式下进行元件制作，既可以自行绘制图形，也可以导入图形。9.2.1 创建元件9.2 元件和实例 按钮元件。9.2.2 转换元件9.2 元件和实例 如果舞台上的对象需要反复使用，可以将其直接转换为元件，保存在库中。方法是，选中舞台上的对象，然后选择菜单命令【修改】/【

5、转换为元件】，打开【转换为元件】对话框，设置元件名称和类型。9.2.3 复制元件9.2 元件和实例 复制元件的方法是，在【库】中选择一个元件，然后单击鼠标右键，在弹出的快捷菜单中选择【复制】命令或在菜单栏中选择菜单命令【编辑】/【复制】，最后选择菜单命令【编辑】/【粘贴到中心位置】或【编辑】/【粘贴到当前位置】将元件粘贴到舞台上。直接复制元件的方法是，在【库】中选择一个元件，然后单击鼠标右键，在弹出的快捷菜单中选择【直接复制】命令或在菜单栏中选择菜单命令【编辑】/【直接复制】，打开【直接复制元件】对话框，修改元件的名称和类型即可。9.2.4 编辑元件9.2 元件和实例 进入元件编辑状态的方法通

6、常有3种：在当前位置编辑元件、在新窗口中编辑元件和在元件编辑模式下编辑元件。(1)在当前位置编辑元件。如果库中的元件已经被拖到舞台上，在舞台上双击元件的这个实例，或者选中该实例，在鼠标右键快捷菜单中选择【在当前位置编辑】命令（也可选择菜单命令【编辑】/【在当前位置编辑】），进入元件的编辑状态。(2)在新窗口中编辑元件。如果库中的元件已经被拖到舞台上，选中该实例并在鼠标右键快捷菜单中选择【在新窗口中编辑】命令，打开一个新窗口，并进入元件的编辑状态。9.2.4 编辑元件9.2 元件和实例 (3)在元件编辑模式下编辑元件。进入元件编辑模式编辑元件的方式有以下几种：在【库】面板列表框中双击要编辑的元件

7、图标，如果双击元件名称就是要修改元件的名称了，这一点要注意。在【库】面板列表框中选择要编辑的元件，然后单击面板标题栏右端的 按钮，在弹出的菜单中选择【编辑】命令。在【库】面板列表框中用鼠标右键单击要编辑的元件，在弹出的快捷菜单中选择【编辑】命令，如图9-22所示。在舞台上选择该元件的一个实例，单击鼠标右键，从弹出的快捷菜单中选择【编辑】命令。在舞台上选择该元件的一个实例，然后选择菜单命令【编辑】/【编辑元件】。9.2.5 创建实例9.2 元件和实例 一旦完成创建元件后，就可以创建它的实例。创建实例的方法非常简单，在库中将列表框中的元件拖动到舞台上，就创建了此元件在舞台上的实例。可以在多个文档中

8、重复使用同一个元件来创建不同的实例。对创建的实例可以进行任意修改，从而得到依托该元件的其他效果。实例只可以放在时间轴的关键帧中，并且总是显示在当前图层上。在舞台上创建实例时，如果在未选取关键帧的情况下，实例将被添加到当前图层的第1帧。如果需要将实例加在某一帧上，可先在此帧处插入空白关键帧再进行操作。另外，影片剪辑实例的创建与包含动画的图形实例的创建是不同的，影片剪辑只需要1帧就可以播放动画，且在编辑环境中不能演示动画效果，如果要看影片剪辑的动画效果和交互功能，只有选择【控制】/【测试影片】命令，或按Ctrl+Enter组合键进行影片效果测试。而包含动画的图形实例，则必须在与其元件同样长的帧中放

9、置才能显示完整的动画。9.2.6 修改实例属性和类型9.2 元件和实例 不同元件类型的实例有不同的属性，通过各自的【属性】面板进行设置即可。如在舞台上选择一个图形元件实例，其【属性】面板如图9-23所示。9.2.6 修改实例属性和类型9.2 元件和实例 如在舞台上选择一个按钮元件实例，其【属性】面板如图9-24所示。9.2.6 修改实例属性和类型9.2 元件和实例 如在舞台上选择一个影片剪辑元件实例，其【属性】面板如图9-25所示。9.2.7 交换实例9.2 元件和实例 在舞台上选取实例，然后单击【属性】面板上的（交换）按钮，打开【交换元件】对话框，从元件列表框中选择要交换的元件。9.2.8

10、分离实例9.2 元件和实例 实例不能像图形或文字那样改变填色，但将实例分离后就会切断与元件的联系，将其变为形状（填充和线条），就可以彻底地修改实例，并且不影响原有元件和原有元件的其他实例。分离实例的方法是，首先选取实例，如图形实例，然后选择菜单命令【修改】/【分离】，这样就会把实例分离成图形，可以根据需要修改填充颜色等属性。如果实例中还包含组对象，可以再次选择菜单命令【修改】/【分离】进行二次分离即可。9.2.9 使用库9.2 元件和实例 【库】面板是集成项目内容的工具面板，图形、音频、视频、元件等元素是库中的主要内容，习惯称为库项目。使用【库】面板可以组织文件夹中的库项目，查看库项目在文档中

11、的使用频率，并可按照类型对库项目进行排序。通过【库】面板创建文件夹和查看库项目属性。9.2.9 使用库9.2 元件和实例 在【库】面板中，双击库项目的名称或在鼠标右键快捷菜单中选择【重命名】命令可以给库项目重新命名，在鼠标右键快捷菜单中选择【移至】命令将打开【移至文件夹】对话框，根据实际需要选择将库项目要移至的具体位置，可以是【库根目录】、【新建文件夹】或【现有文件夹】，选择【新建文件夹】选项需要输入新的文件夹名称，选择【现有文件夹】选项需要在列表框中选择要移至的目标文件夹，如图9-29所示。9.3.1 时间轴和帧9.3 时间轴和图层 时间轴是放置和控制帧的地方，用于组织和控制文档内容在一定时

12、间内播放的层数和帧数，帧在时间轴上的排列顺序决定动画的播放顺序。【时间轴】面板的主要组件是图层、帧和播放头，还包括一些信息指示器，如图9-30所示。在播放动画时，播放头沿着时间轴向后滑动，而图层和帧中的内容随着时间的变化而变化。9.3.1 时间轴和帧9.3 时间轴和图层 帧是动画的最基本的组成部分，是动画创作的基本时间单元。动画中包括的帧通常有关键帧、空白关键帧和普通帧3种类型，各种帧的作用及显示方式也不相同。9.3.2 帧的基本操作9.3 时间轴和图层 帧的基本操作包括插入、移动、删除、复制、剪切、粘贴、清除帧或关键帧等。执行这些操作比较常用的途径有两种：在菜单栏中选择【编辑】/【时间轴】下

13、的相应子菜单命令，如图9-32所示。在【时间轴】面板中，使用鼠标右键单击帧或关键帧，在弹出的快捷菜单中选择相应命令，如图9-33所示。如果单纯插入帧、关键帧或空白关键帧，还可以在菜单栏中选择【插入】/【时间轴】下的相应子菜单命令来完成，如图9-34所示。9.3.2 帧的基本操作9.3 时间轴和图层 在插入帧、关键帧或空白关键帧时，在时间轴上首先要选中插入的具体位置，然后再按照插入方法进行操作即可。除了使用【插入】/【时间轴】下的相应子菜单命令或鼠标右键快捷菜单中的相应子菜单命令来插入帧、关键帧或空白关键帧外，还可以使用快捷键，按下F5键可以插入帧，按下F6键可以插入关键帧，按下F7键可以插入空

14、白关键帧。按下F6键插入关键帧的前提是，插入关键帧所在位置左侧的帧中已经有了对象，如果没有此时将插入空白关键帧。选择帧的方法通常有以下几种：要选择一个帧，单击该帧即可；要选择连续的帧，先单起始帧，然后按住Shift键单击结束帧即可；要选择不连续的帧，按住Ctrl键依次单击相应的帧即可；要选择所有帧，选择【编辑】/【时间轴】/【选择所有帧】命令或在右键快捷菜单中选择【选择所有帧】命令即可。9.3.2 帧的基本操作9.3 时间轴和图层 在时间轴中，如果有不需要的帧可以将其删除或清除。删除帧操作不仅可以删除帧中的内容，还可以将选中的帧进行删除，还原为初始状态。清除帧与删除帧的区别在于，清除帧仅把选中

15、的帧上的内容清除，并将这些帧自动转换为空白关键帧状态。是选择删除帧还是清除帧，用户可以根据实际需要选择相应的操作。要将某些帧复制到时间轴的其他位置，首先需要先选中这些帧，然后再使用菜单命令【复制帧】和【粘贴帧】，如果要将文档中的某些帧移到到文档中的其他位置，可以先【剪切帧】再【粘贴帧】，也可以用鼠标单击选中要移动的帧（包括关键帧和空白关键帧），然后将其拖动到目标位置，释放鼠标即可。9.3.2 帧的基本操作9.3 时间轴和图层 翻转帧功能可以使选定的一组帧按照顺序翻转过来，使原来的最后一帧变为第1帧，原来的第1帧变为最后一帧。方法是，先选中需要翻转的所有帧（应包含关键帧或空白关键帧），然后选择菜

16、单命令【修改】/【时间轴】/【翻转帧】，如图9-35所示，或在鼠标右键快捷菜单中选择【翻转帧】命令即可，效果如图9-36所示。9.3.2 帧的基本操作9.3 时间轴和图层 在时间轴中，要延长关键帧动画的持续时间，按住Alt键拖动关键帧到适当的位置即可。要通过拖动来复制关键帧或帧序列，按住Alt键单击并拖动关键帧到新位置即可。要更改补间序列的长度，将开始关键帧或结束关键帧向左或向右拖动即可。要将项目从库中添加到当前关键帧中，将该项目从【库】面板拖动到舞台中即可。9.3.3 图层类型和模式9.3 时间轴和图层 图层按其功能可以分为普通图层、遮罩层和被遮罩层、引导层和被引导层、补间动画图层、骨架图层

17、等类型，如图9-37所示。9.3.3 图层类型和模式9.3 时间轴和图层 图层还有很多模式，如当前层模式、隐藏模式、锁定模式、轮廓模式等。9.3.4 图层基本操作9.3 时间轴和图层 一、新建图层 新建图层成为当前图层。新建图层的途径主要有以下3种。在【时间轴】面板中，单击底部的（新建图层）按钮即可在所选中图层上方 插入一个新图层，此时新建的图层将变为当前图层，新图层按照顺序生成默认名称，可以通过双击图层名称重新命名，如图9-39所示。9.3.4 图层基本操作9.3 时间轴和图层 选择菜单命令【插入】/【时间轴】/【图层】，也可在所选图层上方插入一个新图层，如图9-40所示。在【时间轴】面板已

18、有图层上单击鼠标右键，在弹出的快捷菜单中选择【插入图层】命令，即可在该图层上方插入一个新图层，如图9-41所示。9.3.4 图层基本操作9.3 时间轴和图层 二、新建文件夹 新建文件夹的途径主要有以下3种。单击【时间轴】底部的（新建文件夹）按钮，可新建一个图层文件夹，双击图层文件夹名称可为新建图层文件夹指定一个新的名称，如图9-42所示。选择菜单命令【插入】/【时间轴】/【图层文件夹】，也可在所选图层上方新建一个文件夹。在【时间轴】面板已有图层上单击鼠标右键，在弹出的快捷菜单中选择【插入文件夹】命令，也可新建一个文件夹。9.3.4 图层基本操作9.3 时间轴和图层 三、重命名图层或文件夹 新建

19、文件夹的途径主要有以下3种。重命名图层或文件夹最简单的方法是，在【时间轴】面板中双击图层或文件夹的名称，然后输入新名称，并按Enter键或用鼠标单击其他任意处加以确认即可。当然，也可在【图层属性】对话框中重新设置图层或文件夹的名称，关于【图层属性】对话框将在本节后续部分的内容中进行介绍，这里不再详述。9.3.4 图层基本操作9.3 时间轴和图层 四、选择图层或文件夹选择图层或文件夹是最基本的操作，方法主要有：在【时间轴】面板中，单击要选择的图层或文件夹。在【时间轴】面板中，单击要选择的图层中的任意一帧，如图9-43所示。在舞台上用鼠标单击要选择的图层上的一个对象，如图9-44所示。要选择连续的

20、几个图层或文件夹，在按住Shift键的同时单击【时间轴】面板中相应的图层或文件夹。如果要选择多个不连续的图层或文件夹，在按住Ctrl键的同时单击【时间轴】面板中相应的图层或文件夹。9.3.4 图层基本操作9.3 时间轴和图层 五、复制图层 使用复制图层的方法比较快捷，只需要执行一次命令就可以将需要复制的图层或文件夹在所选图层的上方按照原样复制一份，其名称会在原名称的后面加“复制”两个字，可以根据需要修改其名称。选择要复制的图层或文件夹，然后按照以下两种方法中的任意一种进行操作即可完成复制图层或文件夹的任务。选择菜单命令【编辑】/【时间轴】/【直接复制图层】，如图9-45所示。在【时间轴】面板中

21、，使用鼠标右键单击要复制的图层，在弹出的快捷菜单中选择【复制图层】命令，如图9-46所示。9.3.4 图层基本操作9.3 时间轴和图层 六、拷贝和粘贴图层 【拷贝图层】和【粘贴图层】这两个命令是配合使用的。即可以在同一文档内执行这一对命令，也可以在两个文档内执行这一对命令。执行【拷贝图层】和【粘贴图层】后，图层或文件夹的名称不会改变，需要根据实际需要进行修改。选择要拷贝的图层或文件夹，然后按照以下两种方法中的任意一种进行操作即可完成拷贝和粘贴图层或文件夹的任务。选择菜单命令【编辑】/【时间轴】/【拷贝图层】，然后在目标位置执行【粘贴图层】命令。在【时间轴】面板中，使用鼠标右键单击要复制的图层，

22、在弹出的快捷菜单中选择【拷贝图层】命令，然后在目标位置执行【粘贴图层】命令。9.3.4 图层基本操作9.3 时间轴和图层 七、移动图层 移动图层或文件夹可通过【剪切图层】和【粘贴图层】这两个命令来完成。方法同【拷贝图层】和【粘贴图层】是一样的，这里不再详述。八、调整图层或文件夹顺序 要调整图层或文件夹在【图层】面板图层控制区中的顺序，直接拖动要改变顺序的图层或文件夹到适当的位置释放鼠标即可。在拖动过程中会出现一条左端带圆圈的黑色实线，表示图层当前已被拖动到的位置，如图9-47所示。9.3.4 图层基本操作9.3 时间轴和图层 九、删除图层或文件夹删除图层或文件夹的方法比较简单，选择要删除的图层

23、或文件夹，然后执行下列操作之一即可。在删除图层文件夹时，其中包含的所有图层和内容也将被删除。在【时间轴】面板中单击（删除图层）按钮。将图层或文件夹拖到（删除图层）按钮。在【时间轴】面板中，在要删除的图层或文件夹上单击鼠标右键，在弹出的快捷菜单中选择【删除图层】命令。9.3.4 图层基本操作9.3 时间轴和图层 十、设置图层属性 如果要全面设置图层或文件夹的属性，如图层的名称、可见性、类型和轮廓颜色等，可通过以下方法打开【图层属性】对话框进行设置，如图9-48所示。在【时间轴】面板中，用鼠标右键单击图层或文件夹的名称，在弹出的快捷菜单中选择【属性】命令。在【时间轴】面板中选择图层或文件夹，然后选

24、择菜单命令【修改】/【时间轴】/【图层属性】。9.3.4 图层基本操作9.3 时间轴和图层 通过【图层属性】对话框也可将选择的文件夹转换为图层，在对话框的【类型】选项中选择【一般】单选按钮表示转换为普通图层。如果文件夹中没有任何内容将直接转换，如果文件夹中有内容，如包含一些图层，在转换后会将这些图层移出，与转换后的图层并列显示但位于其下方，如图9-50所示。9.3.4 图层基本操作9.3 时间轴和图层 十一、组织图层和文件夹 在制作动画文档时，在【时间轴】面板中可根据襑需要排列图层和文件夹。通过文件夹，可将图层放在一个树形结构中，这样有助于组织工作流程。要查看文件夹包含的图层而不影响在舞台中可

25、见的图层，可展开或折叠该文件夹。文件夹中可以包含图层，也可以包含其他文件夹，使用户可以像在计算机中组织文件一样来组织图层。在【时间轴】面板中，对文件夹使用控制命令后将影响文件夹中的所有图层，如锁定或隐藏一个文件夹将锁定或隐藏该文件夹中的所有图层。要将图层或文件夹移动到其他文件夹中，将该图层或图层文件夹拖动到目标文件夹中即可。要展开或折叠文件夹，单击文件夹名称左侧的标识即可，单击（向右箭头）标识可展开文件夹，单击（向下箭头）标识可折叠文件夹。也可在鼠标右键快捷菜单中选择【展开文件夹】或【折叠文件夹】命令进行相应的操作。要展开或折叠所有文件夹，在鼠标右键快捷菜单中选择【展开所有文件夹】或【折叠所有文件夹】命令即可。下面来通过图形和文字等工具制作一个“敬爱的老师”画面。9.4 应用实例制作逐帧动画“奔跑的马”