啥？作業—【科技藝術美學課程—GroundFX期末相關事宜】

大家在拿到自己要的檔案裡會發現裡面會有個runtime資料夾，在runtime資料夾會發現一些檔案與一個叫config的資料夾。在這邊先跟各位同學說一下，裡面所有檔案都可以更改，只是建議要自己保留一份讓自己參考比對，之前老師說避免覆蓋原來的檔案，所以都要保留一份原始檔案，而現在已經不用了，因為已經不必再覆蓋原始檔案進行DEMO只是以下幾點要注意去修改就是。

config資料夾內會有一張圖片以及一個config.gcf檔案，各位可以去修改他們。而config.gcf一定要修改一樣數值，就是把裡面的名稱改為自己的學號以及將資料夾給為自己學號。duration為你這個應用是會跑多少秒的時間，所以請依情況而設定。注意更改的內容請用英文不要用中文，不然會出問題。而要修改該檔案可以對他右鍵->開啟->選擇記事本打開或直接打開記事本用拖的方式丟進去打開會看到以下的文件(該文件為xml格式)，請記得用換行會比較方便看：

<?xml version="1.0"?>

<config name="請在這改為自己的學號"
duration="10"
sparkfile="..\root.spark"
image=".\這裡可以放入你的代表圖片,看個人需求,只是請用英文檔名.副檔名"
comment="tile effects" exclusivity_level="false"
source_files="false">

<catalogs>   
<catalog type="_Project : Children's Place"/>  
<catalog type="_Valentina"/>  
<catalog type="_Theme : Kids"/> 
</catalogs>

</config>

之後回到runtime資料夾下，基本上該資料夾下一定有一個副檔名為spark的檔案,也就是XXX.spark。該檔案也是xml格式，基本上每個檔案功能都不太一樣，這裡建議各位去大概看一下其資料夾內容的架構了解，基本上同學只要學會換圖就可以了。如果對撰寫flash有興趣，底下有一些簡易的使用方式，有興趣的同學可以花點時間了解去想想有可以做怎樣的結合。

而我這裡以BasicTiles - ChildrensPlace Logo為範例，他的資料夾內容很單純，除了config資料夾外只有一個root.spark檔以及兩張圖片silvia2.jpg、tapia2.jpg。（注意一定要英文檔名）他root.spark的內容如下：

<?xml version="1.0"?>

<-- BASIC TILES - FLIP ENTIRE IMAGE -->

<BasicTiles
  HorizontalTiles="25"
  VerticalTiles="25"
  RotationSpeed="90.0"
  Direction="X"
  BackgroundColor="0.0,180.0,120.0"
  Perspective="true"
  CompletionThreshold="0.8"
  TransitionDelay="2.0"
  Loop="True"
  >
    <Image Name=".\silvia2.jpg"/>
    <Image Name=".\tapia2.jpg"/>
</BasicTiles>

這裡的數值建議可以改改試試，只是要到F709才能立即看效果就是……基本上有數字就改數字，而他若是true，該欄位不是輸入true就是false。至於像這個範例的Direction="X"，這個是可以輸入Direction="Y"，代表他換圖方式是以哪一軸旋轉而已。真正重要的是後面的<Image Name=".\silvia2.jpg"/><Image Name=".\tapia2.jpg"/>，前面代表第一張圖，後面代表第二張圖，只要記得把檔名換掉即可。亦或者連這個檔案都不用更改內容，你在資料夾內把該兩張圖換成你自己的圖片即可。

雖然每個xml格式並不一樣，但只要耐心看，其他模式大多脫離不了這樣的模式，若有疑問再來問我。 

這邊要提醒一點，有些類別如alpha開頭字樣的會需要用到帶透空的tga檔，這些檔案請確定好是有帶透空的。而要如何確定？就是把那張圖丟到photoshop，圖層標籤右邊的色版點入,新增alpha色板,黑的地方是透空,白的地方是顯示,請一定要有白的地方,不然沒反應(這似乎只會發生在之後會提的bmp檔)。這邊還有一個蠻奇怪的檔案是指定bmp為透空貼圖,就是這個"ParticlesEmitMotion - BellGala - Towers"這個他是指定bmp為透空的。所以建議原始檔還是要看一下，該資料夾內的spark檔是寫著：

<AlphaMask
  AlphaImage = ".\towers.bmp">

就代表他指定towers.bmp為透空圖，所以這張bmp必須有自帶alpha面板（其實我也是第一次知道原來bmp也可以自帶alpha）。

以下是簡易的flash教學，輸出時請輸出action script3版本。在說明前請下載這個檔案並和你的fla檔放在同一資料夾內。

建立好flash檔案需放入一個元件，並對此物件命名比如myTracker（實體名稱而非元件名稱），而此元件需包含以下程式碼：

    var lc_receive = new LocalConnection();
    lc_receive.connect("TrackerOutput");
    lc_receive.client = this;
// initialize if the local connection is undefined
if( lc_receive == undefined )
{
    // public stats
    var bIsConnected = false;
    var nMessageCount = 0;
    var nPointCount = 0;
    var nDataRate = 0;
  
    // private stats
    var nBaseCount = 0;
    var nBaseTime = getTimer();
  
    // open a local connection

  
    function ReceiveData(data_in:Object):void
    {
        // if the data contains outline information
        if( data_in.Outline != undefined )
        {
            // send the stage dimensions
            if( (nMessageCount==0) || (data_in.Outline.width == 0) || (data_in.Outline.height == 0) )
            {
                var data_out = new Object();
                data_out.Outline = new Object();
                data_out.Outline.width = this.stage.stageWidth;
                data_out.Outline.height = this.stage.stageHeight;
                var lc_send = new LocalConnection();
                lc_send.send( "TrackerInput", "SendData", data_out );
              
            }
          
            // draw the outline
            else
            {
                var nOutline:Number;
                var nPoint:Number;
                var nNumOutlines:Number = 0;
                var nNumPoints:Number = 0;
                var nTotalPoints:Number = 0;
          
                this.graphics.clear();
              
                // loop through all the outlines
                nNumOutlines = data_in.Outline.data.length;
              
                for( nOutline=0; nOutline<nNumOutlines; nOutline++ )
                {
                    // verify the outline has data
                    nNumPoints = data_in.Outline.data[nOutline].length;
                    nTotalPoints += nNumPoints;
                    if( nNumPoints>1 )
                    {
                        nTotalPoints += nNumPoints;
                      
                        // start drawing a new filled object
                        this.graphics.beginFill(0x00007F, 100);
                        this.graphics.lineStyle(0, 0xFF0000, 100);
                        this.graphics.moveTo(data_in.Outline.data[nOutline][0].x, data_in.Outline.data[nOutline][0].y);
                      
                        // draw a line through all the points
                        for( nPoint=1; nPoint<nNumPoints; nPoint++ )
                        {
                            this.graphics.lineTo(data_in.Outline.data[nOutline][nPoint].x, data_in.Outline.data[nOutline][nPoint].y);
                        }
                      
                        // finish drawing the filled object
                        this.graphics.endFill();
                    }
                }          

                bIsConnected = true;
                nPointCount = nTotalPoints;
            }

            // update the message count
            nMessageCount++;

            // calculate the data rate
            if( nMessageCount >= (nBaseCount+30) )
            {
                var nTime:Number = getTimer();
              
                if( nTime>nBaseTime )
                {
                    nDataRate = 1000 * (nMessageCount-nBaseCount) / (nTime-nBaseTime);
                    nBaseCount = nMessageCount;
                    nBaseTime = nTime;
                }
            }
        }
    }
}

在flash新增一元件，把他的實體名稱稱為hit_test然後在其他地方加入程式碼，例如：

var obj:HitDetection = new HitDetection(myTracker);

function OnEnterFrame(event:Event):void
{

myTracker.visible=true;//代表是否顯示已感應地區

    if (myTracker.hitTestPoint(hit_test.x, hit_test.y, true))
    {
       //代表有觸碰到hit_test物件時會執行此段程式
    }
}

this.addEventListener(Event.ENTER_FRAME, OnEnterFrame);

在這裡面myTracker.visible=true時會顯示感應到的地區,當你的手去感應時，他會像下面圖片左下角區塊一樣有藍色（代表此圖是左下角受到感應）：

注意是左下角

 若myTracker.visible=false時就不會顯示。至於myTracker.hitTestPoint(hit_test.x, hit_test.y, true)則是當他感應到那邊有東西在動時就會回傳true，因此要用if去判斷是否有觸碰到。第一個參數欄位是填感應物的x坐標位置，第二個參數欄位是填感應物的y坐標位置，第三個參數欄位是填true和false。根據我的測試，第三個參數欄位填true，他的感應範圍會比較大，填false似乎只會感應到是否觸碰該點而已。就請依照需求而使用。而觸碰到時會有何反應就請各位同學發揮自己的想像力了。

flash的部分你只要輸出swf檔並執行就可以感應，不必特別再依 靠Ground FX軟體。

差不多就是這樣子，我這邊是有做一個簡單的範例，雖然沒啥用就是...這個範例其實只是很單純的碰到一個香蕉皮，他會瞬間有對話框出現說"請滑倒"，而沒感應到碰到就不會出現。