Dreamweaver-Flash-Fireworks网页制作培训教程第6课.ppt

1、第6课 Flash 8基础,本课要点 具体要求 本课导读 上机练习,本课要点,认识Flash的工作环境 时间轴与帧,具体要求,掌握文档属性的设置方法 掌握工具箱中工具的使用方法 掌握帧、关键帧、空白关键帧的创建方法 掌握帧的编辑方法,本课导读,Flash是一个专门制作动画的软件。随着功能的不断增强，它的应用已不再局限于网页设计，在公益广告、企业产品宣传、教学多媒体方面也获得了广泛的应用。,6.1 认识Flash的工作环境,Flash与Fireworks是Macromedia公司推出的同一个系列的产品，因此其界面结构基本相同，只是Flash增加了一个时间轴。Flash动画以矢量图处理为基础，因此

2、Flash所绘制的图形都具有矢量图的特点，即图形可以任意缩放而不失真。,6.1 认识Flash的工作环境,6.1.1 知识讲解 6.1.2 典型案例制作banner场景图,6.1.1 知识讲解,本节主要讲述与动画有关的专业术语，Flash初始界面和工作界面、工具箱中的工具及文档的属性设置等。,6.1.1 知识讲解,1. 动画专业术语介绍 2. Flash初始界面与工作界面 3. 设置文档属性 4. 查看舞台显示 5. 认识工具箱,1. 动画专业术语介绍,使用Flash制作动画涉及到的主要术语的含义如下。 场景：指元件实例表演的舞台。一个完整的Flash文档可以由一个场景组成，也可以由多个场景组

3、成。,1. 动画专业术语介绍,元件：指可以反复使用的图形、按钮和影片剪辑等。可以在任意时间调用元件，当元件被调用后，将产生元件的一个实例。 库：指存放元件的地方。创建的元件都保存在库中，需要时从【库】面板中拖到场景中即可。 时间轴：用于控制动画的播放时间以及对象叠放顺序。时间轴包含图层和帧。,2. Flash初始界面与工作界面,第一次启动Flash后可进入初始界面，如下图所示，界面结构与Fireworks相同。,2. Flash初始界面与工作界面,单击【创建新项目】栏中的【Flash文档】超链接，可创建一个新的空白文档并进入Flash的工作界面，如下图所示。,3. 设置文档属性,设置文档属性即

4、设置动画的场景大小、背景颜色、帧频等，【属性】面板如下图所示。,3. 设置文档属性,在制作动画时，随时都可以更改场景的背景和帧频，但是在动画布局过程中最好不要轻易更改场景的尺寸，否则，必须重新调整场景中已布局好的对象才能达到理想的效果。,4. 查看舞台显示,要在舞台上查看整个场景状态或以高缩放比率查看绘图的特定区域，可以从时间轴右上角的 下拉列表框中更改缩放比率，或用工具箱中的缩放工具 来放大或缩小。最小可缩小至8%，最大可放大至2000%。,4. 查看舞台显示,在放大绘图的特定区域时，使用缩放工具在舞台上拖出矩形框即可查看放大的矩形框区域。要在该显示状态下查看其他位置，可在按住空格键的同时拖

5、动鼠标来移动舞台。要回到100%显示状态，双击缩放工具即可。,5. 认识工具箱,工具箱中各工具的分布如下图所示，其中大部分工具的功能与Fireworks中的相应工具相同，这里主要介绍与Fireworks中功能不同的工具。,5. 认识工具箱,6.1.2 典型案例制作banner场景图,案例目标 本案例将对第2课中制作的banner效果图设置Flash场景，并添加背景和文本内容，制作完成后的效果如下图所示。,6.1.2 典型案例制作banner场景图,操作思路： （1）在Fireworks中将banner.png的背景与文本分别放置于不同的图层中，以便合并背景图层。 （2）设置banner.fla

6、的场景大小与帧频。 （3）Flash文档需要分层制作，这里将banner.png的背景和文本效果分别添加到Flash的不同图层中。 操作步骤请老师参照软件讲解,6.1.2 典型案例制作banner场景图,案例小结 本案例通过制作banner场景效果，练习了场景的设置和图像在Fireworks与Flash间的转换。另外，图像也可以通过Flash中的【导入】命令来添加，但是导入的图像会被Flash进行一些压缩，使图像失真。,6.2 时间轴与帧,时间轴包括图层区与帧区两部分，图层区叠放动画元素，帧区控制动画播放。,6.2 时间轴与帧,6.2.1 知识讲解 6.2.2 典型案例制作招聘广告,6.2.1

7、 知识讲解,本节中将介绍时间轴的分布情况、帧的创建和编辑。,6.2.1 知识讲解,1. 时间轴的分布 2. 认识帧、关键帧和空白关键帧 3. 创建关键帧、空白关键帧和帧 4. 编辑帧,1. 时间轴的分布,时间轴包括图层区、帧区、播放指针和动画状态栏等几部分，分布如下图所示。,2. 认识帧、关键帧和空白关键帧,帧是构成动画播放的基本单位，因其功能不同，分为关键帧、空白关键帧和帧，各类帧的作用及表示形态如下图所示。,2. 认识帧、关键帧和空白关键帧,关键帧：在动画构成中产生关键性动作变化的帧，有对象存在，并且可以任意编辑，在时间轴上以 表示。 空白关键帧：该帧中没有任何内容，在时间轴上表现为 ，在

8、动画中起间隔作用。 帧：在动画中起沿用前一关键帧内容的作用，即延长动画的播放时间，每个帧格中都含有与前面一个关键帧相同的内容，结束时以小方格表示。,3. 创建关键帧、空白关键帧和帧,关键帧的创建方法有以下几种： 在新建的文件或元件中，当添加一个对象时，系统自动在第1帧创建关键帧。 选择【插入】【时间轴】【关键帧】命令，插入的关键帧中的内容与前一关键帧的内容相同。 在要插入关键帧的帧上单击鼠标右键，在弹出的快捷菜单中选择【插入关键帧】命令。 选取要插入关键帧的帧，然后按【F6】键。,3. 创建关键帧、空白关键帧和帧,空白关键帧的创建方法有以下几种： 选择【插入】【时间轴】【空白关键帧】命令。 选

9、取一帧后单击鼠标右键，在弹出的快捷菜单中选择【插入空白关键帧】命令。 选取一帧，然后按【F7】键。 帧的创建方法为：在任意关键帧和空白关键帧后选取一帧或一段帧，单击鼠标右键，在弹出的快捷菜单中选择【插入帧】命令或按【F5】键。,4. 编辑帧,对帧的编辑主要是指插入、删除、移动、复制、翻转和清除等操作。插入帧与创建帧的方法相同，这里不再赘述。 1）选取帧 选取帧共有以下几种情况：,4. 编辑帧,对单帧的选取比较简单，单击该帧即可。 如果要对多帧进行选取，则先单击选取起始帧，然后再按住【Shift】键单击要选取的最后一帧。,4. 编辑帧,如果要对某图层上的所有帧进行选取，那么单击该图层即可。 如果

10、要对动画的所有帧进行选取，则先在时间轴上单击鼠标右键，然后在弹出的快捷菜单中选择【选择所有帧】命令。,4. 编辑帧,2）复制帧 复制帧的同时也复制了该帧上对应的内容，其方法为：选择要复制的关键帧或帧，单击鼠标右键，在弹出的快捷菜单中选择【复制帧】命令或按【Ctrl+Alt+C】组合键复制帧，再用鼠标右键单击目标帧，然后从弹出的快捷菜单中选择【粘贴帧】命令或按【Ctrl+Alt+V】组合键，将复制的帧粘贴到目标位置。,4. 编辑帧,3）清除帧 清除帧是指清除该帧上的内容，将其变为空白关键帧。清除帧的方法为：选取要清除的帧，单击鼠标右键，在弹出的快捷菜单中选择【清除帧】命令。,4. 编辑帧,清除关

11、键帧是指将关键帧转换为普通帧，其方法为：选取要清除的关键帧，单击鼠标右键，在弹出的快捷菜单中选择【清除关键帧】命令。 4）删除帧 删除帧是指将不需要的帧从时间轴上移除，其方法为：选取帧或帧段，单击鼠标右键，在弹出的快捷菜单中选择【删除帧】命令。,4. 编辑帧,5）移动帧 移动帧的方法为：选取要移动的帧，按住鼠标左键将其拖到需要放置的位置，或通过【剪切帧】命令，将所要移动的帧剪切下来，然后在目标位置用【粘贴帧】命令进行粘贴。,4. 编辑帧,6）翻转帧 翻转帧是指将动画段的首末关键帧的顺序颠倒，使动画出现倒放效果，其方法为：选取两个关键帧间的所有帧（含两个关键帧），单击鼠标右键，在弹出的快捷菜单中

12、选择【翻转帧】命令。,6.2.2 典型案例制作招聘广告,案例目标 本案例将制作招聘广告，主要练习场景的设置，关键帧、帧及空白关键帧的插入。完成后的效果如下图所示。,6.2.2 典型案例制作招聘广告,操作思路： （1）设置动画场景大小为300160像素，背景色为“#FFCCFF”。 （2）导入mei.jpg图像，并用圆裁切图像外部区域。 （3）添加文本，并在【属性】面板中分别设置文本的字体、字号及颜色。,6.2.2 典型案例制作招聘广告,（4）在第20帧插入帧，使矩形和图像一直显示在场景中。 （5）在图层2中插入关键帧，设置文本颜色，使文本产生闪烁效果。 （6）在图层2中插入关键帧、空白关键帧，

13、使文本产生间隔消失的效果。 操作步骤请老师参照软件讲解,6.2.2 典型案例制作招聘广告,案例小结 本案例通过制作招聘广告，练习了帧、关键帧、空白关键帧的插入，分离对象的操作，粘贴到当前位置的操作及文本属性的设置等。 在分离对象时，如果要分离多个字符的文本，那么可按一次【Ctrl+B】组合键将文本分离为单个字符；如果要将文本变为图形，则需要按两次【Ctrl+B】组合键。本案例中的位图图像需要用圆形裁切，所以位图必须转换为点状图形，因此这里使用【Ctrl+B】组合键分离。,6.3 上机练习,6.3.1 制作镂空字 6.3.2 绘制卡通时钟,6.3.1 制作镂空字,本练习制作镂空文字效果，如下图所

14、示，主要练习分离文本和使用墨水瓶工具。,6.3.1 制作镂空字,操作思路： 设置场景大小为400100像素。 输入文本“新太阳教育培训中心”，字体为“黑体”，字号为“35”。 两次将文本分离成图形，选择墨水瓶工具，用“#CC0000”颜色给文本添加边框。 选取填充色并删除。,6.3.2 绘制卡通时钟,本练习将绘制卡通时钟动画，如下图所示，主要练习使用椭圆工具、【变形】面板、部分选取工具和将线条转换为填充。,6.3.2 绘制卡通时钟,操作思路： 绘制大小为240240像素的圆，添加10像素粗的边框，缩小圆面积为96%，填充“#D6E6FE”、“#4172C2”和“#003399”渐变色。 选取圆面，选择【修改】【形状】【柔化填充边缘】命令，设置步骤数与距离均为10。 选择【修改】【形状】【将线条转换为填充】命令，将10像素粗的边框转换为填