AS3.0網站架構程式碼設計新手篇。

AS3.0網站架構程式碼設計新手篇。
來講解一下一般網站在程式碼設計時, 應該要怎麼製作
第一篇奶老師我所寫的方法
是採用所謂的"直覺式"寫法。
按下A按鈕,叫b和C做事情。
按下B, 叫D做事情, 很直覺

接來來會有進階篇和物件導向篇。
寫時間軸的方法我就不多加介紹。
Step1：建立類別包資料夾
好比客戶公司是：milkmidi
這次專案名稱是：demo
那資料夾結構就會是
milkmidi--demo
然後再依不同的fla開啟對映的資料夾
首頁是index.fla, 就會搭配一個IndexMain.as檔
路徑如下：
milkmii--demo--index--IndexMain.as
所以類別包的寫就也就是
package milkmidi.demo.index{
public class IndexMain extends MovieClip(){}
}

Step2：因為一個專案, 除了專案的類別檔, 還會再額外的使用其他類別。
這樣資料夾會有一大堆, 不好管理。
所以會再加開一個名為src的資料夾
把所有的類別通通放被去。
這時候的資料夾結構為：
src--milkmidi--demo--
那是不是類別包路徑也要跟著改, 在這兒是不需要的
新增一個index.fla檔, 並放在跟src資料夾下
在下方的工頁面版, 發怖設定
點選ActionScript version選單右方的 Settings按鈕
新增一組Classpatch路徑：./src

這樣當發怖的時候就會去抓src資料夾裡的類別。
同時把 Automatically declare stage instances的選項取消。

Step3：確認網站單元架構
因為for教學, 所以我們單純一點
點選選單, 會載入其他的swf。
同時會切換網站左上角display_mc裡的文字。
而外部的swf也只要製作二個, 分別為about.swf和link.swf。

Step4：撰寫IndexMain.as
因為我們把自動宣告場景上的實體選項取消了
所以場景上的實體名稱需要在類別裡宣告一次, 並設成public
但不需要建構。

public var display_mc   :MovieClip; //影格二，左上角的物件。
public var navigationContainer_mc:MovieClip; //影格二，右上角的主選單。
public var loading_txt   :TextField; //影格一的動態文字, 用來跑百分比。

偵聽主程式的載入資訊, 
public function IndexMain()  {  
this.stop();  
this.addEventListener(Event.ENTER_FRAME , _onLoaderInfoProcess);      
//偵聽主檔的載入資訊。
}  
private function _onLoaderInfoProcess(e:Event):void{
var _bl   :int = this.loaderInfo.bytesLoaded;
var _bt   :int = this.loaderInfo.bytesTotal;
var _percentage :int = Math.floor(_bl / _bt * 100);
if (_bl && _bt && _bl == _bt) {
this.removeEventListener(Event.ENTER_FRAME, _onLoaderInfoProcess);    
onLoaderInfoComplete();
//載入完成, 取消ENTER_FRAME事件, 並執行onLoaderInfoComplete函式。    
} else  {
loading_txt.text = _percentage + "%";
}
}  
載入完成會執行onLoaderInfoComplete函式。
private function onLoaderInfoComplete():void {
this.gotoAndStop(2);   
} 

Step5：建立選單元件的程式碼
milkmidi.demo.index.view.NavigationItem

效果很單純,
滑入時, 就播放over標籤
滑出時, 就播放out標籤

public class NavigationItem extends MovieClip {    
public function NavigationItem()  {   
stop();
this.addFrameScript(0 , stop);
this.addFrameScript(9 , stop);
//動態增加程式碼在指定的影格。
//第一格是0 ,二格是1。
this.buttonMode = true;
this.addEventListener(MouseEvent.ROLL_OVER , rollOverHandler);
this.addEventListener(MouseEvent.ROLL_OUT , rollOutHandler);
//偵聽
}    
private function rollOverHandler(e:MouseEvent):void {
this.gotoAndPlay("over");
}  
private function rollOutHandler(e:MouseEvent):void {
this.gotoAndPlay("out");
}
} 

Step6：建立選單元件容器的程式碼
milkmidi.demo.index.view.NavigationContainer
這裡面就放了二個NavigationItem元件。
用迴圈來偵聽click事件。

public class NavigationContainer extends Sprite{  
public var a0_mc :NavigationItem;
public var a1_mc :NavigationItem;
public function NavigationContainer()  {      
for (var i:int = 0; i < 2; i++) {
var _mc:NavigationItem = this.getChildByName("a" + i +"_mc") as NavigationItem;      
_mc.addEventListener(MouseEvent.CLICK , clickHandler);
}
}    
private function clickHandler(e:MouseEvent):void {
if (e.currentTarget == a0_mc) {    
//直覺式的寫式。
//按下後，呼叫root的loadSWF函式。
//同時叫root的display_mc.label_txt更改其文字。
MovieClip(root).loadSWF("flash/about.swf");
MovieClip(root).display_mc.label_txt.text = "ABOUT";
}else {
MovieClip(root).loadSWF("flash/link.swf");
MovieClip(root).display_mc.label_txt.text = "LINK";
}
} 
} 

Step7：回到IndexMain.as 補上二個函式。

public function loadSWF(pURL:String):void {
//public的函式, 用來給其他類別來呼叫。
_ldr.load(new URLRequest(pURL));
}   
private function loaderCompleteHandler(e:Event):void {
this.addChildAt(_ldr, 0);   
//Loader載入完成。
} 

Step8：新增一個about.fla，依照index.fla的設定 關掉自動宣告舞台實體的選項, 新增一個./src的class path milkmidi.demo.about.AboutMain 就只有偵聽一個EnterFrame事件。

import flash.display.MovieClip;
import flash.events.Event;

public class AboutMain extends MovieClip{  
public var content_mc:MovieClip;
public function AboutMain()  {   
this.addEventListener(Event.ENTER_FRAME , enterFrameHandler);
}  

private function enterFrameHandler(e:Event):void {

}
} 

另一個link.fla也是一樣的寫法 這樣就完成啦。 程式碼沒有做優化, 只是為了for教學。 來說明一下這樣寫的缺點： 1.什麼函式都寫在root, 這樣每次要呼叫的時候就要寫MovieClip(root); 2.物件沒有被封裝, 所以要更改其屬性， 就要寫成xxxx.xxx.xxx_txt.text。如果突然原件換了路徑或位置,就會....你懂的 3.好比切換單元, 第一個單元可能logo要大, 第二個單元可能logo要往右移之類的 這樣寫就要寫很多的if else if else,寫到客戶滿意為止。 下一篇再來分享進階篇。 SourceCodeDownload