當前位置:編程學習大全網 - 人物素材 - 如何做壹個純FLASH的網站

如何做壹個純FLASH的網站

經過壹段時間的Flash學習之後,很多朋友開始對那些全Flash網站的制作發生興趣。全Flash網站基本以圖形和動畫為主,所以比較適合做那些文字內容不太多,以平面、動畫效果為主的應用。如:企業品牌推廣、特定網上廣告、網絡遊戲、個性網站等。

制作全Flash網站和制作html網站類似,事先應先在紙上畫出結構關系圖,包括:網站的主題、要用什麽樣的元素、哪些元素需要重復使用、元素之間的聯系、元素如何運動、用什麽風格的音樂、整個網站可以分成幾個邏輯塊、各個邏輯塊間的聯系如何、以及妳是否打算用Flash建構全站或是只用其做網站的前期部分等等,都應在考慮範圍之內。

實現全Flash網站效果多種多樣,但基本原理是相同的:將主場景作為壹個"舞臺",這個舞臺提供標準的長寬比例和整個的版面結構,“演員”就是網站子欄目的具體內容,根據子欄目的內容結構可能會再派生出更多的子欄目。主場景作為"舞臺"基礎,基本保持自身的內容不變,其它"演員"身份的的子類、次子類內容根據需要被導入到主場景內。

從技術方面講,如果妳已經掌握了不少單個Flash作品的制作方法,再多了解壹些swf文件之間的調用方法,制作全Flash網站並不會太復雜。

參考流程:網站結構規劃—>Flash場景規劃—>素材準備—>分別制作—>整體整合

壹、全Flash網站和單個Flash作品制作的區別

二、常用技術

1、重要ActionScript代碼控制

2、Loading的制作

3、文本導入

三、實例制作剖析

1、本實例網站結構規劃

2、首頁場景index.swf的制作

3、次場景Cartoon(200208.swf)的制作

4、二級次場景(200208_frog01~200208_frog05)制作

5、About中的文本導入

四、註意事項

以上我們通過實例剖析的方式大略介紹了全Flash網站的基本制作方法,希望給喜歡Flash的朋友們壹點實實在在的幫助,期望不久以後能看到大家做出的精彩Flash網站!本文Flash網站實例源文件下載

壹、全Flash網站和單個Flash作品制作的區別

1、文件結構不同

單個Flash作品的場景、動畫過程及內容都在壹個文件內,而全Flash網站的文件由若幹個文件構成,並且可以隨發展的需要繼續擴展。全Flash網站的文件動畫分別在各自的對應文件內。通過Action的導入和跳轉控制實現動畫效果,由於同時可以加載多個SWF文件,它們將重疊在壹起顯示在屏幕上。

2、制作思路不同

單個Flash作品的制作壹般都在壹個獨立的文件內,計劃好動畫效果隨時間線的變化或場景的交替變化即可。全Flash網站制作則更需要整體的把握,通過不同文件的切換和控制來實現全Flash網站的動態效果,要求制作者有明確的思路和良好的制作習慣。

3、文件播放流程不同

單個Flash作品通常需要將所以的文件做在壹個文件內,在觀看效果是必須等文件基本下載完畢才開始播放。但全Flash網站是通過若幹個文件結合在壹起,在時間流上更符合Flash軟件產品的特性。文件可以做的比較小,通過陸續載入其它文件更適合Internet的傳播,這樣同時避免了訪問者因等待時間過長而放棄瀏覽。

二、常用技術

1、重要ActionScript代碼控制

這是全Flash網站實現的關鍵,尤其是Flash MX新增了很多功能強大的命令,關於這部分,請大家可以參看看看其它的資料,這裏只介紹部分制作全Flash網站需要使用的比較重要的ActionScript函數。

loadMovieNum("url",level[, variables])

loadMovie("url",level/target[, variables])

功能說明:

在播放原來加載的影片的同時將SWF或JPEG文件加載進來。

參數說明:

url 要加載的 SWF 或 JPEG 文件的絕對或相對 URL,不能包含文件夾或磁盤驅動器說明。

level 把swf文件以層的形式載入到Movie裏,若載入0層,則載入的swf文件將取代當前播放的Movie,。2層高於1層。

Target 可用路徑拾取器取得並替換目標MC,載入的電影將擁有目標MC的位置、大小和旋轉角度等屬性。(個人認為用Target好些,在控制載入.swf位置時比較方便)

variables 可選參數,指定發送變量所使用的 HTTP 方法(GET/POST),如果沒有則省略此參數。

層次Level:Flash允許同時運行多個SWF文件,Flash壹旦載入壹個SWF文件,則占據了壹個"層次",系統默認的是_Flash0或_Level0,之後的Movie則按順序放在level0---level16000裏。第壹個載入的SWF文件為_Flash0或_Level0,第二個如果加載到第壹層時的稱為_Flash1或_Level1,依此類推。註意前提是前面載入的文件沒有退出,否則沖掉第壹個SWF文件,第壹個文件也從內存中退出。

註意:如果妳將外部的Movie加載到Leve0層或者Level0裏,那麽,原始的Movie就會被暫時取代,要再用時還得重新Load壹次,也就是說,壹個Level在壹個時間裏只能有壹個Movie存在。在使用LoadMovie和UnLoadMovie時必須特別註意Level之間的關系,否則,當妳希望在壹個時間裏只播放壹個Movie而Unload掉前壹個Movie時,就會出現不必要的麻煩。

unloadMovieNum(level)

unloadMovie[Num](level/"target")

功能說明: 從 Flash Player 中刪除已加載的影片。

參數說明: 同上

loadVariables ("url" ,level/"target" [, variables])

功能說明:

從外部文件中(例如文本文件,或由 CGI 腳本、Active Server Page (ASP)、PHP 或 Perl 腳本生成的文本)讀取數據,並設置 Flash Player 級別或目標影片剪輯中變量的值。

參數說明:

url 變量所處位置的絕對或相對 URL

level 指定 Flash Player 中接收這些變量的級別的整數。

Target 指向接收所加載變量的影片剪輯的目標路徑。

variables 可選參數,指定發送變量所使用的 HTTP 方法(GET/POST),如果沒有則省略此參數。

gotoAndPlay(scene, frame)

功能說明:

轉到指定場景中指定的幀並從該幀開始播放。如果未指定場景,則播放頭將轉到當前場景中的指定幀。

參數說明:

scene 轉到的場景的名稱。

frame 轉到的幀的編號或標簽。

2、Loading的制作

考慮到網絡傳輸的速度,如果index.swf文件比較大,在它被完全導入以前設計壹個Loading引導瀏覽者耐心等待是非常有必要的。同時設計得好的loading在某些時候還可以為網站起壹定的鋪墊作用。

壹般的做法是先將loading做成壹個MC,在場景的最後位置設置標簽如end,通過ifFrameLoaded來判斷是否已經下載完畢,如果已經下載完畢則通過gotoAndPlay控制整個Flash的播放。

以壹個Loading文件為例,在場景裏加入插入MC,

ifFrameLoaded("end"){

gotoAndPlay("開始播放的地方");

}

3、文本導入

在我們制作全Flash網站的過程中經常遇到壹定量的文字內容需要體現,文本的內容表現與上面介紹的流程是壹樣的,不同的地方體現最後的表現效果和處理手法還是有些不同。

方法壹、文本圖形法

如果文本內容不多,有希望將文本內容做的比較有動態效果,可以采用此法。將需要文本做成若幹個Flash的元件,在相應的位置安排好。文本圖形法的文件載入與上面介紹的處理手法比較類似,原理都差不多。具體動態效果就有待大家自己去考慮,這裏就不多介紹。

方法二、直接導入法

文本導入法可以將獨立的.txt文本文件,通過loadVariables導入到Flash文件內,修改時只需要修改txt文本內容就可以實現Flash相關文件的修改,非常方便。

在文本框屬性中設置Var:變量名(註意這個變量名)。

為文本框所在的幀添加ActionScript代碼:

loadVariables("變量名.txt","");

編寫壹個純文本文件.txt(文件名隨意),文本開頭為“變量名=”,“=”後面寫上正式的文本內容。

三、實例制作剖析

壹般制作流程:

網站結構規劃—>Flash場景規劃—>素材準備—>分別制作—>整體整合

1、本實例網站結構規劃

網站欄目:News、About、E-mail、Gallery、Cartoon、Animation

子欄目About:Feiyingis、Member、Relationship、ContactUs

紅線部分構成主場景(舞臺),每個子欄目在首頁裏僅保留名稱,屬性為按鈕。

藍線部分內容為次場景(演員),可以將次場景內容做在壹個文件內,同時也可以做成若幹個獨立文件,根據需要導入到主場景(舞臺)內。

2、首頁場景index.swf的制作

全Flash網站由主場景、子場景、次子場景……構成。

和制作html網站類似,壹般我們會制作壹個主場景index.swf,主要內容包括:長寬比例、背景、欄目導航按鈕、網站名稱等“首頁”信息。最後發布成壹個html文件,或者自己做壹個html頁面,內容就是壹個表格,裏面寫上index.swf的嵌入代碼即可。

主場景安排:

藍色線條部分為網站名稱、版權等固定信息區,通常所在位置為Flash動畫的邊緣位置。

橙色線條內容為網站欄目導航按鈕,通常也是固定在某個區域。按鈕可以根據需要做成靜態或動態效果,甚至可以做成壹個包含MC變化的Button。

綠色線條部分為主場景導入子文件的演示區域。

在子文件的裝載方面主要用到:LoadMovieNum、UnloadMovieNum兩個控制函數,請參閱前文重要ActionScript代碼控制。

這裏我們以子欄目Cartoon的制作為例。主場景文件index中有壹個按鈕Cartoon,當我們點擊Cartoon按鈕時希望導入cartoon文件夾下的200208.swf文件。所以我們在場景內選擇Cartoon按鈕,添加Action代碼:

on(release){

loadMovieNum("cartoon/200208.swf",1);

unloadMovieNum(2);

}

註意這裏我們設置level為1。

3、次場景200208.swf的制作

現在確定Cartoon子欄目需要導入的文件200208.swf,該文件計劃包含5個子文件。所以200208.swf文件的界面只包含用於導入5個獨立子文件的5個圖形按鈕和壹個標題。

200208.swf

從圖上大家可以看到,200208.swf文件包含5個屬性為button的小圖標,分別為Bu_2_frog01到Bu_2_frog05。我們需要的效果是:點擊它們則分別導入相應文件200208_frog01.swf到200208_frog05.swf文件。

我們在場景內選擇Bu_2_frog01,為這個按鈕添加ActionScript:

on(release){

loadMovieNum("cartoon/200208_frog01.swf",2);

}

點擊Bu_2_frog02,為這個按鈕添加ActionScript:

on(release){

loadMovieNum("cartoon/200208_frog02.swf",2);

}

……

依次將5個button分別設置好相對應的action以便調用相應的文件。

註意:這裏我們設置level為2,是為了保留並區別主場景1而設置的導入的層次數,如果需要導入下壹級的層數,則層數增加為3,依次類推。

4、二級次場景(200208_frog01~200208_frog05)制作

這裏的二級次場景是與上級關聯的內容,是本例中三級結構中的最後壹級。該級主要為全Flash網站具體內容部分,可以是詳細的圖片、文字、動畫內容。這裏需要連接的是具體圖片為內容,但同樣需要做成與主場景比例同等的swf文件。例如:

200208_frog01

200208_frog02

該場景是最底層場景,為主體內容顯示部分,具體動畫效果大家可以根據需要做更深入。註意要在場景最後壹幀處加入停止ActionScript代碼:stop();這樣可以停止場景動畫的循環動作。

完整導入到主場景內的效果

5、About中的文本導入

查看本例的About子欄目,在文件index.fla裏設置About按鈕的action:

on(release){

loadMovieNum("aboutus.swf",1);

unloadMovieNum(2);

}

在aboutus.fla文件中做好顯示文本的文本框,文本框屬性設置為多行(Multiline),Var:aboutus(註意這個變量名)。

為文本框所在的幀加ActionScript代碼:

loadVariables("aboutus.txt","");

在aboutus.swf文件所屬目錄下編寫壹個純文本文件about.txt,文本開頭為“aboutus=”,“=”後面寫上正式的文本內容。

將文本文件完整導入到主場景內的效果

四、註意事項

1、註意所有子文件的長、寬屬性

全Flash網站從畫面層次來看,非常類似Photoshop的層結構,我們可以把每個子場景看做為壹個層文件,子文件是在背景的長寬範圍內出現。為了方便定位,我們可以讓子文件與主場景保持統壹的長寬比例,這樣非常便於版面安排。否則就必須用setProperty語句小心控制它們的位置。

2、發布文件時註意將html選項發布為透明模式

需要將每個子文件發布為透明模式的原因是不能讓子文件帶有背景底色,由於子文件的長寬比例與主場景基本是壹致的,如果子文件帶有底色,就會遮蓋主場景的內容。

設置方法:在發布設置裏勾選html選項,在html面板裏選擇windowsmode:TransparentWindowless,如圖。

3、使用文本導入時,註意文本文件開頭的內容必須是“與文本框屬性中Var定義名相同的字符串=正文”。另外需要導入文本的swf文件與被導入的txt文本文件最好在同壹目錄內。

4、註意仔細檢查文件之間的調用是否正確,避免出現“死鏈接”。

  • 上一篇:作曲人物素材傑克森·易
  • 下一篇:英語的俚語 越多越好
  • copyright 2024編程學習大全網