Flash与Web程序设计.ppt

《Flash与Web程序设计.ppt》由会员分享，可在线阅读，更多相关《Flash与Web程序设计.ppt（27页珍藏版）》请在三一办公上搜索。

1、第六讲,Flash与Web程序设计,1.1 了解Flash动画,Flash动画是一种以Web应用为主的二维动画形式，它不仅可以通过文字、图片、视频、声音等综合手段展现动画意图，还可以通过强大的交互功能实现与动画观看者之间的互动。Flash动画的特点 Flash动画的应用领域,1.1.1 Flash动画的特点,Flash动画之所以能为大众喜爱并在日新月异的网络时代经久不衰，盖源于其拥有许多值得称道的特点，主要包括了以下几方面：Flash可使用矢量绘图；Flash动画具有交互性，能更好地满足用户的需要；Flash动画拥有强大的网络传播能力；Flash动画拥有崭新的视觉效果 Flash动画制作成本低

2、，效率高；Flash动画在制作完成后可以把生成的文件设置成带保护的格式，从而维护了设计者的版权利益。,1.1.2 Flash动画的应用领域,在当今信息化时代，人们已经习惯于在网络上进行工作、交流和查找信息。随着Internet网络的不断推广，Flash动画的应用被延伸到了多个领域，譬如现下流行的多媒体动画、游戏、教学课件、广告以及网站制作等方面，Flash的身影无处不在。,1.2 认识Flash CS3工作界面,在学习Flash CS4中的各项操作之前，应先对软件工作界面的组成有初步的了解，这部分内容主要包括了开始页面、菜单栏、工具箱、时间轴面板、舞台、属性面板和面板集等界面元素。开始页面 菜

3、单栏 工具箱 时间轴面板 舞台【属性】面板 面板集,1.2.1 开始页面,启动Flash CS4后，程序将打开其默认的开始页面。该开始页面将常用的任务都集中放在一起，供用户随时调用。然后进入Flash CS4的工作界面中，包括菜单栏、工具箱、【时间轴】面板、舞台、【属性】面板及面板集等界面元素。,1.2.2 菜单栏,Flash CS4的菜单栏中包括【文件】、【编辑】、【视图】、【插入】、【修改】、【文本】、【命令】、【控制】、【调试】、【窗口】和【帮助】共11个下拉菜单。,1.2.3 工具箱,工具箱中包括了【绘图】工具、【视图调整】工具、【颜色修改】工具和【选项设置】工具4大部分，用户可以使用

4、这些工具可以进行绘图、选取对像、喷涂、修改及编排文字等操作。,1.2.4 时间轴面板,时间轴用于组织和控制影片内容在一定时间内播放的层数和帧数。与电影胶片一样，Flash影片也将时间长度划分为帧。图层相当于层叠在一起的幻灯片，每个图层都包含一个显示在舞台中的不同图像。时间轴的主要组件是图层、帧和播放头。,1.2.5 舞台,在Flash CS4中，舞台就是设计者进行动画创作的区域，设计者可以在其中直接绘制插图，也可以在舞台中导入需要的插图、媒体文件等。,1.2.6【属性】面板,Flash CS3的【属性】面板主要由【属性】、【滤镜】和【参数】3个选项卡组成。,1.2.7 面板集,面板集用于管理F

5、lash面板，它将所有面板都嵌入到了一个面板集中。通过面板集，用户可以对工作界面的面板布局进行重新组合，以适应不同的工作需要。,1.3 制作Flash动画的前期准备,了解了Flash动画并认识了Flash CS3的工作界面之后，就可以准备制作Flash动画了。制作者首先需要了解Flash动画的制作流程，然后打开Flash CS3软件设置符合个人习惯的工作环境，最后掌握创建和保存Flash文档等基本操作。设计Flash动画的制作流程 设置Flash CS3的首选参数和快捷键 新建和保存Flash文档,1.3.1 设计Flash动画的制作流程,制作Flash动画过程大致可以分为6个步骤，即策划动画

6、、收集素材、制作动画、调试动画、测试动画和发布动画。,1.3.2 设置Flash CS3的首选参数和快捷键,为了提高工作效率，使软件最大程度地符合个人操作习惯，用户可以在动画制作之前先对Flash CS3的首选参数和快捷键进行设置。,1.3.3 新建和保存Flash文档,Flash CS4对文档的基本操作与其他软件类似，主要包括新建和保存文档等。,2.Flash动画的要素,元件：图形、按钮、影片剪辑动画类型：逐帧动画、形状渐变动画、图形（运动）渐变动画 引导动画、遮罩动画、影片剪辑复合动画等,3.1 Actionscript,ActionScript 3.0 是一种强大的面向对象编程语言，它标

7、志着 Flash Player Runtime 演化过程中的一个重要阶段。设计 ActionScript 3.0 的意图是创建一种适合快速地构建效果丰富的互联网应用程序的语言，这种应用程序已经成为 Web 体验的重要部分。,3.2 Actionscript 历史,ActionScript 的老版本（ActionScript 1.0 和 2.0）提供了创建效果丰富的 Web 应用程序所需的功能和灵活性。ActionScript 3 现在为基于 Web 的应用程序提供了更多的可能性。它进一步增强了这种语言，提供了出色的性能，简化了开发的过程，因此更适合高度复杂的 Web 应用程序和大数据集。Act

8、ionScript 3 可以为以 Flash Player 为目标的内容和应用程序提供高性能和开发效率。,3.3 Actionscript3.0 简介,ActionScript 3 符合 ECMAScript Language Specification 第三版。它还包含基于 ECMAScript Edition 4 的功能，比如类、包和名称空间；可选的静态类型；生成器和迭代器；以及非结构化赋值（destructuring assignments）。随着 Web 应用程序项目需求的增长，也要求 ActionScript 引擎有重大的突破。ActionScript 3 引入了一个新的高度优化的

9、ActionScript Virtual Machine（AVM2），与 AVM1 相比，AVM2 的性能有了显著的提高。这使 ActionScript 3 代码的执行速度几乎比以前的 ActionScript 代码快了 10 倍。Flash Player 9 中包含 AVM2（ActionScript 3.0 的脚本语言引擎），设计它的目的是提供互联网应用程序开发人员所需的性能和特性。为了向后兼容现有的内容，Flash Player 将继续支持 AVM1。,3.4 ActionScript3.0代码基本结构,package/定义包名 import flash.display.Sprite;/

10、导入外部包 class DrawDemo extends Sprite/主类必须继承Sprite或者MovieClip public function DrawDemo()/构造函数 this.graphics.beginFill(0 xff0000);/设置填充色 this.graphics.drawCircle(0,0,30);/画一个圆(半径大小为30像素)/设置圆心的位置 this.x=300;this.y=300;,3.4 关于Flex,Flex 是一个高效、免费的开放源框架，可用于构建具有表现力的 Web 应用程序，这些应用程序利用 Adobe Flash Player 和 Ado

11、be AIR,运行时跨浏览器、桌面和操作系统实现一致的部署。虽然只能使用 Flex 框架构建 Flex 应用程序，Adobe Flash Builder（之前称为 Adobe Flex 上，它们可以跨所有主要浏览器、在桌面上实现一致的运行。连接到 Internet 的计算机中超过 98%装有 Flash Player，这是一个企业级客户端运行时，它的高级矢量图形能处理要求最高、数据密集型应用程序，同时达到桌面应用程序的执行速度。通过利用 AIR，Flex 应用程序可以访问本地数据和系统资源。,Flex 最初是作为一个J2EE（Java 2 Platform,Enterprise Edition

12、）应用，或者可以说是JSP（JavaServer Pages）标签库而发布的。它可以把运行中的MXML（Flex标记语言）和ActionScript编译成FLASH应用程序（即二进制的SWF文件）。最新版的FLEX支持创建静态文件，该文件使用解释编译方式并且不需要购买服务器许可证就可以在线部署。Flex的目标是让程序员更快更简单地开发RIA应用。在多层式开发模型中，Flex应用属于表现层。Flex 采用GUI界面开发，使用基于XML的MXML语言。Flex 具有多种组件，可实现Web Services，远程对象，drag and drop，列排序，图表等功能；FLEX内建动画效果和其它简单互动

13、界面等。相对于基于HTML的应用（如PHP、ASP、JSP、ColdFusion及CFMX等）在每个请求时都需要执行服务器端的模板，由于客户端只需要载入一次，FLEX应用程序的工作流被大大改善。FLEX的语言和文件结构也试图把应用程序的逻辑从设计中分离出来。Flex 服务器也是客户端和XML Web Services及远程对象（Coldfusion CFCs，或Java类，等支持Action Message Format的其他对象）之间通讯的通路。,3.5 Flash与Flex,Flex和Flash都以ActionScript作为其核心编程语言，并被编译成swf文件运行于Flashplayer

14、虚拟机里。因此Flex也继承了Flash在表示层上先天性的美感、除了视觉上的舒适感外，还天生具备方便的矢量图形、动画和媒体处理接口。虽然Flex和Flash有众多的相似点，但是不同之处仍然很多:1.尽管公用ActionScript,但是使用的库并不完全相同，更合适的说法是两者使用着两套具有极大“功能重叠”范围的库。2.Flash偏向的是美术动画设计师人员，所以更容易发挥特效处理的优势，Flex偏向开发人员，所以容易做出具有丰富交互功能的应用程序。,3.Flash只能以ActionScript脚本的形式开发（舞台被关联到一个称之为 document class的类里），另外舞台元素也是可以绑定脚

15、本的，不过从软件工程的角度讲不建议这样用，Flex还可以使用称作mxml的标记语言来描述应用的外观和行为，mxml中可以直接嵌入ActionScript脚本。4.由于第三点而造成的两者市场定位不同，Flex是面向企业级的网络应用程序，Flash则面向诸如平面动画、广告设计等多媒体展示程序。5.借助Flash Lite这一移动设备上的Flashplayer，Flash可以开发移动应用，Flex则不行。6.Flash的编程模型是基于时间轴的，Flex的则是基于窗体，虽然它运行在网页里。,3.6 RIA,传统网络程序的开发是基于页面的、服务器端数据传递的模式，把网络程序的表现层建立于HTML页面之上

16、，而HTML是适合于文本的，传统的基于页面的系统已经渐渐不能满足网络浏览者的更高的、全方位的体验要求了。而富互联网应用（Rich Internet Applications，缩写为RIA）的出现就是为了解决这个问题。富互联网应用程序是下一代的将桌面应用程序的交互式用户体验与传统的WEB应用的部署灵活性和成本分析结合起来的网络应用程序。富互联网应用程序中的富客户技术通过提供可承载已编译客户端应用程序（以文件形式，用HTTP传递）的运行环境，客户端应用程序使用异步客户/服务器架构连接现有的后端应用服务器，这是一种安全、可升级、具有良好适应性的新的面向服务模型，这种模型由采用的WEB服务所驱动。结合了声音、视频和实时对话的综合通信技术，使富互联网应用程序（RIA）具有前所未有的网上用户体验。,