譚思思（呼和浩特鐵路局信息技術(shù)所，助理工程師，內(nèi)蒙古　呼和浩特　010010）

?

基于FLASH技術(shù)開(kāi)發(fā)鐵路電商地圖

譚思思
（呼和浩特鐵路局信息技術(shù)所，助理工程師，內(nèi)蒙古呼和浩特010010）

摘要：伴隨網(wǎng)絡(luò)時(shí)代的高速發(fā)展，計(jì)算機(jī)已覆蓋鐵路工作的每個(gè)角落。電子地圖在人們的生產(chǎn)生活中的應(yīng)用越來(lái)越廣泛，在鐵路發(fā)展中更起到尤為重要的引導(dǎo)意義。Flash作為一個(gè)已經(jīng)成熟的商業(yè)化產(chǎn)品，在鐵路面向市場(chǎng)化改革的熱潮中，以良好的web交互式圖形接口，建立起強(qiáng)大的功能應(yīng)用。本文主要研究了應(yīng)用flash技術(shù)開(kāi)發(fā)鐵路電子商務(wù)地圖，通過(guò)地圖更為全面的展示了解鐵路沿線景點(diǎn)資源分布。主要應(yīng)用技術(shù)flashcs5.5版本開(kāi)發(fā)，配合ActionScript腳本實(shí)現(xiàn)。

關(guān)鍵詞：flash；鐵路電商地圖；ActionScript

10.13572/j.cnki.tdyy.2016.02.019

為積極響應(yīng)鐵路市場(chǎng)化的方針，伴隨信息時(shí)代的高速發(fā)展，開(kāi)發(fā)技術(shù)手段的提高，不斷創(chuàng)新展示方式，以成為迫切的發(fā)展需求。建立一個(gè)對(duì)市場(chǎng)反應(yīng)敏捷、展示效果炫目、傳遞信息豐富的信息網(wǎng)絡(luò)和渠道，由傳統(tǒng)服務(wù)逐步向完善的網(wǎng)絡(luò)服務(wù)轉(zhuǎn)變，逐步轉(zhuǎn)型為完善的“服務(wù)型平臺(tái)”。隨著電子商務(wù)被越來(lái)越多的企業(yè)所認(rèn)可，特別在鐵路旅游客運(yùn)專線陸續(xù)投入使用后，電子商務(wù)在方便客戶及規(guī)范運(yùn)輸、市場(chǎng)競(jìng)爭(zhēng)等方面發(fā)揮了積極的作用。

1　Flash應(yīng)用概述

1.1 Flash在鐵路電商中的積極應(yīng)用動(dòng)畫(huà)制作軟件flash被稱為是“最為靈活的前臺(tái)”。由于其獨(dú)特和時(shí)間片段分割（TimeLine）和重組（MC嵌套）技術(shù)，結(jié)合ActionScitp的對(duì)象和流程控制。使得在靈活的界面設(shè)計(jì)和動(dòng)畫(huà)設(shè)計(jì)中成為可能，同時(shí)它也是最為小巧的前臺(tái)。鐵路數(shù)據(jù)量龐大，交互性復(fù)雜，而flash文件小，適合網(wǎng)絡(luò)傳輸，同時(shí)保證圖形質(zhì)量和瀏覽速度，在鐵路電商平臺(tái)中應(yīng)用以flash為基礎(chǔ)的前端設(shè)計(jì)已成為勢(shì)不可擋的發(fā)展趨勢(shì)。

flash具有跨平臺(tái)的特性（這點(diǎn)和Java一樣），所以無(wú)論你處于處于何種平臺(tái)，只要你安裝有支持的flash Player。你就能保證它們的最終顯示效果都一致。鐵路發(fā)展至今，為適應(yīng)市場(chǎng)需求，開(kāi)發(fā)技術(shù)不斷更新，開(kāi)發(fā)語(yǔ)言也不再單一，flash的多種適用，完美適應(yīng)于多種鐵路信息平臺(tái)。由于其獨(dú)特的跨平臺(tái)物性和在界面控制以及多媒體的功能使用得使用flash來(lái)制作的應(yīng)用程序具有很強(qiáng)的生命力。在與客戶的交流方面具有其它任何方式都無(wú)可比擬的優(yōu)勢(shì)，方便的實(shí)現(xiàn)數(shù)據(jù)通信。極好的關(guān)注了鐵路數(shù)據(jù)信息通信的重要地位。同時(shí)，flash技術(shù)具有視覺(jué)效果獨(dú)特，沖擊力強(qiáng)的有利宣傳優(yōu)勢(shì)，這使得推廣鐵路信息化的電商之路更為平坦。同一產(chǎn)品廣告，flash的廣告形式更為人性化，更具交互性，一改鐵路“鐵老大”的頑固形象，更加合理化的滿足受眾需求，給訪問(wèn)者留下深刻的良好印象。隨著鐵路的不斷發(fā)展，信息開(kāi)發(fā)技術(shù)仍然在不斷前進(jìn)，flash的全新功能也正在擴(kuò)大它的應(yīng)用范圍，并且以為鐵路開(kāi)發(fā)節(jié)約大量的成本而廣為推崇。

1.2用Flash開(kāi)發(fā)鐵路專線旅游地圖的優(yōu)點(diǎn)Java 與Flash相比具有明顯的優(yōu)勢(shì)，是電子地圖技術(shù)的主流方向。不過(guò)使用Java地圖的客戶端必須安裝Java虛擬機(jī)，對(duì)于沒(méi)有安裝相關(guān)插件的電腦用戶來(lái)說(shuō)，并不能立即使用Java電子地圖。對(duì)于Flash電子地圖來(lái)說(shuō)，幾乎所有的個(gè)人電腦都安裝了Flash Player插件，只要打開(kāi)瀏覽器即可正常使用。只要把握一定Flash ActionScript的基礎(chǔ)知識(shí)，都可以通過(guò)學(xué)習(xí)制作出自己滿足的互動(dòng)電子地圖。同時(shí)鐵路數(shù)據(jù)量龐大，交互地點(diǎn)繁多，而flash的占用空間很小，利用flash開(kāi)發(fā)要完全優(yōu)于java。同時(shí)，從畫(huà)面的美觀角度，flash展示更為炫麗生動(dòng)。

2　基于Flash的鐵路專線地圖開(kāi)發(fā)

2.1設(shè)計(jì)背景隨著鐵路旅游客運(yùn)專線陸續(xù)投入使用“內(nèi)蒙古草原專列”旅游事業(yè)的發(fā)展，“內(nèi)蒙古資源網(wǎng)”應(yīng)運(yùn)而生?！安菰恰甭糜螌＞€的電商平臺(tái)，核心版塊為“走進(jìn)內(nèi)蒙古”的地圖展示。開(kāi)發(fā)草原之星旅游網(wǎng)“走進(jìn)內(nèi)蒙古”的旅游景點(diǎn)展示模塊，展示效果要求以電子地圖方式直觀瀏覽，同時(shí)要求展示效果立體絢麗具有視覺(jué)沖擊效果，地區(qū)景點(diǎn)詳細(xì)信息，動(dòng)態(tài)獲取資訊，動(dòng)態(tài)鏈接點(diǎn)擊等。綜合前期需求分析后，使用flash方式制作展現(xiàn)。

設(shè)計(jì)亮點(diǎn)圍繞地圖的立體效果展示，結(jié)合x(chóng)ml技術(shù)的as編寫(xiě)，便于日后的維護(hù)更改。設(shè)計(jì)包含兩版設(shè)計(jì)：第1版是每一個(gè)景點(diǎn)分區(qū)都是1個(gè)按鈕，默認(rèn)情況下顯示綠色（主題為突出內(nèi)蒙古自治區(qū)的綠色大草原），當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)突出顯示，立體效果呈現(xiàn)，鼠標(biāo)單擊時(shí)直接鏈接到詳細(xì)的景點(diǎn)介紹頁(yè)面。第2版是每一個(gè)景點(diǎn)分區(qū)都是1個(gè)按鈕，鼠標(biāo)滑過(guò)單個(gè)區(qū)域變色，單擊彈出對(duì)話框提示內(nèi)容，當(dāng)鼠標(biāo)單擊對(duì)話框任意位置，對(duì)話框自動(dòng)隱藏。單擊框內(nèi)景點(diǎn)列表時(shí)會(huì)直接跳轉(zhuǎn)到某個(gè)地區(qū)的詳細(xì)景點(diǎn)分布情況，修改外部文件可直接編輯景點(diǎn)信息，不必再次生成swf文件，便于日后維護(hù)。

2.2功能具有查看內(nèi)蒙古自治區(qū)各旅游區(qū)域之間位置相對(duì)關(guān)系，各景點(diǎn)的主要情況，以及鏈接景點(diǎn)詳細(xì)的功能。同時(shí)兩版?zhèn)戎夭煌?，其一具備立體展示效果，其二便于日后維護(hù)的二次開(kāi)發(fā)功能。

2.3開(kāi)發(fā)環(huán)境開(kāi)發(fā)環(huán)境：Flash CS5.5；運(yùn)行環(huán)境：Flash player10.0。

3　開(kāi)發(fā)鐵路旅游專線地圖的過(guò)程簡(jiǎn)述

3.1基于FLASH開(kāi)發(fā)鐵路專線地圖的技術(shù)流程利用FLASH技術(shù)開(kāi)發(fā)鐵路專線旅游的電子地圖，主要包括功能與界面的設(shè)計(jì)、數(shù)據(jù)的搜集及編輯以及功能的實(shí)現(xiàn)3大部分內(nèi)容。開(kāi)發(fā)流程見(jiàn)圖1所示。

圖1　開(kāi)發(fā)流程圖

3.2基礎(chǔ)元件的制作首先繪制內(nèi)蒙古自治區(qū)的區(qū)域底圖，利用3 DMAX建模繪制立體效果底圖，見(jiàn)圖2所示。

圖2　內(nèi)蒙古自治區(qū)立體效果圖

利用Photoshop渲染為綠色，突出綠色草原的主題，制作出立體全景景點(diǎn)地圖，見(jiàn)圖3所示。

圖3　內(nèi)蒙古自治區(qū)全景效果圖

分塊繪制區(qū)域內(nèi)景點(diǎn)，制作為獨(dú)力的單位元件；其一見(jiàn)圖4所示。

圖4　單獨(dú)區(qū)域元件圖

3.3拼合旅游專線的自治區(qū)地圖把單獨(dú)區(qū)域的元件圖分別制作成按鈕，當(dāng)鼠標(biāo)滑過(guò)單個(gè)獨(dú)立區(qū)域時(shí)，單個(gè)區(qū)域突出彈出，類似拼圖效果，單擊突出區(qū)域直接鏈接到詳細(xì)景點(diǎn)信息的單獨(dú)頁(yè)面。效果如圖5所示。

圖5　拼合完成后的景區(qū)全圖

在單個(gè)獨(dú)立的區(qū)域元件上編寫(xiě)as代碼（見(jiàn)圖6所示），并加入景點(diǎn)鏈接地址見(jiàn)圖7所示。

圖6　單個(gè)元件添加as代碼示意圖

圖7　全景獨(dú)立區(qū)域元件圖

3.4鐵道數(shù)據(jù)更新二次開(kāi)發(fā)的XML地圖制作

繪制主要景點(diǎn)彈出的對(duì)話框，見(jiàn)圖8所示。

圖8　添加對(duì)話框效果圖

選中單個(gè)元件給單個(gè)原件加入變色效果，使得鼠標(biāo)滑動(dòng)區(qū)域變色，同時(shí)添加AS代碼，實(shí)現(xiàn)彈出景點(diǎn)列表（見(jiàn)圖9所示）。

圖9　元件列表圖

添加AS代碼如下：

k._visible=false；

mc1.onRelease=function（）

{if（!k._visible）

{k._visible=true；

k.txt.text="金嶺山滑雪場(chǎng)大嶼山四級(jí)湖 鱷魚(yú)島呼倫貝爾大草原 額爾古納湖緬甸草原牙克石"；}

}；

mc2.onRelease = function（）

{if（!k._visible）

{k._visible=true；k.txt.text="景點(diǎn)列表"；}

…mc3，mc4，mc5，mc6以此類推書(shū)寫(xiě)到元件mc12…

k.onRelease = function（）

{k._visible = false}；

制作效果如圖10所示。

圖10　成品展示圖

具體形象的成品展示在flash中具體展示。

4　結(jié)束語(yǔ)

內(nèi)蒙古資源富集，歷史文化悠久，自然資源極其豐富，是我國(guó)蒙古文化的發(fā)祥地，歷史、自然、人文旅游景觀非常豐富。但長(zhǎng)久以來(lái)，宣傳手段單一，貿(mào)易手段傳統(tǒng)，導(dǎo)致國(guó)內(nèi)及世界對(duì)內(nèi)蒙古自治區(qū)的了解知之甚少。電子商務(wù)迅速崛起，已經(jīng)滲透到國(guó)民經(jīng)濟(jì)、社會(huì)服務(wù)、資源交易、消費(fèi)品采購(gòu)等人們工作、生活的各個(gè)領(lǐng)域，正在席卷著社會(huì)經(jīng)濟(jì)的各個(gè)層面。而鐵路發(fā)展也在不斷適應(yīng)市場(chǎng)化的各種要求。

正是在這樣一個(gè)大環(huán)境下，內(nèi)蒙古資源網(wǎng)應(yīng)運(yùn)而生，是呼鐵局自主開(kāi)發(fā)、建設(shè)、運(yùn)營(yíng)的綜合性電子商務(wù)平臺(tái)。旗下草原之星旅游網(wǎng)針對(duì)旅游資源全方位立體展示了我區(qū)地大物博的優(yōu)良風(fēng)光，“走進(jìn)內(nèi)蒙古”版塊更以flash方式展示，力求生動(dòng)形象的分塊分區(qū)直觀瀏覽景點(diǎn)信息。從客戶體驗(yàn)角度，設(shè)計(jì)圖形展示效果絢麗，力求吸引客戶瀏覽，利用xml語(yǔ)言，同時(shí)加入action script的代碼編寫(xiě)，維護(hù)方式便捷，對(duì)二次開(kāi)發(fā)和維護(hù)使用做了充分考慮。希望能夠增加景點(diǎn)知名度，提高促進(jìn)旅游景點(diǎn)線下收益，同時(shí)，設(shè)計(jì)新穎，展示方式生動(dòng)，促使旅游網(wǎng)成為自主開(kāi)發(fā)的“服務(wù)型平臺(tái)”，提高網(wǎng)站知名度，為鐵路走向市場(chǎng)化，增加市場(chǎng)競(jìng)爭(zhēng)力，做出有利貢獻(xiàn)。適應(yīng)鐵路改革的市場(chǎng)化大方針。

中圖分類號(hào)：U283.4

文獻(xiàn)標(biāo)識(shí)碼：B

文章編號(hào)：1006-8686（2016）-02-0052-04