基于Flash的超文本鏈接技術(shù)設(shè)計(jì)及其實(shí)現(xiàn)

鄭鳳婷，田素貞

(1.河南師范大學(xué)，河南 新鄉(xiāng) 453007;2.商丘職業(yè)技術(shù)學(xué)院，河南 商丘 476000)

1.超文本及超鏈接技術(shù)

1.1 超文本

超文本又叫超媒體技術(shù)，是建立各種媒體信息之間的網(wǎng)狀鏈接結(jié)構(gòu)，與傳統(tǒng)的線性文本結(jié)構(gòu)有很大差別，它符合人類的“聯(lián)想”式思維習(xí)慣。超文本以節(jié)點(diǎn)為信息單位，一個(gè)結(jié)點(diǎn)就是一個(gè)信息塊，它可以是文本、圖形、圖像、動(dòng)畫、聲音或它們的組合體，結(jié)點(diǎn)之間用鏈連接起來，這樣便形成網(wǎng)狀結(jié)構(gòu)，是一種非線性的結(jié)構(gòu)。［1］其特征主要體現(xiàn)在三個(gè)方面:

1.1.1 多媒體化

作為超文本的基本信息單元——節(jié)點(diǎn)，它可以包含文本、圖形、圖像、音頻、視頻和動(dòng)畫等多種媒體信息，而且節(jié)點(diǎn)的信息表現(xiàn)方式、大小都可根據(jù)主題自由選擇、組合，不需要嚴(yán)格的定義。

1.1.2 網(wǎng)絡(luò)結(jié)構(gòu)

超文本是一種網(wǎng)狀的信息結(jié)構(gòu)體，這使它的信息表達(dá)接近現(xiàn)實(shí)世界。它把內(nèi)容和形式都做為豐富的節(jié)點(diǎn)，按照它們?cè)诂F(xiàn)實(shí)世界中的聯(lián)系和人們的思維邏輯，有機(jī)的組織起來，構(gòu)成有條理的、復(fù)雜的信息體。

1.1.3 交互性

多媒體和網(wǎng)絡(luò)化是超文本靜態(tài)組織信息的特點(diǎn)，而交互性是用戶在瀏覽超級(jí)文本時(shí)，最為重要的動(dòng)態(tài)特征。

1.2 超鏈接

超鏈接是www技術(shù)的核心，是網(wǎng)頁中最重要、最根本的元素之一。超鏈接能夠使多個(gè)孤立的網(wǎng)頁之間產(chǎn)生相互聯(lián)系，從而使單獨(dú)的網(wǎng)頁形成一個(gè)有機(jī)的整體。

所謂超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片、一個(gè)電子郵件地址、一個(gè)文件，甚至是一個(gè)應(yīng)用程序［2］。而在一個(gè)網(wǎng)頁中用來超鏈接的對(duì)象，可以是一段文本或是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后，鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。

(1)按鏈接路徑的不同，超鏈接一般分為三種類型:內(nèi)部鏈接、錨點(diǎn)鏈接和外部鏈接。

(2)按照使用對(duì)象的不同，可以劃分為:文本超鏈接、圖像超鏈接、E-mail鏈接、錨點(diǎn)鏈接、多媒體文件鏈接、空鏈接等［3］。

2.函數(shù)及功能描述

Flash中可以利用getURL()的方式來設(shè)置超鏈接，或是與網(wǎng)頁中的程序代碼溝通，甚至可以將Flash中的數(shù)據(jù)傳送到指定頁面當(dāng)中。目前，在網(wǎng)頁中使用Flash，最常遇到的問題就是Flash動(dòng)畫與Html頁面的互動(dòng)［4］。例如在Flash中加入網(wǎng)頁的超鏈接、郵件超鏈、甚至調(diào)用Html中所設(shè)置的JavaScript特效等動(dòng)作。以下介紹幾個(gè)經(jīng)常使用的方法，說明網(wǎng)頁中的超鏈接的應(yīng)用［5］。

2.1 getURL函數(shù)

將指定URL的文件加載到窗口中，或是將變量傳遞到位于所定義URL的另一應(yīng)用程序中。getURL()函數(shù)的基本語法如下:

getURL(URL［，窗口］［，方法］);

函數(shù)參數(shù)說明

(1)URL:取得文件的 URL網(wǎng)址，如【http://www.baidu.com】。

(2)窗口:這是一個(gè)可選項(xiàng)，用來指定要加載文件的窗口或HTML頁面框架。可以輸入特定窗口的名稱，或是從下列保留的目標(biāo)名稱中選擇。

_self:指定目前窗口中的頁面框架

_blank:指定新的窗口

_parent:指定目前頁面框架的父窗口

_top:指定目前窗口中最上層的頁面框架

(3)方法:用來傳送變量的GET或POST方法。如果沒有變量，則省略該參數(shù)。GET方法會(huì)將變量附加到URL網(wǎng)址的后方，適用于數(shù)目較少的變量。POST方法會(huì)用不同的HTTP文件頭來傳送變量，并用來傳送較長串的變量。

2.2 常用的鏈接

2.2.1 網(wǎng)頁超鏈接

網(wǎng)頁超鏈接的方法一般為:getURL(“http://www.baidu.com”，“_blank”);此鏈接會(huì)打開一個(gè)新窗口，顯示【http://www.baidu.com】百度頁面。

2.2.2 郵件超鏈接

郵件超鏈接的格式為:getURL(“mailto:指定電子郵件［?subject=標(biāo)題］”);此鏈接會(huì)打開本機(jī)郵件軟件，并將指定電子郵件填入收件人及標(biāo)題內(nèi)容(可省略)，你只需填寫信內(nèi)容即可寄出。

2.2.3 文本超級(jí)鏈接

能在選擇文字的同時(shí)打開相關(guān)瀏覽器窗口。在［屬性］面板上輸入網(wǎng)址及選擇打開瀏覽器窗口的方式即可。

2.2.4 鏈接外部圖片

能夠打開鏈接相關(guān)的圖片。這也是Flash在播放過程中進(jìn)行鏈接的一個(gè)重要方面。其語法為:LoadMovie(“圖片名”，影片剪輯名);

2.2.5 鏈接外部動(dòng)畫

在Flash頁面打開鏈接的相關(guān)動(dòng)畫。其語法為:LoadMovieNum(“動(dòng)畫名”，層名this);

3.模塊設(shè)計(jì)與相關(guān)實(shí)現(xiàn)

3.1 給按鈕添加超鏈接

方法一:在Flash文件ActionScript 3.0中的實(shí)現(xiàn)方法:

(1)打開Flash，選擇［文件］菜單下的［新建］命令，新建一個(gè)文件;

(2)在［窗口］菜單中選擇［公用庫］，再在［公用庫］中選擇［按鈕］，選擇其中一種按鈕類型，在舞臺(tái)上即出現(xiàn)所選的按鈕圖形;

(3)修改按鈕上的文字為“按鈕超鏈接”;

(4)選擇該按鈕，在［屬性］面板中設(shè)置實(shí)例名稱為“MyBtn”;

(5)在時(shí)間軸面板中，鎖定圖層1，新建圖層2，雙擊該圖層命名為“action”;

(6)選中“action”層的第1幀，按 F9鍵，打開［動(dòng)作-幀］面板，向其中添加代碼:

MyBtn:addEventListener(MouseEvent.CLICK，onMyBtnclick);

function onMyBtnclick(e:MouseEvent):void{

navigateToURL(new URLRequest(“http://www.baidu.com”)，“_blank”);

}

代碼說明:

①M(fèi)yBtn:addEventListener(事件類型，處理事件的方法):為名為“MyBtn”的對(duì)象添加事件。

［事件類型］有很多種，在此介紹以下幾種鼠標(biāo)事件:

MouseEvent.click:鼠標(biāo)單擊事件;

MouseEvent.Mouse_Down:鼠標(biāo)左鍵按下事件;

MouseEvent.Mouse_Up:鼠標(biāo)左鍵彈起事件;

MouseEvent.Roll_Over:鼠標(biāo)滑入事件;

MouseEvent.Roll_Out:鼠標(biāo)滑出事件;

MouseEvent.Mouse_Move:鼠標(biāo)移動(dòng)事件;

MouseEvent.Mouse_Out:鼠標(biāo)移出事件;

MouseEvent.Mouse_Over:鼠標(biāo)移過事件;

MouseEvent.Mouse_LEAVE:鼠標(biāo)移開舞臺(tái)事件;

MouseEvent.Mouse_WHEEL:鼠標(biāo)滾輪滾動(dòng)事件;

MouseEvent.DOUBLE_click:鼠標(biāo)雙擊事件;

當(dāng)使用鼠標(biāo)雙擊事件時(shí)，doubleclickEnabled(雙擊是否可用)必須為True。如MyBtn:doubleclick-Enabled=“True”［6］。

［事件處理方法］為處理事件的一些代碼集合。如方法:

OnMyBtnClick:function OnMyBtnClick(e:MouseEvent):void{

鼠標(biāo)處理相關(guān)事項(xiàng)

}

② navigateToURL(new URLRequest(鏈接地址)，窗口類型):打開或替換一個(gè)窗口。

［鏈接地址］為指定要導(dǎo)航到哪個(gè)URL;

［窗口類型］可以使用_self、_blank、_parent或_top。

(7)制作完畢，Ctrl+Enter組合鍵測試。單擊按鈕即可在新的窗口中打開鏈接的網(wǎng)頁http://baidu.com。

方法二:在Flash文件ActionScript 2.0中的實(shí)現(xiàn)方法:

(1)打開Flash，選擇［文件］菜單下的［新建］命令，新建一個(gè)文件;

(2)設(shè)圖層為“背景”層，選擇一圖片作為背景;

(3)新建一圖層，修改名為“按鈕超鏈接”;

(4)在［窗口］菜單中選擇［公用庫］，再在［公用庫］中選擇［按鈕］，選擇其中一種按鈕類型，在舞臺(tái)上即出現(xiàn)所選的按鈕圖形;

(5)修改按鈕上的文字為“按鈕超鏈接”;

(6)選中該按鈕，按F9鍵，打開［動(dòng)作-按鈕］面板，向其中添加代碼:

on(release){

getURL(“http://www.baidu.com”，“_blank”);

}

(7)Ctrl+Enter組合鍵測試。單擊按鈕即可在新的窗口中打開鏈接的網(wǎng)頁。

3.2 添加郵件超鏈接

(1)新建一圖層，修改名為“郵件超鏈接”;

(2)制作一郵件超鏈接按鈕，選中該按鈕，按F9鍵，打開［動(dòng)作-按鈕］面板，向其中添加代碼如下:

on(release){

getURL(“mailto:zczft2005@126.com?subject=我要找鄭鳳婷!”);

}

(3)Ctrl+Enter組合鍵測試。單擊按鈕可打開outlook express郵件鏈接，如下圖1所示:

其中，［zczft2005@126.com］自動(dòng)填入收件人欄;［我要找鄭鳳婷!］填入標(biāo)題欄;只需在在下面書寫郵件的內(nèi)容，點(diǎn)發(fā)送即可。

3.3 給文本添加超鏈接

(1)新建一圖層，雙擊修改名為“文本超鏈接”;

(2)在工具欄上選擇“文本工具”，在合適位置拖放鼠標(biāo)，并輸入文字“文本超鏈接”;

(3)選中“文本超鏈接”，在打開的［屬性］面板中，點(diǎn)“選項(xiàng)”前的三角符號(hào)，在展開的“鏈接”項(xiàng)后面輸入網(wǎng)址http://www.htu.edu.cn，在“目標(biāo)”項(xiàng)后面可以使用_self、_blank、_parent或_top選擇打開瀏覽器窗口的方式;

(4)Ctrl+Enter組合鍵測試。單擊該文本即可打開鏈接的http://www.htu.edu.cn網(wǎng)頁。

圖1 outlook express郵件超鏈接

3.4 超鏈接圖片

(1)新建一圖層，雙擊修改名為“鏈接圖片”;

(2)在該層的第一幀制作一個(gè)“超鏈接圖片”按鈕，在該層的第二幀制作一個(gè)“返回”按鈕，并拖放到場景中;

(3)制作一個(gè)空的影片剪輯，拖到場景中，實(shí)例名是:mymc;

(4)在“超鏈接圖片”圖層之上，新建一動(dòng)作圖層為as，時(shí)間軸上第一幀上as的代碼如下:

stop();

i=0;

(5)時(shí)間軸上第二幀上as的操作代碼如下:

mymc._x=0;

mymc._y=0;

mymc._xscale=80;

mymc._yscale=82;

其功能是確定打開超鏈接圖片的起始位置和圖片的大小。

(6)在“超鏈接圖片”層的第一幀，選中“鏈接圖片”按鈕，在［動(dòng)作-按鈕］面板中書寫代碼如下:

on(release){

gotoAndStop(2);

LoadMovie(“j1.jpg”，mymc);

}

(7)在“超鏈接圖片”層的第二幀，選中“返回”按鈕，在打開的［動(dòng)作-按鈕］面板中編寫代碼如下:

on(release){

UnLoadMovie(mymc);

gotoAndStop(1);

}

(8)Ctrl+Enter組合鍵測試。單擊“鏈接圖片”按鈕即可打開鏈接的圖片“j1.jpg”，單擊左下角的“返回”按鈕即可回到主頁面。

注意事項(xiàng):

①鏈接的圖片類型除了.jpg類型外，還可以是.bmp、.gif;

②要鏈接的外部圖片必須和正在編輯的Flash文件放在同一目錄下，否則鏈接出錯(cuò)。

3.5 超鏈接動(dòng)畫

(1)新建一圖層，雙擊修改名為“鏈接動(dòng)畫”;

(2)在該層的第一幀制作一個(gè)“超鏈接動(dòng)畫”按鈕，并拖放到場景中;

(3)選中該按鈕，打開［動(dòng)作-按鈕］面板，并添加代碼如下:

on(release){

LoadMovieNum(“1.swf”，this);

}

(4)Ctrl+Enter組合鍵測試。單擊“鏈接動(dòng)畫”按鈕，右鍵選擇“允許阻止的內(nèi)容”，出現(xiàn)“安全警告”提示窗口(如下圖2所示)，點(diǎn)擊“是(Y)”，即可打開鏈接的動(dòng)畫“1.swf”，點(diǎn)擊動(dòng)畫頁上的“PLAY”即可播放該動(dòng)畫。

注意:要鏈接的外部動(dòng)畫必須和正在編輯的Flash文件放在同一目錄下，否則鏈接出錯(cuò)。

4.結(jié)束語

Flash中超文本鏈接功能非常強(qiáng)大，內(nèi)容比較豐富。本文主要介紹了超文本鏈接技術(shù)中常用的getURL函數(shù)的功能及用法，結(jié)合具體實(shí)例制作并實(shí)現(xiàn)了按鈕超鏈接、郵件超鏈接、文本超鏈接、外部圖片及動(dòng)畫的超鏈接。內(nèi)容具體、步驟詳盡，希望能給Flash使用者提供一定的學(xué)習(xí)幫助。

圖2 動(dòng)畫超鏈接安全警告提示窗口

［1］超文本與超媒體［EB/OL］.http://www3.gdin.edu.cn/jpkc/dmtjs/old/duomeiti/super.htm.

［2］王英芬.超文本/超媒體模式組織網(wǎng)絡(luò)信息資源研究［J］.農(nóng)業(yè)圖書情報(bào)學(xué)刊，2009(12):43 ～45.

［3］邱均平，黃曉斌.WWW網(wǎng)頁的鏈接分析及其意義［J］.中國圖書館學(xué)報(bào)，2002(6):44～47.

［4］周國棟.Flash與數(shù)據(jù)庫的連接技術(shù)［J］.湖南廣播電視大學(xué)學(xué)報(bào)，2005(4):48～50.

［5］鄭華安.超文本鏈接在Authorware課件中的應(yīng)用［J］.教育信息化，2004，5.

［6］余明華.用 Flash開發(fā)多媒體 CAI課件［J］.大眾科技，2005(5):63～64.