XML技术在制作即指即现网络课件的应用探索

摘要：通过实例制作，提出一种基于XML存储半结构化方法，解决FLASH在制作医学形态教学课件中大量局部图形和文字处理的问题；提高了教学课件的内涵质量；增强了教学效果。XML技术和FALSH技术的结合,在网络教学课件及相关领域中具有很好的推广价值。

关键词：FLASH 8；XML；即指即现；网络课件

中图分类号：TP311文献标识码：A 文章编号：1009-3044(2007)05-11421-02

人体解剖学是一门形态学医学基础学科，在教学过程中要用到许多图片。现有的图片是静态的，又由于一张图片中标签较多，常有指示不清，而大多有关的网络课程也是图谱的搬家。为进一步提高教学课件质量，使形态学课程具有良好的的交互性，通过形态结构的位置不同颜色的对比和清晰的文字提示，增强学生对形态位置的记忆。我们运用FLASH8制作动画技术和XML存储半结构化方法对图形、文字和声音的管理技术，制作鼠标即指即现的人体解剖学网络课件，受到师生的一致好评。

1 总体效果

最终完成的Flash文件在浏览器运行后，当鼠标指到图片中某一结构时，此结构处便出现阴暗变化，同时显示结构名称和此结构的相关说明。当鼠标移除此结构后，又重新恢复最初的图形，如图1和图2。

2 制作步骤

2.1 完成XML文件

Flash8可以访问多种类型的数据文件，对于XML文件，结构简洁、操作方便。一张图片中的所有结构名称和结构相关说明归在一个XML文件中，如图3。

2.2 建成001.as文件

创建XML实例photoXML，并加载XML文件及加载判断。

2.3 创建Flash文件

修改场景1名为Loading，在第一帧按F9添加脚本语言#include “001.as”。

2.4 建成Lblshow.as文件

构建function (showlbl)函数，将XML文件中属性值赋于创建的文本字lblname和lbldepict。

var e = photoXML.firstChild.childNodes;

//创建两个文本框，用于操作提示

this.createTextField("clewlbl", 122, 430, 100, 140, 150);

clewlbl.border = false;

clewlbl.leftMargin = "2";

clewlbl.multiline = false;

clewlbl.antiAliasType = "advanced";

var clewlblfont:TextFormat = new TextFormat();

clewlblfont.color = 0xFF0000;

clewlblfont.size=14;

clewlbl.setNewTextFormat(clewlblfont);

clewlbl.text="操作说明：";

this.createTextField("clew", 121, 430, 125, 140, 150);

clew.border = true;

clew.leftMargin = "2";

clew.multiline = true;

clew.wordWrap = true;

clew.autoSize = "left";

clew.antiAliasType = "advanced";

var clewfont:TextFormat = new TextFormat();

clewfont.color = 0xFFFFFF;

clewfont.size=14;

clewfont.leading = 4;

clew.setNewTextFormat(clewfont);

clew.text="请移动鼠标到图片中的各结构上，便会显示结构名称及相应的说明！";

//当鼠标移到某一结构按钮时，调用function(showlbl)

btn000.onRollOver = function(showlbl) {

var btnstring:String = this._name.toString();

btnstring = btnstring.charAt(5);

var i:Number = Number(btnstring);

lblname.text = e[i].attributes["名称"];

lbldepict.text = e[i].attributes["说明"]; };

btn001.onRollOver = function (showlbl) {

var btnstring:String = this._name.toString();

btnstring = btnstring.charAt(5);

var i:Number = Number(btnstring);

lblname.text = e[i].attributes["名称"];

lbldepict.text = e[i].attributes["说明"];

}; //以下如有便多的结构按钮，代码同上，只修改按钮实例名的序号

……

2.5 添加场景二

修改名为photo，在第一层加入解剖图片，添加第二层名为action，并按F9添加脚本语言#include “002.as”，如图4。

2.6 建成003.as文件

创建文本字段caption1和caption2，并设计文本格式用于显示结构名称和结构说明两标签；创建文本字段lblname和lbldepict，并设计文本格式用于显示名称和说明的内容。通过鼠标的rollOver和rollOut事件进行文本的显示和清除。

on (rollOver) {

clew.removeTextField();

clewlbl.removeTextField();

this.createTextField("caption1", 121, 430, 80, 140, 150);

caption1.border = false;

caption1.leftMargin = "2";

caption1.multiline = false;

caption1.antiAliasType = "advanced";

var caption1font:TextFormat = new TextFormat();

caption1font.color = 0xFF0000;

caption1font.size=14;

caption1.setNewTextFormat(caption1font);

caption1.text="结构名称：";

this.createTextField("caption2", 120, 430, 125, 140, 150);

caption2.border = false;

caption2.leftMargin = "2";

caption2.multiline = false;

caption2.antiAliasType = "advanced";

var caption2font:TextFormat = new TextFormat();

caption2font.color = 0xFF0000;

caption2font.size=14;

caption2.setNewTextFormat(caption2font);

caption2.text="结构说明：";

this.createTextField("lblname", 110, 430, 100, 140, 150);

lblname.border = true;

lblname.leftMargin = "2";

lblname.multiline = true;

lblname.wordWrap = true;

lblname.autoSize = "left";

lblname.antiAliasType = "advanced";

this.createTextField("lbldepict", 100, 430, 145, 140, 150);

lbldepict.border = true;

lbldepict.leftMargin = "2";

lbldepict.multiline = true;

lbldepict.wordWrap = true;

lbldepict.autoSize = "left";

lbldepict.antiAliasType = "advanced";

//设计文本字段格式

var style_mytextfont:TextFormat = new TextFormat();

style_mytextfont. align = "justify";

style_mytextfont.leading = 4;

style_mytextfont.leftMargin = 5;

style_mytextfont.rightMargin = 0;

style_mytextfont.color = 0xFFFFFF;

style_mytextfont.size=14;

lblname.setNewTextFormat(style_mytextfont);

lbldepict.setNewTextFormat(style_mytextfont);

showlbl();}

on (rollOut) {

lblname.removeTextField();

lbldepict.removeTextField();

caption2.removeTextField();

caption1.removeTextField(); }

2.7 添加结构按钮元件

参照解剖图绘出按钮在鼠标经过的图形，设计颜色和Alpha值。

2.8 在场景photo中添加层btn000，将按钮元件拖至相应的结构，按F9添加脚本语言#include “003.as”。

图5

2.9 其他结构以此类推，最终完成图片中所有的要显示的结构，并测试完成。

3 测试的环境

操作系统为Windows XP Professional，制作工具为Flash 8，XML文件用dreamweaver MX编定。

4 技术优点

采用XML技术，便于知识点的组织。同时由于采用独立的脚本文件形式也便于课件制作的批量化和流程化，减少了大量的重复工作。单纯的Flash文件中只包含了几个脚本文件名，所以也有效地保护了作品被下载利用。

本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文。