10、层和时间轴

AE图层时间轴的操作方法Adobe After Effects（简称AE）是一款功能强大的视频特效制作软件，它的图层时间轴是软件最核心的部分之一。

在使用AE进行视频特效制作时，熟练掌握图层时间轴的操作方法是非常重要的。

下面将详细介绍AE图层时间轴的操作方法。

1. 创建图层在AE软件中，首先要创建一个图层。

可以通过点击菜单栏上的"文件"-"新建"-"项目"来创建一个新的项目，然后点击“新建合成”按钮，在弹出的窗口中设置好合成的尺寸、帧速率等参数后，点击确定。

接着，在“项目”窗口中右击，选择“新建”-“合成”，即可创建一个新的合成。

在合成窗口中，右击选择“新建”-“文件”，即可添加需要的素材，这些素材会作为图层添加到合成中。

2. 移动和调整图层的位置选中一个图层后，可以使用鼠标左键在合成窗口中拖拽来移动图层的位置。

想要调整图层的持续时间，只需将鼠标放在图层右侧的边框上，当鼠标变为双向箭头形状时，点击并拖动即可。

3. 裁剪图层想要将一个图层的时间轴裁剪到指定的范围内，可以选中图层后，在时间轴窗口下方的时间轴区域中，点击并拖动鼠标，将时间缩小到需要的范围内。

4. 平移和缩放时间轴视图为了更好地查看图层在时间轴上的状态，可以使用时间轴工具栏上的“平移工具”和“缩放工具”来改变时间轴视图。

通过使用平移工具，可以移动时间轴的显示位置；而使用缩放工具，可以缩放时间轴的显示范围。

5. 添加和删除关键帧关键帧是实现动画效果的重要元素，在时间轴上通过改变属性值来设置关键帧。

选中一个图层后，在时间轴上找到要改变的属性，例如位置、透明度等，然后点击属性旁边的小钻石图标，即可在该位置添加一个关键帧。

要删除关键帧，只需选中关键帧后，点击键盘上的“Delete”键即可。

6. 时间缩放和时间偏移除了调整关键帧，还可以通过时间缩放和时间偏移来改变图层在时间轴上的位置和长度。

网页中层的运用摘要：对层的精确定位，可以任意控制层的前后位置、显示与隐藏，这些大大增强了网页设计的灵活性。

关键词：层网页设计在使用Dreamweaver软件制作网页的过程中，层是一个很重要的概念。

简单地说，网页中的层就是网页内容的一个容器，在层中可以放置文本、图像、表单、对象插件，甚至还可以插入其他层。

层最主要的特性就是可以在网页上自由浮动，可以放置在网页上的任何位置，从而实现对层的精确定位。

而且层的位置可以重叠，可以任意控制层的前后位置、显示与隐藏，这些大大增强了网页设计的灵活性。

同时层与时间轴结合，可以轻松地在页面上制作出效果。

下面就通过实例来说明层在网页制作中的运用。

实例一、拼图游戏——拖动层内容简介：本例主要介绍使用层的技术，结合行为的应用，在网页中实现拼图的效果。

访问者在浏览网页时，可用鼠标拖动网页中的图像碎片，将其拼成完整的图形。

制作步骤：(1)启动Dreamweaver，新建文档并保存。

(2)准备多张GIF图片，它们各是一幅完整图像的一部分。

保存在同一个文件夹下，分别命名为01.gif，02.gif，03.gif……(3)选择“插入”面板中“常用”选项卡下的“描绘层”，在设计页面中画出一个层，自动命名为“Layer1”，将光标置入层“Layer1”中，选择“插入”“图像”，在层中插入文件夹下的一幅图像，如01.gif。

(4)在不选中任何层的情况下，在“行为”面板中单击“加号（+）”，在弹出菜单中选择“拖动层”（选中层后无法选取“拖动层”命令），在弹出的“拖动层”对话框中，选中“层”下拉菜单中的“层Layer1”，单击“确定”按钮。

(5)在行为面板中选中新添加的行为，单击事件右侧的箭头，将事件修改为“OnMouseMove”（鼠标在对象上移动时）。

如图1所示。

(6)按同样的方法将其余的图像添加到各个层中后，给各个层添加行为（注意：要设置哪一个层，就在“拖动层”对话框中的“层”下拉菜单中选择哪一个层），并在设计页面中将它们打乱分布在页面上。

第6单元表格、图层、行为、时间轴课程目标：●掌握在网页中插入表格方法●掌握网页中细线表格、立体表格等制作方法●掌握层的使用建议学时：理论3学时，实践3学时。

6.1 表格表格在网页中是一种用途非常广泛的工具，这不仅表现在它可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，使这些元素的水平位置、垂直位置发生细小变化，这在网页版面布局方面是非常重要的。

对于网页的排版布局来说，表格是不可或缺的工具。

作为一名网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，因上掌握网页表格是十分重要的。

6.1.1 表格的插入要在页面中插入表格，可按以下步骤操作。

（1）使用菜单【插入】|【表格】，或常用工具栏的【表格】工具。

（2）弹出【表格】对话框，如图6-1所示。

图6-1 表格对话框行数：设置表格的行数。

列数：设置表格的列数表格宽度：设置表格的宽度，可使用“像素值”为单位，也可以使用“百分比”作为单位，在嵌套表格中常使用百分比。

边框粗细：设置表格线宽度，单位是像素。

单元格边距：设置表格单元格内部和表格线的距离。

单元格间距：设置单元格之间的距离。

其它可使用默认设置，按下确定后，在页面出现插入的表格，表格下方的淡绿色线条及数据为表格的宽度数据。

图6-2 插入表格示例6.1.2 设置表格属性选中表格后，属性面板变为了表格的属性面板，可以在属性面板中直接设置表格的各项属性。

图6-3 表格属性面板①表格Id：设置表格的ID号，一般可不输入。

②行、列：设置表格行数、列数。

③宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。

④填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。

⑤对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。

⑥边框：设置边框的宽度，单位是像素。

⑦类：使用CSS中定义的类（见有关CSS章节）⑧列宽控制、行高控制按钮组：上行包含有清除表格宽度、将宽度转换为像素值、将宽度转换为百分比三个按钮。

AE中的时间轴控制技巧时间轴是Adobe After Effects（AE）软件中非常重要的一个工具，它能够帮助我们控制和管理动画的关键帧，使我们能够精确地控制和调整动画的各个元素。

在本文中，我们将学习一些在AE中使用时间轴的技巧和方法，以帮助我们更好地控制和编辑动画。

1. 分层调整动画时长 - 在AE中，我们可以通过调整层的持续时间来改变动画的时长。

只需将光标放在时间轴上的层末尾，在出现双向箭头后，单击并拖动以调整层的持续时间。

这一技巧非常实用，可以帮助我们在不改变其他关键帧的情况下延长或缩短动画的时长。

2. 时间拉伸和收缩 - 有时候，我们需要将动画的整个时间轴拉伸或收缩，以使其适应特定的时间段。

在AE中，我们可以使用“时间拉伸/收缩”工具来实现这个目标。

只需在工具栏上选择该工具，然后单击并拖动时间轴上的区域，即可拉伸或收缩选定的时间段。

这对于需要调整动画节奏或在特定时间段加速或减慢动画非常有用。

3. 关键帧调整 - 时间轴中的关键帧是我们控制动画的关键。

AE提供了多种方式来调整和编辑关键帧。

我们可以在时间轴上选择并移动关键帧，以调整其位置和时间。

同时，我们也可以使用“贝塞尔曲线”工具来改变关键帧的动画速度和缓冲效果。

这些关键帧调整技巧可以帮助我们精确地调整动画效果，使其更加自然和流畅。

4. 时间线缩略图 - AE的时间轴还提供了一个方便的功能，即时间线缩略图。

时间线缩略图可以帮助我们快速了解动画的整体结构，以便更好地管理和编辑。

要启用时间线缩略图，只需在时间轴面板的右上角单击缩略图按钮即可。

该功能对于大型项目或包含多个层的复杂动画尤其有用。

5. 音频关键帧 - AE不仅可以处理图像和视频，还可以处理音频。

时间轴中的音频关键帧允许我们对音频进行控制和调整。

我们可以在时间轴上选择音频层，在合适的位置添加音频关键帧，并使用关键帧调整技巧来改变音量、淡入淡出效果等。

这使得我们能够更好地同步音频和图像，创造出更具感染力的动画作品。

《网页设计与制作》课程单元教学设计---《项目: 缥缈世界和小魔术》一、教案首页本次课标题任务10 利用图层、时间轴和行为三结合综合实现动态效果网页设计与制作所属学科理科专业计算机应用课程网页设计与制作授课班级11计算机应用适用对象计算机专业高职生上课时间15-20分钟上课地点理实一体化教室教学目的要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。

教学目标能力目标知识目标素质目标1．能使用“图层”加载动态效果网中的对象2．能通过使用“时间轴”实现动态效果3．能灵活应用“行为”实现动态效果的控制1．动态效果网页制作“三元素”2．图层、时间轴和行为三者在实现动态效果网页的具体常规作用3．动态效果网页设计与制作三元素的使用规律或步骤1．培养学生理论联系实际的品质2．培养学生敏锐的洞察力和分析力4．培养学生举一反三设计与动手并重的素质任务与案例任务1：飘渺世界（任意飘动的对象能停能动；背景和文字颜色单击改变），此为目标任务任务2：小魔术，此为补充实例（分析+演示+总结）重点难点及解决方法重点：图层和时间轴用来实现动态效果难点：灵活应用行为实现控制动态效果解决方法：引导学生根据任务要求，在温故知新的前提下，让学生有意识挖掘理论知识点，通过补充案例的分析和现场演示，并整理要点规律，再而回到引导任务加以分析实现，完成目标任务的同时夯实了理论知识点的掌握，为将来的举一反三奠定了坚实的理论和操作基础。

学习环境选择与学习资源设计1. 学习环境选择（1）多媒体教室（2）普通教师（3）计算机实验机房（4）专业实训室2. 学习资源设计（1）多媒体课件（2）网页素材及补充实例资源库形式方法手段目标导入+实例展示、讲解+教师提问+案例分析与实现+学生代表分析、教师点评、讲解并总结参考资料1、《dreamwear mx网页设计与制作》2、《dreamwear 8网页设计与实训教程》3、网上资料二、教学设计序号步骤名称教学内容教师活动学生活动时间分配(分)工具与材料课内/课外1告知（教学内容、目的）告知：本次课的教学内容：动态效果制作篇教学目的：要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。

《网页设计课后复习题》第一章网页设计概述一、填空题。

1.HTML是超文本标记语言的英文缩写，全称是Hyper Text Markup Language。

2.现在网络上使用的绝大多数图片和图像是gif格式、jpeg格式和png文件格式。

3.通过超链接可以从一个网页转到另一个网页，也可以从一个网页转到另一个网页。

超链接的载体包括文本、图像和热区三种。

4.网页能够把信息以多媒体的方式表现出来，同时把世界各地的信息链接在一起。

网页的基本功能有媒体的作用、互动的作用和传输的作用三方面。

5.PNG格式是Fireworks默认的格式。

它结合了jpeg和gif的优点，也支持透明和交错，是无损压缩的。

二、选择题。

1.网页中最基本的元素是（D）。

D.文字。

2.浏览网页时，当鼠标指针指向超链接时，通常鼠标指针的形状会变成（A）。

A.手形。

3.下列（D）不是用于制作网页的软件。

D.ORC。

4.以下图像格式具有动画效果的是（B）。

B.GIF。

5.网页编制完成以后，一般是以(C)为扩展名存盘的。

C.html。

第二章HTML语言基础一、填空题。

1.在HTML语言中文本文档标签是必须的。

2.在HTML语言中<P>标记的作用是表示一个文本段落的开始。

3.在插入图像或者使用超链接时，路径有相对路径和绝对路径两种。

4.HTML的英文全称是Hypertext Markup Language。

5.HTML列表常用的包括有序列表和无序列表，有序列表的标记是<OL>，无序列表的标记是<UL>。

二、选择题。

1.为同段落中的文本换行时，HTML标记为（B）。

B.<br>。

2.HTML代码<img src=url>表示（A）。

A.添加一个图像。

3.在HTML文档中创建最大的标题的文本标签是（B）。

B.<hL></hL>。

4.在HTML文档中网页的主体内容将写在（A）标记内。