网页设计PPT电子课件教案-第11章_创建交互网页动画.ppt

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