IT工程師數位筆記本

本人是設計出身，對語言根本不在行，但是做flash站沒有一點as基礎，什么效果也出不來，經過一段時間的摸索，和若干業務的鍛煉，現在積累了一點經驗，不敢獨享，把這些真正由實戰中得來的東西送給和我一樣對程序不在行設計師以及新手朋友。老鳥們請飄過。

在開始之前，我想說，做出一個優秀的flash站的重要前提是什么？我認為首先是對美的理解再次是用戶界面的合理性，曾經見過很多朋友做過的全站，充斥著各種動態效果以及技術模塊，但是效果卻不盡如人意，看起來很有土洋結合的味道，同時也看過很多國外的源文件，我發現里面用到的技術并非非常復雜的as程序。連我都可以輕易看懂。但是無論是界面配色以及動態效果都非常的不錯。可以說一個flash站是否有視覺沖擊力是它價值的首要體現，而缺乏基本的美術功底，做出來的東西就必然缺乏美觀。所以我認為，任何軟件或者技術都是為了實現目的而服務的，在我們努力學習as語言的同時，也應該不斷的加強自己的藝術修養，而這個對美判斷的能力顯然需要比學任何計算機語言都要付出更多的時間去積累和沉淀。否則就算熟透as3，駕馭了air。我們同樣永遠也做不出優秀的作品，在文章末尾，再繼續探討。

好的，這里開始

一： flash網站的基本布局

一般來說，這個結構是我最常用的flash全站結構，在flash中，我會根據不同的頁面元素進行分類，然后分布在各個層中，并且起上相應的名字，便于操作，在源文件中建議養成良好的命名習慣，通常一個全站在成型之前，這個文件，我們會對他操作n次，所以為了提高工作效率以及方便日后調用，良好的結構非常重要。
如圖所示，as腳本層放置在最上方，頁面中的所有元素都根據實際的深度排列到相應的層中。bg也就是頁面背景放置在最下方。

1：通常影片的場景大小，我設置成1600*1200，以適應各種顯示器分辨率，幀率設置成30，根據需要也可以進行調整。關于在瀏覽器中適應瀏覽的問題，我放到最后說明。這里先放下。
2：loading通常放在第一幀，而且除了背景以外，并不安排其他元素在第一幀內，這樣可以保證第一幀的數據量很小。便于loading 動畫的正確顯示。
3：每個大型的深層次mc，以及經常需要切換到內部的mc，比如頁面的mc，導航部分的mc，等等，我通常會在場景外做一個入口，也就是一個色塊，因為有的mc并非在內部的第一幀就有內容，在外層的時候他是空白的，所以為了便于操作，在內部的第一幀建立一個色塊，便于隨時雙擊進入操作。
4：不要把所有的動畫和內容都安排在主時間軸里，這樣的操作會讓你在以后的施工中非常的難于調整，甚至無法增添內容。我認為，應該把內容分成大類，然后相應的做成原件，根據內容的樹狀結構，相應的安排mc的嵌套。然后在各個時間軸里，用寫在某個位置的as來控制各個時間軸的銜接。
比如mc1和mc2都是內部有非常復雜動畫的mc，我們要mc1動畫完畢后開始mc2，這時候就不要把兩個mc的內部動畫放在一個時間軸內，最好是分別mc1,mc2各一幀，同時在mc1內部的最后一幀上寫_parent.gotoandplay(mc2所在的幀)。

二：loading的制作

關于loading的制作，網上有的是教程，我只用一個最常用的做法，曾經很多教程上介紹如果做一個精妙的loading云云，我從來都沒有深究，這段代碼，我在無數個老外的源文件中都看到，連其中沒有使用的進度顯示文本代碼都一樣。。呵呵。。我的每個全站作品都是用的這個，loading原件通常安排在主時間軸上，內部的動畫一定要打包成mc，呵呵，這個loading的內部動畫安排成100幀，形式可以隨意。只要是個100幀的動畫就可以了。

三：有關于按鈕

其實flash站80%的功能都是基于鼠標事件來完成的，所以按鈕在網站中的地位不言而喻，在我理解一個flash全站無非就是通過一些按鈕的導向來播放不同位置的mc。
按鈕有兩種方式可以實現。一種是按鈕元件，一種是影片剪輯元件，這兩個原件中。按鈕只有4幀，而影片剪輯沒有限制，所以如果需要一個有動畫效果的按鈕的時候，我們就只能用影片剪輯也就是mc來實現。事實上，我認為，mc在大部分時間里都可以替代按鈕，通過腳本控制mc來實現按鈕的功能要比按鈕靈活的多。

這是一個最通常的動畫按鈕的內部結構


新手提示：這里需要提示的是關于幀標簽的概念：上圖中時間軸里標注的s1與s2是幀標簽，在幀的屬性欄里可以輸入，使用了幀標簽可以用gotoAndPlay等等語句來播放該真標簽所開始的位置，過了該幀標簽的范圍后，不會停止哦~~。用幀標簽的好處是你無需理會關鍵楨的數值，在任何地方播放這段動畫，都可以含義明了的操作，并且容易解讀和記憶。

在這個按鈕mc所在的幀上（上圖的外層）寫上如下腳本，這個按鈕就生效了


[Copy to clipboard] [ - ]CODE:btn1.onRollOver=function(){btn1.gotoAndPlay"s1"};
btn1.onRollOut=function(){btn1.gotoAndPlay"s2"};
btn1.onRelease=function(){};
可以看出在用腳本對btn1按鈕添加了onRollOver，onRollOut，onRelease事件后，也就是經過，離開，點擊，這個mc就擁有了一個按鈕的3種狀態，至于點擊并不松手這種狀態，通常并不常用，所以就沒有添加，如果需要的話，那么只需要在對應的幀上寫onPress事件就可以了

需要注意的是：利用這樣的寫法來實現的按鈕，時間軸不能過長，也就是說，動作效果不能動畫太長，如果時間很長的話，當你的鼠標劃過的時候，這個按鈕會執行s2部分，而這么長的動畫，你并不是想要播放的，這個按鈕已經可以說是一段用鼠標事件激活的動畫了，不該用鼠標經過這樣的事件來激活。

在全站中經常有這樣的情況，即是很多按鈕都要實現類似或者同一種類的功能，那么一一寫onRollOver等等就太煩瑣了。


這時候我們就需要用循環的功能了，最開始，如果你看不懂，那么你并不需要去深究到底是怎么寫法，粘貼過去，然后去改你需要改的部分吧。



這里有5個按鈕，按鈕的名字是pm1，pm2---pm5,當鼠標經過這些mc的時候，如果經過的不是已經點過的mc的話，就播放這個mc的“s1”部分，鼠標離開的時候，滿足同樣條件就播放“s2”部分，點擊這個mc的話，上一個被點的mc播放"s2"部分（通常也就是回到初始的狀態），

[Copy to clipboard] [ - ]CODE:stop();
function rollover() {
if (_root.a != this.indexNum) {
this.gotoAndPlay("s1");
}
}
function rollout() {
if (_root.a != this.indexNum) {
this.gotoAndPlay("s2");
}
}
function release() {
this._parent["pm" _root.a].gotoAndPlay("s2");//上一個被點的按鈕執行播放s2
_root.a = this.indexNum;
//上面的代碼順序不能錯。代碼執行也是有順序的，
//點擊后需要做的事情寫在這里。
}
for (var i:Number = 1; i<6; i ) {
this["pm" i].onRollOver = rollover;
this["pm" i].onRollOut = rollout;
this["pm" i].onRelease = release;
this["pm" i].indexNum = i;
}
這段代碼很簡單，是as比較基礎的語句，關于for，以及if語句的用法，請自己在網上找，有的是。其實，做flash站，最常用的語句就是這兩個，應該理解透。新手朋友需要注意的是
if后面的條件要用==來判斷，如果只寫一個=，那么這個條件就永遠都成立，因為=是賦值的意思，而==才是判斷，
這里的for (var i:Number = 1; i<6; i ) 部分，如果你有5個按鈕那么i<6，如果6個就i<7

需要非常重視的是這個東西_root.a，這是一個變量，我叫這個東西為“標志位”，當然也可以叫做_root.abcde，在這里利用這個_root.a=來記錄當前鼠標事件的對象，當點了btn1的時候，這個_root.a=1，_root在as里是頂級的位置，我們寫_root.a=1就是表明在主時間軸建立一個變量值為1，之所以用頂級位置，就是因為調用起來簡單，方便，在任何地方都可以用，這里涉及到路徑和層級的知識，稍后說明。。。。。總之在我們需要記錄一個數據，比如頁數，比如按鈕序號，等等的時候，這個“標志位”使用起來是很方便的。在下面我們還會用到。

另外一個推薦熟悉的部分是movieClipTween這個功能擴展，這個類，或者這個方法，簡單的說就是用腳本而不是 用時間軸來安排動畫，在很多時候，我們如果用腳本的方式來實現一些mc的交互會更加方便，同時更加靈活，這樣做的好處是，比如你需要一些按鈕，你并不需要為每一個按鈕安排時間軸和建立關鍵楨，所有動作都用腳本生成。而且很直觀，我不是很會形容這個的好處，但是相信沒有用過的朋友們一定會習慣并且喜歡這種動畫創作方式。下圖為例：


具體的腳本如上所示。
需要知道的是，這個擴展的功能并非flash安裝后自帶的，你需要下載這個后綴名為mxp的擴展包，安裝需要有extention manager這是adobe公司的免費軟件，如果你安裝了dw9就同時安裝了。。安裝之后，參數的使用方法非常簡單，在flash的幫助文檔里會添加出相關的項目，雖然是英文的，但是也非常易懂。

四：flash全站的頁面切換

在傳統的html站里，我們通過點擊超鏈接來打開另外的一個html，在flash站里，我們當然也可以打開另外一個html頁面，但是缺少了動畫的翻頁就失去了動態效果，所以，在flash全站里，通常都會有比較動感的動畫部分來銜接兩個頁面，也就是說點擊鏈接后，運行一個動畫，然后動畫完畢后，新的頁面也呈現出來了。
這里有個示例網站http://www.platina-design.com,這是我剛學flash早期的一個主頁，一直還沒空完成。

在實現這樣的效果，我們有非常多的辦法，這里我比較常用的是這一種，結構是這樣的，很簡單


如圖可以看到，翻頁動畫層在頁面內容層之上，最上方是腳本層，把腳本寫在最上方的層里，是比較好的做法，在網站進入后，開始播放頁面的mc，這mc的第一幀也就是上圖中的第一幀，根據需要，我們可以寫上一個stop()，頁面內容被播放，當首頁上的導航按鈕點擊后，導航按鈕內安排了腳本：pages.gotoAndPlay("start"),這時候，從第二幀開始的翻頁動畫mc開始播放，當播放到開始露出下面頁面的時候，在時間軸上的相應幀上安排腳本：page.gotoAndPlay(_root.a)這里的_root.a是按鈕點擊時候被賦值的，也就是說，如果我點了按扭2.那么這時候，頁面就切換到第二幀，點擊3播放page的第三幀。最后停止，不要忘記寫stop()在時間軸的最后，



如圖所示頁面的部分做成一個大mc，里面每一個頁面做成一個mc放在一幀內，這樣就對應了每個導航按鈕的點擊。在每個頁面mc切換前，播放了翻頁動畫，在翻頁動畫過程中進行了換幀，于是，我們的目的就達到了。
這個功能實現的方法是很簡單的，但是基礎的方法是比較通用的，我們在查閱很多國外的flash全站源文件的時候，都會發現類似的方式，通過換幀來達到換頁的方法，也是flash全站的一個比較通常的方法，當然還有其他的辦法來實現，但是這個基本的方法還是值得新手朋友們掌握的。

五：文本內容的顯示

任何網站中都要有文字，flash網站中的文字，我們在制作的時候有3中選擇，一種是靜態文本，一種是動態文本，一種是輸入文本，靜態文本可以使用任何字體，在發布后，瀏覽者可以看到你源文件中使用的文本，在網站中不需要經常更新的部分，大可用靜態文本來寫，因為不需要瀏覽者也擁有你的字體，所以，很方便你對頁面所做的美工。

動態文本，通常用來顯示后臺程序所提供的文本內容，或者flash中動態生成的文字，比如建立一個空白的動態文本，id名起為mytext，那么在他的所在幀上寫如下腳本就可以讓他顯示出指定的文字
mytext.text="我傻，但我不流哈喇子"
發布后，這個文本框就會顯示出相應的文字，因為是動態文本，所以通常在我們需要他的場合都是例如留言本，新聞發布等需要經常更新和變化的部分。所以如何動態的讀入文字就是動態文本使用的目的。
如果你的工作伙伴中有程序員，那么你可以要求他的后臺給你傳遞一個xml文件，然后你在flash端讓你的動態文本顯示這段xml，你的flash就擁有了相應后臺的數據功能，

不過，這里暫時并不詳細的介紹flash 與后臺交互，因為這并不是我的教程這一部分該介紹的東西，這篇文章是基礎向的，希望能給和我一樣的設計師朋友和新手朋友提供既沾即用的腳本，所以下面就只提供一段從服務器端讀入文本文檔的方法，以及通過判斷密碼是否正確的部分，

System.useCodepage = true;
var Txtload= new LoadVars();
Txtload.onLoad = function(success) {
if (success) {
mytxt.text = Txtload.neirong
} else {
//做點什么
}
};
Txtload.load("test.txt")

給動態文本框的id設置為mytxt
下面在你的swf同文件夾下建立一個文本文檔test.txt，里面寫neirong=加上你要顯示的文字就可以了。

判斷密碼：




如上圖所示，通過if判斷輸入文本的內容：if (txt.text==“你的密碼”){做點什么事情，比如說換幀，或者播放某個mc，等等}else{干點什么}
這樣的密碼判斷，并不需要后臺程序的支持，非常的易于實現，通過字符串判斷，我們可以實現后臺管理的密碼登錄等實際上是靜態的功能。

以上圖片演示地址，這個是業余時間做的一個玩具http://www.shengmeixing.com/cia/index.html

需要注意的技巧是如果你的動態文本，包括輸入文本如果需要覆蓋遮罩效果的話，直接用遮罩層放在上方的辦法不可以，需要為該文本添加濾鏡的效果，才可以實現，為了不影響文本的顯示，請將濾鏡參數調整為0.另外的辦法是把文本轉換成mc并且用添加腳本setmask的方式實現。

六：音樂開關

音樂文件通常是mp3格式，導入到庫中后，可以直接在需要的幀上選擇插入聲音對象，如果全站只有一首背景音樂的話，那么通常不用創建聲音對象，直接在關鍵楨屬性中選擇聲音就可以了，在影片的主時間軸上建立一個開關mc。就可以控制背景音樂的開關。當然也可以控制音量，但是我認為通常情況下，我們并不需要控制印量大小，對于網站來說，我們更多的時候只是需要選擇開或者關就夠了。。


建立一個mc，位置最好在根時間軸內，因為便于操作，同時結構合理，在mc內部建立一個mc，里面做好開關狀態的外觀分別放置在兩幀，不要忘記寫stop()，在這個mc對應的幀上寫下如下腳本


[Copy to clipboard] [ - ]CODE:_root.soundstatus=="on"
onLoad=function()
{
_root.soundstatus="on";
_root.mySound = new Sound(_level0);
_root.mySound2 = new Sound(_level1);
_root.mySound3 = new Sound(_level2);
_root.mySound4 = new Sound(_level3);
_root.mySound5 = new Sound(_level4);
maxvolume=100;
minvolume=0;
}

onEnterFrame=function()
{
if(_root.soundstatus=="on") {step=5}
if(_root.soundstatus=="off") {step=-5}

maxvolume =step;

if (maxvolume>100) {maxvolume=100;}
if (maxvolume<0) {maxvolume=0;}

_root.mySound.setVolume(maxvolume);
_root.mySound2.setVolume(maxvolume);
_root.mySound3.setVolume(maxvolume);
_root.mySound4.setVolume(maxvolume);
_root.mySound5.setVolume(maxvolume);
}
music_btn.onRelease=function(){
if(_root.soundstatus=="on"){
_root.soundstatus=="off"
music_btn.gotoAndPlay(2)
}else{
_root.soundstatus=="on"
music_btn.gotoAndPlay(1)
}
}
這段腳本會在點擊開關按鈕后，音量濺出至沒有，再次點擊后，音量漸入至100%原理非常簡單，這里不再詳解，新手朋友請咨詢查閱相關資料，這里用了一個標志位(_root.soundstatus)用來記錄開關按鈕的狀態.在使用的時候將以上腳本相應的復制到你的mc里，音量開關就可以實現了。

如果你的網站有多段背景音樂的話，那么這時，你就不可以在時間軸內調用背景音樂了，你可以在主時間軸里的幀里定義你的聲音，這樣在需要他播放或者停止的時候，你就
可以隨時控制了。下面的寫法可以作為參考。這里mainsound是一個音樂，pagesound是另外一個音樂，根據我的需要，需要在不同頁面播放不同的音樂。

[Copy to clipboard] [ - ]CODE:_root.mainsound = new Sound();
_root.mainsound.attachSound("yoursound");
_root.pagesound = new Sound();
_root.pagesound.attachSound("pagesound");
_root.pagesound.stop();//pagesound停止播放
_root.mainsound.start(0,99);//mainsound在0秒后播放99遍
如上的代碼當然也可以根據你的需要來定義n個聲音，控制播放和停止的部分可以定義該聲音之后的任何地方調用。

需要注意的是：創建聲音對象的時候，我用的是attach命令，也就是說，這個聲音文件已經包含在我的swf中的庫里了。這里這樣做會增加swf的體積，但是可以保證聲音的同步，也就是在你需要播放他的時候馬上播放，這個對于flash網站來說是很重要的，如果并不需要同步，那么我們大可用loadSound語句，這樣還可以減小swf的體積，將聲音文件放在外部，通過相對或者絕對路徑來訪問他。

在使用attach語句來調用聲音文件的時候，該聲音文件需要有id，這個id在庫面板中進行設定，并且設置成在第一幀導出，才可以訪問的到，也就是說在調用語句所在的幀播放的同時，該聲音文件一定要已經讀取完畢，才可以attach。如果在attach的同時，沒有讀入該文件或者，沒有讀取完畢的話，是不能引用得到的，這樣就會造成播放失敗。

不過這時候會造成一個問題，就是由于音樂文件在第一幀導出，所以會增大第一幀的體積，而loading是第一幀，這樣loading就會出現許久也沒有顯示進度的問題。所以為了既不在第一幀導入，也不影響attach，我用這樣的方法解決，這也許不是最好的辦法，只是我一直這樣用，如果那位兄弟有更官方的方法，請告知。

如圖所示，這樣，該聲音文件在第二幀加載，同時不會自動播放，不占用第一幀的體積，同時也可以保證引用的順利，不要忘記去掉聲音文件linkage的“在第一幀導出”選項。

七：flash的調試與常見問題。
ctrl 回車我們每做一個全站都不知道要按幾百遍，在預覽的窗口中的view-bandwidth profiler選項，點擊后可以查看影片的一些基本數據，比如體積，幀數，等等，其中影片尺寸在調試中，我們應當時刻注意體積的變化，以提早發現異常的體積變化，同時窗口中，還可以查看每一幀的體積，我們尤其應該注意第一幀的體積，如果體積超過100k，那么就應該找原因了，因為這樣有可能造成loading失效。另外模擬下載的選項也可以測試loading。download setting選項中，我們可以選擇模擬下載的帶寬。道理很簡單，不再復述。


常見問題：
發布的時候，發現loading完全沒有出現，而后面的網頁也斷斷續續的，那么應該是你的主時間軸，忘記了寫上一個ｓｔｏｐ（）。呵呵

發布的時候，發現ｌｏａｄｉｎｇ已經過了大半才出現，那么說明你第一幀的數據體積過大，減肥他。

如果在發布的時候發現編譯速度非常慢，并且最后影片的體積超過了地球人理解的范圍，比如幾十兆大，那么非常有可能是影片中的動態文本嵌入了字體，如果沒有有意嵌入字體的話，就要把字體屬性中的embed選項打開，然后將里面嵌入的部分完全去掉，就可以解決這個問題。我當初曾經為了這個瘋狂過，最終，用一半排除法找到了這個原因。（也就是先刪除前一半幀，查看體積，沒有變化再刪除后一半，呵呵，如果還沒有變化，那就出鬼了）
其實中文網站嵌入字體的用處并不大，因為一個中文字體，一般都3兆左右，體積太大，而英文網站就相對好很多，動態文本完全可以嵌入一個美術字體來實現效果，不過嵌入字體有個作用就是控制輸入的字符類型，比如一個輸入文本是輸入電話號碼的，那么只嵌入數字字體的話，那么這個文本框就只可以輸入數字類型的字符。


今天到這里。。。休息。。打字一天很累。。本教程幀的很基礎，很簡單，甚至有些地方不是很對，請高手指出，本人也不是ａｓ高手，我只是個設計師，或者用美工這個蔑稱來形容也沒關系。

下面陸續要說的將會有，關于影片在瀏覽器顯示的問題，元件在場景中定位的問題，ｓｗｆ的ｈｔｍｌ寫法的一些經驗，ｆｌａｓｈ網站如何對搜索引擎友好的部分，關于有后臺支持的ｆｌａｓｈ網站數據誤緩存的問題。等等。新手同胞們。你們的回復是我的最大動力。

歡迎轉載：http://www.kanwencang.com/bangong/20161206/63770.html

文章列表

---

Avast 防毒軟體已檢查此封電子郵件的病毒。 www.avast.com