动画设计与制作 课件 学习单元5 元件、实例与库

学习单元5元件、实例与库动画设计与制作知识目标1.了解Animate中元件的类型、特点和用途；2.掌握元件与实例之间的关联与区别；3.了解“库”面板的作用，学习有效管理和组织库中的元件及其他素材。能力目标素养目标1.能够根据需要创建图形、影片剪辑和按钮元件，并进行编辑；

2.能够熟练将元件实例化到场景中，并根据实际调整实例的属性；3.能够使用“库”面板高效地管理库项目，通过有效利用库资源，提高动画制作效率和质量。1.培养学生自主学习的能力，并通过实践和创新，提高动画制作水平和艺术修养；2.培养学生与人沟通、协作的能力，同时提高学生的表达能力；3.培养学生信息素养、信息加工处理和合理运用的能力。思维导图基础任务5.1

制作海底世界动画

【任务描述】海洋大约占据了地球表面的71%，是地球上最为广阔且复杂的生态系统。这片蔚蓝的世界孕育了无数独特的生物种类和地形景观，其美丽与神秘令人叹为观止。在本次任务中，我们将构建一个绚丽多姿的海底世界情境，借助元件与实例，描绘海底世界的奇异景色和丰富物产。通过这一任务实施，引导学生深刻领悟“保护海洋生态系统，人与自然和谐共生”的重要道理。任务储备1元件相关知识

元件是Animate中最重要、最基本的元素，它可以是一个反复使用的图形、按钮或影片剪辑。使用元件不仅使编辑动画变得更加简单，还可以提高动画效率。1.元件的类型

⑴图形元件：图形元件是制作动画的基本元素之一，用于创建可重复使用的静态图像或动画片段，它有自己的编辑区与时间轴。在场景中创建图形元件的实例，那么图形元件的播放受到场景中时间轴的约束。⑵影片剪辑元件：使用影片剪辑可以创建反复播放的动画片段，它也有自己的编辑区与时间轴，但又不完全相同。影片剪辑元件的时间轴是独立的，不受该实例在主场景时间轴的控制。⑶按钮元件：用于创建响应鼠标的交互式按钮，通过事件激发它的动作，有“弹起”“指针经过”“按下”和“点击”4个状态帧。任务储备1元件相关知识2.直接创建元件的方法⑴创建影片剪辑元件①选择【插入】|【新建元件】命令（或使用快捷键Ctrl+F8），在弹出的【创建新元件】对话框中，在【名称】文本框中输入元件名称，在【类型】列表框中选择“影片剪辑”，点击【确定】按钮，如图5-1-1所示。②在打开的“元件编辑”窗口中，可以绘制、导入素材、拖入其他元件的实例等方法制作元件，如图5-1-2所示。制作完成后，单击元件名称左侧的“返回”按钮，退出元件编辑窗口。

图5-1-1“创建影片剪辑元件”对话框图5-1-2元件编辑窗口任务储备1元件相关知识⑵创建图形元件①选择【插入】|【新建元件】命令（或使用快捷键Ctrl+F8），在弹出的【创建新元件】对话框中，在【名称】文本框中输入元件名称，在【类型】列表框中选择“图形”，点击【确定】按钮，如图5-1-3所示。②在打开的“元件编辑”窗口中，可以绘制、导入素材、拖入其他元件的实例等方法制作元件。制作完成后，单击元件名称左侧的“返回”按钮，退出元件编辑窗口。

图5-1-3“创建图形元件”对话框任务储备1元件相关知识⑶创建按钮元件①选择【插入】|【新建元件】命令（或使用快捷键Ctrl+F8），在弹出的【创建新元件】对话框中，在【名称】文本框中输入元件名称，在【类型】列表框中选择“按钮”，点击【确定】按钮，如图5-1-4所示。②在打开的“元件编辑”窗口中，时间轴上仅显示4个状态帧，分别是“弹起”“指针经过”“按下”“点击”，如图5-1-5所示。制作完成后，单击元件名称左侧的“返回”按钮，退出元件编辑窗口。

图5-1-4“创建按钮元件”对话框任务储备1元件相关知识按钮元件中4个状态帧代表的含义是：“弹起”：代表鼠标指针不在按钮上的状态；“指针经过”：代表鼠标指针经过按钮上方的状态；“按下”：代表鼠标指针在按钮按下时候的状态；“点击”：代表鼠标指针响应的区域。【注意】用直接创建元件的方法，元件并不显示在工作区中，而是直接存放在【库】面板中。

图5-1-5“按钮”元件时间轴显示任务储备1元件相关知识3.转换元件的方法选定要转换为元件的对象并单击鼠标右键，在弹出的菜单中选择【转换为元件】命令（或使用快捷键F8），如图5-1-6所示。在弹出的【转换为元件】对话框中，在【名称】文本框中输入元件名称，在【类型】列表框中选择元件的类型，【对齐】中设置元件中心点（共有9个中心定位点），单击“确定”按钮，将其转换为元件，如图5-1-7所示。

图5-1-7“转换为元件”对话框图5-1-6“转换为元件”命令

任务储备1元件相关知识4.元件的编辑对于创建好的元件，Animate提供了3种方式进行编辑，分别是在当前位置编辑、编辑元件和在新窗口中编辑。元件编辑完成后，将更新该元件的所有实例。①在当前位置编辑元件：选择【编辑】|【在当前位置编辑】命令，或者鼠标双击元件的实例，可以在显示舞台背景的状态下编辑该元件。②编辑元件模式：通过以下几种方法进入元件编辑模式。

第一种方法：在【库】面板中，双击元件图标；

第二种方法：选择【编辑】|【编辑元件】命令（或使用快捷键Ctrl+E）；

第三种方法：右击元件实例，选择【编辑元件】命令；③在新窗口中编辑：选中舞台上要编辑的元件实例并右击，在弹出的菜单中选择【在新窗口中编辑】命令，会打开一个新的文件窗口，编辑完成后单击该窗口右上角的“关闭”按钮，即关闭新窗口。

任务储备1元件相关知识5.转换元件的类型选中【库】面板中的元件，单击【库】面板下方的“属性”按钮，如图5-1-11所示。在弹出的“元件属性”对话框中，在【类型】中设置要转换的类型，单击“确定”按钮，如图5-1-12所示，即将原来的图形元件转换为影片剪辑元件。同样，也可以选中【库】面板中的元件并右击，在弹出的菜单中选择【属性】命令，进行转换元件的类型。

图5-1-11“库”面板图5-1-12“元件属性”对话框任务储备2库相关知识1.认识【库】面板在Animate中，创建的元件及导入文件的声音、视频、图片都存储在【库】面板中，【库】面板主要用来显示、存放、组织“库”中所有的项目。选择【窗口】|【库】命令（或使用快捷键Ctrl+L），可以打开【库】面板，如图5-1-13所示。选择【库】面板中的项目时，面板顶部会显示该项目的缩略图预览。如果选定的元件是影片剪辑，则在预览区的右上方有“停止”和“播放”按钮。单击“播放”按钮，则在预览区域播放动画。单击“停止”按钮，停止播放动画。预览区下方显示出当前【库】面板的元件以及其他资源。

图5-1-13“库”面板

图5-1-14“直接复制”命令

任务储备2库相关知识2.库管理可以应用【库】面板来管理库中的项目，如重命名、删除和移动等，还可以将各项目组织到文件夹中以方便管理。库项目重命名：双击【库】面板中项目名称或者右击项目名称选择【重命名】命令。复制库元件：选中【库】面板中要复制的元件并右击，在弹出的菜单中选择【直接复制】命令。创建文件夹：在【库】面板中可以创建文件夹，按照元件的类型分类存放。删除库项目：选中【库】面板中的项目，按Delete键直接删除或者右击选择“删除”命令。

任务储备3实例相关知识1.创建实例将元件从【库】面板中拖动到舞台，即创建一个实例。元件只需建立一次，但是一个元件可以创建无数个实例，修改元件则更新所有实例，如图5-1-15所示。

图5-1-15创建实例效果任务储备3实例相关知识2.设置实例的属性选择实例后，可以在【属性】面板中设置实例名称，修改其颜色、透明度、大小和位置等属性。图形元件和影片剪辑元件的【属性】面板，如图5-1-16、5-1-17所示。【注意】对实例所做的【属性】面板的更改只会影响实例本身，并不会影响元件以及其他实例对象。其中混合模式、滤镜效果只有影片剪辑元件和按钮元件具有。图5-1-16图形元件“属性”面板

图5-1-17“属性”面板任务储备3实例相关知识3.更改实例的元件选中要更改的实例并右击，在弹出的菜单中选择【交换元件】命令，如图5-1-18所示。在【交换元件】对话框中选择要交换的元件，如图5-1-19所示。【注意】新元件的实例将仍然保留原来实例的属性。4.分离实例将实例与所对应的元件进行分离，使它不再与元件有关联，成立一个独立的对象。选中实例右击，在弹出的菜单中选择【分离】命令（或使用快捷键Ctrl+B），即实现元件的分离。图5-1-18“交换元件”命令图5-1-19“交换元件”对话框

任务实施1制作海底背景⑴选择【文件】|【新建】命令，在弹出的【新建文档】对话框中，使用【高清】尺寸，

将【帧频】设置为24fps，在【平台类型】列表框中选择【ActionScript3.0】选项，点击【创建】按钮，如图5-1-20所示。图5-1-20新建文件⑵选择【文件】|【导入】|【导入到库】命令，在弹出的【导入到库】对话框中，先选择“贝壳.png”，再按住Shift键选择“鱼2.png”素材文件，单击【打开】按钮，如图5-1-21所示，将素材文件导入到库中。图5-1-21导入素材任务实施1制作海底背景⑶将“图层_1”重命名为“背景”。打开【库】面板，将素材“背景.jpg”拖动到舞台中，使用【任意变形工具】调整大小及位置，如图5-1-22所示。选中“背景”素材并单击鼠标右键，在弹出的菜单中选择【转换为元件】命令（或使用快捷键F8），在弹出的【转换为元件】对话框中，在【名称】文本框中输入“背景”，将【类型】设置为“图形”，单击“确定”按钮，将其转换为图形元件，如图5-1-23所示。图5-1-22放置“背景”⑷选中“背景”层第1帧，使用【选择工具】选中“背景”图形元件实例，在【属性】面板中，将【色彩效果】设置为“亮度”，“亮度”值修改为“-60%”，如图5-1-24所示。当前舞台效果，如图5-1-25所示。图5-1-24修改亮度

图5-1-25当前效果

图5-1-23转换元件任务实施1制作海底背景⑸在“背景”层上方新建“图层_2”，重命名为“海星和贝壳”，从【库】面板中将素材“海星1.png、海星2.png、贝壳.png”依次拖动到舞台中，使用【任意变形工具】调整大小、方向，并放至合适位置，如图5-1-26所示。图5-1-26放置“海星和贝壳”⑹在“海星和贝壳”层上方新建“图层_3”，重命名为“海草”，从【库】面板中将素材“海草.png”拖动到舞台中，放至合适位置。选中“海草”并按住Alt拖动进行复制，使用【任意变形工具】调整海草的大小和位置，如图5-1-27所示。图5-1-27放置“海草”任务实施2制作螃蟹爬动动画⑴在“海草”层上方新建“图层_4”，重命名为“螃蟹”，选择【插入】|【新建元件】命令（或使用快捷键Ctrl+F8），在弹出的【创建新元件】对话框中，【名称】文本框输入“螃蟹蟹夹动”，【类型】设置为“影片剪辑”，如图5-1-28所示。在该元件编辑模式下，选中第1帧，从【库】面板中将素材“螃蟹1.png”拖动到舞台中，依次选中第10帧、第20帧，按F6插入关键帧。选择第10帧，选中“螃蟹1.png”素材并右击，在弹出的菜单中选择“交换位图”命令，如图5-1-29所示。在打开的“交换位图”对话框中选择素材“螃蟹2.png”，单击“确定”按钮，如图5-1-30所示，单击“返回”按钮，回到场景1中。图5-1-28创建元件

图5-1-29“交换位图”命令图5-1-30交换位图“螃蟹2.png”任务实施2制作螃蟹爬动动画⑵选中“螃蟹”层第1帧，从【库】面板中将影片剪辑元件“螃蟹蟹夹动”拖动到舞台中，选中“螃蟹蟹夹动”影片剪辑实例并单击鼠标右键，在弹出的菜单中选择【转换为元件】命令（或使用快捷键F8），在弹出的【转换为元件】对话框中，在【名称】文本框中输入“螃蟹跑动”，将【类型】设置为“影片剪辑”，单击“确定”按钮，将其转换为元件，如图5-1-31所示。⑶双击“螃蟹跑动”影片剪辑实例，在元件编辑模式下，选中第1帧的“螃蟹蟹夹动”实例，使用【任意变形工具】调整大小并放至合适位置，如图5-1-32所示。依次选中第100帧、第200帧，按F6插入关键帧，选中第100帧，调整至合适的位置，如图5-1-33所示。用鼠标右键单击时间线任意位置，在弹出的菜单中选择【创建传统补间】命令，时间轴如图5-1-34所示，单击“场景1”名称，返回场景1。图5-1-31创建“螃蟹跑动”影片剪辑元件图5-1-32第1帧当前位置图5-1-34时间轴显示图5-1-33第100当前位置任务实施2制作螃蟹爬动动画⑷选中“螃蟹”层第1帧，使用【选择工具】选中“螃蟹跑动”影片剪辑实例，按住Alt拖动该实例复制到其他适合的位置，使用【任意变形工具】调整大小和位置。⑸将“海草”图层移动到“螃蟹”图层上方，当前舞台效果如图5-1-35所示，时间轴如图5-1-36所示。图5-1-35当前舞台效果图5-1-36时间轴显示任务实施3制作水母游动动画⑴在“海草”层上方新建“图层_5”，重命名为“水母”。

选择【插入】|【新建元件】命令（或使用快捷键Ctrl+F8），在弹出的【创建新元件】对话框中，【名称】文本框输入“水母”，【类型】设置为“影片剪辑”，如图5-1-37所示。在元件编辑模式下，选择【文件】|【导入】|【导入到舞台】命令，在弹出的【导入】对话框中，选择“水母”文件夹中“水母1.png”文件，单击【打开】按钮，在弹出的对话框中单击【是】按钮，将序列图片导入到舞台中，如图5-1-38所示。⑵在“水母”元件编辑模式下，右击时间轴中的【编辑多个帧】按钮，从下拉列表中选择【所有帧】。框选所有帧，按Ctrl+K键打开【对齐】面板，在【对齐】面板中选择【与舞台对齐】，单击【水平中齐】按钮、【垂直中齐】按钮，将对象置于舞台中心，如图5-1-39所示。单击“返回”按钮，回到场景1中。图5-1-39舞台居中效果图5-1-38导入序列图5-1-37创建“水母”元件

任务实施3制作水母游动动画⑶选择【插入】|【新建元件】命令（或使用快捷键Ctrl+F8），在弹出的【创建新元件】对话框中，在【名称】文本框中输入“水母上升运动”，将【类型】设置为“影片剪辑”，单击“确定”按钮，如图5-1-40所示。在该元件编辑模式下，从【库】面板中将影片剪辑元件“水母”拖动到舞台中，使用【任意变形工具】调整大小，放至合适位置，如图5-1-41所示。在第200帧，按F6插入关键帧，使用【选择工具】放至合适位置，如图5-1-42所示。用鼠标右键单击时间线任意位置，在弹出的菜单中选择【创建传统补间】命令，创建动画。单击“返回”按钮，进入场景1中。⑷选中“水母”层第1帧，从【库】面板中将影片剪辑元件“水母上升运动”拖动到舞台中创建该元件实例，按住Alt拖动该实例进行复制，使用【任意变形工具】调整大小、位置和方向，如图5-1-43所示。图5-1-41“水母”位置

图5-1-40创建“水母上升运动”元件图5-1-43当前舞台效果图5-1-42“水母”位置

任务实施4制作鱼儿游动动画⑴在“水母”层上方新建“图层_6”，重命名为“鱼1”。

从【库】面板中将素材“鱼1.png”拖动到舞台中，使用【任意变形工具】调整大小并放至合适位置，选中素材“鱼1.png”并单击鼠标右键，在弹出的菜单中选择【转换为元件】命令（或使用快捷键F8），在弹出的【转换为元件】对话框中，在【名称】文本框中输入“鱼1游”，将【类型】设置为“影片剪辑”，单击“确定”按钮，如图5-1-44所示。⑵双击“鱼1游”影片剪辑元件实例，进入元件编辑模式，将“图层_1”重命名为“鱼1”。选中“鱼1”层第1帧，选中素材“鱼1.png”并右击，在弹出的菜单中选择【转换为元件】命令（或使用快捷键F8），在弹出的【转换为元件】对话框中，在【名称】文本框中输入“鱼1”，将【类型】设置为“图形”，单击“确定”按钮，将其转换为元件，如图5-1-45所示。⑶选中“鱼1”图层并右击，在弹出的菜单中选择【添加传统运动引导层】命令，如图5-1-46所示。在引导层中，选择【钢笔工具】绘制一条不规则的曲线路径，如图5-1-47所示。图5-1-45创建“鱼1”元件

图5-1-44创建“鱼1游”元件图5-1-46添加引导层图5-1-47绘制引导线任务实施4制作鱼儿游动动画⑷选中“鱼1”层第1帧，使用【选择工具】将“鱼1”实例移动到路径的起始端点，如图5-1-47所示。在第100帧、第200帧，按F6键插入关键帧（其他图层按F5插入普通帧）。在第100帧将“鱼1”移动到路径的中间端点，如图5-1-48所示。用鼠标右键单击时间线任意位置，在弹出的菜单中选择【创建传统补间】命令。在第200帧将“鱼1”移动到路径的结束端点，如图5-1-49所示。用鼠标右键单击时间线任意位置，在弹出的菜单中选择【创建传统补间】命令，单击“场景1”按钮，返回到场景1。⑸在主场景中选择“鱼1”层第1帧，选中“鱼1游”影片剪辑实例，按住Alt拖动进行复制，使用【任意变形工具】调整大小并放至合适位置。选中复制后的实例右击，在弹出的菜单中选择【变形】中的【水平翻转】命令，如图5-1-50所示。选中复制后的实例，在【属性】面板中，【色彩效果】设置为【高级】，详细参数如图5-1-51所示，舞台效果如图5-1-52所示。图5-1-49当前舞台位置

图5-1-48当前舞台位置图5-1-50“水平翻转”命令图5-1-51颜色设置图5-1-52舞台效果任务实施4制作鱼儿游动动画⑹选中【库】面板图形元件“鱼1”并右击，在弹出的菜单中选择【直接复制】命令。在打开的【直接复制元件】对话框中，在【名称】文本框修改为“鱼2”，单击【确定】按钮。双击【库】面板图形元件“鱼2”的图标，进入元件编辑模式，选中素材“鱼1.png”并右击，在弹出的快捷菜单中选择“交换位图”命令，在打开的对话框中选择“鱼2.png”，单击“确定”按钮，如图5-1-53所示。⑺选中【库】面板“鱼1游”影片剪辑元件并右击，在弹出的菜单中选择【直接复制】命令。在打开的【直接复制元件】对话框中，在【名称】文本框修改为“鱼2游”，单击【确定】按钮，如图5-1-54所示。图5-1-54直接复制“鱼2游”元件图5-1-53交换位图“鱼2.png”任务实施4制作鱼儿游动动画⑻在“鱼1”层上方新建“图层_7”，重命名为“鱼2”，

从【库】面板中将影片剪辑元件“鱼2游”拖动到舞台中，使用【任意变形工具】调整大小，放至合适位置，如图5-1-55所示。双击“鱼2游”影片剪辑实例，进入元件编辑模式，选中“鱼1”层第1帧，选中图形实例“鱼1”并右击，在弹出的菜单中选择【交换元件】命令，在【交换元件】对话框中选择图形元件“鱼2”，如图5-1-56所示。选中第100帧和第200帧上的图形实例“鱼1”右击，重复应用【交换元件】命令，选择图形元件“鱼2”。使用【选择工具】调整引导层的轨迹形状，如图5-1-57所示。单击“场景1”，返回到场景1中。

图5-1-57调整后的运动轨迹图5-1-55当前舞台效果

图5-1-56交换图形元件“鱼2”任务实施4制作鱼儿游动动画⑼选择“鱼2”层第1帧，选中“鱼2游”元件实例，按住Alt拖动进行复制。选中复制后的实例右击，在弹出的菜单中选择【变形】中的【水平翻转】命令，使用【任意变形工具】调整大小，放至合适位置。在【属性】面板中，【色彩效果】设置为【高级】，详细参数如图5-1-58所示。

图5-1-60时间轴显示图5-1-58修改“色彩效果”设置

图5-1-59测试影片效果⑽按“Ctrl+Enter”组合键测试动画效果，影片效果如图5-1-59所示，时间轴如图5-1-60所示。任务小结1制作海底世界动画1.影片剪辑元件有独立的时间轴，而图形元件与场景时间轴同步；2.元件一次建立可应用多次，实例是由元件创建的，更改元件会更新所有实例，而更改实例不会影响元件以及其他实例；3.可以利用元件嵌套来制作复杂的动画；4.灵活运用“交换元件”和“直接复制”命令，提高动画实战制作技巧。综合提升5.2

制作二十四节气交互动画

【任务描述】二十四节气，这一凝聚着中国古代农耕文明智慧结晶的时间知识体系，不仅是古人对太阳周年运动的细致观察与深刻理解的产物，更是中国传统文化中一颗璀璨的明珠，承载着丰富的文化内涵和深厚的历史底蕴。在本任务中，我们将巧妙运用按钮元件和脚本实现交互动画，生动展现二十四节气的科普知识。通过这一创新方式，引导学生领略传统文化的独特魅力，深化对中华文化的认同感与自豪感，从而自觉肩负起传承文化基因的重任。任务储备添加动作代码相关知识1.“动作”面板

在Animate中提供专门处理动作脚本的编辑环境“动作”面板。通过在“动作”面板中输入或添加脚本来实现交互动画，Animate的“动作”面板提供了代码片断、设置代码格式等功能。选择【窗口】|【动作】命令（或快捷键F9），打开动作面板。动作面板包含“脚本编辑器”和“脚本导航器”两个窗格，如图5-2-1所示。

(1)脚本导航器列出当前文档中所有帧动作信息，单击脚本导航器中的某一个对象，会呈现与该对象相关的脚本内容，同时播放头会跳转到时间轴对应的位置。图5-2-1“动作”面板脚本导航器工具栏脚本编辑器任务储备添加动作代码相关知识(2)工具栏说明固定脚本：将脚本固定到“脚本编辑器”窗格中各个脚本的固定标签。将脚本固定，以保留代码在动作面板中的打开位置，然后在各个打开的不同脚本中切换，本功能在调试时非常有用。插入实例路径和名称：设置脚本中某个动作的绝对或相对目标路径。代码片断：单击该按钮，弹出“代码片断”面板，如图5-2-3所示。该面板列出Animate文档中的脚本，可以快速查看或调用这些脚本。设置代码格式：帮助设置代码格式。查找：查找并替换脚本中的文本。帮助:显示“脚本编辑器”窗格中所选ActionScript元素的参考信息。图5-2-3“代码片断”面板(3)“脚本编辑器”窗口在“脚本编辑器”窗口，直接输入或调用ActionScript代码。任务储备添加动作代码相关知识2.添加动作

⑴为帧添加动作选择时间轴要添加动作的关键帧，右击“动作”命令（或按F9），即打开“动作”面板。在“动作”面板“脚本编辑”窗格中，输入代码或者利用“代码片断”引用代码。当动画播放到该帧，会自动运行帧中的脚本程序。需要注意的是，为关键帧添加ActionScript代码后，该关键帧上将出现一个“a”符号。【注意】必须在关键帧上才能给帧添加动作。⑵为对象添加动作选择“按钮”或“影片剪辑”实例，首先在“属性”面板中设置实例的名字，再打开“动作”面板，添加脚本语句内容。【注意】为了方便控制舞台对象，必须在“属性”面板中设定对象的实例名称，实例名称需以字母字符或其他受支持的符号开头的标识符。任务储备添加动作代码相关知识3.使用“代码片断”面板“代码片断”面板是Animate中编写代码的一种非常方便的工具，它能帮助用户在不精通代码编辑的前提下，快速轻松地实现简单代码的编写。操作步骤如下：(1)选择时间轴中的某个关键帧或者选中舞台对象（必须设定对象的实例名称）；(2)单击“动作”面板中的“代码片断”或选择【窗口】|【代码片断】命令，即打开【代码片断】面板；(3)在【代码片断】面板中，根据要添加的脚本类型，选择相应的文件夹；(4)双击所选动作，即将代码添加到“动作”面板中；(5)此时时间轴所有图层之上，生成一个Actions图层。任务实施1制作“二十四节气”片头动画⑴选择【文件】|【新建】命令，在弹出的【新建文档】对话框中，使用默认【高清】尺寸，

将【帧频】设置为24fps，在【平台类型】列表框中选择【ActionScript3.0】选项，点击【创建】按钮，如图5-2-4所示。图5-2-5导入素材⑵选择【文件】|【导入】|【导入到库】命令，在弹出的【导入到库】对话框中，先选择素材“背景音乐.mp3”，再按住Shift键选择最后一个素材文件“主标题.png”，单击【打开】按钮，如图5-2-5所示，将素材文件导入到库中。按Ctrl+L打开【库】面板，依次创建文件夹“按钮”“素材”“剪辑”“图形”等文件夹，将导入素材分类存放到所对应的文件夹中。图5-2-4新建文件任务实施1制作“二十四节气”片头动画⑶将“图层_1”重命名为“背景”。按Ctrl+L打开【库】面板，将素材“古风背景.png”拖动到舞台中。按Ctrl+L打开【对齐】面板，在面板中选择【与舞台对齐】，单击【水平中齐】按钮、【垂直中齐】按钮，使用【任意变形工具】调整背景素材的大小及位置，如图5-2-6所示。图5-2-7“背景”图形元件⑷选中素材“古风背景.png”并单击鼠标右键，在弹出的菜单中选择【转换为元件】命令（或使用快捷键F8），在弹出的【转换为元件】对话框中，在【名称】文本框中输入“背景”，将【类型】设置为“图形”，单击“确定”按钮，将其转换为元件，如图5-2-7所示。图5-2-6对齐面板的设置

任务实施1制作“二十四节气”片头动画⑸在“背景”层第1帧，使用【选择工具】选中“背景”图形元件实例，【属性】面板中【色彩效果】列表框中选择“Alpha”选项，并设置值为“0%”，如图5-2-8所示。选择第15帧，按F6键插入关键帧，在【属性】面板【色彩效果】设置“Alpha”值为“100%”。用鼠标右键单击时间线任意位置，在弹出的菜单中选择【创建传统补间】命令，时间轴状态如图5-2-9所示。

图5-2-9时间轴状态图5-2-8“属性”面板的设置

任务实施1制作“二十四节气”片头动画⑹在“背景”层上方新建“图层_2”，重命名为“标题动画”。在第15帧，按F7键插入空白关键帧，从【库】面板中将素材“主标题.png”拖动到舞台中，调整大小并放至合适位置，如图5-2-10所示。选中素材“主标题.png”并单击鼠标右键，在弹出的菜单中选择【转换为元件】命令（或使用快捷键F8），在弹出的【转换为元件】对话框中，在【名称】文本框中输入“主标题”，将【类型】设置为“图形”，单击“确定”按钮，将其转换为元件，如图5-2-11所示。

图5-2-11“主标题”图形元件图5-2-10“主标题”舞台效果

任务实施1制作“二十四节气”片头动画⑺在“标题动画”层第15帧，使用【选择工具】选中“主标题”图形实例，在【属性】面板中的【色彩效果】列表框中选择“Alpha”选项并设置值为“0%”，在【位置和大小】中设置宽和高各为1，如图5-2-12所示。在第30帧，按F6键插入关键帧（其他图层按F5插入普通帧），在【属性】面板中设置“Alpha”值为“100%”，【位置和大小】中的宽和高参数设置，如图5-2-13所示。用鼠标右键单击时间线任意位置，在弹出的菜单中选择【创建传统补间】命令。图5-2-13“属性”面板设置

图5-2-12“属性”面板设置任务实施1制作“二十四节气”片头动画⑻在“标题动画”层上方新建“图层_3”，重命名为“印章”。选中“印章”层第31帧，按F7键插入空白关键帧，从【库】面板中将素材“印章.png”拖动到舞台中，放至合适位置，如图5-2-14所示。⑼选中“标题动画”层第31帧，按F6键插入关键帧（其他图层按F5插入普通帧），选中“主标题”图形元件实例，在【属性】面板中，将【实例行为】列表框由“图形”类型改为“按钮”类型，【实例名称】文本框中输入btn，如图5-2-15所示。图5-2-15修改为“按钮”元件

图5-2-14当前舞台效果任务实施2制作“二十四节气”导航按钮⑴选择【插入】|【新建元件】命令（或使用快捷键Ctrl+F8），在弹出的【创建新元件】对话框中，设置参数如图5-2-16所示。在元件编辑模式下，将“图层_1”重命名为“图片”。将播放头置于“弹起”状态，选择【椭圆工具】，设置“笔触颜色”为无，按住Alt+Shift在舞台中央绘制一个正圆。使用【选择工具】选中圆形，在【颜色】面板中，将【颜色类型】设置为“位图填充”，选择文件“24节气.png”，

如图5-2-17所示。使用【渐变变形工具】调整图像，将播放头置于“点击”状态，按F5插入普通帧。图5-2-16“创建新元件”按钮

图5-2-17位图填充设置任务实施2制作“二十四节气”导航按钮⑵在“图片”层上方新建“图层_2”，重命名为“文字”。将播放头置于“指…”状态，按F7插入空白关键帧，使用【文本工具】输入“节气内涵”，调整大小及位置，将播放头置于“点击”状态，按F5插入普通帧，时间轴如图5-2-18所示，按钮效果如图5-2-19所示。单击“返回”按钮，切换到场景1。图5-2-18按钮时间轴显示

图5-2-19按钮效果任务实施2制作“二十四节气”导航按钮⑶在【库】面板中选中按钮“btn1”并右击，在弹出的菜单中选择【直接复制】命令，在打开的【直接复制元件】对话框中，设置【名称】为“btn2”，单击【确定】按钮。双击【库】面板“btn2”前面的图标，进入元件编辑模式。使用【选择工具】选中圆形，在【颜色】面板中，选择文件“春夏秋冬.png”，使用【渐变变形工具】调整图像。重复（3）操作，复制按钮元件重命名为“btn3”，

在【颜色】面板选择文件“古诗词与节气.jpg”，使用【渐变变形工具】调整图像。

⑷在“印章”层上方新建“图层_4”，重命名为“导航按钮”。在第32帧，按F7插入空白关键帧，从【库】面板中将按钮“btn1、btn2、btn3”依次拖动到舞台中，调整大小放至舞台下方，如图5-2-20所示。依次选择按钮，在其【属性】面板中，将【实例名称】分别设置为“btn1、btn2、btn3”，舞台效果时间轴如图5-2-21所示。图5-2-20导航按钮效果图5-2-21时间轴显示任务实施3制作“二十四节气”科普内容动画⑴选择“背景”层第32帧，从【库】面板中将素材“祥云背景.png”拖动到舞台中，利用【对齐】面板，置于舞台中央。⑵在“导航按钮”层上方新建“图层_5”，重命名为“小标题”。选择第32帧，从【库】面板中依次将素材“小标题.png、印章.png”拖动到舞台中，放至合适位置，如图5-2-22所示。⑶在“小标题”层上方新建“图层_6”，重命名为“节气内涵”。在第32帧按F7插入空白关键帧，使用【矩形工具】，填充颜色为“#CCCCCC”，笔触颜色为无，绘制矩形。【属性】面板，设置矩形大小宽954高452。选中绘制的矩形，按F8将其转换为“图形”元件，命名为“24节气内涵”，如图5-2-23所示。图5-2-23创建“24节气内涵”图形元件图5-2-22舞台效果任务实施3制作“二十四节气”科普内容动画⑷双击“24节气内涵”图形实例，进入元件编辑模式。将“图层_1”重命名为“主边框”，单击第1帧，选定绘定的边框右击，在弹出的菜单中选择“转换元件”命令。在“转换为元件”对话框中，设置【名称】为主边框，【类型】为影片剪辑，单击【确定】按钮。选定“主边框”影片剪辑实例，在【属性】面板中，添加【滤镜】效果中的【投影】效果，如图5-2-24所示。【投影】参数设置，如图5-25所示。⑸新建图层重命名为“文字内容”。打开“素材”文件夹中“文字内容.txt”文件，选中文字内容Ctrl+C复制到剪贴板，使用【文本工具】在舞台创建文本框，Ctrl+V将文字内容粘贴到文本框中，在【属性】面板中设置适合的文字大小及行距，切换到“场景1”中，舞台效果如图5-2-26所示。图5-2-26当前舞台效果图5-2-24添加投影图5-2-25设置投影任务实施3制作“二十四节气”科普内容动画⑹在“节气内涵”层上方新建“图层_7”，重命名为“节气详解”。选择【插入】|【新建元件】命令（或使用快捷键Ctrl+F8），在弹出的【创建新元件】对话框中，【名称】为“24节气详解”，【类型】为影片剪辑，如图5-2-27所示。进入元件编辑模式下，将“图层_1”重命名为“节气详解”，从【库】面板中将素材“节气1.png”拖动到舞台中，利用【对齐】面板置于舞台中央。图5-2-27“创建新元件”按钮

任务实施3制作“二十四节气”科普内容动画⑺按F6插入关键帧，选中第2帧的素材“节气1.png”右击，在弹出的快捷菜单选择【交换位图】命令，如图5-2-28所示。在打开的对话框中选择“节气2.png”，单击“确定”按钮，如图5-2-29所示。再按F6插入关键帧，选中第3帧上的对象右击，在弹出的快捷菜单选择【交换位图】命令，在打开的对话框中选择“节气3.png”，单击“确定”按钮，最终完成二十四节气图片的展示。图5-2-28交换位图图5-2-29对话框任务实施3制作“二十四节气”科普内容动画(8)在“节气详解”层上方新建“图层_2”，重命名为“翻页按钮”。选择【多角星形工具】，在【属性】面板中，设置【颜色和样式】填充颜色为“#C8C8C8”，“笔触颜色”为无，【工具选项】中【边数】修改为“3”，在舞台绘制三角形，并调整大小方向及位置，图5-2-30所示。选中绘制的“三角形”按F8，在弹出的【转换为元件】对话框中，【名称】为“page”，【类型】为“按钮”，图5-2-31所示。选中“page”，在【属性】面板中设置【实例名称】为“btn6”。双击进入所创建元件编辑模式，将播放头置于“点击”状态，按F5插入普通帧，单击“24节气详解”影片剪辑，切换到影片剪辑元件中。图5-2-30绘制翻页按钮图5-2-31“page”按钮元件任务实施3制作“二十四节气”科普内容动画(9)选中“翻页按钮”层第1帧，使用【选择工具】按住Alt拖动“page”按钮实例，移动到节气图片的最左侧。选中左侧的“page”按钮实例并右击，在弹出的快捷菜单中选择【变形】|【水平翻转】命令，如图5-2-32所示。在【属性】面板中，设置【实例名称】为“btn5”。选择“翻页按钮”层第3帧，按F5键插入普通帧。图5-2-32“水平翻转”命令

任务实施3制作“二十四节气”科普内容动画(10)选定“翻页按钮”层第1帧并右击，在快捷菜单选择【动作】命令（或按F9），在打开的【动作面板】中，单击【代码片断】按钮。在弹出的【代码片断】面板中，双击【ActionScript】|【时间轴导航】|【在此帧处停止】命令，如图5-2-33所示。此时，【动作】面板中【脚本编辑器】窗格代码如图5-2-34所示。时间轴的所有图层之上添加一个Actions图层，第1帧出现“a”标记，时间轴如图5-2-35所示。图5-2-33“代码片断”面板图5-2-34代码显示

图5-2-35时间轴显示

任务实施3制作“二十四节气”科普内容动画(11)选择“Actions”层第1帧右击，在快捷菜单选择【动作】命令（或按F9），打开“动作面板”。选中舞台右侧“btn6”按钮实例，单击【动作】|【代码片断】按钮。在弹出的【代码片断】面板中，双击【ActionScript】|【时间轴导航】|【单击以转到下一帧并停止】，如图5-2-36所示。选中舞台左侧“btn5”按钮实例，单击【动作】|【代码片断】按钮。在弹出的【代码片断】面板中，双击【ActionScript】|【时间轴导航】|【单击以转到前一帧并停止】，如图5-2-37所示。

选择“Actions”图层第1帧，【动作面板】中代码如图5-2-38所示。单击“返回”按钮，返回到场景1中。图5-2-36“代码片断”面板

图5-2-37“代码片断”面板

图5-2-38代码显示效果

图5-2-39舞台效果任务实施3制作“二十四节气”科普内容动画(12)选定“节气详解”层第33帧，从【库】面板中拖动影片剪辑元件“24节气详解”到舞台中，使用【任意变形工具】调整大小及位置。在“导航按钮”“小标题”“背景”层分别按F5键插入帧，当前舞台效果如图5-2-39所示。(13)在“节气详解”层上方新建图层，重命名为“节气里的古诗词”，选择第34帧按F7插入空白关键帧。选择【插入】|【新建元件】命令（或使用快捷键Ctrl+F8），在弹出的【创建新元件】对话框中，【名称】为“古诗词”，【类型】为影片剪辑，如图5-2-40所示。将“图层_1”重命名为“古诗词”，选中第1帧，选择【文件】|【导入】|【导入到舞台】命令。在打开的【导入】对话框中选择“节气里的古诗词”文件夹中的“01.jpeg”文件，单击“打开”按钮，如图5-2-41所示。在弹出的对话框中单击“是”按钮，将序列图片导入到舞台中，如图5-2-42所示。图5-2-40创建影片剪辑

图5-2-41“导入”对话框

任务实施3