運(yùn)用Flash AS+XML制作網(wǎng)絡(luò)版《人體骨骼肌圖解使用手冊(cè)》

韓中保

(鹽城衛(wèi)生職業(yè)技術(shù)學(xué)院解剖學(xué)教研室，江蘇 鹽城 224006)

運(yùn)用Flash AS+XML制作網(wǎng)絡(luò)版《人體骨骼肌圖解使用手冊(cè)》

韓中保

(鹽城衛(wèi)生職業(yè)技術(shù)學(xué)院解剖學(xué)教研室，江蘇 鹽城 224006)

結(jié)合彩圖和線圖，介紹了利用Flash AS+XML制作網(wǎng)絡(luò)版《人體骨骼肌圖解使用手冊(cè)》，只要學(xué)習(xí)者輸入正確的骨骼肌名稱，便會(huì)立即呈現(xiàn)相關(guān)的圖片、動(dòng)畫及文字說(shuō)明的過(guò)程。該圖解手冊(cè)可使教學(xué)活動(dòng)靈活方便，也便于學(xué)生復(fù)習(xí)使用，具有較高的使用推廣價(jià)值。

Flash AS;人體骨骼肌;圖解;查詢;動(dòng)態(tài)呈現(xiàn)

依據(jù)專業(yè)培養(yǎng)目標(biāo)要求，《人體解剖學(xué)》中的運(yùn)動(dòng)系統(tǒng)和神經(jīng)系統(tǒng)是康復(fù)治療技術(shù)專業(yè)教學(xué)中非常重要的兩個(gè)章節(jié)，要求學(xué)生對(duì)每塊骨骼肌的起止、作用、神經(jīng)支配都要十分清楚。而僅僅借助于書中的圖片、模型或標(biāo)本，學(xué)生是很難理解的，因?yàn)槎紱](méi)有單塊骨骼肌的示范。在教學(xué)過(guò)程中為了解決這一問(wèn)題，需要繪制幾十張不同關(guān)節(jié)部位的骨骼圖片，印刷后給每位學(xué)生，要求在相關(guān)的圖片上用點(diǎn)和線標(biāo)明每塊骨骼肌的起止點(diǎn)。先按跨越關(guān)節(jié)的不同畫一份，然后再按作用相近的畫一份，這樣，學(xué)生很自然地就搞清楚了每塊骨骼肌的作用。并且在此基礎(chǔ)上，又參考了一些解剖學(xué)圖譜，運(yùn)用Flash AS+XML(AS即ActionScript的縮寫)制作了網(wǎng)絡(luò)版《人體骨骼肌圖解使用手冊(cè)》，只要操作者輸入正確的骨骼肌名稱，便會(huì)立即呈現(xiàn)相關(guān)的圖片、動(dòng)畫及文字說(shuō)明，使教學(xué)活動(dòng)更加靈活方便，也便于學(xué)生的復(fù)習(xí)使用，具有較高的使用推廣價(jià)值［1］。

1 總體流程設(shè)計(jì)

運(yùn)用Flash AS+XML制作網(wǎng)絡(luò)版《人體骨骼肌圖解使用手冊(cè)》主要是通過(guò)用戶直接輸入骨骼肌名稱，程序自動(dòng)呈現(xiàn)相關(guān)的動(dòng)畫和說(shuō)明內(nèi)容。所以，首先要判斷用戶輸入的名稱不要出現(xiàn)空、錯(cuò)誤和不包含在程序中的字符串;第二，程序分主程序和各骨骼肌的動(dòng)畫文件，主程序通過(guò)加載外部.swf文件的形式呈現(xiàn);第三，各骨骼肌動(dòng)畫文件中主要包括有與教材相近的骨骼肌彩圖，自繪的簡(jiǎn)線圖，骨骼肌的起點(diǎn)、止點(diǎn)、作用及神經(jīng)支配等相關(guān)文字信息。

2 ActionScript主要語(yǔ)句

2.1 XML()對(duì)象

使用構(gòu)造函數(shù)new XML()創(chuàng)建XML對(duì)象，加載外部XML文檔，并讀取元素屬性值。由于程序是網(wǎng)絡(luò)形式運(yùn)行，不能通過(guò)訪問(wèn)本地磁盤、文件形式讀取相關(guān)文件及文件名，因此，通過(guò)創(chuàng)建XML對(duì)象，將各骨骼肌動(dòng)畫文件的文件名以XML元素的屬性形式存儲(chǔ)信息，便于Flash查詢和讀?。?］。

2.2 事件響應(yīng)和條件判斷

用戶輸入的信息是通過(guò)提交按鈕觸發(fā)動(dòng)作的鼠標(biāo)事件運(yùn)行，再通過(guò)返回按鈕進(jìn)行數(shù)據(jù)清除，因此要運(yùn)用on(release){執(zhí)行語(yǔ)句}處理函數(shù)控制程序走向。

判斷用戶輸入的名稱不要出現(xiàn)空、錯(cuò)誤和不包含在程序中的字符串，因此使用if(條件){執(zhí)行語(yǔ)句}else{執(zhí)行語(yǔ)句}，進(jìn)行條件判斷，然后產(chǎn)生相應(yīng)的運(yùn)行結(jié)果。

2.3 循環(huán)語(yǔ)句和Array()對(duì)象操作

創(chuàng)建Array()對(duì)象，通過(guò)for(初始化;循環(huán)條件;步進(jìn)語(yǔ)句){循環(huán)執(zhí)行的語(yǔ)句}將XML文件中元素屬性中的各骨骼肌名稱組成數(shù)組，并轉(zhuǎn)換成字符串格式，通過(guò)indexOf(要查詢的字符串)進(jìn)行查詢判斷。

2.4 加載外部.swf文件

通過(guò)createEmptyMovieClip()創(chuàng)建一影片剪輯，設(shè)置其如位置、大小等相關(guān)屬性，再利用loadMovie()加載外部.swf文件。

3 制作步驟

3.1 素材準(zhǔn)備

收集的相關(guān)彩色圖片，主要來(lái)源于Ciba Medical Education＆Publications 1995年出版的《Interactive Atlasof Human anatomy》光盤［3］，用 Photoshop 工具處理圖片，去除標(biāo)簽及其他處理，并以GIF或JPG格式保存。線圖主要以部分參考書的圖為底板，利用繪圖數(shù)位板手繪［4-6］，這是因?yàn)榇蠖鄶?shù)參考書中的線圖上仍有很多標(biāo)簽，經(jīng)過(guò)掃描輸入后，還必須用Photoshop工具處理，很耗時(shí)，沒(méi)有繪圖板方便快捷。

3.2 各骨骼肌動(dòng)畫制作

每個(gè)骨骼肌動(dòng)畫文件以骨骼肌名稱命名，并存放在同一目錄內(nèi)的Flash的文件夾下，以便主程調(diào)用。制作時(shí)先分別導(dǎo)入骨骼肌彩圖和線圖，在彩圖區(qū)標(biāo)明骨骼肌名稱和結(jié)構(gòu)范圍，在線圖區(qū)分別標(biāo)明起止點(diǎn)區(qū)、作用、支配神經(jīng)及相應(yīng)說(shuō)明，并逐一顯示;利用遮罩效果，表現(xiàn)骨骼肌走行［7］。

3.3 主程序設(shè)計(jì)

①建立XML文件如下，以存放各骨骼肌名稱:

＜動(dòng)畫＞

＜骨骼肌 名稱="胸大肌"/＞

＜骨骼肌 名稱="胸小肌"/＞

……

＜/動(dòng)畫＞

②新建場(chǎng)景取名loading，添加AS語(yǔ)句，以加載外部XML文件，成功后進(jìn)入main場(chǎng)景。

var muscle_XML=new XML();

muscle_XML.ignoreWhite=true;

muscle_XML.load("skeletal_muscle.xml");

muscle_XML.onLoad=function(){

gotoAndStop("main"，1);

}

③新建場(chǎng)景取名為main，第一幀添加輸入文本框，變量名為"txt";制作兩個(gè)按鈕“提交”和“重填”，分別添加如下代碼:

提交按鈕:on(release){

if(txt==""){

gotoAndStop(2);

}else{

gotoAndStop(3);

}

}

重填按鈕:on(release){

txt="";

}

④在第二幀和第四幀分別添加用戶輸入信息提交后的錯(cuò)誤提示。第三幀添加AS語(yǔ)句，進(jìn)行正確信息的判斷，加載外部swf文件。

//將輸入的字符串去除空格;

var txt:String=allTrim(_root.txt);

//防止用戶輸入單字符或兩個(gè)連續(xù)的字符而通過(guò)了后面的判斷，但卻找不到相關(guān)的文件，從而導(dǎo)致程序運(yùn)行錯(cuò)誤;

var m:Number=input_txt.indexOf("肌");

if(m＞=0){

var txt:String=input_txt;

}else{

txt=input_txt+"肌";

}

//定義一個(gè)新數(shù)組，以存放從XML中讀取的結(jié)構(gòu)名稱;

var muscle:Array=new Array();

var e=muscle_XML.firstChild.childNodes;

for(var i=0;i ＜ e.length;i++){

muscle.push(e［i］.attributes.名稱);

}

//將數(shù)組轉(zhuǎn)變成字符串，以便進(jìn)行輸入字符串的配位查詢;如果存在則返回"＞=0"的數(shù)值，如果不存在，則返回"-1"。從而判斷程序的走向。

var muscle_string:String=muscle.join("+");

var back_num:Number=muscle_string.indexOf(txt);

if(back_num＞=0){

this.createEmptyMovieClip("muscle_MC"，3);

muscle_MC._x=40;

muscle_MC._y=170;

loadMovie("flash/"+txt+".swf"，muscle_MC);

}else if(back_num=-1){

gotoAndStop(4);

}［8］

4 網(wǎng)絡(luò)化建設(shè)

在服務(wù)器如D盤中，新建一文件夾名為muscle，將主程序在內(nèi)的文件發(fā)送至此，利用Dream weaver將主程序.swf文件插入網(wǎng)頁(yè)文件中，保存為index.htm在服務(wù)器IIS管理器中進(jìn)行網(wǎng)站設(shè)置，主要有網(wǎng)站的文件路徑、主文件頭等，并設(shè)定服務(wù)器在校園局域網(wǎng)的IP，最終，客戶端用戶在IE地址欄中輸入IP就可調(diào)用主程序，查看相關(guān)內(nèi)容。

5 總體效果

圖1 查詢結(jié)果界面

康復(fù)專業(yè)的解剖學(xué)教學(xué)過(guò)程中，講解每一塊骨骼肌時(shí)，教師只要進(jìn)入學(xué)校局域網(wǎng)，輸入相關(guān)IP地址，便可隨時(shí)調(diào)用相關(guān)的骨骼肌動(dòng)畫及說(shuō)明，利用投影機(jī)，展示給學(xué)生(如圖1所示)。由于有簡(jiǎn)線圖，骨骼肌的起止點(diǎn)非常清晰，所以學(xué)生較易接受和理解。學(xué)生也可利用學(xué)校局域網(wǎng)，隨時(shí)調(diào)用，進(jìn)行復(fù)習(xí)。在實(shí)際的教學(xué)過(guò)程中，我們還要求學(xué)生參照此學(xué)習(xí)手冊(cè)，自已繪圖復(fù)習(xí)。通過(guò)此方法，學(xué)生對(duì)每一塊骨骼肌的起止點(diǎn)和作用掌握得較好，總體上提高了教學(xué)效果。

該程序主要是通過(guò)查詢的形式來(lái)調(diào)用相關(guān)的骨骼肌動(dòng)畫信息，未采用一級(jí)二級(jí)菜單形式［9］，調(diào)用較為方便。因?yàn)槭蔷W(wǎng)絡(luò)版，所以程序未采用直接讀取本地文件名的形式，而是將各動(dòng)畫文件以骨骼肌名稱命名并組成XML文件，再加以調(diào)用，具有一定的安全保護(hù)功能。另外，程序?qū)τ脩糨斎氲淖址M(jìn)行判斷，這樣可以避免程序出錯(cuò)。因?yàn)槭菃蝹€(gè)調(diào)用，在主序中進(jìn)行動(dòng)態(tài)加載相關(guān)骨骼肌動(dòng)畫文件，所以，主程序文件很小，便于在網(wǎng)上傳輸，用戶操作時(shí)可即輸即現(xiàn)，體現(xiàn)了富客戶端(RIA)的設(shè)計(jì)思想［10］。

［1］虞琴.計(jì)算機(jī)輔助教學(xué)(CAI)課件在《人體解剖學(xué)—運(yùn)動(dòng)系統(tǒng)》教學(xué)中的應(yīng)用體會(huì)［J］.臨床和實(shí)驗(yàn)醫(yī)學(xué)雜志，2006，5(3):218-220

［2］蔣國(guó)強(qiáng).ActionScript3.0完全自學(xué)手冊(cè)［M］.北京:機(jī)械工業(yè)出版社，2009:68-285

［3］Arthur F.Dalley，ll，Ph.D J.Hurley Myers，Ph.D Interactive Atlasof Human anatomy［CP］.Ciba Medical Education ＆Publications，1995:24-324

［4］周天健，鄒元植.骨科醫(yī)師臨床應(yīng)用神經(jīng)肌肉診斷檢查圖解(第一分冊(cè))［M］.北京:人民衛(wèi)生出版社，1992:2-223

［5］Kahle.w.人體解剖學(xué)及彩色圖譜［M］.山東:山東科學(xué)技術(shù)出版社，2001:74-324

［6］吳先國(guó)，覃好君.解剖組織胚胎學(xué)簡(jiǎn)圖及畫法［M］.北京:人民衛(wèi)生出版社，1997

［7］Action應(yīng)用:Flash AS與 XML數(shù)據(jù)交互［EB/OL］.http://www.xue5.com/itedu/200902/283185.html，2009-02-13

［8］胡伊樂(lè)，李偉，陸富生.人體解剖學(xué)神經(jīng)傳導(dǎo)Flash動(dòng)畫的制作［J］.解剖學(xué)雜志，2006，29(3):380-381

［9］王真富，余文富.基于+Flash+的人體解剖彩色圖譜的設(shè)計(jì)制作［J］.中國(guó)醫(yī)學(xué)教育技術(shù)，2005，19(4):301-304

［10］郭世強(qiáng).基于Flash的RIA開發(fā)技術(shù)［EB/OL］.http://media.ccidnet.com/art/3021/20070815/1178789_1.html，2007-08-15

Using Flash AS+XML to develop the
network-based Graphic Manual of Human Skeletal Muscles

Han Zhongbao
(Department of Anatomy，Yancheng Health Vocational and Technical College，Yancheng 224006，China)

By using color pictures and profile charts，this paper introduces how to develop the network-based Graphic Manual of Human Skeletal Muscles with Flash AS+XML.As long as users input the correct name of skeletal muscles，the computer would immediately present relevant pictures，animation and texts.This manual can make teaching activities more flexible and convenient，and help students review and use，thus boasting a high value of application and popularization.

Flash AS;human skeletal muscle;graphic;query;dynamic presentation

G434

A

1004-5287(2011)02-0140-03

江蘇省衛(wèi)生廳醫(yī)學(xué)科技發(fā)展基金科研課題“構(gòu)建《正常人體學(xué)》網(wǎng)絡(luò)課程”(j200605)

2010-09-21

韓中保(1966-)，男，江蘇鹽城人，副教授，主治醫(yī)師，學(xué)士，主要研究方向:多媒體技術(shù)、網(wǎng)絡(luò)課程建設(shè)。