运用Flash AS+XML制作网络版《人体骨骼肌图解使用手册》

第２５卷第２期　

中国医学教育技术　

Ｖｏ１．２５　Ｎｏ．２　

２０１１年４月　

ＣＨＩＮＡ　ＭＥＤＩＣＡＬ　ＥＤＵＣＡＴ１０Ｎ　ＴＥＣＨＮＯＬＯＧＹ　

Ａｐｒ．２０１１　

运用Ｆｌａｓｈ　ＡＳ＋ＸＭＬ制作网络版　

《人体骨骼肌图解使用手册》　

韩中保　

（盐城卫生职业技术学院解剖学教研室，江苏盐城２２４００６）　

【摘要】：结合彩图和线图，介绍了利用Ｆｌａｓｈ　ＡＳ＋ＸＭＬ制作网络版《人体骨骼肌图解使用手　

册》，只要学习者输入正确的骨骼肌名称，便会立即呈现相关的图片、动画及文字说明的过程。该　

图解手册可使教学活动灵活方便，也便于学生复习使用，具有较高的使用推广价值。　

【关键词】：Ｆｌａｓｈ　ＡＳ；人体骨骼肌；图解；查询；动态呈现　

【中图分类号】：Ｇ４３４　【文献标识码】：Ａ【文章编号】：１００４—５２８７（２０１１）０２－０１４０－０３　

Ｕｓｉｎｇ　Ｆｌａｓｈ　ＡＳ＋ＸＭＬ　ｔｏ　ｄｅｖｅｌｏｐ　ｔｈｅ　

ｎｅｔｗｏｒｋ－ｂａｓｅｄ　Ｇｒａｐｈｉｃ　Ｍａｎｕａｌ　ｏｆ　Ｈｕｍａｎ　Ｓｋｅｌｅｔａｌ　Ｍｕｓｃｌｅｓ　

Ｈａｎ　Ｚｈｏｎｇｂａｏ　

（Ｄｅｐａｒｔｍｅｎｔ　ｏｆ　Ａｎａｔｏｍｙ，Ｙａｎｃｈｅｎｇ　Ｈｅａｈｈ　Ｖｏｃａｔｉｏｎａｆ　

ａｎｄ　Ｔｅｃｈｎｉｃａｌ　Ｃｏｌｌｅｇｅ。Ｙａｎｃｈｅｎｇ　２２４００６，Ｃ　ｉｎａ）　

【Ａｂｓｔｒａｃｔ】：Ｂｙ　ｕｓｉｎｇ　ｃｏｌｏｒ　ｐｉｃｔｕｒｅｓ　ａｎｄ　ｐｒｏｆｉｌｅ　ｃｈａ￣ｓ，ｔｈｉｓ　ｐａｐｅｒ　ｉｎｔｒｏｄｕｃｅｓ　ｈｏｗ　ｔｏ　ｄｅｖｅｌｏｐ　ｔｈｅ　

ｎｅｔｗｏｒｋ．ｂａｓｅｄ　Ｇｒａｐｈｉｃ　Ｍａｎｕａｌ　ｏｆ　Ｈｕｍａｎ　Ｓｋｅｌｅｔａｌ　Ｍｕｓｃｌｅｓ　ｗｉｔｈ　Ｆｌａｓｈ　ＡＳ＋ＸＭＬ．Ａｓ　１ｏｎｇ　ａｓ　ｕｓｅｒｓ　ｉｎｐｕｔ　

ｔｈｅ　ｃｏｒｒｅｃｔ　ｎａｍｅ　ｏｆ　ｓｋｅｌｅｔａｌ　ｍｕｓｃｌｅｓ，ｔｈｅ　ｃｏｍｐｕｔｅｒ　ｗｏｕｌｄ　ｉｍｍｅｄｉａｔｅｌｙ　ｐｒｅｓｅｎｔ　ｒｅｌｅｖａｎｔ　ｐｉｃｔｕｒｅｓ，　

ａｎｉｍａｔｉｏｎ　ａｎｄ　ｔｅｘｔｓ．Ｔｈｉｓ　ｍａｎｕａｌ　ｃａｎ　ｍａｋｅ　ｔｅａｃｈｉｎｇ　ａｃｔｉｖｉｔｉｅｓ　ｍｏｒｅ　ｆｌｅｘｉｂｌｅ　ａｎｄ　ｃｏｎｖｅｎｉｅｎｔ，ａｎｄ　ｈｅｌｐ　

ｓｔｕｄｅｎｔｓ　ｒｅｖｉｅｗ　ａｎｄ　ｕｓｅ，ｔｈｕｓ　ｂｏａｓｔｉｎｇ　ａ　ｈｉｇｈ　ｖａｌｕｅ　ｏｆ　ａｐｐｌｉｃａｔｉｏｎ　ａｎｄ　ｐｏｐｕｌａｒｉｚａｔｉｏｎ．　

【Ｋｅｙ　ｗｏｒｄｓ】：Ｆｌａｓｈ　Ａｓ；ｈｕｍａｎ　ｓｋｅｌｅｔａｌ　ｍｕｓｃｌｅ；ｇｒａｐｈｉｃ；ｑｕｅｒｙ；ｄｙｎａｍｉｃ　ｐｒｅｓｅｎｔａｔｉｏｎ　

依据专业培养目标要求，《人体解剖学》中的运　

活动更加灵活方便，也便于学生的复习使用，具有较　

动系统和神经系统是康复治疗技术专业教学中非常　

高的使用推广价值　Ｊ。　

重要的两个章节，要求学生对每块骨骼肌的起止、作　

１总体流程设计　

用、神经支配都要十分清楚。而仅仅借助于书中的　

图片、模型或标本，学生是很难理解的，因为都没有　

运用Ｆｌａｓｈ　ＡＳ＋ＸＭＬ制作网络版《人体骨骼肌　

单块骨骼肌的示范。在教学过程中为了解决这一问　

图解使用手册》主要是通过用户直接输入骨骼肌名　

题，需要绘制几十张不同关节部位的骨骼图片，印刷　

称，程序自动呈现相关的动画和说明内容。所以，首　

后给每位学生，要求在相关的图片上用点和线标明　

先要判断用户输入的名称不要出现空、错误和不包　

每块骨骼肌的起止点。先按跨越关节的不同画一　

含在程序中的字符串；第二，程序分主程序和各骨骼　

份，然后再按作用相近的画一份，这样，学生很自然地　

肌的动画文件，主程序通过加载外部．ｓｗｆ文件的形　

就搞清楚了每块骨骼肌的作用。并且在此基础上，　

式呈现；第三，各骨骼肌动画文件中主要包括有与教　

材相近的骨骼肌彩图，自绘的简线图，骨骼肌的起　

又参考了一些解剖学图谱，运用Ｆｌａｓｈ　ＡＳ＋ＸＭＬ（ＡＳ　

即ＡｃｔｉｏｎＳｃｒｉｐｔ的缩写）制作了网络版《人体骨骼肌图　

点、止点、作用及神经支配等相关文字信息。　

解使用手册》，只要操作者输入正确的骨骼肌名称，　

２　ＡｃｔｉｏｎＳｃｒｉｐｔ主要语句　

便会立即呈现相关的图片、动画及文字说明，使教学　

２．１　ＸＭＬ（）对象　

基金项目：江苏省卫生厅医学科技发展基金科研课题“构建《正常人体学》网络课程”（ｊ２００６０５）　

收稿日期：２ＯＬＯ－Ｏ９－２１　

作者简介：韩中保（１９６６一），男，江苏盐城人，副教授，主治医师，学士，主要研究方向：多媒体技术、网络课程建设。　

第２５卷第２期　韩中保．运用Ｆｌａｓｈ　ＡＳ＋ＸＭＬ制作网络版《人体骨骼肌图解使用手册》　１４１　

使用构造函数ｎｅｗ　ＸＭＬ（）创建ＸＭＬ对象，加　

载外部ＸＭＬ文档，并读取元素属性值。由于程序是　

网络形式运行，不能通过访问本地磁盘、文件形式读　

取相关文件及文件名，因此，通过创建ＸＭＬ对象，将　

各骨骼肌动画文件的文件名以ＸＭＬ元素的属性形　

式存储信息，便于Ｆｌａｓｈ查询和读取　Ｊ。　

２．２事件响应和条件判断　

＜？ｘｍｌ　ｖｅｒｓｉｏｎ＝”１．０”ｅｎｃｏｄｉｎｇ＝”ｕｆｆ－８”？＞　

＜动　

＜骨骼肌名称＝”胸大肌”／＞　

＜骨骼肌名称＝”胸小肌”／＞　

＜／动画＞　

②新建场景取名ｌｏａｄｉｎｇ，添加Ａｓ语句，以加载　

外部ＸＭＬ文件，成功后进入ｍａｉｎ场景。　

用户输人的信息是通过提交按钮触发动作的鼠　

标事件运行，再通过返回按钮进行数据清除，因此要　

运用ｏｎ（ｒｅｌｅａｓｅ）｛执行语句｝处理函数控制程序走向。　

判断用户输入的名称不要出现空、错误和不包　

含在程序中的字符串，因此使用ｉｆ（条件）｛执行语　

句｝ｅｌｓｅ｛执行语句｝，进行条件判断，然后产生相应　

的运行结果。　

２．３循环语句和Ａｒｒａｙ（）对象操作　

创建Ａｒｒａｙ（）对象，通过ｆｏｒ（初始化；循环条件；　

步进语句）｛循环执行的语句｝将ＸＭＬ文件中元素属　

性中的各骨骼肌名称组成数组，并转换成字符串格　

式，通过ｉｎｄｅｘＯｆ（要查询的字符串）进行查询判断。　

２．４加载外部．ｓｗｆ文件　

通过ｃｒｅａｔｅＥｍｐｔｙＭｏｖｉｅＣｌｉｐ（）创建一影片剪辑，　

设置其如位置、大小等相关属性，再利用ｌｏａｄＭｏｖｉｅ　

（）加载外部．ｓｗｆ文件。　

３　制作步骤　

３．１素材准备　

收集的相关彩色图片，主要来源于Ｃｉｂａ　Ｍｅｄｉｃａｌ　

Ｅｄｕｃａｔｉｏｎ＆Ｐｕｂｌｉｃａｔｉｏｎｓ　１　９９５年出版的《Ｉｎｔｅｒａｃｔｉｖｅ　

Ａｔｌａｓｏｆ　Ｈｕｍａｎ　ａｎａｔｏｍｙ＞＞光盘　，用Ｐｈｏｔｏｓｈｏｐ工具处　

理图片，去除标签及其他处理，并以ＧＩＦ或ＪＰＧ格式　

保存。线图主要以部分参考书的图为底板，利用绘图　

数位板手绘＿４引，这是因为大多数参考书中的线图上　

仍有很多标签，经过扫描输入后，还必须用Ｐｈｏｔｏｓｈｏｐ　

工具处理，很耗时，没有绘图板方便快捷。　

３．２各骨骼肌动画制作　

每个骨骼肌动画文件以骨骼肌名称命名，并存放　

在同一目录内的Ｆｌａｓｈ的文件夹下，以便主程调用。　

制作时先分别导入骨骼肌彩图和线图，在彩图区标　

明骨骼肌名称和结构范围，在线图区分别标明起止　

点区、作用、支配神经及相应说明，并逐一显示；利用　

遮罩效果，表现骨骼肌走行　。　

３．３主程序设计　

①建立ＸＭＬ文件如下，以存放各骨骼肌名称：　

ｖａｒ　ｍｕｓｃｌｅ

—

ＸＭＬ＝ｎｅｗ　ＸＭＬ（）；　

ｍｕｓｃｌｅ

ＸＭＬ．ｉｇｎｏｒｅＷｈｉｔｅ＝ｔｒｕｅ；　

—

ｍｕｓｃｌｅ

ＸＭＬ．１ｏａｄ（”ｓｋｅｌｅｔａｌ—ｍｕｓｃｌｅ．ｘｍｌ”）；　

ｍｕｓｃｌｅ

—

ＸＭＬ．ｏｎＬｏａｄ＝ｆｕｎｃｔｉｏｎ（）｛　

ｇｏｔｏＡｎｄＳｔｏｐ（”ｍａｉｎ”，１）；　

｝　

③新建场景取名为ｍａｉｎ，第一帧添加输入文本　

框，变量名为”ｔｘｔ”；制作两个按钮“提交”和“重填”，　

分别添加如下代码：　

提交按钮：ｏｎ（ｒｅｌｅａｓｅ）｛　

ｉｆ（ｔｘｔ＝＝””）｛　

ｇｏｔｏＡｎｄＳｔｏｐ（２）；　

｝ｅｌｓｅ｛　，　

ｇｏｔｏＡｎｄＳｔｏｐ（３）；　

｝　

｝　

重填按钮：ｏｎ（ｒｅｌｅａｓｅ）｛　

ｔｘｔ：””：　

｝　

④在第二帧和第四帧分别添加用户输入信息提　

交后的错误提示。第三帧添加ＡＳ语句，进行正确　

信息的判断，加载外部ｓｗｆ文件。　

／／将输入的字符串去除空格；　

ｖａｒ　ｔｘｔ：Ｓｔｉｒｎｇ＝ａｌｌＴｒｉｍ（一ｒｏｏｔ．ｔｘｔ）；　

／／防止用户输入单字符或两个连续的字符而通　

过了后面的判断，但却找不到相关的文件，从而导致　

程序运行错误；　

ｖａｒ　ｍ：Ｎｕｍｂｅｒ＝ｉｎｐｕｔ

—

ｔｘｔ．ｉｎｄｅｘＯｆ（”肌”）；　

ｉｆ（ｍ＞＝０）｛　

ｖａｒ　ｔｘｔ：Ｓｔｒｉｎｇ　ｉｎｐｕｔ

ｔｘｔ；　

—

｝ｅｌｓｅ｛　

ｔｘｔ＝ｉｎｐｕｔ

—

ｔｘｔ＋”肌”；　

｝　

／／定义一个新数组，以存放从ＸＭＬ中读取的结　

构名称；　

ｖａｒ　ｍｕｓｃｌｅ：Ａｒｒａｙ　ｎｅｗ　Ａｒｒａｙ（）；　

１４２　中国医学教育技术　第２５卷第２期　

ｖａｒ　ｅ＝ｍｕｓｃｌｅ

ＸＭＬ．ｆｉｒｓｔＣｈｉｌｄ．ｃｈｉｌｄＮｏｄｅｓ：　

—

骨骼肌的起止点非常清晰，所以学生较易接受和理　

解。学生也可利用学校局域网，随时调用，进行复　

ｆｏｒ（ｖａｒ　ｉ＝０；ｉ＜ｅ．１ｅｎｇｔｈ；ｉ＋＋）｛　

ｍｕｓｃｌｅ．ｐｕｓｈ（ｅ［ｉ］．ａｔｔｉｒｂｕｔｅｓ．名称）；　

｝　

习。在实际的教学过程中，我们还要求学生参照此　

学习手册，自已绘图复习。通过此方法，学生对每一　

／／将数组转变成字符串，以便进行输人字符串　

的配位查询；如果存在则返回”＞＝０”的数值，如果　

不存在，则返回”一１”。从而判断程序的走向。　

ｖａｒ　ｍｕｓｃｌｅ

ｓｔｒｉｎｇ：Ｓｔｒｉｎｇ＝ｍｕｓｃｌｅ．ｊｏｉｎ（”＋”）；　

＿

块骨骼肌的起止点和作用掌握得较好，总体上提高　

了教学效果。　

该程序主要是通过查询的形式来调用相关的骨　

骼肌动画信息，未采用一级二级菜单形式　Ｊ，调用　

ｖａｒ　ｂａｃｋ

＿

ｎｕｍ：Ｎｕｍｂｅｒ＝ｍｕｓｃｌｅ

＿

ｓｔｒｉｎｇ．ｉｎｄｅｘＯｆ（ｔｘｔ）；　

ｉｆ（ｂａｃｋ—Ｂｕｍ＞＝０）｛　

ｔｈｉｓ．ｃｒｅａｔｅＥｍｐｔｙＭｏｖｉｅＣｌｉｐ（”ｍｕｓｃｌｅ—ＭＣ”，３）；　

ｍｕｓｃｌｅＭＣ．ｘ＝４０；　

—

ｍｕｓｃｌｅ

ＭＣ．Ｙ＝１７０；　

—

－

ｌｏａｄＭｏｖｉｅ（”ｆｌａｓｈ／”＋ｔｘｔ＋”．ｓｗｆ”，ｍｕｓｃｌｅ＿ＭＣ）；　

｝ｅｌｓｅ　ｉｆ（ｂａｃｋ—ｎｕｍ＝一１）｛　

ｇｏｔｏＡｎｄＳｔｏｐ（４）；　

｝［　］　

４网络化建设　

在服务器如Ｄ盘中，新建一文件夹名为ｍｕｓｃｌｅ，　

将主程序在内的文件发送至此，利用Ｄｒｅａｍ　ｗｅａｖｅｒ　

将主程序．ｓｗｆ文件插入网页文件中，保存为ｉｎｄｅｘ．　

ｈｔｍ在服务器ＩＩＳ管理器中进行网站设置，主要有网　

站的文件路径、主文件头等，并设定服务器在校园局　

域网的ＩＰ，最终，客户端用户在ＩＥ地址栏中输入ＩＰ　

就可调用主程序，查看相关内容。　

５总体效果　

康复专业的解剖学教学过程中，讲解每一块骨　

骼肌时，教师只要进入学校局域网，输入相关ＩＰ地　

址，便可随时调用相关的骨骼肌动画及说明，利用投　

影机，展示给学生（如图１所示）。由于有简线图，　

图１查询结果界面　

较为方便。因为是网络版，所以程序未采用直接读　

取本地文件名的形式，而是将各动画文件以骨骼肌　

名称命名并组成ＸＭＬ文件，再加以调用，具有一定　

的安全保护功能。另外，程序对用户输入的字符串　

进行判断，这样可以避免程序出错。因为是单个调　

用，在主序中进行动态加载相关骨骼肌动画文件，所　

以，主程序文件很小，便于在网上传输，用户操作时　

可即输即现，体现了富客户端（ＲＩＡ）的设计思想¨　。　

参考文献　

［１］虞琴．计算机辅助教学（ＣＡＩ）课件在《人体解剖学一运动　

系统》教学中的应用体会［Ｊ］．一临床和实验医学杂志，　

２００６，５（３）：２１８－２２０　

［２］蒋国强．ＡｃｔｉｏｎＳｃｒｉｐｔ３．０完全自学手册［Ｍ］．北京：机械　

工业出版社．２００９：６８－２８５　

［３］Ａｒｔｈｕｒ　Ｆ．Ｄａｌｌｅｙ，１１，Ｐｈ．Ｄ　Ｊ．Ｈｕｒｌｅｙ　Ｍｙｅｒｓ，Ｐｈ．Ｄ　Ｉｎｔｅｒａｃｔｉｖｅ　

Ａｔｌａｓｏｆ　Ｈｕｍａｎ　ａｎａｔｏｍｙ［ＣＰ］．Ｃｉｂａ　Ｍｅｄｉｃａｌ　Ｅｄｕｃａｔｉｏｎ＆　

Ｐｕｂｌｉｃａｔｉｏｎｓ，１９９５：２４—３２４　

［４］周天健，邹元植．骨科医师临床应用神经肌肉诊断检查　

图解（第一分册）［Ｍ］．北京：人民卫生出版社，１９９２：２－　

２２３　

［５］Ｋａｈｌｅ．Ｗ．人体解剖学及彩色图谱［Ｍ］．山东：山东科学技　

术出版社，２００１：７４—３２４　

［６］吴先国，覃好君．解剖组织胚胎学简图及画法［Ｍ］．北　

京：人民卫生出版社，１９９７　

［７］Ａｃｔｉｏｎ应用：Ｆｌａｓｈ　ＡＳ与ＸＭＬ数据交互［ＥＢ／ＯＬ］．　

ｈｔｔｐ：／／ｗｗｗ．ｘｕｅ５．ｃｏｍ／ｉｔｅｄｕ／２００９０２／２８３１８５．ｈｔｍｌ，２００９—　

０２—１３　

［８］胡伊乐，李伟，陆富生．人体解剖学神经传导Ｆｌａｓｈ动画　

的制作［Ｊ］．解剖学杂志，２００６，２９（３）：３８０－３８１　

［９］王真富，余文富．基于＋Ｆｌａｓｈ＋的人体解剖彩色图谱的　

设计制作［Ｊ］．中国医学教育技术，２００５，１９（４）：３０１－３０４　

［１０］郭世强．基于Ｆｌａｓｈ的ＲＩＡ开发技术［ＥＢ／ＯＬ］．ｈｔｔｐ：／／　

ｍｅｄｉａ．ｃｃｉｄｎｅｔ．ｃｏｍ／ａｒｔ／３０２１／２００７０８１５／１　１７８７８９

１．　

ｈｔｍ１．２００７－０８—１５