陳明坤*
(麗江師范高等專科學校,云南麗江,674199)
FLASH 技術在網站制作中應用探討
陳明坤*
(麗江師范高等專科學校,云南麗江,674199)
隨著互聯網信息技術的發展,網站制作也成為熱門的互聯網行業之一。其中 Flash技術主要負責網站中的視頻制作,并聯合Dreamweaver等網頁制作工具,完成網頁的代碼編輯工作。本文首先對Flash技術的主要內容分析進行了簡要介紹,其次通過分析內置ActionScript、高級語言編寫等內容,并提出FLASH動畫的設計制作方案并給出了網站制作流程以及應用。希望本文能給相關工作領域工作人員提供一些參考。
Flash技術;網站制作;應用
當前Flash技術廣泛應用于網站開發、游戲制作、網絡教學等方面,其具有的鮮明視覺沖擊與良好的交互特性,贏得了眾多網站開發群體的喜愛。Flash動畫依托于HTML語言編寫的網頁平臺,通過在網頁平臺中添加相應的視頻代碼,來實現網頁視頻的添加與播放。因此使用Flash技術進行網頁視頻的開發,能有效拓寬網站的傳播途徑,提升網站的交互性與審美觀感。
流媒體屬于多媒體視頻的播放形式,其主要通過在網頁中安裝多媒體播放插件,來實現網頁的視頻播放任務。流媒體引入到網站視頻的制作中,能夠有效解決視頻的在線觀看難題。用戶無需對觀看的視頻進行下載,而只要打開相應的網絡播放端口,就能觀看已經加載完畢的視頻。而且該流媒體插件只需進行一次安裝,就能夠在之后進行視頻的快速播放。而且在視頻播放的過程中,流媒體只占用較少的內存空間,還可以同時開始視頻的播放與下載活動。這種依賴系統緩存的多媒體播放形成,能夠大大縮短用戶的等待時間。
Flash技術為網頁動畫制作的主要工具,其能夠制作出集合聲音、圖像、動畫等于一身的媒體素材。Flash技術所制作出的圖像為矢量圖,矢量圖中不包含相應的像素點,而是由具有統一色調的色塊構成。所以矢量圖不會隨著圖像的放大,而產生分辨率失真的現象。相比于傳統的位圖而言,矢量圖所占用的存儲空間較小,其顯示的色彩效果非常的明艷與抽象。而且在網頁動畫的制作中,矢量圖上傳與加載耗費的時間短,所占用的網絡帶寬少,也能一定程度上提高網頁的瀏覽速度。同時Flash技術還支持PSD、Illustrator等格式圖像的導入,還能對大多數格式圖像進行編輯。
Flash技術中另一個重要部分為動態交互,這是Flash產生視覺沖擊的主要手段。用戶只要點擊鼠標,就能在相應部位出現動畫或者執行框,然后引導用戶完成整個網頁的瀏覽活動。動態波紋、飄落的樹葉或者美妙音樂,都可以在用戶點擊瀏覽的過程中實現,這使得網站的頁面交互更加生動有趣。而且在用戶與網站的交互中,Flash內置的ActionScript語言結合JavaScript,能夠實現用戶與網頁的雙向互動。對于網頁中所有的操作事項,用戶都可以通過引導式的點擊來完成,還可以在點擊中自由的選擇選項,從而決定最終的操作目標。例如:用戶可以通過執行相應流程,來了解網頁中的產品內容,并對其中的相關聯鏈接進行訪問,這可以大大縮減用戶的執行步驟。
逐幀動畫屬于靜幀動畫的一種延伸,其時間線中包含一系列的靜幀圖片,靜幀圖片按照一定的時間節奏播放,就能夠形成逼真的動畫形式。但與傳統逐幀動畫相比,Flash逐幀動畫的制作不需要對每一幀進行改變,而只需對播放過程中的關鍵節點進行更改,就可以完成相應的角色動作。逐幀動畫利用眼睛的視覺殘留原理,其本質仍然是一連串的單幀圖像。F'laah逐幀動畫只需要對某些動作進行復制粘貼,并對相應的動作實現稍加修改,就可以呈現出逼真的動畫效果。因此Flash逐幀動畫的制作,能夠在占用較小存儲空間的前提下,提高動畫制作的效率。
通過在時間線起始位置、終止位置的兩幀處點擊,就能夠完成動作補間動畫的制作。起始位置和終止位置的兩幀圖像,會存在亮度、飽和度和色調等方面的差異,在動作方面也有相應的改變。而Flash動畫開發者只需要按動按鈕,就能夠自動填補起始位置、終止位置之間的動畫幀。這種動作補間動畫的制作耗費時間短,但缺點是其制作出的動畫較為生硬,角色的立體感不強。
相比于動作補間動畫的制作,形狀補間動畫具有更加復雜的變化。形狀補間動畫中圖像的形狀、色調、亮度和位置,都會隨著時間推移而發生變化。Flash動畫開發者在時間線起始位置、終止位置的兩幀處點擊,就能夠完成形狀補間動畫的制作。這其中所存在的動畫效果,都由ActionScript語言程序在計算后,對中間幀的演進形態進行填補。因此形狀補間動畫只存在起始位置、終止位置的兩幀,其在動畫存儲中所占用的空間較小。但形狀補間動畫仍然存在動作生硬、角色立體感不強等方面問題。除以上Flash動畫類型以外,還存在遮罩動畫、引導路徑動畫等類型,其主要用于制作簡單的波紋和路徑效果。
通過制作網站頁頭的動態卷軸動畫效果,來演示Flash動態技術的應用方向。首先,新建背景為白色的Flash文檔,舞臺大小設置為950*400px。ctrl+F8新建圖形元件命名為轉軸,點擊矩形工具(筆觸顏色無),填充顏色黑色,繪制轉軸兩端位置。點擊矩形工具(筆觸顏色黑色),線條粗2、填充顏色線性,左右顏色配置適當的顏色即可。點擊場景1回到場景舞臺,將圖層1改名為軸1,并將轉軸圖形元件拖到舞臺,調整到適當的大小和位置。將準備的圖片素材導入到舞臺,調整設當的大小和位置,圖片素材可以準備png的無背景圖片,或者用Photoshop處理后再導入到Flash,并使用遮罩進行處理。新建圖層命名為軸2,復制軸1第一幀粘貼到軸2圖層第一幀處,并調整好轉軸位置。選中所有圖層在第100幀處添加幀,在第100幀處將軸2及矩形拖到適當位置,使動態卷軸動畫能夠全部顯示。然后右鍵單擊鼠標插入補間動畫,點擊Flash軟件“控制”、“測試影片”,對動態卷軸動畫的最終效果進行測試。接著為卷軸動畫添加背景音樂,新建圖層導入 mp3格式的音頻文件,并將音樂元件插入到場景舞臺中。最后卷軸動畫插入到網站頁頭,測試最終的動畫呈現效果。
導航欄是網頁制作中的另一個重要環節,用戶通過導航欄可以完成網站各個類目的瀏覽工作。Flash軟件技術可以進行文字、圖片和動態圖像的制作,其中文字類導航欄是最為常見的網站導航方式。大多數網站都使用文字進行不同類別的導航,而圖片常常位于頁面的中部或者右部,用于展現新聞資訊、商品購物等內容,在新聞網站或者電子商務網站中應用非常廣泛。而具有動態效果的圖像導航,則常常出現在商品廣告或網站公告中。這些導航形式需要JavaScript、ActionScript等技術才能完成,運用Flash的導航制作流程如下:首先要在剪輯元件內部新建子菜單,并將創建好的菜單文件插入場景,增加鼠標懸停的播放腳本,從而完成菜單的編輯工作。
Flash技術在網站制作中,只承擔頁頭、導航欄、鼠標跟隨等內容的制作。對于網站中鼠標跟隨的制作,首先在Flash文檔中建立剪輯元件,并在場景中隨意繪制鼠標運動的跟隨軌跡圖形。之后回到主場景舞臺,將剪輯元件的文件插入到主場景舞臺圖層的第一幀,然后輸入 ActionScript編碼 onClipEvent(load)j startDrag("",true);};,最后將制作完成的swf文件導出,并將其置入網頁鼠標跟隨動畫中。
Flash技術能夠實現網頁中的頁頭、導航欄和狀態欄等的制作,也可以在特定位置加入Flash視頻。但Flash只負責網站中動態效果的制作,其不能完成整個網站的制作任務。只有先使用
Dreamweaver等專業的網站制作工具,制作出網站的整體框架,才能在其中添加需要的 Flash內容。所以 Flash技術需要與
Dreamweaver、Fireworks等網頁制作技術結合,才能完成網頁動態內容的表現活動。
[1]趙志建. Flash動畫在網站設計中應用[J]. 信息通信,2012,(03):125-126.
[2]張麗萍. 網頁設計中 Photoshop與 Flash的結合應用[J]. 煤炭技術,2013,(04): 158-159.
[3]孫鐵輝,等. 交互設計在flash課件中的應用[J]. 計算機光盤軟件與應用,2012,18: 181.
[4]吳準輝. 淺析純Flash網站的現狀及發展[J]. 電子制作,2013,7: 103.
[5]宋曉鳴. Flash在網頁設計中的應用[J]. 電子技術與軟件工程,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技術在網站制作中應用探討[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-),男,云南省麗江市,畢業于黑龍江科技學院,就讀期間于2007年6月至2008年9月到加拿大北阿爾伯塔理工學院交流學習一年,本科,助理工程師。研究方向:計算機應用、網絡管理。
Email:chenmingkun01@163.com