网页制作高级特效教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集

《网页制作高级特效教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集》由会员分享，可在线阅读，更多相关《网页制作高级特效教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集（151页珍藏版）》请在金锄头文库上搜索。

1、模块一HTML 高级特效123课题使用Emmet高效布局网页课题使用内嵌框架制作画中画特效课题使用HTML5制作验证码特效目录课题课题 使用使用 Emmet 高效布局网页高效布局网页v学习目标. 了解静态网站和静态网页的概念，能正确创建静态网站，建立和测试静了解静态网站和静态网页的概念，能正确创建静态网站，建立和测试静态网页。态网页。. 掌握掌握 Emmet 基本语法，能使用基本语法，能使用 Emmet 快速生成快速生成 HTML 和和 CSS 代码，代码，加快网站开发速度。加快网站开发速度。v相关知识静态网站是指全部由 HTML 代码格式页面组成的网站，完全采用 HTML 代码格式的网页通常

2、被称为静态网页。课题课题 使用使用 Emmet 高效布局网页高效布局网页一、创建本地站点. 使用使用 Dreamweaver CS3 / CS4 创建本地站点创建本地站点. 使用使用 Dreamweaver CS5 / CS6 / CC 创建本地站点创建本地站点课题课题 使用使用 Emmet 高效布局网页高效布局网页二、Emmet. Emmet 的简介的简介Emmet 插件的前身为 Zen Coding，是一个文本编辑器的插件，使用 Emmet 可以快速生成 HTML 和 CSS 代码，从而加速 Web 前端开发。. Emmet 的安装的安装目前很多流行的文本编辑器都支持 Emmet 插件。(

3、) Dreamweaver CS3() Dreamweaver CS6() Dreamweaver CC 2015课题课题 使用使用 Emmet 高效布局网页高效布局网页. Emmet 的使用的使用任何一个 HTML 文档都具有一些默认的文档结构，使用 Emmet 可以创建 HTML 文档初始结构。v使用 Emmet 生成 HTML 文档初始结构课题课题 使用内嵌框架制作画中画特效使用内嵌框架制作画中画特效v学习目标掌握内嵌框架的用法，能在内嵌框架中正确显示文本、图像、动画和 HTML 文档，实现局部刷新，形成 “画中画” 的特效。v相关知识一、内嵌框架iframe 是 Inline Fram

4、e 的缩写，也是框架的一种形式。与框架 ( frame) 不 同的是，iframe 非常灵活，可以嵌在网页的任意部分，将嵌入的文档与整个页面的内容相互融合，形成一个整体，因此 iframe 被称为内嵌框架或内联框架。课题课题 使用内嵌框架制作画中画特效使用内嵌框架制作画中画特效使用内嵌框架可以将文本、图片、动画或 HTML 文档嵌入在一个 HTML 中显示，结合数据库技术可以在静态页面中嵌入动态内容，实现数据的增加、删除、查询、修改等操作，形成 “画中画” 的效果。重载页面时不需要重载整个页面，只需要重载页面中的内嵌框架，减少了数据传输，增加了网页下载速度。课题课题 使用内嵌框架制作画中画特效

5、使用内嵌框架制作画中画特效二、内嵌框架的属性v iframe 标签的常用属性课题课题 使用内嵌框架制作画中画特效使用内嵌框架制作画中画特效v iframe 标签的常用属性课题课题 使用使用 HTML5 制作验证码特效制作验证码特效v学习目标掌握 canvas 标签的用法，能使用 HTML5 的 canvas 标签和 JavaScript 制作 “验证码” 特效。v相关知识“验证码” 是用一串随机产生的数字或符号生成的一幅图片，其中还会加入一些干扰像素防止 OCR (Optical Character Recognition 光学字符识别)。使用时，用户肉眼识别其中的验证码信息，输入表单提交网站

6、验证，验证成功后才能使用某项功能。使用验证码可以防止恶意破解密码、刷票、论坛灌水、刷页。不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。课题课题 使用使用 HTML5 制作验证码特效制作验证码特效canvas 是在 HTML5中新增的标签，用于在网页实时生成图像，并且可以操作图像内容。使用 HTML5中的 canvas 标签再结合 JavaScript 可以制作 “验证码” 特效。课题课题 使用使用 HTML5 制作验证码特效制作验证码特效一、canvas 标签canvas 的中文含义为 “ 画布”，画布的坐标原点 (0，0) 在左上角，水平方向为 x 轴，垂直方向为

7、y 轴。canvas 标签和其他标签的用法一样，语法格式如下： v画布坐标课题课题 使用使用 HTML5 制作验证码特效制作验证码特效绘制图形前，需要使用 getContext ( )方法返回一个用于在画布上绘图的环境，语法格式如下：canvas. getContext（ context ID ）其中，参数 context ID 指定了画布上绘制图形的类型，当前唯一的合法值是 “2d”，它指定了二维绘图 ( 即可以绘制直线、矩形、圆形、文本等)。目前 canvas 标签不支持三维绘图。综上所述，使用 canvas 标签绘图的基本结构如下：无标题文档 课题课题 使用使用 HTML5 制作验证码特

8、效制作验证码特效var canvas=document.getElementById(myCanvas); /查找 id为 myCanvas的画布var ctx=canvas.getContext(2d); /获取该 canvas的2D绘图环境 /此处添加画图(直线、矩形、圆形、文本、图像等)语句课题课题 使用使用 HTML5 制作验证码特效制作验证码特效二、基本图形的画法. 画直线画直线ctx.moveTo(50，20)；/定义绘画开始的位置，将画笔移到坐标(50，20)ctx.lineTo(150，80)；/画一条直线，结束点坐标是(150，80)ctx.lineWidth=2；/定义线的

9、宽度ctx.strokeStyle=red；/定义描边颜色为红色。注意：要在 stroke( )之前使用ctx.stroke( )；/描边v直线显示效果课题课题 使用使用 HTML5 制作验证码特效制作验证码特效. 画矩形画矩形/*- 1.绘制实心矩形 - */ctx.fillStyle=#F00；ctx.fillRect(20，20，40，60)；/从画布上(20，20)开始，绘制宽40像素、高60像素的实心矩形/* -2. 绘制空心矩形 - */ctx.strokeStyle=#0F0；/定义描边颜色为绿色ctx.strokeRect(80，20，40，60)；/从画布上(80，20)开始

10、，绘制宽40像素、高60像素的空心矩形/* -3. 矩形的填充与描边 - */课题课题 使用使用 HTML5 制作验证码特效制作验证码特效ctx.rect(140，20，40，60)；/画矩形ctx.fillStyle=#EEE；/定义填充颜色为浅灰色ctx.fill( )；/填充。当矩形既有描边又有填充时，必须先填充ctx.strokeStyle=#000；/定义描边颜色为黑色ctx.strokeRect(140，20，40，60)；/在填充后，再描边，描边才能显示出来v矩形显示效果课题课题 使用使用 HTML5 制作验证码特效制作验证码特效. 画圆画圆 (弧线弧线)如果要创建一个圆形、半圆

11、或弧线，可以使用 arc ( ) 方法。arc 的中文含义是 “ 弧线”，arc ( )方法是用一个中心点和半径，为一个画布的当前子路径添加一条弧线。一个圆的弧线是 360或 2 弧度 (用 Math. PI*2 表示)。画圆 (弧线) 的语法格式如下：课题课题 使用使用 HTML5 制作验证码特效制作验证码特效varc 参数含义v谢谢模块二JavaScript 高级特效31课题JavaScript语言基础2课题JavaScript对象化编程课题制作表单验证类特效目录45678课题制作层切换和层提示特效课题制作菜单类特效课题制作广告类特效课题制作滚动类和日期类特效课题制作网页辅助类特效课题课题

12、 JavaScript语言基础语言基础v学习目标. 了解了解 JavaScript 的概念，能编写简单的的概念，能编写简单的 JavaScript 程序。程序。. 了解常量、变量、函数、运算符和优先级等概念，能正确运用常量、变了解常量、变量、函数、运算符和优先级等概念，能正确运用常量、变量、函数和运算符，能按照优先级正确书写表达式。量、函数和运算符，能按照优先级正确书写表达式。. 了解常用内部函数的用法，能根据需要自定义函数。了解常用内部函数的用法，能根据需要自定义函数。. 了解数组的概念，能正确定义和引用数组。了解数组的概念，能正确定义和引用数组。. 掌握分支语句和循环语句的使用方法，能进行

13、顺序结构、分支结构和循掌握分支语句和循环语句的使用方法，能进行顺序结构、分支结构和循环结构程序的设计。环结构程序的设计。一、JavaScript 简介JavaScript 是一种基于对象和事件驱动的客户端脚本语言，是目前 Web 应用程序开发者使用最为广泛的客户端脚本编程语言。JavaScript 能通过 DOM ( Document Object Model，文档结构模型) 及自身提供的对象、操作方法实现所需的功能。JavaScript 采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗口事件等，并执行指定的操作。课题课题 JavaScript语言基础语言基础二、第一个 JavaScrip

14、t 程序计算机程序是指一组指示计算机执行动作或做出判断的指令，通常用某种程序设计语言编写。一般情况下，计算机程序要编译成机器语言程序后再运行。还有一种未经编译就可运行的程序，通常称为 “ 脚本程序”。JavaScript 属于客户端脚本语言，VBScript ( 主要用于ASP) 属于服务器端脚本语言。课题课题 JavaScript语言基础语言基础v客户端脚本和服务器端脚本比较编写 JavaScript 程序可选择普通的文本编辑器或集成开发环境。Dreamweaver 集成了JavaScript 开发环境，提供了强大的 JavaScript 支持。JavaScript 需要嵌入 HTML 中，

15、即 JavaScript 的存在依赖于 HTML 文档。在 HTML 中，使用 标记引入 JavaScript ，使用 结束 JavaScript ，和 之间是 JavaScript 脚本。 可以放在 和 之间，也可以放在 和 之间。二者的区别是:) head 部分的脚本: 需调用才执行的脚本或事件触发执行的脚本放在 HTML 的 head部分。当把脚本放在 head 部分时，可以保证脚本在任何调用之前被加载。课题课题 JavaScript语言基础语言基础) body 部分的脚本: 当页面被加载时立即执行的脚本放在 HTML 的 body 部分。放在 body 部分的脚本通常用来生成页面的内容

16、。 标记有一个 language 属性，用于指明使用的语言，其值可以为 “JavaScript”“VBScript” 或者 “JScript”。 标记还有一个 type 属性，用于指明文本类型，其值为 “text / javascript”。课题课题 JavaScript语言基础语言基础和 VBScript 不区分大小写不同，JavaScript 严格区分大小写。在编写 JavaScript 脚本语句时，用 “；” 作为当前语句的结束符。语句分行后，作为语句结束符的 “；” 可省略。也可将多个语句写在同一行中，若将多个语句写在同一行中，则语句之间的 “；” 不能省略。JavaScript 中的

17、注释采用和 Java 中类似的方式，单行注释前加 “ / / ”，多行注释放在 “ / ” 和 “ / ” 之间。课题课题 JavaScript语言基础语言基础三、常量和变量. 常量常量常量是程序执行过程中其值保持不变的量，有数值常量和字符串常量两种。在 VBScript中，字符串常量只能使用双引号作为定界符。与 VBScript 不同，在 JavaScript 中不仅允许使用双引号和单引号作为定界符，而且允许双引号和单引号相互嵌套。课题课题 JavaScript语言基础语言基础. 变量变量变量是程序执行过程中可能发生变化的量。使用 var 关键字对变量进行显式声明，不能使用 Var 和 VA

18、R，JavaScript 对关键字的大小写敏感 (v 和 V 是不同的字符)。声明变量的语法格式如下:var 变量 值;变量可以在声明的同时赋值，也可以在声明后使用过程中再赋值。赋值语句的语法格式如下:变量 表达式;课题课题 JavaScript语言基础语言基础变量的有效范围称为变量的作用域。JavaScript 有局部变量和全局变量两种变量。局部变量是指只能在本变量声明的函数内部调用的变量。全局变量是指在整个代码中都可以调用的变量。JavaScript 中也可以隐式地使用变量，即不用声明，直接使用。注意，JavaScript 总是把隐式声明的变量当成全局变量来使用。课题课题 JavaScri

19、pt语言基础语言基础四、函数函数是指实现某一特定功能的小程序段，JavaScript 除了提供大量实用的内部函数外，还允许用户自定义函数。. 内部函数内部函数. 自定义函数自定义函数使用自定义函数分为两个步骤: 函数定义和函数调用。一般情况下在 和 之间定义函数，在 和 之间调用函数。课题课题 JavaScript语言基础语言基础五、运算符和优先级表达式是用运算符把常量、变量和函数连接起来的式子。一个表达式可以只包含一个常量或一个变量。运算符可以是四则运算符、关系运算符、逻辑运算符、复合运算符等。在计算表达式的值时，按照运算符的优先级从高到低依次进行计算。优先级相同时，按照从左到右的顺序进行计

20、算。使用( )可以改变计算的顺序。课题课题 JavaScript语言基础语言基础六、数组数组是相同类型的变量按顺序组成的一种复合数据类型，这些相同类型的变量称为数组元素。数组通过数组名加索引来使用数组的元素。. 定义数组定义数组var 变量 new Array (元素1，元素2， ，元素 n )；. 引用数组引用数组数组名索引. 遍历数组遍历数组在使用数组时，经常需要依次访问数组中的每个元素，这种操作称为数组的遍历。JavaScript 中数组遍历最简单的办法是使用 for 循环并用数组长度 “ 数组名 . length” 作为 for 循环最大限度值。除此之外也可以使用 for in 循环。

21、课题课题 JavaScript语言基础语言基础七、语句. 输入与输出语句输入与输出语句() 输入() 输出使用 document . write ( ) 方法在浏览器窗口输出，使用 alert ( ) 方法在对话框中输出。. 选择结构语句选择结构语句选择结构是按照给定的逻辑条件来决定执行的顺序，有单向选择、双向选择和多向选择之分，但是程序在执行过程中都只是执行其中的一条分支。选择语句分为 if 条件语句和 switch 语句。课题课题 JavaScript语言基础语言基础() if 条件语句if (条件语句)执行语句;课题课题 JavaScript语言基础语言基础) if else 语句if

22、(条件)语句1;else语句2;) if else if else语句if (条件1)课题课题 JavaScript语言基础语言基础语句1;else if(条件2)语句2;else语句3;课题课题 JavaScript语言基础语言基础() switch 语句在 JavaScript 中，switch 语句也是选择结构中很常用的语句，功能与 if 语句类似。switch语句用于将一个表达式同多个值进行比较，并根据比较结果选择执行语句。语法格式如下:switch(表达式)case 值1:语句组1;break;case 值2:语句组2;break; case 值 n:语句组 n;break;defa

23、ult:语句组 n 1;课题课题 JavaScript语言基础语言基础. 循环结构语句循环结构语句循环结构可以实现将某一段代码多次重复执行，在 JavaScript 中可以使用 for 循环、for in 循环、while 循环和 do while 循环四种。() for 循环for 循环语句是最常用的循环语句，一般用在循环次数已知的情况下。for (初始化表达式;循环条件;操作表达式)循环体;课题课题 JavaScript语言基础语言基础() for in循环for in 循环用于遍历数组或者对象的属性，即对数组或者对象的属性进行循环操作。for (变量 in 对象)循环体;课题课题 Jav

24、aScript语言基础语言基础() while 循环while 循环在 “循环条件” 的值为真 (true) 时执行 “循环体”，否则结束循环。while (循环条件)循环体;课题课题 JavaScript语言基础语言基础() do while 循环do while 循环与 while 循环类似，不同的是 do while 循环在判断 “循环条件” 的值之前先执行 “循环体”，也就是说至少会执行一次 “循环体”。do循环体;while (循环条件);课题课题 JavaScript语言基础语言基础课题课题 JavaScript 对象化编程对象化编程v学习目标. 了解浏览器对象模型和文档对象模型，

25、掌握了解浏览器对象模型和文档对象模型，掌握 JavaScript 中常用的对象中常用的对象和事件。和事件。. 能利用能利用 JavaScript 中对象的属性、事件和方法，制作数字时钟特效、中对象的属性、事件和方法，制作数字时钟特效、动态改变文本特效、打开新窗口特效、状态栏打印机特效和在状态栏设置日期动态改变文本特效、打开新窗口特效、状态栏打印机特效和在状态栏设置日期时间特效。时间特效。v相关知识JavaScript是基于对象 (Object Based) 的编程语言。基于对象与面向对象 (Object Oriented) 不同，它不提供抽象、继承、重载等有关面向对象语言的功能。基于对象的编程

26、语言仍具有一些面向对象的基本特征，可以根据需要创建自己的对象，进一步扩大语言的应用范围，编写出功能强大的 Web 文档。课题课题 JavaScript 对象化编程对象化编程一、BOM 和 DOM 结构JavaScript 以 BOM 和 DOM 中定义的对象模型及操作方法为基础，支持 BOM 和 DOM 提供的对象模型，根据其对象模型层次结构访问目标对象的属性并对对象施加相应的操作。BOM 是 Browser Odject Model 的缩写，即浏览器对象模型。BOM 提供独立于页面内容而与浏览器窗口进行交互的对象。DOM 是 Document Odject Model 的缩写，即文档对象模型

27、。DOM 是 W3C 制定的标准。课题课题 JavaScript 对象化编程对象化编程BOM 中定义了六种重要的对象:() window 对象表示浏览器中打开的窗口。() navigator 对象包含了有关浏览器的信息。() location 对象包含了浏览器当前的 URL 信息。() document 对象表示浏览器中加载页面的文档对象。课题课题 JavaScript 对象化编程对象化编程vBOM 和 DOM 结构课题课题 JavaScript 对象化编程对象化编程() history 对象包含了浏览器访问网页的历史信息。() screen 对象包含了客户端显示屏幕的信息。浏览器会为每一个网

28、页自动创建 window 对象、navigater 对象、location 对象、document 对象、history 对象和 screen 对象。window 对象位于浏览器所有对象的最顶层，其他五个对象都是该 window 对象的子对象。课题课题 JavaScript 对象化编程对象化编程二、JavaScript 对象在JavaScript 中，对象是一种特殊的数据，拥有属性和方法。属性是指与对象有关的值，方法是指对象可以执行的行为 (或者可以完成的功能)。课题课题 JavaScript 对象化编程对象化编程v属性与方法的引用. window 对象对象window 对象对应 Web 浏览

29、器的窗口，使用它可以直接对浏览器窗口进行操作。window 对象提供的主要功能可以分为以下 5 类: 调整窗口的大小和位置、打开新窗口、系统提示框、状态栏控制和定时操作。() 调整窗口的大小和位置课题课题 JavaScript 对象化编程对象化编程v调整窗口的大小和位置的方法() 打开新窗口window 对象的 open ( )方法用于从一个窗口中新开一个窗口。课题课题 JavaScript 对象化编程对象化编程v系统提示框的方法v() 系统提示框() 状态栏控制window 对象的 status 属性可设置或返回窗口状态栏中的文本。浏览器状态栏的显示信息可以通过 window . statu

30、s 属性直接进行修改。设置在状态栏中显示文本的代码如下:window . status=显示文本在状态栏!;课题课题 JavaScript 对象化编程对象化编程课题课题 JavaScript 对象化编程对象化编程v定时操作的方法v() 定时操作课题课题 JavaScript 对象化编程对象化编程. document 对象对象document 对象是 window 对象的子对象，每个载入浏览器的 HTML 文档都会成为 document对象。document 对象包含当前文档的信息，如标题、背景颜色、表单、表格等。document 对象常用于向浏览器输出内容或者获得当前文档中的信息。. form

31、 对象对象form 对象是 document 对象的一个子对象，表示表单对象。一个文档中的每一个表单都是独立的、互不关联的对象，document . formName 或 document . forms index 用于获取对某个form 的引用，其中 index 的值在 0 到此文档中的 form 数减 1 之间。获取指定的 form 对象后，就可以使用它来获取 form 中的各个元素。课题课题 JavaScript 对象化编程对象化编程v. screen 对象象vscreen 对象包含有关客户端显示屏幕的信息。JavaScript 程序可以利用这些信息优化它们的输出，以达到用户的显示要求

32、。v. JavaScript 核心核心对象象vJavaScript 核心对象是 ECMAScript 标准定义的一些对象与函数。课题课题 JavaScript 对象化编程对象化编程vJavaScript 核心对象三、JavaScript 事件课题课题 JavaScript 对象化编程对象化编程vJavaScript 常用事件课题课题 制作表单验证类特效制作表单验证类特效v学习目标. 能使用能使用 JavaScript 函数实现表单验证。函数实现表单验证。. 能使用正则表达式实现即时提示错误的表单验证。能使用正则表达式实现即时提示错误的表单验证。v相关知识JavaScript 可以实现在数据被送

33、往服务器前对 HTML 表单中的输入数据进行验证。被 JavaScript 验证的典型表单数据包括: 用户是否已填写表单中的必填项目、用户输入的邮件地址是否合法、用户是否已输入合法的日期、用户是否在数据域中输入了文本。课题课题 制作表单验证类特效制作表单验证类特效. 获取表单元素的值获取表单元素的值document . 表单名称.表单元素名称 . value. 判断表单元素值是否满足条件判断表单元素值是否满足条件. 设置表单的设置表单的 onsubmit 提交事件提交事件. this 关键字关键字如果在 JavaScript 的 “ 主程序” 中 ( 不在任何 function 中，不在任何事

34、件处理程序中)使用 this ，它代表 window 对象。如果在事件处理程序中使用 this ，它代表发生事件的对象。课题课题 制作表单验证类特效制作表单验证类特效二、正则表达式正则表达式 ( Regular Expression) 描述了强大的模式匹配和文本检索与替换函数的方法，用于检查字符串是否含有某子串、将匹配的子串进行替换或者从某字符串抽取出符合条件的子串等。. RegExp 对象对象RegExp 对象表示正则表达式，是对字符串执行模式匹配的强大工具。() 直接量语法/ pattern /attributes() 创建 RegExp 对象的语法new RegExp(pattern，a

35、ttributes) 课题课题 制作表单验证类特效制作表单验证类特效. 修饰符修饰符. 方括号方括号. 元字符元字符. 量词量词. RegExp 对象属性对象属性. RegExp 对象方法对象方法. 支持正则表达式的支持正则表达式的 String 对象的方法对象的方法. 正则表达式符号总表正则表达式符号总表. 常用正则表达式常用正则表达式课题课题 制作表单验证类特效制作表单验证类特效课题课题 制作表单验证类特效制作表单验证类特效v常用正则表达式课题课题 制作层切换和层提示特效制作层切换和层提示特效v学习目标. 能制作层切换特效。能制作层切换特效。. 能制作层提示特效。能制作层提示特效。v相关知

36、识一、getElementById ( )方法getElementById ( ) 方法根据指定的 id 属性值获取对象。假如对应的为一组对象，则返回该组对象中的第一个，即 getElementById ( ) 方法可返回拥有指定 id 的第一个对象的引用。在操作文档的一个特定元素时，最好给该元素一个id 属性，在文档中为它指定一个唯一的名称，然后就可以用该 id 查找想要的元素。Elementdocument . getElementById(“id”) ;课题课题 制作层切换和层提示特效制作层切换和层提示特效二、display 属性display 属性设置元素如何显示，其值为 “none”

37、 时，元素不会被显示；其值为 “block”时，元素将显示为块级元素，元素前后会带有换行符。Object . style . display“none block ;课题课题 制作层切换和层提示特效制作层切换和层提示特效三、层切换和层提示制作原理. 获取对象，设置显示属性获取对象，设置显示属性. 初始时隐藏所有对象初始时隐藏所有对象. 显示对象显示对象. 隐藏对象隐藏对象. 移入时显示对象，移出时隐藏对象移入时显示对象，移出时隐藏对象课题课题 制作层切换和层提示特效制作层切换和层提示特效课题课题 制作菜单类特效制作菜单类特效v学习目标. 能制作纯能制作纯 HTML CSS 的菜单特效。的菜单特

38、效。. 能制作能制作 JavaScript CSS 的菜单特效。的菜单特效。v相关知识一、导航菜单导航菜单是网页设计中不可缺少的部分，是人们浏览网站时从一个页面转到另一个页面的快速通道。导航菜单的种类繁多，最基本的有三种形式: 横向导航菜单、纵向导航菜单和下拉式菜单。制作导航菜单的技术有很多，可以采用纯 HTML CSS 、JavaScript CSS 或 jQuery 等技术制作菜单特效。课题课题 制作菜单类特效制作菜单类特效二、HTML CSS 二级菜单制作原理不使用 JavaScript，只使用 HTML CSS 也能制作出精美的二级菜单特效，其原理是使用:hover 伪类控制子选项的显

39、示与隐藏。. 增加专门用于控制导航菜单的增加专门用于控制导航菜单的 Div. 一级菜单设置一级菜单设置. 二级菜单设置二级菜单设置() 二级菜单定位与隐藏() 二级菜单显示() 二级菜单变换链接效果设置课题课题 制作菜单类特效制作菜单类特效三、JavaScript CSS 二级菜单制作原理() 每个一级菜单都对应一个层，而这个层里存放着该一级菜单对应的二级菜单。二级菜单排列形状不同，就构成了不同形式的菜单。如果排列成横向，制作出来的就是横向导航菜单；如果排列成纵向，制作出来的就是纵向导航菜单。() 默认情况下，二级菜单这个层是隐藏的。通过 标签 onload 事件调用初始化函数，在 CSS 中

40、将需要被隐藏层的 display 属性值设为 “none”，可以达到此目的。() 当鼠标移入一级菜单时，对应的二级菜单层显示。在 JavaScript 中通过鼠标移入事件 onmouseover 调用自定义的显示层函数，将层的 display 属性值设为 “block”。课题课题 制作菜单类特效制作菜单类特效() 当鼠标从一级菜单中移开时，对应的二级菜单层隐藏。在 Javascript 中通过鼠标移出事件 onmouseout 调用自定义的隐藏层函数，将层的 display 属性值设为 “none”。() 鼠标从一级菜单移到二级菜单上时，二级菜单也不能隐藏，因此，对二级菜单必须将其设为: 当鼠

41、标移入时显示当前层，当鼠标移出时隐藏当前层。课题课题 制作菜单类特效制作菜单类特效课题课题 制作广告类特效制作广告类特效v学习目标. 能制作路径不固定、可关闭的漂浮广告特效。能制作路径不固定、可关闭的漂浮广告特效。. 能制作可关闭的对联广告特效。能制作可关闭的对联广告特效。. 能制作带数字导航的横幅广告特效。能制作带数字导航的横幅广告特效。. 能制作可折叠的商品分类广告特效。能制作可折叠的商品分类广告特效。v相关知识一、路径不固定的漂浮广告漂浮广告 (Floating Advertising) 是指漂浮在网站首页或各版块、帖子等页面的漂移形式的广告。课题课题 制作广告类特效制作广告类特效v漂浮

42、路径示意图. 运动轨迹的控制运动轨迹的控制. 暂停与继续移动的控制暂停与继续移动的控制. 关闭的控制关闭的控制课题课题 制作广告类特效制作广告类特效二、对联广告对联广告是指利用网站页面左右两侧的竖式广告位而设计的广告形式。课题课题 制作广告类特效制作广告类特效v可关闭对联广告. 在网站上挂对联在网站上挂对联. 对联广告随页面浏览跟随移动对联广告随页面浏览跟随移动实现对联广告随页面浏览跟随移动特效，必须获取当前页面的滚动条纵坐标，并根据用户操作动态调整滚动条纵坐标。课题课题 制作广告类特效制作广告类特效三、带数字导航的横幅广告横幅广告 (Banner Ad) 是横跨于网页上的矩形公告牌，表现商家

43、广告内容的图片放置在页面上，当单击这些横幅的时候，通常可以链接到广告主的网页。课题课题 制作广告类特效制作广告类特效v带数字导航的横幅广告. 轮播广告轮播广告. 切换广告切换广告四、可折叠的商品分类广告在商品分类下，单击某类商品可展开该分支，再次单击该类商品可折叠该分支。课题课题 制作广告类特效制作广告类特效v可折叠的商品分类广告. eval ( )函数函数. 可折叠商品广告核心代码分析可折叠商品广告核心代码分析课题课题 制作广告类特效制作广告类特效课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效v学习目标. 能制作无缝文字滚动广告特效。能制作无缝文字滚动广告特效。. 能制作无缝图片滚

44、动广告特效。能制作无缝图片滚动广告特效。. 能制作可手动控制的无缝图片滚动广告特效。能制作可手动控制的无缝图片滚动广告特效。. 能制作日历显示特效。能制作日历显示特效。. 能制作倒计时特效。能制作倒计时特效。v相关知识一、 无缝文字滚动广告. Marquee 标记的缺陷标记的缺陷制作文字滚动类特效时，可使用 Marquee 标记来实现文字在水平或垂直方向上的滚动。在文字滚动的过程中，总会有一段时间出现无滚动文字的情况，这是使用 Marquee 标记制作文字滚动类特效的一个缺陷。 为了弥补这个缺陷，可使用 Div 层和 JavaScript 脚本代码实现广告的无缝连续滚动。课题课题 7制作滚动类

45、和日期类特效制作滚动类和日期类特效. 无缝滚动原理无缝滚动原理课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效v准备滚动课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效v滚动中. 暂停与继续滚动暂停与继续滚动设置一个实时器，当鼠标移入时清除定时器，达到暂停的目的。 当鼠标移出时，重新设置定时器，继续滚动。二、 无缝图片滚动广告无缝图片滚动广告的工作原理与无缝文字滚动广告相同，区别是滚动方向不同。 无缝文字滚动广告从下向上滚动，无缝图片滚动广告从右向左滚动。课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效v滚动到交界时还原制作无缝图片滚动广告与制作无缝文字滚动广告有两点不

46、同:() 需要把无缝文字滚动源程序中的 offsetTop 改成 offsetLeft ，offsetHeight 改成 offsetWidth。() 为了使图片水平排列，需要多添加一个 Div，并设置左浮动。课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效v无缝图片滚动广告三、 可手动控制的无缝图片滚动广告在无缝图片滚动的基础上，增加左、 右两个箭头，当鼠标单击左、 右箭头时，可以手动控制图片的滚动，当释放鼠标时，图片继续无缝滚动。. 移动宽度移动宽度. 变速移动变速移动课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效v可手动控制的无缝图片滚动广告四、 日历显示. 年、年、

47、月、月、 日的获取日的获取. 时、时、 分、分、 秒的获取秒的获取. 星期的获取星期的获取. 输出日历输出日历课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效v日历显示特效五、 倒计时倒计时是从未来某一时间点向现在计算时间，用于表示距离某一期限还有多少时间。课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效v倒计时特效课题课题 8 制作网页辅助类特效制作网页辅助类特效v学习目标. 能制作设为主页和添加收藏特效。能制作设为主页和添加收藏特效。. 能使用能使用 JavaScript 动态改变动态改变 CSS。. 能制作全国省、能制作全国省、 市、市、 区三级联动特效。区三级联动特效。

48、v相关知识一、 设为主页和添加收藏. 设为主页设为主页() 通过 IE 浏览器 “Internet 选项” 设置主页的方法打开 IE 浏览器工具菜单 Internet 选项常规主页 (文本框中输入要设为主页的网址) 确定关闭浏览器。() 通过 JavaScript 程序代码设置主页设为首页 课题课题 8 制作网页辅助类特效制作网页辅助类特效. 添加收藏添加收藏收藏夹可以让用户上网时方便记录自己喜欢的、 常用的网站。收藏网页的方法有多种:() 使用 IE 浏览器 “收藏夹” 菜单中 “添加到收藏夹” 命令收藏网页。() 使用快捷键 【Ctrl D】收藏网页。() 使用 JavaScript 程序

49、代码收藏网页。通过 JavaScript 程序代码添加收藏的语法格式如下:课题课题 8 制作网页辅助类特效制作网页辅助类特效二、 使用 JavaScript 动态改变 CSSCSS 用于网页中样式的定义，它起到了美化网页的作用。 通过 JavaScript 和 CSS 联合使用，可以动态加载不同的 CSS 样式表文件，实现同一网页显示效果的 “大变脸”。三、 省、 市、 区三级联动省、 市、 区三级联动的显示效果: 选择省份后，自动显示该省所辖各市信息，选择城市后，自动显示该市所辖区或县信息。课题课题 8 制作网页辅助类特效制作网页辅助类特效v谢谢模块三 Flash 高级特效31课题Actio

50、nScript语言基础2课题制作菜单类特效课题制作UI类特效目录456课题制作鼠标类特效课题制作时钟类特效课题制作Loading预载特效课题课题 ActionScript 语言基础语言基础v学习目标. 能使用能使用 “动作动作” 面板创建动作。面板创建动作。. 掌握常量、掌握常量、 变量、变量、 函数、函数、 运算符的概念，能根据需要正确书写表达式，运算符的概念，能根据需要正确书写表达式，能正确自定义函数。能正确自定义函数。. 掌握分支语句、掌握分支语句、 循环语句和常用动作脚本语句，能在帧、循环语句和常用动作脚本语句，能在帧、 按钮和影片按钮和影片剪辑上添加动作脚本语句，实现一定的动画效果。

51、剪辑上添加动作脚本语句，实现一定的动画效果。v相关知识一、 ActionScript 简介ActionScript 的中文名称为 “ 动作脚本”，它是 Flash 专用的一种编程语言，用于控制 Flash 内容的播放方式。课题课题 ActionScript 语言基础语言基础二、 第一个 ActionScript 程序() ActionScript 3.0和 ActionScript 2.0不完全兼容。() ActionScript 脚本代码只能添加到关键帧、 按钮和影片剪辑中。与时序有关的行为(如到达某一时刻就执行某一行为) 必须添加到关键帧上；与事件相关的行为 (如单击鼠标就执行某一行为)

52、必须添加到按钮或影片剪辑上。()“动作” 面板有两种不同的工作模式: 标准模式和专家模式。() trace 语句在测试模式下计算表达式并在 “输出” 面板中显示结果。 trace 输出的信息只能在测试影片 (.fla文件) 时观察到， 导出影片 (.swf文件) 后就不能显示任何信息。课题课题 ActionScript 语言基础语言基础() ActionScript 中使用 “ / ” 表示单行注释，使用 “ / ” 表示多行注释，从 “ /”开始，到 “/ ” 结束。课题课题 ActionScript 语言基础语言基础v转义符三、 常量和变量. 常量常量常量是程序运行过程中其值保持不变的量，

53、包括数值型、 字符串型和逻辑型三种类型。() 数值型常量该类常量是具体的数值，常用于表示参数的值。() 字符串型常量与数值型常量不同的是，该类常量必须在字符串的两端添加双引号。() 逻辑型常量该类常量又称布尔型常量，它用于表明一个条件是否成立，如果成立，用 true 或非 0 值(如 ) 表示 如果不成立，用 flase 或 0 表示。课题课题 ActionScript 语言基础语言基础. 变量变量变量是程序执行过程中可以被改变的量。() 变量的命名规则) 第一个字符必须是字母、 下划线或符号 “”，后面的字符可以是字母、 数字、 下划线和符号 “” 的有效组合，避免使用空格和句号等。) 不能

54、使用 ActionScript 保留的关键字，if、 for 等关键字不能用作变量名。) 不能使用布尔值 true 或 false 作为变量名。) 变量名尽量具有一定的含义，做到见名知义，以便于区分和记忆。 在保持意义明确的同时尽可能使用短变量名。) 变量名在其作用范围内必须是唯一的。) 使用变量前要先定义再使用。课题课题 ActionScript 语言基础语言基础() 变量的类型) 按变量的作用划分数值型 ( Number ) 变量: 一般用于存储一些特定的数值，如年龄等。逻辑型变量: 用于判断指定的条件是否成立，其值有两种，即 true 或 false 。字符串型 ( String ) 变

55、量: 主要用于保存特定的文本信息，如姓名等。对象型 ( Object ) 变量: 用于存储对象型的数据。影片剪辑型 (MovieClip) 变量: 用于存储影片剪辑型数据。未定义型 (undefined) 变量: 当一个变量没有定义任何类型时，即为未定义型。课题课题 ActionScript 语言基础语言基础) 按变量的作用范围划分全局变量: 全局变量是指在整个文件中都有效的变量。 如果要声明一个全局变量，只要给该变量直接赋值或者使用 set 语句赋值即可。变量名表达式;set(变量名,表达式);局部变量: 局部变量的作用范围是它所在的程序段，可以使用 var 语句声明一个局部变量。 var

56、变量名;var 变量名=表达式;课题课题 ActionScript 语言基础语言基础) 按强弱程度划分弱类型变量 (weak typing): 弱类型变量是不显式指定数据类型的变量。 var 变量名;强类型变量 (strong typing): 强类型变量是指定数据类型的变量。 var 变量:变量类型;利用强类型变量可以让编译器帮助用户处理数据类型问题。 强类型变量包括变量的类型信息，编译器每次使用变量时，都会检查被赋予的数据与被赋予变量的类型是否匹配。 无论何时编译器发现一个潜在的数据类型不兼容，它都会报告错误并且拒绝完成编译。课题课题 ActionScript 语言基础语言基础四、 函数.

57、 函数的概念及分类函数的概念及分类函数是执行特定任务并可以在程序中重用的代码块。 利用函数编程，可以重复利用代码，提高编程效率。Flash 函数分为标准函数 (全局函数) 和自定义函数两种。. 标准函数标准函数 (全局函数全局函数)标准函数是 Flash 自带的已经编写好的函数，用户只需直接调用即可，如最大值函数 max( )、 最小值函数 min( )、 随机函数 random( )等。课题课题 ActionScript 语言基础语言基础. 自定义函数自定义函数自定义函数由用户根据需要自行定义，在 Flash 中可以使用 function 语句创建自定义函数。() 自定义函数的语法格式fun

58、ctin 函数名(参数:参数类型,参数:参数类型,):函数返回数据类型函数体;课题课题 ActionScript 语言基础语言基础() 调用函数() 传递参数() 自定义函数中常见的错误() 从函数返回值有时函数可以像使用子程序一样，不返回值。 有时函数在进行某些计算或操作后，返回一个值。在函数中使用 return 语句返回一个特定的值， return 语句会将其结果立即返回给发出调用的代码。returnexpression;课题课题 ActionScript 语言基础语言基础() 编写匿名函数ActionScript 中除了支持使用标准的、 命名的函数语法定义函数外，还支持使用匿名函数，即允

59、许创建一个没有名字的函数，然后将该函数赋予一个变量。 var 变量:变量类型function(参数1:参数类型,参数2:参数类型,):函数返回类型函数体;课题课题 ActionScript 语言基础语言基础五、 运算符. 算术运算符算术运算符. 比较运算符比较运算符课题课题 ActionScript 语言基础语言基础v算术运算符v比较运算符. 字符串运算符字符串运算符 进行连接时，对于不是字符串类型的数值，先将其转换成字符串，再进行连接。 如果要将两个数字类型的数字进行连接，可以借助空字符串。. 逻辑运算符逻辑运算符课题课题 ActionScript 语言基础语言基础v逻辑运算符. 赋值运算符

60、赋值运算符赋值运算符的一种特殊形式是条件运算符，其语法格式如下:变量条件?数值:数值/如果条件成立,则为数值1;如果不满足,则为数值2课题课题 ActionScript 语言基础语言基础v赋值运算符. 点运算符点运算符点运算符用来连接对象与嵌套在对象中的子对象，以及访问对象的属性和方法。. 数组访问运算符数组访问运算符 数组是一个对象，其属性称为元素，这些元素由称作索引的数字逐一标识。 创建数组时，需用数组访问运算符 (即方括号 ) 括住元素。 一个数组可以包含各种类型的元素。. typeof 运算符运算符typeof 运算符返回一个用于标识表达式的数据类型的字符串，可能的返回值为 strin

61、g、movieclip、 object、 function、 number 或 boolean。课题课题 ActionScript 语言基础语言基础六、 语句ActionScript 中的基本语句分为条件语句、 循环语句和动作脚本语句三大类。. 条件语句条件语句程序要实现交互性，就必须对程序服务对象提交的数据做出判断。 ActionScript 提供了四种可用来控制程序流的基本条件语句，即 if 、 ifelse、 if else if 和 switch 语句。. 循环语句循环语句循环语句可以将一段代码块多次重复执行。 ActionScript 提供了 for 循环、 for in循环、whi

62、le 循环和 do while 循环四种。课题课题 ActionScript 语言基础语言基础. 常用动作脚本语句常用动作脚本语句() 影片剪辑控制) on ( )语句指定触发动作的鼠标事件或按键。 当事件发生时，执行该事件后面大括号 ( ) 中的语句。 on(mouseEvent) statements; ) onClipEvent ( ) 语句触发为特定影片剪辑实例定义的动作。 当事件发生时，执行该事件后面大括号 ( ) 中的语句。 onClipEvent(movieEvent) statements; 课题课题 ActionScript 语言基础语言基础) startDrag ( ) 语

63、句使指定影片剪辑在影片播放过程中可拖动。 一次只能拖动一个影片剪辑。 执行 startDrag( ) 操作后，影片剪辑将保持可拖动状态，直到用 stopDrag( ) 显式停止拖动为止，或直到对其他影片剪辑调用了 startDrag( ) 动作为止。 startDrag(target,lock,left,top,right,bottom) ; ) stopDrag( ) 语句停止当前由 stopDrag( ) 语句设定的拖动操作。 stopDrag ( );课题课题 ActionScript 语言基础语言基础) setProperty( ) 语句当影片剪辑播放时，更改影片剪辑的属性值。 set

64、Property(target,property,value);) getProperty()语句返回指定影片剪辑的指定属性的值。 语法格式如下:getProperty(instancename,property) duplicateMovieClip( )语句复制指定的影片剪辑，创建一个新的影片剪辑的实例。duplicateMovieClip(target,newname,depth);) removeMovieClip( )语句删除指定的影片剪辑。removeMovieClip(target);课题课题 ActionScript 语言基础语言基础() 时间轴控制) play( )语句在时间

65、轴中向前移动播放头，从当前位置开始播放 swf 文件。 play( ); ) stop( )语句停止当前正在播放的 swf 文件。 此动作最通常的用法是用按钮控制影片剪辑。 stop( ) ;课题课题 ActionScript 语言基础语言基础) gotoAndPlay ( )语句将播放头转到场景中指定的帧并从该帧开始播放。 如果未指定场景，则播放头将转到当前场景中的指定帧。 gotoAndPlay ( scene,frame );) gotoAndStop ( ) 语句将播放头转到场景中指定的帧并停止播放，如果未指定场景，播放头将转到当前场景中的帧。gotoAndStop ( scene,f

66、rame);课题课题 ActionScript 语言基础语言基础() 浏览器 / 网络语句) fscommand ( ) 语句使 swf 文件与 Flash 播放器或承载 Flash 播放器的程序 ( 如 Web 浏览器) 进行通信。 fscommand (command,parameters);) getURL ( ) 语句将来自特定 URL 的文档加载到窗口中，或将变量传递到位于所定义 URL 的另一个应用程序。 getURL (url,window,method);) loadMovie ( ) 语句在播放原始 swf 文件时，将 swf 文件加载到 Flash 播放器中的影片剪辑中。

67、loadMovie (url,target,method);课题课题 ActionScript 语言基础语言基础) unloadMovie ( ) 语句从 Flash 播放器中删除通过 loadMovie ( ) 加载的影片剪辑。 unloadMovie (target);() with ( ) 语句with ( ) 语句用于指定一个对象，并计算该对象内的表达式和动作。 其作用是简化代码不用重复书写对象的名称或路径。 with (object)statements;with ( ) 语句用于对指定的对象执行一系列的语句，但不需要重复说明对象的名称。 如果要修改一个对象的多个属性，可以将所有属性

68、赋值语句放在 with 控制结构中，这样对对象的引用就只需要一次，而不是在每个赋值语句中都引用。课题课题 ActionScript 语言基础语言基础七、 影片剪辑的常用属性课题课题 ActionScript 语言基础语言基础v影片剪辑的常用属性八、 常用的核心类. Math 类类在 Flash 中，Math 类是一个非常常用的类，使用此类的属性和方法可以访问和处理数学常数和函数。 Math 类的所有属性和方法都是静态的，而且必须使用语法 Math.constant 或 Math.method(parameter)才能调用它们。. Number 类类Number 类是 Number 数据类型的简

69、单包装对象，Number 类的属性是静态属性，无需对象就可以使用。. Staring 类类Staring 类是字符串数据类型的包装，提供用于操作字符串类型的属性和方法。. Date 类类课题课题 ActionScript 语言基础语言基础. Array 类类使用 Array 类可以访问和操作数组。new Array ( )new Array (length)new Array (element0,element1, element2, , elementN). Sound 类类Sound 类用于控制影片中的声音。 当影片正在播放时，可以从库中向该影片剪辑添加声音，并进行控制。 在调用 Soun

70、d 类的方法之前，必须使用构造函数 newSound( ) 创建 Sound对象。new Sound(target)课题课题 ActionScript 语言基础语言基础九、 绝对路径和相对路径. 路径的概念路径的概念路径是影片中影片剪辑实例名称、 变量和对象的分层结构地址。. 路径的分类路径的分类路径分为绝对路径和相对路径两类。. root、 parent 和和 this使用 root 指定一个绝对路径，该路径指向主时间轴的引用。使用 parent 指定一个相对路径，该路径指向当前影片剪辑 ( 或对象) 之上的影片剪辑(或对象)。使用 this 实现对所在对象自身进行的访问和操作。课题课题 A

71、ctionScript 语言基础语言基础课题课题 制作菜单类特效制作菜单类特效v学习目标. 能制作最简单的一级导航菜单特效。能制作最简单的一级导航菜单特效。. 能制作下拉式菜单特效。能制作下拉式菜单特效。. 能制作横向菜单特效。能制作横向菜单特效。v相关知识Flash 菜单具有动感强、 视觉效果好等特点，按钮对象是制作菜单的主要构成对象。一、 影片剪辑影片剪辑是包含在 Flash 影片中的影片片段，具有自己的时间轴和属性。在 Flash 中按 【Ctrl F8】 组合键创建影片剪辑元件。课题课题 制作菜单类特效制作菜单类特效v创建影片剪辑二、 按钮. 概述概述按钮实际上是四帧的交互影片剪辑。

72、当按 【Ctrl F8】组合键创建新元件时，若为元件选择 “按钮” 类型，Flash 会创建一个包含四帧的时间轴。按钮元件的时间轴上的每一帧都有一个特定的功能: 第一帧是弹起状态；第二帧是指针经过状态；第三帧是按下状态；第四帧是点击状态。课题课题 制作菜单类特效制作菜单类特效v创建按钮对象v按钮的四帧时间轴. 制作菜单时按钮上常用的鼠标事件制作菜单时按钮上常用的鼠标事件按钮上的事件有八种，制作菜单时，常用的有三种:释放 (release)、 滑过 ( rollOver )和滑离 ( rollOut ) 。. 已终止一项可能不安全的操作的解决办法已终止一项可能不安全的操作的解决办法课题课题 制作

73、菜单类特效制作菜单类特效v按钮事件v全局安全设置三、 下拉菜单制作原理下拉菜单是菜单的一种表现形式。 当用户选中一个菜单后，在其下方出现对应的下拉列表，其他菜单处于收起的状态。 当鼠标移至菜单区域外时，所有下拉的菜单收起。课题课题 制作菜单类特效制作菜单类特效v下拉菜单四、 横向菜单制作原理横向菜单制作原理和下拉菜单制作原理完全相同，不同之处是: 制作影片剪辑时将各菜单项从纵向排列改为横向排列。下拉菜单背景图片的分隔条为横向，横向菜单背景图片的分隔条为纵向。 当菜单项从纵向排列改为横向排列时，需要改变背景图片。当把所有素材图片导入库后，双击元件进入元件编辑状态，选中原背景图片，单击“属性” 面

74、板上的 “交换元件” 按钮，可以方便地替换背景图片。课题课题 制作菜单类特效制作菜单类特效课题课题 制作制作 UI 类特效类特效v学习目标. 了解了解 Flash 常用的组件，掌握添加组件和设置组件参数的方法。常用的组件，掌握添加组件和设置组件参数的方法。. 能利用组件动态加载外部文本文件、能利用组件动态加载外部文本文件、 动态加载外部图像文件、动态加载外部图像文件、 自制视自制视频播放器播放频播放器播放 FLV 视频文件，能综合应用上述技术制作产品展示界面。视频文件，能综合应用上述技术制作产品展示界面。. 能利用组件制作用户表单。能利用组件制作用户表单。v相关知识一、 组件基础知识. 组件的

75、概念组件的概念Flash 中的组件是带参数的影片剪辑，使用这些组件，即使对 ActionScript 没有深入的理解，用户也可以构建复杂的 Flash 应用程序。 用户只需将这些组件从 “组件” 面板拖到应用程序中即可为应用程序添加功能，另外还可以方便地修改组件的预设参数，从而满足自己的设计需求。课题课题 制作制作 UI 类特效类特效. 组件的分类组件的分类在 Flash 软件的菜单栏中，依次选择 “窗口” “组件” 命令 (或使用快捷键 【Ctrl F7】 )，打开 “ 组件” 面板。 组件包括 Data、 Media、 User Interface 和 Video 四大类。课题课题 制作制

76、作 UI 类特效类特效v查看组件() 数据 (Data) 组件() 媒体 (Media) 组件() 用户界面 (User Interface) 组件() 视频 (Video) 组件课题课题 制作制作 UI 类特效类特效. 使用组件的基本方法使用组件的基本方法() 将所需组件 (如 TextInput ) 从 “组件” 面板中拖放到舞台上，创建该组件的实例。() 单击舞台上的组件实例，打开 “属性” 面板，单击 “ 参数” 选项卡，为组件设置各项参数。() 编写组件所需的动作脚本，实现特定的功能。课题课题 制作制作 UI 类特效类特效v设置 TextInput 组件参数二、 常用组件. Labe

77、l 组件组件Label 为文本标签组件，如 TextInput 组件左侧的 “姓名:” 标签。 当构建的应用程序基于组件时，使用 Label 组件替代普通文本字段就是一个好方法，可以使用样式维持一致的外观。 . TextInput 组件组件TextInput 为单行文本组件。. TextArea 组件组件TextArea 为多行文本组件。课题课题 制作制作 UI 类特效类特效. RadioButton 组件组件RadioButton 为单选按钮组件，让用户从一组选项中做出一个选择，如选择性别。. CheckBox 组件组件CheckBox 为复选框组件，当需要收集一组非相互排斥的 true 或

78、 false 值时，使用复选框。. List 组件组件List 为列表组件，建立列表后，用户可以从列表中选择一项或多项，如用户访问一个电子商务网站需要选择想要购买的项目。课题课题 制作制作 UI 类特效类特效. ComboBox 组件组件ComboBox 为组合框组件，在需要从列表中选择一项的表单中使用 ComboBox 组件，如在客户地址表单中提供一个省 / 市的下拉列表。. Button 组件组件Button 为按钮组件，是任何表单的一个基础部分。 当用户启动一个事件时使用按钮，如大多数表单都有 “提交” 按钮。. UIScrollBar 组件组件UIScrollBar 组件允许将滚动条添

79、加至文本字段。. Loader 组件组件Loader 组件是一个容器，可以显示 swf 或 JPEG 文件，也可以在运行时加载内容，并监视加载进度。课题课题 制作制作 UI 类特效类特效. FLVPlayback 组件组件FLVPlayback 是视频播放组件。 通过 FLVPlayback 组件，可以轻松地将视频播放器包括在 Flash 应用程序中，以便播放通过 HTTP 渐进式下载的 Flash 视频 (FLV) 文件。FLVPlayback 组件的使用过程基本上由两个步骤组成: 第一步是将该组件放置在舞台上第二步是指定一个供它播放的 FLV 文件。 除此之外，还可以设置不同的参数，以控制

80、其行为并描述 FLV 文件。 课题课题 制作制作 UI 类特效类特效课题课题 制作鼠标类特效制作鼠标类特效v学习目标. 能制作鼠标拖动遮罩特效。能制作鼠标拖动遮罩特效。. 能制作鼠标跟随特效。能制作鼠标跟随特效。v相关知识一、 使用 setMask ( ) 方法设置遮罩Flash 动画要产生遮罩效果，至少需要上、 下两层。 上层决定看到的形状，下层决定看到的内容。 通常情况下会选中上层，按下鼠标右键，在弹出的菜单中选择 “遮罩层”，那么该图层就成为遮罩层。 若运用得当，会得到很好的特效，但这种方法不能制作沿路径运动和鼠标拖动的遮罩。 而要实现这种功能，就必须使用 setMask( )方法。se

81、tMask( ) 方法的作用是将一个影片剪辑指定为另一个影片剪辑的遮罩。 myMovieClip.setMask(maskMovieClip)课题课题 制作鼠标类特效制作鼠标类特效二、 鼠标跟随原理xmouse 和ymouse 属性返回舞台( level0) 上鼠标的当前横坐标 ( x) 和纵坐标( y)MovieClip.x 和 MovieClip.y 属性设置 MovieClip 的横坐标 (x) 和纵坐标 (y)。 通过 xmouse和 ymouse 属性不断获取鼠标的当前坐标，再通过 MovieClip. 和 MovieClip. 属性设置 MovieClip 的坐标值，MovieCl

82、ip 将显示在新坐标的位置上。 每当移动鼠标时，MovieClip 的坐标都会被设置成鼠标的坐标，如此循环往复，实现鼠标跟随的特效。课题课题 制作鼠标类特效制作鼠标类特效课题课题 制作时钟类特效制作时钟类特效v学习目标能制作时钟特效。能制作时钟特效。v相关知识时钟指针转过角度的计算制作时钟特效时，需要计算时针、 分针和秒针转过的角度。. 时针转过的角度时针转过的角度时针转动的角度 当前时数乘以 30 当前分数除以 2. 分针转过的角度分针转过的角度分针转动的角度 当前分数乘以 6 当前秒数除以 10. 秒针转过的角度秒针转过的角度秒针转动的角度 当前秒数乘以 6课题课题 制作时钟类特效制作时钟

83、类特效课题课题 制作制作 Loading 预载特效预载特效v学习目标. 能制作带有进度条的简单能制作带有进度条的简单 Loading 预载页面。预载页面。. 能制作带有动态下载数据的能制作带有动态下载数据的 Loading 预载页面。预载页面。. 能利用组件实现能利用组件实现 Loading 预载。预载。v相关知识播放 Flash 动画时，时常会因为文件过大而产生等待时间，此时网页显示的是一片空白。若无 Loading 预载，上网者可能误以为网页出现错误、 打不开，直接关闭网页。 因此一个完整的 Flash 往往提供一个 Loading 预载页面，动态显示动画下载的情况，提示用户耐心等待。一、

84、 Loading 预载. Loading 预载的概念预载的概念Loading 预载是加载大动画 (经验数据: 500KB以上) 时显示动画下载进度的一种过渡动画。. 制作预载的步骤制作预载的步骤. 在本机测试预载的方法在本机测试预载的方法课题课题 制作制作 Loading 预载特效预载特效二、 getBytesTotal ( ) 和 getBytesLoaded ( ) 方法计算已加载影片剪辑的百分比时，需要使用计算已加载影片剪辑的百分比时，需要使用 getBytesTotal ( ) 和和 getBytesLoaded ( )方法。方法。MovieClip.getBytesTotal ( )

85、 以字节为单位返回指定的影片剪辑的大小。以字节为单位返回指定的影片剪辑的大小。 对对于那些外部的影片剪辑于那些外部的影片剪辑 ( 加载到某个目标或某个级别的根加载到某个目标或某个级别的根 swf 文件或影片剪辑文件或影片剪辑) ，返回值为，返回值为 swf 文件的大小。文件的大小。MovieClip.getBytesLoaded ( ) 返回指定的影片剪辑加载返回指定的影片剪辑加载 ( 流处理流处理) 的字节数。的字节数。 将此值与将此值与MovieClip.getBytesTotal ( ) 返回的值进行比较以确定已加载的百分比。返回的值进行比较以确定已加载的百分比。课题课题 制作制作 Loading 预载特效预载特效v谢谢