《网页设计与制作实用技术（第二版）-电子教案-齐建玲 CH10》由会员分享，可在线阅读，更多相关《网页设计与制作实用技术（第二版）-电子教案-齐建玲 CH10（31页珍藏版）》请在金锄头文库上搜索。
1、通过本章学习，应该掌握以下内容： Flash CS5基本操作 利用Flash CS5处理网页动画,第10章 美化网页,10.1 Flash CS5简介,Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。在出到Flash 8以后，Macromedia又被Adobe公司收购。目前较新版本为Adobe Flash CS5。,Flash在制作动画时，是由若干个帧来组成一个动画效果的。帧是装载Flash作品内容、进
2、行Flash作品播放的基本单位，也是Flash动画的基本组成元素。Flash的时间线面板上的每一小格代表一帧。 帧有以下几种类型：关键帧、静止帧和中间过渡帧。,10.1.1 有关动画的一些基本概念,1. 帧（Frame）,元件只是一种人为的规范，它指的是动画中一些出现频率较高的物件对象。元件通常存放在图库中，使用时再把它从图库中拖曳出来。有人把元件形象地比喻为存储起来的演员，随时可以调出来扮演角色。 把元件从图库中拖曳到舞台工作区中，就得到了元件的一个实例。可以把元件想象成一个源文件，它的实例就是它在不同地方的复制。,2. 元件与实例,图层是为了方便操作者制作复杂的Flash动画作品而引入的一
3、种手段。在时间线面板上，每个图层都有各自的时间线。在每个图层中都包含了一系列的帧，在各图层中所使用的帧均是独立的。可用控制器来播放某个场景的动画效果。播放动画时，会从每个图层的第一帧开始播放（即同步播放），不同图层中的帧在同时播放中可以得到综合的效果。,3. 图层,一个Flash作品可以由若干个场景组成，每个场景都分别拥有各自独立的动画内容。每个场景中的层和帧均相对独立。在播放时，Flash会自动按场景的顺序进行播放。,4. 场景,一个或几个场景就可以组成一个影片。,5. 影片,Flash CS5的界面由以下几个部分组成：标题栏、菜单栏、标准工具栏、绘图工具栏、状态栏、时间线面板、控制器、工作
4、区等，如图所示。,10.1.2 Flash CS5的界面组成,打开Flash CS5软件，首先映入眼帘的是欢迎屏幕，如图所示。, 菜单栏 除了绘图命令以外的绝大多数命令都可以在菜单栏中实现。 工具栏 工具栏即绘图工具栏，一般情况下出现在窗口的右边，也可用鼠标改变其位置。该工具栏提供了用于图形绘制和编辑的各种工具按钮。,工作区 工作区位于窗口的中央，动画就是在这个舞台上生成和演出的。 浮动面板组 浮动面板组中属性面板是常用的面板，使用属性面板可以轻松地访问和更改文档最常见的属性。 时间轴面板 时间轴面板用来管理不同场景中的图层与处理帧的。双击“时间轴”按钮可以隐藏或打开该面板。,1. 帧的操作
5、（1）改变帧的播放速率 在默认情况下，Flash动画每秒播放的帧数为12格（帧/秒）。数值越大，播放帧数就越多，速度也就越快，动画的效果就越顺畅；反之，数值越小，速度就越慢，动画播放时就会有很明显的停格的现象。 示范演示,10.1.3 Flash CS5中的一些基本操作,（2）帧的选择 用鼠标单击某一帧，该帧即被选中，并且成为当前帧，同时在工作区中显示出该帧中的内容。如果想一次选取许多帧，可以在所要选取的起始帧处，按下鼠标左键不放，同时拖曳鼠标至所需位置即可。或者先用鼠标单击起始帧，然后按下“Shift”键不放，在所要选取的终止帧处单击鼠标左键，这样做也可以同时选中多个帧。,（3）创建各种类型
6、的帧 在时间线上需要新建静止帧的位置处单击鼠标左键，然后选择“插入” “时间轴”“帧”“关键帧 ”“空白关键帧 ”命令，或单击鼠标右键，在弹出的菜单中选择“插入帧” “插入关键帧 ”“空白关键帧 ”，就可在所需位置上创建一个包含有与前一帧相同内容的帧。,（4）复制帧 复制帧的方法为：首先将需要复制的一个或者多个帧选中；在其上单击鼠标右键，从弹出的菜单中选择“复制帧”命令；用鼠标单击需要粘贴的位置，再单击鼠标右键，从弹出的快捷菜单中选择“粘贴帧”命令，即可将相同的内容复制到所需的位置上。 （5）删除帧 首先选取帧，然后选择“编辑”“时间轴”“删除帧”命令，或者是在被选中的帧上单击鼠标右键，从弹出
7、的快捷菜单中选择“删除帧”命令，,2. 层的操作 （1）添加图层 在层编辑区的左下角的第一个按钮为“插入图层”按钮，按下它之后，即可在当前所编辑的层上面插入一个新图层；也可以在当前层上单击鼠标右键，从弹出的菜单中选择“插入图层”选项，来新增一个图层。 （2）图层的重命名 在默认状态下，图层名为“图层1”、“图层2”、“图层n”，若想改变图层的名称，可先选中该图层，然后在图层名上双击鼠标左键，此时出现一个小方框，只要在其中输入新的图层名即可。,（3）调整图层的顺序 如果想要改变图层的先后顺序，可以用以下的方法：先用鼠标单击所要调整的图层，把它选中；然后按住鼠标左键不放，同时拖动之，把它拖到所要放
8、置的地方；再放开鼠标左键。 （4）删除图层 删除图层可以按如下步骤进行： 选取要删除的图层，在其上按住鼠标不放，把它拖至时间线面板上的图层编辑区右下角的“删除图层”按钮处即可；或在要删除的图层上单击鼠标右键，从弹出的菜单中选取“删除图层”命令。,3. 场景的操作 （1）新增场景 选择“插入”“场景”命令，即可新建一个场景；或选择“窗口” “其他面板” “场景”命令，此时会弹出一个“场景”对话框，在对话框中单击添加场景按钮即可。 （2）场景的更名 选择“窗口” “其他面板” “场景”命令，在打开的场景对话框中选中要更名的场景，然后双击鼠标左键，出现一个文本框，直接输入一个名称即可。,（3）当前场
9、景的切换 场景切换可按如下方法进行： 在场景对话框中直接单击所需场景名；或单击“视图”菜单，从中选择“转到”选项，在该选项中再选择所需要的场景名称即可。 （4）删除场景 删除场景的方法如下： 选择“窗口” “其他面板” “场景”菜单命令，在弹出的场景对话框中，选择要删除的场景名，然后单击“删除场景”按钮 即可。,4. 文档的操作 （1）创建新文档 在Flash CS5中创建新文档可以在欢迎屏幕上进行，也是通过菜单命令来完成。 （2）打开现有文档 （3）在打开多个文档时查看文档 （4）设置文档属性 （5）保存Flash文档,10.2.1 Flash文件的类型 FLA文件：是一种利用Flash创作
10、工具创建的文件。此类型的文件只能在Flash中打开，无法在Dreamweaver或浏览器中打开。 SWF文件：是FLA文件的编译版本，已进行优化，可以在Web上查看。此文件可以在浏览器中播放，且可以在Dreamweaver中进行预览，但不能在Flash中编辑此文件。 FLV文件：是一种视频文件，它包含经过编码的音频和视频数据，用于通过Flash Player进行传送。,10.2 利用Flash CS5制作网页动画,10.2.2 Flash动画的类型 Flash CS5支持以下类型的动画： 1传统补间 Flash CS3及以前版本所说的补间动画都是传统补间。关键帧（即“间”）之间的过渡帧是由Fl
11、ash自动生成的（即“补”）。 2补间动画 补间动画和传统补间的区别应该是在Flash CS4及以后版本才出现的，较早的flash版本用的都是传统补间。,10.2 利用Flash CS5制作网页动画,3反向运动姿势 反向运动姿势用于伸展和弯曲形状对象以及链接元件实例组，使它们以自然方式一起移动。 4补间形状 在形状补间中，可在时间轴中的特定帧绘制一个形状，再更改该形状或在另一个特定帧绘制另一个形状。然后Flash Pro将内插中间的帧的中间形状，创建一个形状变形为另一个形状的动画。 5逐帧动画 逐帧动画是由位于时间线上的同一动画轨道上的一个连续的关键帧序列组成。,1. 创建逐帧动画 由于逐帧动
12、画需要对每一帧中的内容进行逐个的制作和编辑，因此对动画的效果具有很强的控制能力，适合于制作较为复杂的动画。但是，由于该类动画数据量大、编辑工作既耗时又复杂艰巨，故除非确实需要如此，否则应尽量避免采用该类动画。 示范演示,10.2.3 Flash动画的制作,2. 创建传统补间 补间动画适合于群组物体、文字物件和元件，可以产生的效果有位置、大小、旋转、颜色的过渡等变化。 示范演示,3. 创建补间动画 示范演示,要在页面中插入Flash动画，首先就要把Flash动画输出成.swf文件，方法如下： （1）启动Flash CS5，制作一个动画影片，或者将已经制作保存的.fla格式的文件打开。 （2）在菜
13、单栏里选择“文件”“导出”“导出影片”命令，弹出“导出影片”对话框。 （3）选择保存类型为.swf，在文件名文本框中输入文件名，单击“保存”按钮。,10.3 在网页中加入Flash动画,10.3.1 准备工作,选取“文件”菜单中的“发布设置”命令之后，会弹出一个“发布设置”对话框。 （1）“发布设置”对话框中的“Flash”选项卡 单击“Flash”选项卡，显示该选项卡的对话框，在该对话框中可以播放器、压缩品质等进行设置。 （2）“发布设置”对话框中的“HTML”选项卡 单击“HTML”选项卡，显示该选项卡的对话框，设定动画所使用的模板、影片的大小和位置等。,10.3.2 文件的发布设置,（3
14、）发布预览 在发布作品之前，可以使用“文件”“发布预览”命令，打开一个浏览器窗口或者是相应的播放器，预览一下指定发布格式的播放效果。 （4）文件的发布 选择“文件”“发布”菜单命令，就可以发布文件了。,10.3.3 在网页中加入.swf文件,（1）启动Dreamweaver CS5进入网页； （2）将光标定位在需要插入Flash动画的位置，选择“插入”“媒体”“SWF”命令，在打开“选择文件”对话框选择需要的文件，单击“确定”按钮。即可在网页中插入.swf文件。,2在要加入.swf文件的网页中直接插入HTML引导程序,1. 在Dreamweaver CS5制作的网页中加入.swf文件,E N D,Flash CS5欢迎界面,返 回,Flash CS5操作界面,返 回,
