《网页设计基础教程与上机指导第版使用图层和时间轴.ppt》由会员分享，可在线阅读，更多相关《网页设计基础教程与上机指导第版使用图层和时间轴.ppt（20页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、http:/网页设计基础教程与上机指导第版使用图层和时间轴 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望http:/教学提示和教学目标教学提示和教学目标n教学提示：在教学提示：在Flash中，图层是一个比较重要的概念。一般中，图层是一个比较重要的概念。一般的的Flash动画中都有多个图层，用来存放不同类型的对象。动画中都有多个图层，用来存放不同类型的对象。这样在某一个图层中创建或者是编辑对象的时候，就不会影这样在某一个图层中创建或者是编辑对象的时候，就不会影响到
2、其他图层中的对象。响到其他图层中的对象。n时间轴是时间轴是Flash 8非常重要的部分，它和动画的制作有着非非常重要的部分，它和动画的制作有着非常密切的关系，学会使用时间轴是进行动画制作的基础。常密切的关系，学会使用时间轴是进行动画制作的基础。n教学目标：教学目标：掌握编辑场景掌握编辑场景掌握改变场景背景掌握改变场景背景掌握帧和帧频掌握帧和帧频掌握时间轴特效的应用掌握时间轴特效的应用掌握图层的使用掌握图层的使用http:/18.1 场场 景景nFlash动画在网页上相当于一部小型的电影，动画在网页上相当于一部小型的电影，在制作过程中需要使用不同的场景。通过场在制作过程中需要使用不同的场景。通过
3、场景的不断变化以及一些特效的加入，然后在景的不断变化以及一些特效的加入，然后在导演的指挥下各个演员按预定的时间出现在导演的指挥下各个演员按预定的时间出现在舞台中，最终成为一部小型电影，这就是舞台中，最终成为一部小型电影，这就是Flash动画。动画。n18.1.1 编辑场景编辑场景n18.1.2 改变场景属性改变场景属性http:/18.1.1 编辑场景编辑场景【打开场景】：选择【窗口】【打开场景】：选择【窗口】|【其他面板】【其他面板】|【场景】命令，打开【场景】【场景】命令，打开【场景】面板。面板。【重命名场景】：双击一个场景名，此场景名变为高亮显示，如图【重命名场景】：双击一个场景名，此场
4、景名变为高亮显示，如图18.2所示。所示。在文本框中输入名称，即可为场景重命名。在文本框中输入名称，即可为场景重命名。【添加场景】：单击【场景】面板底部的【添加场景】按钮，或者选择【插【添加场景】：单击【场景】面板底部的【添加场景】按钮，或者选择【插入】入】|【场景】命令，也可以添加一个场景。【场景】命令，也可以添加一个场景。【复制场景】：如果在影片中需要相同的场景，可以将场景复制，单击【场【复制场景】：如果在影片中需要相同的场景，可以将场景复制，单击【场景】面板底部的【直接复制场景】按钮，直接复制一个场景。景】面板底部的【直接复制场景】按钮，直接复制一个场景。【删除场景】：如果在影片中有不需
5、要的场景，单击【场景】面板底部的【删除场景】：如果在影片中有不需要的场景，单击【场景】面板底部的【删除场景】按钮，弹出删除场景】按钮，弹出Flash 8提示框，如图提示框，如图18.5所示。单击【确定】按钮，所示。单击【确定】按钮，即可删除场景。即可删除场景。【切换场景】：当有多个场景时，如果需要切换到某一个场景时，可在【场【切换场景】：当有多个场景时，如果需要切换到某一个场景时，可在【场景】面板中单击需要的场景名称，或者单击【视图】菜单，在弹出菜单中选景】面板中单击需要的场景名称，或者单击【视图】菜单，在弹出菜单中选择需要的场景名称。择需要的场景名称。【调整场景】：也可单击场景窗口右上角的【
6、编辑场景】按钮，在弹出的菜【调整场景】：也可单击场景窗口右上角的【编辑场景】按钮，在弹出的菜单中选择要编辑的场景名称，如图单中选择要编辑的场景名称，如图18.8所示。当场景位置需要调整的时，在所示。当场景位置需要调整的时，在【场景】面板中，选择需要调整位置的场景，然后拖动它到合适的位置。调【场景】面板中，选择需要调整位置的场景，然后拖动它到合适的位置。调整场景的位置后，在播放动画时会以调整后的顺序显示各个场景。整场景的位置后，在播放动画时会以调整后的顺序显示各个场景。http:/18.1.2 改变场景属性改变场景属性n每个场景都有高、宽、背景颜色和帧频属每个场景都有高、宽、背景颜色和帧频属性，
7、因此在编辑动画前，需要设置场景的性，因此在编辑动画前，需要设置场景的属性。属性。图18.9 【文档属性】对话框n选择【修改】选择【修改】|【文档】命令，打开【文档【文档】命令，打开【文档属性】对话框，如图属性】对话框，如图18.9所示，在此对话所示，在此对话框中可以修改场景的属性。框中可以修改场景的属性。n在【文档属性】对话框中可以进行如下设在【文档属性】对话框中可以进行如下设置。置。n【帧频】：在【帧频】文本框中输入播放【帧频】：在【帧频】文本框中输入播放速度。速度。n【尺寸】：在【宽】和【高】文本框中设【尺寸】：在【宽】和【高】文本框中设置场景的宽度和高度。置场景的宽度和高度。n【背景颜色
8、】：单击后面的颜色框，在弹【背景颜色】：单击后面的颜色框，在弹出的调色板中可以设置场景的背景颜色。出的调色板中可以设置场景的背景颜色。n【默认】：选中此按钮可以将设置的参数【默认】：选中此按钮可以将设置的参数保存为默认参数。修改了默认的参数并且保存为默认参数。修改了默认的参数并且此单选按钮后，以后新建的动画都会使用此单选按钮后，以后新建的动画都会使用此默认参数。此默认参数。http:/18.2 时时 间间 轴轴n时间轴是时间轴是Flash进行动画创作和编辑的主要工进行动画创作和编辑的主要工具，默认情况下，它位于舞台上方。用户可具，默认情况下，它位于舞台上方。用户可以根据自己的习惯，用鼠标拖动时
9、间轴窗口以根据自己的习惯，用鼠标拖动时间轴窗口到其他位置，形成一个单独的窗口。到其他位置，形成一个单独的窗口。n18.2.1 帧和帧频帧和帧频n18.2.2 编辑帧编辑帧n18.2.3 时间轴特效时间轴特效http:/18.2.1 帧和帧频帧和帧频n帧是创建动画的基础，也是构成动画的最基本的元帧是创建动画的基础，也是构成动画的最基本的元素之一。在时间轴中可以很明显的看出帧和图层是素之一。在时间轴中可以很明显的看出帧和图层是一一对应的。帧代表着时刻，不同的帧即为不同的一一对应的。帧代表着时刻，不同的帧即为不同的时刻，画面会随着时间的推移逐个显示。时刻，画面会随着时间的推移逐个显示。n帧频是影响帧
10、频是影响Flash动画快慢的关键，标准动态图像动画快慢的关键，标准动态图像的帧速度是的帧速度是24fps，要求在网络上有最佳表现，应，要求在网络上有最佳表现，应该选择每秒钟播放该选择每秒钟播放12帧。帧。http:/18.2.2 编辑帧编辑帧n插入帧以后，如果对帧不满意，可以编辑帧，编辑帧有删除帧、移动帧插入帧以后，如果对帧不满意，可以编辑帧，编辑帧有删除帧、移动帧和转换关键帧等操作。和转换关键帧等操作。【删除帧】：选中不需要的帧，选择【编辑】【删除帧】：选中不需要的帧，选择【编辑】|【时间轴】【时间轴】|【删除【删除帧】命令，或者右击，在弹出的快捷菜单中选择【删除帧】选项，帧】命令，或者右击
11、，在弹出的快捷菜单中选择【删除帧】选项，即可删除选中的帧。即可删除选中的帧。【移动帧】：选中需要移动的帧或者关键帧，然后拖动鼠标到目标【移动帧】：选中需要移动的帧或者关键帧，然后拖动鼠标到目标位置即可。位置即可。【复制帧】：选中一个或者多个需要复制的帧，选择【编辑】【复制帧】：选中一个或者多个需要复制的帧，选择【编辑】|【复【复制帧】命令，或者右击，在弹出的快捷菜单中选择【复制帧】选项，制帧】命令，或者右击，在弹出的快捷菜单中选择【复制帧】选项，即可复制帧。即可复制帧。【关键帧的转换】：如果将帧转换为关键帧，选中需要转换为关键【关键帧的转换】：如果将帧转换为关键帧，选中需要转换为关键帧的帧，选
12、择【修改】帧的帧，选择【修改】|【时间轴】【时间轴】|【转换为关键帧】命令，或者【转换为关键帧】命令，或者选中需要转换为关键帧的帧，右击，在弹出的快捷菜单中选择【转选中需要转换为关键帧的帧，右击，在弹出的快捷菜单中选择【转换为关键帧】选项。换为关键帧】选项。http:/18.2.3 时间轴特效时间轴特效n每种时间轴特效都以一种特定的方式处理图形或元件，并允许用户更改每种时间轴特效都以一种特定的方式处理图形或元件，并允许用户更改所需特效的个别参数。在预览窗口中，用户可以在更改设置之后快速查所需特效的个别参数。在预览窗口中，用户可以在更改设置之后快速查看所作的更改。看所作的更改。n1.【变形】时间
13、轴特效【变形】时间轴特效n2.【转换】时间轴特效【转换】时间轴特效n3.【分散式直接复制】时间轴特效【分散式直接复制】时间轴特效n4.【复制到网格】时间轴特效【复制到网格】时间轴特效n5.【分离】时间轴特效【分离】时间轴特效n6.【展开】时间轴特效【展开】时间轴特效n7.【投影】时间轴特效【投影】时间轴特效n8.【模糊】时间轴特效【模糊】时间轴特效http:/1.【变形】时间轴特效【变形】时间轴特效n在【变形】对话框中可以进行如下设置。在【变形】对话框中可以进行如下设置。【效果持续时间】：设置对象的特效持续的时间【效果持续时间】：设置对象的特效持续的时间(以帧为单位以帧为单位)。【更改位置方式
14、】：在其下拉列表中有两个选项。【更改位置方式】：在其下拉列表中有两个选项。【移动位置】：按【移动位置】：按X轴、轴、Y轴的偏移量轴的偏移量(以像素为单位以像素为单位)移动到指定的坐标位置。移动到指定的坐标位置。【更改位置方式】：按【更改位置方式】：按X轴、轴、Y轴的偏移量轴的偏移量(以像素为单位以像素为单位)改变位置。改变位置。【缩放比例】：缩放比例即为调节大小。【缩放比例】：缩放比例即为调节大小。【旋转】：旋转是以度数为单位的。旋转的度数与次数相关联。【旋转】：旋转是以度数为单位的。旋转的度数与次数相关联。【次数】：有【逆时针】、【顺【次数】：有【逆时针】、【顺时针】两个按钮，单击可以设置时
15、针】两个按钮，单击可以设置旋转方向。旋转方向。【更改颜色】：可以修改最终的【更改颜色】：可以修改最终的颜色，即动画是由对象本身的颜颜色，即动画是由对象本身的颜色渐变到修改后的颜色。色渐变到修改后的颜色。【最终颜色】：设置是以【最终颜色】：设置是以RGB模模式的，或者直接输入十六进制值式的，或者直接输入十六进制值也可以。也可以。【最终的【最终的Alpha】：设置动画的】：设置动画的透明度渐变，变化也是以百分比透明度渐变，变化也是以百分比为单位的。为单位的。【移动缓慢】：设置动画的速度。【移动缓慢】：设置动画的速度。http:/2.【转换】时间轴特效【转换】时间轴特效n在【转换】对话框中可以在【转
16、换】对话框中可以进行如下设置。进行如下设置。【效果持续时间】：设置对【效果持续时间】：设置对象的特效持续的时间象的特效持续的时间(以帧为以帧为单位单位)。【方向】：选中【入】或【方向】：选中【入】或【出】单选按钮，可以设置过出】单选按钮，可以设置过渡特效的方向。渡特效的方向。【淡化】：选中【入】单选【淡化】：选中【入】单选按钮，并选中此复选框，获按钮，并选中此复选框，获得淡入效果。得淡入效果。【涂抹】：选中【出】单选【涂抹】：选中【出】单选按钮，并选中此复选框，获按钮，并选中此复选框，获得淡出效果。得淡出效果。【移动缓慢】：设置开始时【移动缓慢】：设置开始时慢速，然后逐渐变快，或开慢速，然后逐
17、渐变快，或开始时快，然后逐渐变慢。始时快，然后逐渐变慢。http:/3.【分散式直接复制】时间轴特效【分散式直接复制】时间轴特效n在【分散式直接复制】对话框中可以进行如在【分散式直接复制】对话框中可以进行如下设置。下设置。【副本数量】：根据需要设置副本的数量。【副本数量】：根据需要设置副本的数量。【偏移距离】：可以根据【偏移距离】：可以根据X轴、轴、Y轴的位置分轴的位置分别设置。别设置。【偏移旋转】：以度数为单位设置的。【偏移旋转】：以度数为单位设置的。【偏移起始帧】：以时间轴的帧数为单位。【偏移起始帧】：以时间轴的帧数为单位。【缩放比例】：设置缩放的方式和百分数。【缩放比例】：设置缩放的方式
18、和百分数。【指数缩放比例】：按百分数在【指数缩放比例】：按百分数在x和和y方向同方向同时缩放。时缩放。【线性缩放比例】：按百分数在【线性缩放比例】：按百分数在x和和y方向同方向同时缩放。时缩放。【更改颜色】：可以修改最终的颜色，即动画【更改颜色】：可以修改最终的颜色，即动画是由对象本身的颜色渐变到修改后的颜色。最是由对象本身的颜色渐变到修改后的颜色。最终颜色的设置是以终颜色的设置是以RGB模式的，或者直接输模式的，或者直接输入十六进制值也可以。单击此按钮，可以指定入十六进制值也可以。单击此按钮，可以指定最后复件的颜色，中间的复件将逐渐过渡到这最后复件的颜色，中间的复件将逐渐过渡到这种颜色。种颜
19、色。【最终的【最终的Alpha】：用于设置动画的透明度，】：用于设置动画的透明度，变化式以百分比为单位的。变化式以百分比为单位的。http:/4.【复制到网格】时间轴特效【复制到网格】时间轴特效n在【复制到网格】对话框中可以进行如下设置。在【复制到网格】对话框中可以进行如下设置。【网格尺寸】：【行数】是设置网格的行数；【列数】是设置网格的列数。【网格尺寸】：【行数】是设置网格的行数；【列数】是设置网格的列数。【网格间距】：【行数】是设置行间距【网格间距】：【行数】是设置行间距(以像素为单位以像素为单位)；【列数】是设置列；【列数】是设置列间距间距(以像素为单位以像素为单位)。http:/5.【
20、分离】时间轴特效【分离】时间轴特效n在【分离】对话框中可以进行如下设置。在【分离】对话框中可以进行如下设置。【效果持续时间】：设置对象的特效持续的时间【效果持续时间】：设置对象的特效持续的时间(以帧为单位以帧为单位)。【分离方向】：单击【分离】方向按钮，设置分离的特效的运动方向。【分离方向】：单击【分离】方向按钮，设置分离的特效的运动方向。【弧线大小】：设置碎片的旋转角度【弧线大小】：设置碎片的旋转角度(以度为单位以度为单位)。【碎片大小更改量】：设置碎片【碎片大小更改量】：设置碎片X、Y方向的更改量方向的更改量(以像素为单位以像素为单位)。【最终的【最终的Alpha】：设置分离特效的最后透明
21、度为百分数。】：设置分离特效的最后透明度为百分数。http:/6.【展开】时间轴特效【展开】时间轴特效n在【展开】对话框中可以进行如下设置。在【展开】对话框中可以进行如下设置。【效果延续时间】：设置对象的特效持续的时间【效果延续时间】：设置对象的特效持续的时间(以帧为单位以帧为单位)。展开、压缩，两者皆是设置特效的运动形式。展开、压缩，两者皆是设置特效的运动形式。【移动方向】：单击方向按钮，设置扩展特效的运动方向。【移动方向】：单击方向按钮，设置扩展特效的运动方向。【组中心转换方式】：设置运动在【组中心转换方式】：设置运动在x和和y方向的偏移量方向的偏移量(以像素为单位以像素为单位)。【碎片偏
22、移】：设置碎片【碎片偏移】：设置碎片(如文本中的每个中文字或字母如文本中的每个中文字或字母)的偏移量。的偏移量。【碎片大小更改量】：通过改变高度和宽度值来改变碎片的大小【碎片大小更改量】：通过改变高度和宽度值来改变碎片的大小(以像素为以像素为单位单位)。http:/7.【投影】时间轴特效【投影】时间轴特效n在【投影】对话框中可以进行如下设置。在【投影】对话框中可以进行如下设置。【颜色】：单击此按钮，可以设置阴影的颜色。【颜色】：单击此按钮，可以设置阴影的颜色。【Alpha透明度】：设置阴影的透明度】：设置阴影的Alpha透明度百分数。透明度百分数。【阴影偏移】：设置阴影在【阴影偏移】：设置阴影
23、在X和和Y轴方向的偏移量。轴方向的偏移量。http:/8.【模糊】时间轴特效【模糊】时间轴特效n在【模糊】对话框中可以进行如下设置。在【模糊】对话框中可以进行如下设置。【效果持续时间】：设置对象的特效持续的时间【效果持续时间】：设置对象的特效持续的时间(以帧为单位以帧为单位)。【允许水平模糊】：设置在水平方向产生模糊效果。【允许水平模糊】：设置在水平方向产生模糊效果。【允许垂直模糊】：设置在垂直方向产生模糊效果。【允许垂直模糊】：设置在垂直方向产生模糊效果。【移动方向】：单击方向按钮，用于设置运动模糊的方向。【移动方向】：单击方向按钮，用于设置运动模糊的方向。http:/18.3 图图 层层
24、操操 作作n需要激活图层时，在时间轴中选中图层，或需要激活图层时，在时间轴中选中图层，或在该图层中选中某个舞台对象，可以在活动在该图层中选中某个舞台对象，可以在活动图层上放置对象、添加文本和图像以及进行图层上放置对象、添加文本和图像以及进行编辑。编辑。n18.3.1 创建新层创建新层n18.3.2 图层属性图层属性http:/18.3.1 创建新层创建新层n创建新层可以使用以下几种方法。创建新层可以使用以下几种方法。选择【插入】选择【插入】|【时间轴】【时间轴】|【图层】命令。【图层】命令。选中其中一个图层，右击，在弹出的快捷菜单中选择【选中其中一个图层，右击，在弹出的快捷菜单中选择【插入图层
25、】命令。插入图层】命令。单击时间轴面板底部的【插入图层】按钮。单击时间轴面板底部的【插入图层】按钮。http:/18.3.2 图层属性图层属性n使用以下几种方法，可以弹出【图层属性】对话框。使用以下几种方法，可以弹出【图层属性】对话框。选中需要修改属性的图层，右击，在弹出的快捷菜单中选择【属性】命令。选中需要修改属性的图层，右击，在弹出的快捷菜单中选择【属性】命令。选中图层，选择【修改】选中图层，选择【修改】|【时间轴】【时间轴】|【图层属性】命令，弹出【图层属性【图层属性】命令，弹出【图层属性】对话框，如图】对话框，如图18.18所示。所示。n在【图层属性】对话框中可以进行如下设置。在【图层
26、属性】对话框中可以进行如下设置。【名称】：设置图层的名称。【名称】：设置图层的名称。【显示】：显示该图层。【显示】：显示该图层。【锁定】：锁定图层。【锁定】：锁定图层。【类型】：设置图层的类型。【类型】：设置图层的类型。【一般】：默认的普通图层。【一般】：默认的普通图层。【引导层】：为该层创建引导图层。【引导层】：为该层创建引导图层。【被引导层】：将图层设置为被引导层。【被引导层】：将图层设置为被引导层。【蒙板层】：为该层建立了一个蒙板图层。【蒙板层】：为该层建立了一个蒙板图层。【被蒙板】：该层已经建立蒙板图层。【被蒙板】：该层已经建立蒙板图层。【文件夹】：创建图层文件夹。【文件夹】：创建图层文件夹。【轮廓颜色】：选择图层的轮廓线颜色。【轮廓颜色】：选择图层的轮廓线颜色。【将图层视为轮廓】：表示将图层的内容显示为轮廓状态。【将图层视为轮廓】：表示将图层的内容显示为轮廓状态。【图层高度】：设置图层在【时间轴】面板中的高度。【图层高度】：设置图层在【时间轴】面板中的高度。