《网页设计ppt电子课件教案-第11章_创建交互网页动画》由会员分享，可在线阅读，更多相关《网页设计ppt电子课件教案-第11章_创建交互网页动画（50页珍藏版）》请在金锄头文库上搜索。
1、第11章 创建交互网页动画,教学内容：ActionScript是Flash强大交互功能的核心，是Flash中不可缺少的重要组成部分之一。ActionScript是Flash内置的编程语言，用它为动画编程，可以实现各种动画特效，对影片的良好控制、强大的人机交互以及与网络服务器的交互功能。通过本章的学习可以制作出交互的动画效果。,教学重点 创建发送电子邮件动画 设计鼠标跟随效果动画 设计控制动画播放的效果 设计一个预加载的Loading 设计放大镜效果 教学难点 设计网络广告 动画的测试与发布,教学目标和基本要求 _ _ _ 教学时间：本章共分_课时 教学方法 案例教学 多媒体教学 理论面授 教学
2、素材 课程范例文件：sample第11章 练习文件：exercise第11章,本章各节课时分配及链接,11.1 任务43创建发送电子邮件动画（ ）课时 11.2 任务44设计鼠标跟随效果动画（ ）课时 11.3 任务45制作电影播放器（ ）课时 11.4 任务46设计一个预加载的Loading（ ）课时 11.5 任务47设计放大镜效果（ ）课时 11.6 综合实训设计网络广告（ ）课时 本 章 小 结 思考与练习,11.1 任务43创建发送电子邮件动画,发送电子邮件的动画是最常见的网页动画之一。下面通过一个例子来讲述电子邮件动画的制作。,11.1.1 简单讲评 利用getURL语句不但可以完
3、成超文本链接，而且还可以链接FTP地址、CGI脚本和其他形式，如电子邮件链接效果。,11.1.2 核心知识 “动作”面板是ActionScript编程中所必需的，它是专门用来进行ActionScript编写工作的，即ActionScript程序的开发环境。通过选择“窗口动作”命令，即可打开“动作”面板。,11.1.3 实际操作步骤2 选择“插入新建元件”命令，弹出“创建新元件”对话框，在对话框中的“名称”文本框中输入元件的名称“按钮”，“类型”设置为“按钮” 。,步骤3 单击“确定”按钮，进入元件的编辑模式，选择工具箱中的“多角星形”工具，在“属性”面板中将“笔触高度”设置为8，“笔触样式”设
4、置为“点刻线”，“笔触颜色”设置为#6532FF，“填充颜色”设置为“无” 。,步骤4 单击“属性”面板中的“工具设置”选项中的“选项”按钮，弹出“工具设置”对话框。,步骤5 单击“确定”按钮，设置工具，在文档中绘制一个4角星形。,步骤7 单击文档左上角的“场景1”返回场景，单击“时间轴”面板左下角的“插入图层”按钮，新建一图层2，将“库”面板中的“按钮”元件拖入到文档中。,11.2 任务44设计鼠标跟随效果动画,在Flash中鼠标跟随的制作方法有很多种，下面介绍一种鼠标跟随效果，让广告图像紧随你的鼠标。 11.2.1 简单讲评 利用startDrag语句可以制作常见的鼠标跟随效果。,11.2
5、.2 核心知识在时间轴中选中要添加动作的关键帧。选择“窗口动作”命令，打开“动作”面板，在面板中插入ActionScript代码，可以注意到，这时关键帧上出现了一个小的“a”标记，标志着在该帧处有ActionScript代码。,11.2.3 实际操作步骤2 单击“时间轴”左下角的“新建图层”按钮，新建一图层，选择“文件导入导入到舞台”命令，导入图像44a.gif到舞台中。,步骤3 选中“图层2”中的图像，按F8键，弹出“转换为元件”对话框，在对话框中的“名称”文本框中输入元件的名称“图形”，“类型”设置为“影片剪辑” 。,步骤5 选中“图层2”的第1帧，打开“动作”面板，在面板中的双击左侧的“
6、全局函数影片剪辑控制startDrag”命令，插入startDrag。,步骤6 将光标放置在()中间，单击上方的“插入目标路径”按钮，弹出“插入目标路径”对话框，在对话框中选择gensui。,步骤8 将代码修改为startDrag(“_root.gensui”,true); 。,11.3 任务45制作电影播放器,在Flash中，可以利用loadMovie和unloadMovie语句将外部的影片载入和卸载。利用这种方法，可以将电影载入动画中。,11.3.1 简单讲评下面通过实例讲述利用loadMovie和unloadMovie语句制作电影播放器。,11.3.2 核心知识在Flash中从外部加在S
7、WF或者JPG图片，会用到loadMovie语句。打开“动作”面板，在左侧顶部的下拉列表中选择“ActionScript1.0&2.0”，然后在“全局函数”“浏览器/网络”中找到loadMovie这条语句。双击该条语句，在右侧可以看到插入后的loadMovie语句。,11.3.3 实际操作步骤4 单击“时间轴”面板左下角的“插入图层”按钮，新建一图层2，选择工具箱中的“文本”工具，输入文字“载入动画” 。,步骤5 选择“插入新建元件”命令，新建名称为“按钮1”按钮元件，在元件的编辑模式中。,步骤6 选中“弹起帧”，选择工具箱中的“矩形”工具，在“属性”面板中将“矩形边角半径”设置为10，并在文
8、档中绘制矩形。,步骤9 选中“指针经过帧”，按F6键插入关键帧，选择文本，将“文本颜色”设置为#FFFFFF。,步骤11 单击文档左上角的“场景1”返回场景，单击“时间轴”面板左下角的“插入图层”按钮，新建一图层2，将“库”面板中的“载入”影片剪辑元件拖入到文档中相应的位置。,11.4 任务46设计一个预加载的Loading,对于一个较大的SWF文件，可能需要较多的下载时间，虽然Flash支持流式的播放方式，如果下载速度跟不上动画的播放速度，动画就会出现停顿情况，为了解决这个问题，可以等整个文件下载完成后再开始播放动画。,11.4.1 简单讲评下面利用ifFrameLoaded语句制作Load
9、ing动画。,11.4.2 核心知识ActionScript的语法是ActionScript编程中十分重要的组成部分，和其他类型的编程语言相同，只有对其语法有了充分的认识才能在编写程序的过程中游刃有余，编写出精彩的程序。不过相对于其他的编程语言，ActionScript的语法比较简单、易学。,11.4.3 实际操作步骤2 选择“插入新建元件”命令，新建“进度条”影片剪辑元件，选择工具箱中的“矩形”工具，在编辑区域中绘制矩形。,步骤3 单击文档左上角的“场景1”返回场景，单击“时间轴”面板左下角的“插入图层”按钮，新建一图层2，选择工具箱中的“矩形”工具，在文档中绘制一个矩形。,步骤5 单击“时
10、间轴”面板左下角的“插入图层”按钮，新建一图层3，选择工具箱中的“文本”工具，在文档中输入文字“Loading” 。,步骤8 选中“图层4”的第1帧，打开“动作”面板，在面板中输入代码。,步骤10 选中“图层4”的第3帧，打开“动作”面板，在面板中输入以下代码。,11.5 任务47设计放大镜效,下面运用Flash制作一个放大镜的效果。在Flash中，许多效果都是像魔术一样，其实并没有什么神秘之处，只不过是巧妙运用其中的一些特效，产生出各种各样的效果而已。,11.5.1 简单讲评本例制作一个模拟放大镜的实例，放大镜可随鼠标移动，这是一个综合利用遮罩层和ActionScript脚本制作的例子。,1
11、1.5.2 核心知识变量在ActionScript中用于存储信息，它可以在保持原有名称的情况下使其包含的值随特定的条件而改变。变量可以存储数值、逻辑值、对象、字符串以及动画片段等。一个变量由变量名和变量值组成，变量名用于区分变量的不同，变量值可以确定变量的类型和大小。可以在动画的不同部分为变量赋予不同的值，使变量在名称不变的情况下其值可以随时变化。,11.5.3 实际操作步骤2 选择“插入新建元件”命令，弹出“创建新元件”对话框，在对话框中的“名称”文本框中输入“图片”，“类型”设置为“影片剪辑” 。,步骤5 单击“确定”按钮，进入元件的编辑模式，双击“图层1”将其命名为“图片”，打开“库”面
12、板，将“图片”影片剪辑元件拖入文档相应位置。,11.6 综合实训设计网络广告,Flash自从面世以来，以飞快的速度流行起来，并且风靡整个网络，这与Flash和网络的紧密结合是密不可分的，目前，Flash广告是网络广告中最最流行的广告形式。下面设计网络广告。,步骤2 选择“插入新建元件”命令，弹出“创建新元件”对话框，在对话框中的“名称”文本框中输入“光”，“类型”设置为“图形” 。,步骤3单击“确定”按钮，进入图形元件的编辑模式。选择工具箱中的“矩形”工具，绘制矩形。,步骤4 选中矩形，选择“窗口颜色”命令，打开“颜色”面板，在面板中的“类型”下拉列表中选择“线性”选项，将第1个色标设置为#F
13、FFFFF，第2个色标设置为#FFFFFF，Alpha设置为0% 。,本 章 小 结,由于脚本语言是一门系统的语言，在这么短的篇幅内不可能详细地讲解每一条命令、每一个语法。本章介绍了一些脚本编程的基本术语和常用的语法知识及语句。但是要制作出高级的动画效果，脚本知识是一个动画制作者不可缺少的。如果要更深入地学习这门语言，读者可以参阅一些专门介绍ActionScript语言的书籍，或从网上学习更丰富更新的脚本知识。,思考与练习,1填空题 （1）利用_不但可以完成超文本链接，而且还可以链接FTP地址、CGI脚本和其他形式。 （2）_是ActionScript编程中所必需的，它是专门用来进行Actio
14、nScript编写工作的，即ActionScript程序的开发环境。 （3）_中包含了所有的ActionScript动作命令和相关的语法。,2选择题 1. 是Flash强大交互功能的核心，是Flash中不可缺少的重要组成部分之一。 A. 变量 B. 函数 C. ActionScript 2. 使目标影片剪辑在影片播放过程中可拖动。 A. MovieClip语句 B. startDrag语句 C. loadMovie语句,3. _语句将来自特定URL的文档加载到窗口中，或将变量传递到位于所定义的URL的另一个应用程序。 A. getURL B. play C. gotoAndPlay,3判断题 （1）利用loadMovie和unloadMovie语句将外部的影片载入和卸载。（ ） （2）dragOver是指鼠标拖动滑过按钮触发区。（ ） （3）如果需要给帧添加动作，帧可以是任意的类型。（ ）,4问答题 （1）怎样为制作好的Flash动画减肥？ （2）详细叙述ActionScript常见语法有哪些？ （3）ActionScript有哪些数据类型？,
