网页设计与制作教学全套课件第2版 孙振业电子教案 第5章 网页动画制作.ppt

《网页设计与制作教学全套课件第2版 孙振业电子教案 第5章 网页动画制作.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章网页动画制作2014.11第5章网页动画制作制作逐帧动画5.2制作元件动画5.3Flash工作窗口5.1制作遮罩动画5.5制作引导线动画5.6制作补间动画5.4制作交互动画5.7《网页设计与制作》本章要点本章介绍FALASHCS6在网页动画制作中的应用。主要包括补间动画，遮罩动画，引导线动画以及交互动画的设计与制作方法。本章要点移动补间动画制作逐帧动画制作遮罩动画制作引导线动画制作按钮制作交互动画制作《网页设计与制作》5.1Flash工作窗口Flash工作区5.1.1启动Flash后，其工作窗口如图6-1所示。时间

2、轴属性栏工具栏舞台菜单栏库面板Flash的工作界面《网页设计与制作》5.1Flash工作窗口Flash工作区5.1.1（1）舞台工作窗口的灰色区域是工作区，工作区中的白色区域称为舞台。舞台是绘制静态画面的区域，也是播放影片的区域。只有在舞台中制作的对象才能作为影片输出。处于舞台以外工作区中的对象，不会显示在Flash动画中，一般用于动画制作。所有的动画创作均在工作区中进行，在工作区中可以对创作的对象进行编辑与修改。制作动画时，可以借助标尺或网格定位元素。显示标尺：选择“视图”菜单的“标尺”选项。显示网格：选择“视图”菜单

3、的“网格”、“显示网格”选项。（2）属性面板位于舞台右侧的垂直面板。在舞台上编辑的每个元素，在其选中状态下，都将在属性面板中显示其常规信息，并且可以在属性面板中对其信息进行修改。《网页设计与制作》5.1Flash工作窗口Flash文档的基本操作5.1.2第一次启动Flash时，将显示“欢迎屏幕”，可以选择打开已有文件、新建文件、从模板创建文件。如图所示。以上操作在Flash工作区也可进行。打开文档《网页设计与制作》5.1Flash工作窗口Flash文档的基本操作5.1.21．打开已有Flash文档在“文件”菜单选择“打开

4、”选项，或按“Ctrl＋O”快捷键，进入“打开”对话框。2．新建Flash文档（1）在“文件”菜单选择“新建”选项，或按“Ctrl＋N”快捷键，进入“新建文档”对话框。（2）在“新建文档”对话框所显示的新建项目中选择一项后，按“确定”按钮退出。ActionScript3.0是最新版本的Flash脚本语言，可以添加交互动作，要求浏览器具有FlashPlayer9或更高版本。（3）在新建文档状态，打开属性面板。文档尺寸的默认设置是550像素×400像素。《网页设计与制作》5.1Flash工作窗口库面板的基本操作5.1.3用户

5、可以利用Flash创建图形、按钮或影片剪辑并保存为元件，元件存储在“库”中。Flash可以将jpg图像或MP3声音文件导入“库”中。方法如下：在“文件”菜单选择“导入”、“导入到库”选项，在“导入到库”对话框，选择指定文件后单击“打开”按钮。库面板以缩略图方式显示所有已导入的图像。“库”面板预览窗口《网页设计与制作》5.1Flash工作窗口预览影片与发布影片5.1.41．预览影片在制作影片过程中，通过多次的预览，可以检查影片是否实现了预期效果。快速查看动画或影片的效果，可以在“控制”菜单选择“测试影片”选项，也可按下“C

6、trl+Enter”组合键。Flash在单独的窗口打开并播放影片。预览模式将循环播放影片。2．发布影片影片制作结束后，可以在Flash中发布。Flash将创建一个HTML文件和一个SWF文件。swf文件是最终的Flash影片，而HTML文件则指示Web浏览器如何显示swf文件。发布时，将两个文件上传到Web服务器的同一个文件夹。上传之后需要测试，以确保正常播放。发布流程如下：（1）在“文件”菜单选择“发布设置”选项。（2）在“格式”选项卡选“Flash（.swf）”和“HTML（.html）”复选框。（3）在“HTML”

7、选项卡，取消选中“循环”复选框。如图5-7所示。（4）设置完成后，单击“发布”按钮。《网页设计与制作》5.2制作逐帧动画帧与关键帧5.2.11．帧动画是由若干张连续播放的画面组成的，帧正是组成动画的单一画面，是动画中最小的时间单位。FlashCS6默认的帧速率是每秒24帧，即每秒播放24个画面。2．关键帧关键帧是动画中变化的帧，是动画转折变化的时间点。当动画元素发生形状或位置改变时，其相应的时间点应添加关键帧。关键帧在时间轴中有明显的标志：有内容的关键帧以黑色实心圆表示；没有任何内容的关键帧则以空心圆表示。以后添加到同一

8、层的帧的内容将和关键帧相同。创建逐帧动画时，每个帧都是关键帧。创建补间动画时，可在动画的重要位置定义关键帧，由Flash自行创建关键帧之间的其他帧。3．帧的选择与移动对帧的操作通常有选择和移动。需要移动关键帧时，首先选中关键帧，然后将关键帧拖拽到目标位置。需要选择多个帧时，直接拖拽起始帧到达目标帧后放开鼠标，所有选中