FLASH 技術(shù)在網(wǎng)站制作中應(yīng)用探討

陳明坤*

（麗江師范高等?？茖W(xué)校，云南麗江，674199）

FLASH 技術(shù)在網(wǎng)站制作中應(yīng)用探討

陳明坤*

（麗江師范高等專科學(xué)校，云南麗江，674199）

隨著互聯(lián)網(wǎng)信息技術(shù)的發(fā)展，網(wǎng)站制作也成為熱門的互聯(lián)網(wǎng)行業(yè)之一。其中 Flash技術(shù)主要負(fù)責(zé)網(wǎng)站中的視頻制作，并聯(lián)合Dreamweaver等網(wǎng)頁(yè)制作工具，完成網(wǎng)頁(yè)的代碼編輯工作。本文首先對(duì)Flash技術(shù)的主要內(nèi)容分析進(jìn)行了簡(jiǎn)要介紹，其次通過(guò)分析內(nèi)置ActionScript、高級(jí)語(yǔ)言編寫等內(nèi)容，并提出FLASH動(dòng)畫的設(shè)計(jì)制作方案并給出了網(wǎng)站制作流程以及應(yīng)用。希望本文能給相關(guān)工作領(lǐng)域工作人員提供一些參考。

Flash技術(shù)；網(wǎng)站制作；應(yīng)用

引言

當(dāng)前Flash技術(shù)廣泛應(yīng)用于網(wǎng)站開(kāi)發(fā)、游戲制作、網(wǎng)絡(luò)教學(xué)等方面，其具有的鮮明視覺(jué)沖擊與良好的交互特性，贏得了眾多網(wǎng)站開(kāi)發(fā)群體的喜愛(ài)。Flash動(dòng)畫依托于HTML語(yǔ)言編寫的網(wǎng)頁(yè)平臺(tái)，通過(guò)在網(wǎng)頁(yè)平臺(tái)中添加相應(yīng)的視頻代碼，來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)視頻的添加與播放。因此使用Flash技術(shù)進(jìn)行網(wǎng)頁(yè)視頻的開(kāi)發(fā)，能有效拓寬網(wǎng)站的傳播途徑，提升網(wǎng)站的交互性與審美觀感。

1 Flash技術(shù)的主要內(nèi)容分析

1.1 流媒體技術(shù)

流媒體屬于多媒體視頻的播放形式，其主要通過(guò)在網(wǎng)頁(yè)中安裝多媒體播放插件，來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的視頻播放任務(wù)。流媒體引入到網(wǎng)站視頻的制作中，能夠有效解決視頻的在線觀看難題。用戶無(wú)需對(duì)觀看的視頻進(jìn)行下載，而只要打開(kāi)相應(yīng)的網(wǎng)絡(luò)播放端口，就能觀看已經(jīng)加載完畢的視頻。而且該流媒體插件只需進(jìn)行一次安裝，就能夠在之后進(jìn)行視頻的快速播放。而且在視頻播放的過(guò)程中，流媒體只占用較少的內(nèi)存空間，還可以同時(shí)開(kāi)始視頻的播放與下載活動(dòng)。這種依賴系統(tǒng)緩存的多媒體播放形成，能夠大大縮短用戶的等待時(shí)間。

1.2 矢量圖技術(shù)

Flash技術(shù)為網(wǎng)頁(yè)動(dòng)畫制作的主要工具，其能夠制作出集合聲音、圖像、動(dòng)畫等于一身的媒體素材。Flash技術(shù)所制作出的圖像為矢量圖，矢量圖中不包含相應(yīng)的像素點(diǎn)，而是由具有統(tǒng)一色調(diào)的色塊構(gòu)成。所以矢量圖不會(huì)隨著圖像的放大，而產(chǎn)生分辨率失真的現(xiàn)象。相比于傳統(tǒng)的位圖而言，矢量圖所占用的存儲(chǔ)空間較小，其顯示的色彩效果非常的明艷與抽象。而且在網(wǎng)頁(yè)動(dòng)畫的制作中，矢量圖上傳與加載耗費(fèi)的時(shí)間短，所占用的網(wǎng)絡(luò)帶寬少，也能一定程度上提高網(wǎng)頁(yè)的瀏覽速度。同時(shí)Flash技術(shù)還支持PSD、Illustrator等格式圖像的導(dǎo)入，還能對(duì)大多數(shù)格式圖像進(jìn)行編輯。

1.3 動(dòng)態(tài)交互技術(shù)

Flash技術(shù)中另一個(gè)重要部分為動(dòng)態(tài)交互，這是Flash產(chǎn)生視覺(jué)沖擊的主要手段。用戶只要點(diǎn)擊鼠標(biāo)，就能在相應(yīng)部位出現(xiàn)動(dòng)畫或者執(zhí)行框，然后引導(dǎo)用戶完成整個(gè)網(wǎng)頁(yè)的瀏覽活動(dòng)。動(dòng)態(tài)波紋、飄落的樹葉或者美妙音樂(lè)，都可以在用戶點(diǎn)擊瀏覽的過(guò)程中實(shí)現(xiàn)，這使得網(wǎng)站的頁(yè)面交互更加生動(dòng)有趣。而且在用戶與網(wǎng)站的交互中，F(xiàn)lash內(nèi)置的ActionScript語(yǔ)言結(jié)合JavaScript，能夠?qū)崿F(xiàn)用戶與網(wǎng)頁(yè)的雙向互動(dòng)。對(duì)于網(wǎng)頁(yè)中所有的操作事項(xiàng)，用戶都可以通過(guò)引導(dǎo)式的點(diǎn)擊來(lái)完成，還可以在點(diǎn)擊中自由的選擇選項(xiàng)，從而決定最終的操作目標(biāo)。例如：用戶可以通過(guò)執(zhí)行相應(yīng)流程，來(lái)了解網(wǎng)頁(yè)中的產(chǎn)品內(nèi)容，并對(duì)其中的相關(guān)聯(lián)鏈接進(jìn)行訪問(wèn)，這可以大大縮減用戶的執(zhí)行步驟。

2 Flash技術(shù)中動(dòng)畫類型的制作流程

2.1 逐幀動(dòng)畫的制作

逐幀動(dòng)畫屬于靜幀動(dòng)畫的一種延伸，其時(shí)間線中包含一系列的靜幀圖片，靜幀圖片按照一定的時(shí)間節(jié)奏播放，就能夠形成逼真的動(dòng)畫形式。但與傳統(tǒng)逐幀動(dòng)畫相比，F(xiàn)lash逐幀動(dòng)畫的制作不需要對(duì)每一幀進(jìn)行改變，而只需對(duì)播放過(guò)程中的關(guān)鍵節(jié)點(diǎn)進(jìn)行更改，就可以完成相應(yīng)的角色動(dòng)作。逐幀動(dòng)畫利用眼睛的視覺(jué)殘留原理，其本質(zhì)仍然是一連串的單幀圖像。F'laah逐幀動(dòng)畫只需要對(duì)某些動(dòng)作進(jìn)行復(fù)制粘貼，并對(duì)相應(yīng)的動(dòng)作實(shí)現(xiàn)稍加修改，就可以呈現(xiàn)出逼真的動(dòng)畫效果。因此Flash逐幀動(dòng)畫的制作，能夠在占用較小存儲(chǔ)空間的前提下，提高動(dòng)畫制作的效率。

2.2 動(dòng)作補(bǔ)間動(dòng)畫的制作

通過(guò)在時(shí)間線起始位置、終止位置的兩幀處點(diǎn)擊，就能夠完成動(dòng)作補(bǔ)間動(dòng)畫的制作。起始位置和終止位置的兩幀圖像，會(huì)存在亮度、飽和度和色調(diào)等方面的差異，在動(dòng)作方面也有相應(yīng)的改變。而Flash動(dòng)畫開(kāi)發(fā)者只需要按動(dòng)按鈕，就能夠自動(dòng)填補(bǔ)起始位置、終止位置之間的動(dòng)畫幀。這種動(dòng)作補(bǔ)間動(dòng)畫的制作耗費(fèi)時(shí)間短，但缺點(diǎn)是其制作出的動(dòng)畫較為生硬，角色的立體感不強(qiáng)。

2.3 形狀補(bǔ)間動(dòng)畫的制作

相比于動(dòng)作補(bǔ)間動(dòng)畫的制作，形狀補(bǔ)間動(dòng)畫具有更加復(fù)雜的變化。形狀補(bǔ)間動(dòng)畫中圖像的形狀、色調(diào)、亮度和位置，都會(huì)隨著時(shí)間推移而發(fā)生變化。Flash動(dòng)畫開(kāi)發(fā)者在時(shí)間線起始位置、終止位置的兩幀處點(diǎn)擊，就能夠完成形狀補(bǔ)間動(dòng)畫的制作。這其中所存在的動(dòng)畫效果，都由ActionScript語(yǔ)言程序在計(jì)算后，對(duì)中間幀的演進(jìn)形態(tài)進(jìn)行填補(bǔ)。因此形狀補(bǔ)間動(dòng)畫只存在起始位置、終止位置的兩幀，其在動(dòng)畫存儲(chǔ)中所占用的空間較小。但形狀補(bǔ)間動(dòng)畫仍然存在動(dòng)作生硬、角色立體感不強(qiáng)等方面問(wèn)題。除以上Flash動(dòng)畫類型以外，還存在遮罩動(dòng)畫、引導(dǎo)路徑動(dòng)畫等類型，其主要用于制作簡(jiǎn)單的波紋和路徑效果。

3 Flash技術(shù)在網(wǎng)站制作中的應(yīng)用

3.1 運(yùn)用Flash動(dòng)態(tài)技術(shù)制作網(wǎng)站頁(yè)頭

通過(guò)制作網(wǎng)站頁(yè)頭的動(dòng)態(tài)卷軸動(dòng)畫效果，來(lái)演示Flash動(dòng)態(tài)技術(shù)的應(yīng)用方向。首先，新建背景為白色的Flash文檔，舞臺(tái)大小設(shè)置為950*400px。ctrl+F8新建圖形元件命名為轉(zhuǎn)軸，點(diǎn)擊矩形工具（筆觸顏色無(wú)），填充顏色黑色，繪制轉(zhuǎn)軸兩端位置。點(diǎn)擊矩形工具（筆觸顏色黑色），線條粗2、填充顏色線性，左右顏色配置適當(dāng)?shù)念伾纯伞｜c(diǎn)擊場(chǎng)景1回到場(chǎng)景舞臺(tái)，將圖層1改名為軸1，并將轉(zhuǎn)軸圖形元件拖到舞臺(tái)，調(diào)整到適當(dāng)?shù)拇笮『臀恢谩?zhǔn)備的圖片素材導(dǎo)入到舞臺(tái)，調(diào)整設(shè)當(dāng)?shù)拇笮『臀恢茫瑘D片素材可以準(zhǔn)備png的無(wú)背景圖片，或者用Photoshop處理后再導(dǎo)入到Flash，并使用遮罩進(jìn)行處理。新建圖層命名為軸2，復(fù)制軸1第一幀粘貼到軸2圖層第一幀處，并調(diào)整好轉(zhuǎn)軸位置。選中所有圖層在第100幀處添加幀，在第100幀處將軸2及矩形拖到適當(dāng)位置，使動(dòng)態(tài)卷軸動(dòng)畫能夠全部顯示。然后右鍵單擊鼠標(biāo)插入補(bǔ)間動(dòng)畫，點(diǎn)擊Flash軟件“控制”、“測(cè)試影片”，對(duì)動(dòng)態(tài)卷軸動(dòng)畫的最終效果進(jìn)行測(cè)試。接著為卷軸動(dòng)畫添加背景音樂(lè)，新建圖層導(dǎo)入 mp3格式的音頻文件，并將音樂(lè)元件插入到場(chǎng)景舞臺(tái)中。最后卷軸動(dòng)畫插入到網(wǎng)站頁(yè)頭，測(cè)試最終的動(dòng)畫呈現(xiàn)效果。

3.2 網(wǎng)站寉航欄的制作

導(dǎo)航欄是網(wǎng)頁(yè)制作中的另一個(gè)重要環(huán)節(jié)，用戶通過(guò)導(dǎo)航欄可以完成網(wǎng)站各個(gè)類目的瀏覽工作。Flash軟件技術(shù)可以進(jìn)行文字、圖片和動(dòng)態(tài)圖像的制作，其中文字類導(dǎo)航欄是最為常見(jiàn)的網(wǎng)站導(dǎo)航方式。大多數(shù)網(wǎng)站都使用文字進(jìn)行不同類別的導(dǎo)航，而圖片常常位于頁(yè)面的中部或者右部，用于展現(xiàn)新聞資訊、商品購(gòu)物等內(nèi)容，在新聞網(wǎng)站或者電子商務(wù)網(wǎng)站中應(yīng)用非常廣泛。而具有動(dòng)態(tài)效果的圖像導(dǎo)航，則常常出現(xiàn)在商品廣告或網(wǎng)站公告中。這些導(dǎo)航形式需要JavaScript、ActionScript等技術(shù)才能完成，運(yùn)用Flash的導(dǎo)航制作流程如下：首先要在剪輯元件內(nèi)部新建子菜單，并將創(chuàng)建好的菜單文件插入場(chǎng)景，增加鼠標(biāo)懸停的播放腳本，從而完成菜單的編輯工作。

3.3 網(wǎng)站中鼠標(biāo)跟隨的制作

Flash技術(shù)在網(wǎng)站制作中，只承擔(dān)頁(yè)頭、導(dǎo)航欄、鼠標(biāo)跟隨等內(nèi)容的制作。對(duì)于網(wǎng)站中鼠標(biāo)跟隨的制作，首先在Flash文檔中建立剪輯元件，并在場(chǎng)景中隨意繪制鼠標(biāo)運(yùn)動(dòng)的跟隨軌跡圖形。之后回到主場(chǎng)景舞臺(tái)，將剪輯元件的文件插入到主場(chǎng)景舞臺(tái)圖層的第一幀，然后輸入 ActionScript編碼 onClipEvent(load)j startDrag("",true);};，最后將制作完成的swf文件導(dǎo)出，并將其置入網(wǎng)頁(yè)鼠標(biāo)跟隨動(dòng)畫中。

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

Flash技術(shù)能夠?qū)崿F(xiàn)網(wǎng)頁(yè)中的頁(yè)頭、導(dǎo)航欄和狀態(tài)欄等的制作，也可以在特定位置加入Flash視頻。但Flash只負(fù)責(zé)網(wǎng)站中動(dòng)態(tài)效果的制作，其不能完成整個(gè)網(wǎng)站的制作任務(wù)。只有先使用

Dreamweaver等專業(yè)的網(wǎng)站制作工具，制作出網(wǎng)站的整體框架，才能在其中添加需要的 Flash內(nèi)容。所以 Flash技術(shù)需要與

Dreamweaver、Fireworks等網(wǎng)頁(yè)制作技術(shù)結(jié)合，才能完成網(wǎng)頁(yè)動(dòng)態(tài)內(nèi)容的表現(xiàn)活動(dòng)。

[1]趙志建. Flash動(dòng)畫在網(wǎng)站設(shè)計(jì)中應(yīng)用[J]. 信息通信,2012,(03)：125-126.

[2]張麗萍. 網(wǎng)頁(yè)設(shè)計(jì)中 Photoshop與 Flash的結(jié)合應(yīng)用[J]. 煤炭技術(shù),2013,(04)： 158-159.

[3]孫鐵輝,等. 交互設(shè)計(jì)在flash課件中的應(yīng)用[J]. 計(jì)算機(jī)光盤軟件與應(yīng)用,2012,18： 181.

[4]吳準(zhǔn)輝. 淺析純Flash網(wǎng)站的現(xiàn)狀及發(fā)展[J]. 電子制作,2013,7： 103.

[5]宋曉鳴. Flash在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J]. 電子技術(shù)與軟件工程,2015,3：89.

Application of FLASH Technology in Website Making

CHEN Mingkun*
(Lijiang Teachers College,Lijiang Yunnan,674199,China)

With the development of Internet information technology,website production has become one of the hottestInternet industries.Among them,Flash technology is mainly responsible for the video production in the website,and combined with Dreamweaver and other web authoring tools to complete the code editing work of the web page. In this paper,the main content of Flash technology is briefly introduced,and then through the analysis of built-in ActionScript,high-level language writing and other content,and put forward the FLASH animation design and production program,and gives the website production process and application. I hope this paper can provide some reference for the relevant work field staff.

Flash technology; website production; application

TP393.092

A

1672-9129(2017)06-0168-02

10.19551/j.cnki.issn1672-9129.2017.06.061

陳明坤. FLASH技術(shù)在網(wǎng)站制作中應(yīng)用探討[J]. 數(shù)碼設(shè)計(jì),2017,6(6)： 168-169.

Cite：CHEN Mingkun. Application of FLASH Technology in Website Making[J]. Peak Data Science,2017,6(6)： 168-169.

2017-01-23；

2017-03-07。

陳明坤(1987-)，男，云南省麗江市，畢業(yè)于黑龍江科技學(xué)院，就讀期間于2007年6月至2008年9月到加拿大北阿爾伯塔理工學(xué)院交流學(xué)習(xí)一年，本科，助理工程師。研究方向：計(jì)算機(jī)應(yīng)用、網(wǎng)絡(luò)管理。

Email：chenmingkun01@163.com