利用Silverlight插件在ASP_net页面中嵌入动画

本文由xliangbai贡献 pdf文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。 ２０ 福 建 电 脑 ２００８ 年第 ８ 期 利用 Ｓｉｌｖｅｒｌｉｇｈｔ 插件在 ＡＳＰ．ｎｅｔ 页面中嵌入动画 江 （ 福建信息职业技术学院 南 福建 福州 ３５０００３ ） 摘 要】 Ｓｉｌｖｅｒｌｉｇｈｔ 是微软公司在 ２００７ 年底新推出的一项浏览器增强模块， 可以和 Ｆｌａｓｈ 一样作为浏览器插件工作， 【 ： 并且可以把程序任务放到客户端完成， 让服务器减轻负担， 提高客户端的网页访问速度。本文介绍了 Ｓｉｌｖｅｒｌｉｇｈｔ 的项目结构 以及简单的 Ｓｉｌｖｅｒｌｉｇｈｔ 程序的实现方法， 并利用实例说明了在 ＡＳＰ．ｎｅｔ 中使用 Ｓｉｌｖｅｒｌｉｇｈｔ 插件编写代码实现图形动画的方法。 动画 关键词】 Ｓｉｌｖｅｒｌｉｇｈｔ 、 【 ： ＡＳＰ．ｎｅｔ 、 前言 随着网络技术的发展， 网页上丰富多彩的动画已经成为网 页设计中不可或缺的一个部分 ， 精彩的动画不仅可以增加网页 浏览的趣味性， 而且在互动教学、 课件设计等方面也起着越来越 重要的作用。 但动画传播的数据量相对较大， 如果一个动画较为 复杂， 则传送的速度会降低， 从而影响了用户使用的积极性。如 何提高动画传送的速度成为一个急待解决的问题。Ｓｉｌｖｅｒｌｉｇｈｔ 是 微软公司新推出的一个跨浏览器、 跨平台的插件， 可以利用该插 件在网页上实现动画， 原来利用 Ｆｌａｓｈ 插件时需要下载全部文件 内容才能播放， 而现在只要从服务器下载控件后即可在客户端 运行程序实现播放， 减少了数据传送量， 提高了运行速度。这对 于需要大量使用动画进行课件播放的教学平台来说 ， 可以提高 教学平台使用者的访问速度， 降低服务器的负担， 可以支持更多 的学习者以提高教学平台的使用效率。 一、 Ｓｉｌｖｅｒｌｉｇｈｔ 的项目结构 Ｓｉｌｖｅｒｌｉｇｈｔ２．０ 是微软公司于 ２００７ 年底新推出的一项浏览器 增 强 模 块 ， 是 一 种 新 的 Ｗｅｂ 呈 现 技 术 ， 它 依 赖 Ｍｉｃｒｏｓｏｆｔ ．ＮＥＴ Ｆｒａｍｅｗｏｒｋ ３．０ 中 的 ＸＡＭＬ 和 ＪａｖａＳｃｒｉｐｔ 脚 本 创 建 页 面 ， 遵 循 ＷＰＦ， 可 以 和 Ｆｌａｓｈ 一 样 作 为 浏 览 器 插 件 工 作 ， 能 够 显 示 矢 量 图 形、 动画和视频， 可以实现跨浏览器和跨平台， 利用 Ｓｉｌｖｅｒｌｉｇｈｔ 实 现动画可以弥补微软网页中的动画效果的缺陷， 并且通过控件 的实现可以把程序任务放到客户端完成， 让服务器减轻负担， 提 高客户端的网页访问速度。 要创建一个 Ｓｉｌｖｅｒｌｉｇｈｔ 应用程序， 必须安装 Ｓｉｌｖｅｒｌｉｇｈｔ 的浏 览器插件程序。如果只是用 ＪａｖａＳｃｒｉｐｔ 进行 开 发 ， 可 以 安 装 Ｍｉ－ ｃｒｏｓｏｆｔ Ｓｉｌｖｅｒｌｉｇｈｔ １．０ Ｒｅｌｅａｓｅ Ｃａｎｄｉｄａｔｅ； 如果开发过程需要用到 ． ＮＥＴ 的编程语言， 则需要安装 Ｍｉｃｒｏｓｏｆｔ Ｓｉｌｖｅｒｌｉｇｈｔ １．１ Ａｌｐｈａ Ｒｅ－ ｆｒｅｓｈ．， 创 建 Ｓｉｌｖｅｒｌｉｇｈｔ 项 目 可 以 用 Ｍｉｃｒｏｓｏｆｔ Ｅｘｐｒｅｓｓｉｏｎ Ｂｌｅｎｄ ２ （目 前 最 新 的 预 览 版 本 是 Ｓｅｐｔｅｍｂｅｒ Ｐｒｅｖｉｅｗ） 或 者 Ｖｉｓｕａｌ Ｓｔｕｄｉｏ 创建之后包含以下 ２００８ Ｂｅｔａ２ （需安装好 Ｓｉｌｖｅｒｌｉｇｈｔ Ｔｏｏｌ Ａｌｐｈａ）。 几类文件： 嵌入 Ｓｉｌｖｅｒｌｉｇｈｔ 应用程序的 ｈｔｍｌ 文件。 １、 ２ 、 用 来 执 行 Ｓｉｌｖｅｒｌｉｇｈｔ 应 用 程 序 载 入 工 作 的 ＪａｖａＳｃｒｉｐｔ 文 件。 定义和描述应用程序界面的 ＸＡＭＬ 文件。 ３、 不 同 的 是 ， 用 ＶＳ２００８ 创 建 的 项 目 默 认 主 页 的 文 件 名 是 ＴｅｓｔＰａｇｅ．ｈｔｍｌ， 而 用 Ｍｉｃｒｏｓｏｆｔ Ｅｘｐｒｅｓｓｉｏｎ Ｂｌｅｎｄ ２ 创 建 的 项 目 默 认主页的文件名是 Ｄｅｆａｕｌｔ．ｈｔｍｌ。 具体的目录结构如下： １．Ｒｅｆｅｒｅｎｃｅｓ 目录 该 目 录 中 包 含 了 许 多 （．ｄｌｌ）文 件 ， 这 些 文 件 定 义 了 项 目 中 所 引用的各托管类型。 如果我们要使用其他自定义的类型， 就可能 需要手动添加包含该类型定义的 ．ｄｌｌ 文件。若 Ｓｉｌｖｅｒｌｉｇｈｔ 插件中 没有包含项目所引用的某些程序集文件， 则应用程序用户需要 下载这些程序集文件到本地。界面描述中所定义的新类型都包 含在程序集 （ａｓｓｅｍｂｌｙ）文件中。 ２．Ｐａｇｅ．ｘａｍｌ 和 Ｐａｇｅ．ｘａｍｌ．ｃｓ Ｐａｇｅ．ｘａｍｌ 是 项 目 默 认 的 主 界 面 的 ＸＡＭＬ 描 述 文 件 。 每 个 ｘａｍｌ 文件之后 都 有 一 个 对 应 的 ．ＮＥＴ 语 言 文 件 。 Ｐａｇｅ．ｘａｍｌ．ｃｓ 就 是用 Ｃ＃ 创建项目时其对应的文件。这个文件对 ．ｘａｍｌ 文件中的 所引用的 ．ＮＥＴ 类型做了定义。通过编译之后， 项 目 会 生 成 程 序 集文件， 供 ．ｘａｍｌ 文件引用， 且该程序集文件会随 Ｓｉｌｖｅｒｌｉｇｈｔ 应 用 程 序 一 起 下 载 到 用 户 本 地 。 在 Ｐａｇｅ．ｘａｍｌ 文 件 中 有 一 个 Ｃａｎｖａｓ 容器， 作为文件的根元素， 包含了程序中用到的各种控件和元 素。 ３．Ｓｉｌｖｅｒｌｉｇｈｔ．ｊｓ 该 文 件 包 含 了 运 行 Ｓｉｌｖｅｒｌｉｇｈｔ 应 用 程 序 之 前 所 必 需 的 各 种 操作， 主要检查用户是 否 安 装 了 符 合 版 本 需 求 的 Ｓｉｌｖｅｒｌｉｇｈｔ。 如 果没有安装， 则 Ｓｉｌｖｅｒｌｉｇｈｔ 应用程序所在的页面将会显示图标， 提示用户先安装插件。最好不要改变该 ．ｊｓ 文件的内容。 ４．ＴｅｓｔＰａｇｅ．ｈｔｍｌ（Ｂｌｅｎｄ ２ 中 创 建 的 文 件 名 为 Ｄｅｆａｕｌｔ．ｈｔｍｌ） 和 ＴｅｓｔＰａｇｅ．ｈｔｍｌ．ｊｓ（Ｂｌｅｎｄ ２ 中的文件名为 Ｄｅｆａｕｌｔ＿ｈｔｍｌ．ｊｓ） ＴｅｓｔＰａｇｅ．ｈｔｍｌ 是该文件为项目的 默 认 主 页 ， 文 件 中 引 入 了 Ｓｉｌｖｅｒｌｉｇｈｔ 的脚本文件来载入 Ｓｉｌｖｅｒｌｉｇｈｔ 应用程序。 ＴｅｓｔＰａｇｅ．ｈｔｍｌ． ｊｓ 文件中定 义 了 ＴｅｓｔＰａｇｅ．ｈｔｍｌ 中 调 用 的 ＣｒｅａｔＳｉｌｖｅｒｌｉｇｈｔ（）方 法 来 载入 Ｓｉｌｖｅｒｌｉｇｈｔ 应用程序。 二、 Ｓｉｌｖｅｒｌｉｇｈｔ 应用程序的创建 下面以 Ｃ＃ 为例， 介绍 Ｓｉｌｖｅｒｌｉｇｈｔ 应用程序的创建方法。 １． 新建 Ｓｉｌｖｅｒｌｉｇｈｔ 项目 在 Ｍｉｃｒｏｓｏｆｔ Ｖｉｓｕａｌ Ｓｔｕｄｉｏ ２００８ 中 安 装 了 Ｍｉｃｒｏｓｏｆｔ Ｓｉｌ－ ｖｅｒｌｉｇｈｔ Ｔｏｏｌｓ Ａｌｐｈａ ｆｏｒ Ｖｉｓｕａｌ Ｓｔｕｄｉｏ ２００８ Ｂｅｔａ２ 后 就 可 以 创 建 一 个 Ｓｉｌｖｅｒｌｉｇｈｔ 项 目 。 在 ．ｎｅｔ 中 打 开 ｎｅｗ ｐｒｏｊｅｃｔ 对 话 框 ， 选 择 创 Ｓｉｌｖｅｒｌｉｇｈｔ Ｐｒｏｊｅｃｔ 用于创建一个完整的 Ｓｉｌｖｅｒｌｉｇｈｔ 应用程序。 建项目后将自动生成 Ｐａｇｅ．ｘａｍｌ 文件并打开。 ２． 编辑 ＸＡＭＬ 文件 在打开的 Ｐａｇｅ．ｘａｍｌ 中将看到 ＜Ｃａｎｖａｓ＞容器， 在容器中输入 运行程序所需要的代码， 最简单的一段代码如下， 可以在屏幕上 显示 ＂Ｉｔ＇ｓ ａ ｅｘａｍｐｌｅ＂ 字样。 ＜Ｃａｎｖａｓ ｘ：Ｎａｍｅ＝＂ＭｙＣａｎｖａｓ＂ ｘｍｌｎｓ＝＂ｈｔｔｐ：／／１７２．１６．１３．１４／ｍｉｔｕ＿ｘｗ／ｃｌｉｅｎｔ＂ ｘｍｌｎｓ：ｘ＝＂ｈｔｔｐ：／／ １７２．１６．１３．１４／ｍｉｔｕ＿ｘｗ／ ｘａｍｌ＂ Ｌｏａｄｅｄ＝＂Ｐａｇｅ＿Ｌｏａｄｅｄ＂ ｘ：Ｃｌａｓｓ＝＂ＳｉｌｖｅｒｌｉｇｈｔＰｒｏｊｅｃｔＳｔｒｕｃｔｕｒｅ．Ｐａｇｅ；ａｓｓｅｍｂｌｙ＝ＣｌｉｅｎｔＢｉｎ／ＳｉｌｖｅｒｌｉｇｈｔＰｒｏｊｅｃｔ－ Ｓｔｒｕｃｔｕｒｅ．ｄｌｌ＂ Ｗｉｄｔｈ＝＂１００％＂ Ｈｅｉｇｈｔ＝＂１００％＂ Ｂａｃｋｇｒｏｕｎｄ＝＂Ｗｈｉｔｅ＂ ＞ ＜ＴｅｘｔＢｌｏｃｋ ｘ：Ｎａｍｅ＝＂ＭｙＭｅｓｓａｇｅ＂ Ｔｅｘｔ＝＂ Ｉｔ＇ｓ ａ ｅｘａｍｐｌｅ ＂ ＦｏｎｔＳｉｚｅ＝＂ ３０＂／＞ ＜／Ｃａｎｖａｓ＞ ３． 加入事件处理代码 在 ＡＳＰ．ｎｅｔ 页 面 中 并 不 仅 仅 实 现 文 字 的 输 入 ， 更 多 的 是 需 １．福建省教育厅科技项目， 项目编号： ＪＢ０７１９５ 信息技术环境下多元学与教方式有效融入日常教学的研究》 子课题， 课题批准号： ＢＣＡ０６００１６ ２．国家社会科学基金 ＂ 十一五 ＂ 规划（ 教育学科） 国家级课题《 ２００８ 年第 ８ 期 福 建 电 脑 ２１ 要进行事件处理， 因此需要对刚才屏幕上显示的文字进行事件 处理， 例如单击该文字让它变成另外一句话 ＂Ｃｌｉｃｋｅｄ ｍｅ！ ＂ 。 事件 处理代码是在 Ｐａｇｅ．ｘａｍｌ 所对应的代码文件 Ｐａｇｅ．ｘａｍｌ．ｃｓ 中添加 的， 我们可以打开 Ｐａｇｅ．ｘａｍｌ．ｃｓ 文件， 在其中加入下面的代码： ｐｕｂｌｉｃ ｛ ｖｏｉｄ Ｐａｇｅ＿Ｌｏａｄｅｄ（ｏｂｊｅｃｔ ｏ， ＥｖｅｎｔＡｒｇｓ ｅ） 在横向或纵向上产生扭曲位移） 、 移动变形 ＜ＴｒａｎｓｌａｔｅＴｒａｎｓｆｏｒｍ／＞ （ 让图形产生一定的位移 ） 以 及 组 合 变 形 ＜ＭａｔｒｉｘＴｒａｎｓｆｏｒｍ／＞（ 综 合以上几种变形的特性） 。如代码 ＜ＲｏｔａｔｅＴｒａｎｓｆｏｒｍ Ａｎｇｌｅ＝＂４５＂ ／＞可以让图形顺时针旋转 ４５ 度， 组合变换代码 ＩｎｉｔｉａｌｉｚｅＣｏｍｐｏｎｅｎｔ（）； ＭｙＭｅｓｓａｇｅ．ＭｏｕｓｅＬｅｆｔＢｕｔｔｏｎＤｏｗｎ ＋＝ ｎｅｗＭｏｕｓｅＥｖｅｎｔＨａｎｄｌｅｒ （ＭｙＭｅｓ－ ｓａｇｅ＿ＭｏｕｓｅＬｅｆｔＢｕｔｔｏｎＤｏｗｎ）； 。 ｝ ｖｏｉｄ ＭｙＭｅｓｓａｇｅ＿ＭｏｕｓｅＬｅｆｔＢｕｔｔｏｎＤｏｗｎ （ｏｂｊｅｃｔ ｓｅｎｄｅｒ， ＭｏｕｓｅＥｖｅｎｔＡｒｇｓ ａｒｇ） ｛ ＭｙＭｅｓｓａｇｅ．Ｔｅｘｔ ＝ ＂ Ｃｌｉｃｋｅｄ ｍｅ！ ＂； ｝ ＜ＲｏｔａｔｅＴｒａｎｓｆｏｒｍ Ａｎｇｌｅ＝＂４５＂／＞ ＜ＳｋｅｗＴｒａｎｓｆｏｒｍ ＡｎｇｌｅＸ＝＂４５＂／＞ 不 仅 让 图 形 顺 时 针 旋 转 ４５ 度 ， 而 且 在 Ｘ 方 向 上 扭 曲 ４５ 度。 ４． 利用时间轴产生变换效果 点击设计界面左侧 Ｏｂｊｅｃｔｓ ａｎｄ Ｔｉｍｅｌｉｎｅ 中 的 箭 头 符 号 ， 如图 并在弹出的对话框中点击 ＂ 加号 ＂ （ Ｃｒｅａｔｅ Ｎｅｗ Ｔｉｍｅｌｉｎｅ ） 。 所示。 １ 运 行 以 上 程 序 ， 对 屏 幕 上 出 现 的 ＂Ｉｔ＇ｓ ａ ｅｘａｍｐｌｅ＂ 文 字 单 击 ， 该文字即变为 ＂ Ｃｌｉｃｋｅｄ ｍｅ！ ＂ 。 三、 Ｓｉｌｖｅｒｌｉｇｈｔ 对象的动画操作 在 Ｓｉｌｖｅｒｌｉｇｈｔ 中 可 以 通 过 结 合 使 用 Ｍｉｃｒｏｓｏｆｔ Ｅｘｐｒｅｓｓｉｏｎ 动 Ｂｌｅｎｄ 对 ＵＩ、 画 或 交 互 性 内 容 进 行 更 有 效 的 设 计 开 发 ， 且 Ｍｉ－ ｃｒｏｓｏｆｔ Ｖｉｓｕａｌ Ｓｔｕｄｉｏ Ｏｒｃａｓ 与 Ｍｉｃｒｏｓｏｆｔ Ｅｘｐｒｅｓｓｉｏｎ Ｂｌｅｎｄ 可 以 协 调工作， 以实