潘彪

摘要：該文介紹了如何運(yùn)用flash動(dòng)畫制作技術(shù)和網(wǎng)頁的html代碼來裝扮職教新干線的方法，并給出了一個(gè)實(shí)例來具體講解這種方法的使用。

關(guān)鍵詞：html代碼；透明flash文件；職教新干線

中圖分類號：TP391文獻(xiàn)標(biāo)識碼：A文章編號：1009-3044(2012)15-3705-03

隨著中國網(wǎng)絡(luò)的不斷發(fā)展，職業(yè)教育的發(fā)展越來越離不開網(wǎng)絡(luò)的環(huán)境，職教新干線網(wǎng)絡(luò)平臺已經(jīng)慢慢成為職院進(jìn)行各種評估、教學(xué)交流的基本的平臺，現(xiàn)在職業(yè)技術(shù)學(xué)院的教師，已經(jīng)每個(gè)人都擁有了自己的一個(gè)用戶，擁有了美化這個(gè)平臺的權(quán)限，如何將我們的職教新干線布置的漂漂亮亮，如何來美化我們的新干線平臺的主頁面，已經(jīng)成為了當(dāng)前職教教師的一個(gè)重大任務(wù)。該文章主要講解了如何使用我們的flash工具和html代碼來美化我們的職教新干線主頁面的方法。

1需求分析

如何來美化我們的新干線平臺的主頁面，讓瀏覽者第一感覺就吸引眼球，已經(jīng)成為了當(dāng)前職教教師的一個(gè)重大任務(wù)。很多用戶由于不懂flash技術(shù)或者h(yuǎn)tml代碼，所以不知道如何進(jìn)行比較美觀的文章圖文混排，最多只能到網(wǎng)上下載現(xiàn)成的動(dòng)畫文件點(diǎn)綴主頁，該文給出了一個(gè)實(shí)例來具體講解一個(gè)原創(chuàng)透明動(dòng)畫來裝飾職教新干線主頁上應(yīng)用的方法。

2前提條件

在職教新干線擁有自己的一個(gè)賬號，擁有修改權(quán)限，開通空間，準(zhǔn)備好一些圖片素材。

現(xiàn)在以作者自己的職教新干線空間為例，如圖1所示，制作主頁上的小飛機(jī)飛來飛去的動(dòng)畫，通過這一動(dòng)畫來講述一透明flash在職教新干線文章編輯中的應(yīng)用，重點(diǎn)講述以html代碼應(yīng)用的方法。

3具體操作步驟

圖1

第一步：安裝好flash 8.0甚至更高的版本的flash軟件，準(zhǔn)備好一張飛機(jī)圖片如圖2所示。

第二步：套選出飛機(jī)的翅膀，新建名稱為飛機(jī)的元件所示，在元件中導(dǎo)入飛機(jī)圖形，將飛機(jī)圖形打散，通過flash的套索工具將飛機(jī)的兩個(gè)翅膀選擇出來，如圖3所示，將選出來的兩個(gè)翅膀分別置放于flash的兩個(gè)層中，即，翅膀一個(gè)層，飛機(jī)的身子部分一個(gè)層，并且在置放到底層。

第三步：制作飛機(jī)翅膀擺動(dòng)的逐幀動(dòng)畫：如圖3所示，通過F6產(chǎn)生新建關(guān)鍵幀，通過變形工具對關(guān)鍵幀的修改讓飛機(jī)翅膀擺動(dòng)起來。

第四步：制作飛機(jī)飛舞的動(dòng)畫：將飛機(jī)擺動(dòng)的元件拖入場景，新建引導(dǎo)層使用鉛筆工具制作飛機(jī)飛行的引導(dǎo)路徑，如下4所示，通過屬性調(diào)節(jié)好飛機(jī)飛行的路線和狀態(tài)。

第五步：透明flash的導(dǎo)出：將場景中的背景顏色全部取消，導(dǎo)出動(dòng)畫如上圖5所示設(shè)置，導(dǎo)出為“飛機(jī).swf”。按照相同的方法制作一個(gè)飛行軌跡有區(qū)別的文件，取名為“飛機(jī)2.swf”。

第六步：上傳飛機(jī)動(dòng)畫，獲取飛機(jī)飛行動(dòng)畫的源地址代碼：在職教新干線上發(fā)表一篇新的文章，將飛機(jī)動(dòng)畫以附件的形式上傳到新干線空間，然后打開飛機(jī)飛行的文件，通過網(wǎng)頁顯示的地址欄獲得飛機(jī)動(dòng)畫的源地址。

第七步：輸入html代碼，將飛行動(dòng)畫顯示在新干線的主頁上：進(jìn)入居民信息管理頁面，點(diǎn)擊個(gè)人愛好子頁面如下圖6所示；由于在職教新干線工具中沒有css樣式表工具，所以我們只能使用style=“”寫入的方式來代替css樣式工具。

在自述模塊里面輸入如下代碼：

quality="high";>

quality="high";>

解釋：

如果我們要增加飛機(jī)在主頁上飛行的數(shù)量，降第一段的代碼復(fù)制兩遍甚至三遍然后適當(dāng)修改right: 50px;和top: 100px中的數(shù)字即可。

4小結(jié)

以上我們通過一個(gè)實(shí)例來詳細(xì)講述了通過html語言以及flash動(dòng)畫制作軟件來給職教新干線主頁制作一個(gè)原創(chuàng)動(dòng)畫，這里我們主要是使用了flash動(dòng)畫的逐幀動(dòng)畫和引導(dǎo)動(dòng)畫來形成飛機(jī)飛行軌跡，通過通過style=“”代碼來產(chǎn)生css樣式，通過EMBED代碼來顯示網(wǎng)頁動(dòng)畫。結(jié)合html語言和flash動(dòng)畫可以實(shí)現(xiàn)千變?nèi)f化的動(dòng)畫效果，這里更漂亮的東西留給我們讀者去認(rèn)真思考！

參考文獻(xiàn)：

[1]姜楠dreamweaver 8完美網(wǎng)頁設(shè)計(jì)與制作[M].北京:中國青年出版社,2006.

[2]張曉景DIV+CSS網(wǎng)頁布局商業(yè)案例精粹[M].北京:電子工業(yè)出版社,2007.

[3]胡海.ADOBE FLASH CS3 PROFESSIONAL標(biāo)準(zhǔn)培訓(xùn)教材[M].北京:人民郵電出版社,2008.