网页制作及网站设计_13flash8使用

《网页制作及网站设计_13flash8使用》由会员分享，可在线阅读，更多相关《网页制作及网站设计_13flash8使用（33页珍藏版）》请在金锄头文库上搜索。

1、项目十三,Flash 8的使用,内容摘要 介绍Flash 的工作界面 介绍Flash的文件格式 介绍插入Flash的动画 介绍插入Flash的文本,学习目标,熟悉Flash 8的工作界面，了解每一个按钮、菜单等的使用 用途及方法。 理解时间轴与帧的概念及在制作动画中的作用。 理解图层的概念及在制作动画中的作用。 理解Flash作品的测试及导出。 熟练掌握使用工具箱中的工具制作对象。 熟练掌握使用时间轴与帧创建动画。,Flash 8的使用,任务1熟悉Flash 8的工作界面,任务2使用工作区,任务3学习Flash 8 简单动画制作,任务4Flash 8动画在网页中的应用,任务1:Flash 8的

2、工作界面,任务描述 通在系统的学习了Dreamweaver CS3 软件后，我们现在可以按照自己的意愿设计出我们喜欢的网页了，但是小刚在上网浏览网页后再对比自己的设计的网页，很明显的发现自己的网页缺少动态画面，其实在网页中加入动画也是很容易的事情，这需要学习动画软件的制作知识，制作动画的软件有许多，Flash就是其中的一种。,FLASH是Macromedia公司推出的一种优秀的矢量动画编辑软件，利用该软件制作的动画尺寸要比位图动画文件尺寸小的多，用户不但可以在动画中加入声音，视频和位图图像，还可以制作交互式的影片或者具有完备功能的网站。,任务说明,任务1:Flash 8的工作界面,知识讲解及操

3、作步骤 在安装了Flash 8应用程序的机器中，可通过“开始”菜单所有程序MacromediaMacromedia Flash 8命令，即可启动Flash 8。启动后，即可进入Flash 8的工作界面，工作界面主要由标题栏、菜单栏、工具箱、时间轴、舞台、属性面板和多个控制面板等几个部分组成，如图所示。,工作界面的组成 菜单栏：Flash 8的菜单栏包括文件、编辑、视图、插入、修改、 文本、命令等10个菜单 工具箱：位于工作界面的左侧，可划分为4个区域，即工具区、查看区、颜色区和选项区。 时间轴面板：是Flash进行动画创作和内容编排的重要场所。 舞台：动画内容编辑都整个区域称为场景，用户可以在

4、整个场景内进行图形都绘制和编辑工作。 常用面板：包括“属性”面板、“动作”面板、“颜色”面板、“对齐 &信息&变形”面板和“库”面板。,任务1:Flash 8的工作界面,任务:使用工作区,任务描述 Flash软件工作区是我们设计动画的一个工作平台。,我们将进一步学习Flash的开始界面，新建文档，导入文件与素材、设置场景大小与颜色等知识点， Flash动画基础知识点是我们学习动画设计的基础。,任务说明,任务2:使用工作界面,知识讲解及操作步骤 1、Flash开始界面 启动Flash 8后，会弹出开始界面，由“打开最新项目”、“创建新项目”和“从模板创建”三部分构成，如图所示。,任务2:使用工作

5、界面,2、新建文档的方法 方法一：在上述的“开始界面”中，单击“创建新项目”下的“Flash文档”选 项，即可新建一个空白的Flash文档。 方法二：选择“文件”菜单下的“新建”命令或按Ctrl+N快捷键，在弹出的“新建文档”对话框中选择“Flash文档”选项，单击“确定”按钮，如图所示。,任务2:使用工作界面,3、导入文件与素材的方法 步1：打开需要导入素材的Flash文档。 步2：选择“文件”“导入”“导入到舞台”选项或按Ctrl+R快捷键，如图左图所示。 步3：在打开的“导入”对话框中选择需要的素材的路径及名称后，单击“打开”按钮，即可将选定都素材导入到舞台中，如图右图所示。,任务2:使

6、用工作界面,4、设置场景大小和颜色 在文档中，此时在“属性”面板中显示当前场景的相关信息，如图所示。,任务2:使用工作界面,5、设置标尺、网格与辅助线 （1）设置标尺：选择“视图”“标尺”选项，或按“Ctrl+Alt+Shift+R”快捷键，即可在 场景中显示水平标尺和垂直标尺。 （2）设置网格线：选择“视图”“网格”“显示网格”选项，或按“Ctrl+”快捷键，即可在场景中显示网格线。 （3）设置辅助线：选择“视图”“辅助线”“显示辅助线”选项，或按“Ctrl+；”快捷键，使辅助线呈可显示状态，然后分别在场景水平标尺和垂直标尺中按住鼠标左键向场景中拖动，即可制作除水平辅助线和垂直辅助线。,任务

7、2:使用工作界面,6、调节场景的显示比例 在绘制图形时，需要将图形对象缩小以查看其全貌，或需将图形对象都某一部分放大，以对其进行细节上的修改。 打开Flash文档，单击时间轴右上角的显示比例下拉列表框，在其中选择相应的比例，即可在场景中的图形对象以该比例进行显示，如图所示。,任务:学习Flash 8 简单动画制作,任务描述 学习Flash软件，最好的方法是学习现有例题，在这些例题中融合了许多Flash的知识点和巧妙的构思，实际上就是借鉴别人的长处来开阔我们的思路。,制作追光灯效果与字母变形两个实例。,任务说明,任务:学习Flash8简单动画制作,知识讲解及操作步骤 步骤1:新建一个Flash文

8、档，选择“修改”“文档”命令，在打开的“文档属性”对话框中将尺寸设置为宽550，高200，背景颜色设置为黑色，如图所示。,任务:学习Flash8简单动画制作,步骤2:选择工具箱中的文本工具（T），在其属性面板上将字体设置为“华文彩云”，字号为“60”，颜色设置为“红色”，如图所示。在舞台中输入“丰富多彩的校园生活”。,任务:学习Flash8简单动画制作,步骤3:单击时间轴面板左下角的“插入图层”按钮，即可新建图层，默认命名为“图层2”，如图所示。,任务:学习Flash8简单动画制作,步骤4:选中新增的图层2，单击工具箱中的椭圆工具（O），在属性面板中将填充颜色设置为黄色，选中图层2的第1帧，按

9、住Shift键，在舞台中的第一个字上面用鼠标拖动绘制一个正圆，将单个文字进行覆盖，如图13-22。,任务:学习Flash8简单动画制作,步骤5:在图层1的第50帧处单击鼠标右键，在弹出的快捷菜单中选择“插入帧”选项。在图层2的第50帧处单击鼠标右键，在弹出的快捷菜单中选择“插入关键帧”选项。插入后的效果如图所示。,任务:学习Flash8简单动画制作,步骤6:选中图层2的第50帧，将正圆拖动到最后一个文字上，如图所示。,任务:学习Flash8简单动画制作,步骤7:在图层2的第1帧单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”选项，如图所示。,任务:学习Flash8简单动画制作,步骤8:在图

10、层2的名称上单击鼠标右键，在弹出的快捷菜单中选择“遮罩层”选项，将其设置为遮罩层，如图所示。,任务:学习Flash8简单动画制作,步骤9:选择“控制”菜单中的“测试影片”，进行Flash的测试，如图所示。,任务:Flash 8动画在网页中的应用,任务描述 在我们学会制作Flash动画后，我们就希望把自己作品导入到已经设计好的网页中，然后将文件发布到互联网上，通过实例我们来学习这部分知识。,导出Flash作品：对影片进行测试完成后，可以应用“导出”命令将Flash影片导出到别的应用程序中，也可以将文件发布到Internet上。,任务说明,知识讲解及操作步骤 1、导出动画文件 步1：打开要导出的动

11、画文件，选择其中的某帧或场景中的某个图像。 步2： 选择“文件”“导出”“导出影片”命令或使用快捷键”Ctrl+Alt+Shift+S”，打开“导出影片”对话框，如图所示。,任务:Flash8动画在网页中的应用,步3：选择保存的路径和类型，在“文件名“文本框”中输入名称，单击“保存”按钮。打开“导出Flash Player”对话框，如图所示。,任务:Flash8动画在网页中的应用,步4：设置完成各项参数后，单击“确定”按钮，会出现一个 “正在导出Flash影片”的进度条，完成后此Flash动画作品即被输出为一个独立的Flash动画文件了。 步5：关闭Flash 8软件，打开前面导出的文件，即可

12、播放这个动画，此动画文件以及可以脱离Flash编辑环境独立运行了。,任务:Flash8动画在网页中的应用,2、导出图像文件 将动画中的某个图像导出并以图片的形式保存起来，输出静态图像。 步1:打开要导出的动画，选中要导出的帧或场景中的某个图像。 步2：选择“文件”“导出”“导出图像”命令，在弹出的“导出图像”对话框中，若选择文件类型为“JPEG图像”，再输入文件名，需设置图像的导出参数，如图所示，单击“确定”按钮即可完成图像的导出操作。,任务:Flash8动画在网页中的应用,3、发布Flash作品 制作完成Flash动画作品后，如果想要将它放置到网页上供大家观赏，不仅要将其输出为动画播放作品（

13、.swf），而且还要在插入此动画的网页中编制一段HTML引导程序代码。,任务:Flash8动画在网页中的应用,上机操作：制作简单的雪花飘落的过程,步1：新建一个Flash文档，选择“修改”“文档”命令，在打开的“文档属性”对话框中将尺寸设置为宽550，高400，背景颜色设置为黑色。 步2：选择“插入”菜单“新建元件”命令或快捷键Ctrl+F8，打开“创建元件”对话框，在名称文本框中输入“雪”，选择类型为“图形”，设置完成后单击“确定”按钮。 步3：选择工具箱中的刷子工具（B），设置填充色为白色，同时在“选项”中设置刷子的形状和大小，拖动画出雪花的效果（为了看出效果，可将雪花画的稍大些）。 步4

14、：再次选择“插入”菜单“新建元件”命令或快捷键Ctrl+F8，打开“创建元件”对话框，在名称文本框中输入“雪花”，选择类型为“影片剪辑”，设置完成后单击“确定”按钮。 步5：选择“窗口”菜单“库”命令或快捷键Ctrl+L，打开“库”面板，把图形元件“雪”拖动到舞台上。,上机操作：制作简单的雪花飘落的过程,步6：点击时间轴中“添加运动引导层”按钮，创建一个引导层。 步7：选择工具箱中的铅笔工具（Y），将笔触颜色设置为白色，在舞台上绘制出一条曲线，（这条曲线就是雪花飘落的路径）。 步8：在时间轴中选择“图层1”，单击其第1帧，将雪花的中心定位在飘落曲线的上端。 步9：在“图层1“的第60帧上右击鼠

15、标，在快捷菜单中选择“插入关键帧”。在“引导层“的第60帧上右击鼠标，在快捷菜单中选择”插入帧“。 步10：在时间轴中选择“图层1”，单击其第60帧，将雪花的中心向下移，定位在飘落曲线的最下端。 步11：在图层1的第1帧中右击，在快捷菜单中选择创建补间动画。 步12：在图层1的第45帧右击，在快捷菜单中选择“插入关键帧”命令。点击第60帧，再点击下这一帧中的雪花，在属性面板中选择颜色里的Alpha，把它设置为0%。,上机操作：制作简单的雪花飘落的过程,步13：点击“时间轴”中的“场景1”，回到场景中，在“库”面板中，在图层1中把刚刚做好的雪花影片剪辑拖动到场景中，选择“控制”菜单中的“测试影片

16、”选项或快捷键Ctrl+Enter，观察一片雪花飘落效果。 步14：复制第2片雪花。单击“时间轴”中“插入图层”按钮，新建图层2。在第10帧处右击鼠标，在快捷菜单中选择“插入关键帧”，仿照第13步操作，将“库”面板中的“雪花”影片剪辑拖动到舞台中。 步15：复制第3片雪花。单击“时间轴”中“插入图层”按钮，新建图层3，在第20帧处右击鼠标，在快捷菜单中选择“插入关键帧”，仿照第13步操作，将“库”面板中的“雪花”影片剪辑拖动到舞台中。 步16：在“图层1”的第20帧右击，选择“插入帧”命令，同理，在“图层2”的第20帧处“插入帧”命令。单击“图层3”的第20帧单击动作面板，在其中加入代码“stop()”，进行测试。,上机操作：制作简单的雪花飘落的过程,步17：为了将场景做的更为逼真，可导入一张雪景的背景图，以增加真实感。新建一个图层，命名为背景层，将此层拖到所有图层的下面。选择菜单“文件”“导入”“导入到舞台”命令或快捷键Ctrl+R，把一张雪景图导入舞台中，将图片的大小