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