FLASH互動製作流程

FLASH互動製作流程 / (點擊圖片可放大瀏覽)

作品尺寸：1003 x 599 pixel

流程說明：先在PS或ILL進行版面編排(Layout)，編排完成後，若是PS則將相關素材裁切成適當的大小(或是將PSD直接匯入FLASH)，儲存成PNG格式(透明圖檔) or JPG格式之圖檔，再將圖檔匯入FLASH做完稿 & 互動程式設定即可，點陣圖檔匯入後，盡量避免放大縮小，因為都會產生失真。若是在ILL編輯，可以直接將元素拷貝貼入FLASH或是將AI檔案匯入FLASH也可以。


Step 01/ (以Photoshop為例)
開啟新檔，尺寸為 1003 x 599 pixel  72dpi(原尺寸)。

Step 02 /
在Photoshop做好首頁&內頁的Layout 。(在PS編輯可以方便畫面的構成與效果製作)做完layout後，即可將相關素材作裁切。

Step 03 /
將圖檔素材裁切成適當的大小，並將底色塗層關閉，看到網格狀就是呈現透明的狀態。文字的部分則可以在FLASH上面進行編輯，維持向量的特性，字體才會犀利。

一般習慣會將素材分成四部分：
01.小素材：透明png 或 jpg圖檔。
02.背景圖：匯入Flash當作底圖。
03.Layout全圖：匯入Flash做為編輯完稿的對齊位置用，編輯完即可刪除。
04.文字可以在Flash進行編輯。

Step 04 /
選擇：檔案 / 儲存成網頁與裝置用，即會跳出下面的視窗，請選擇PNG-24的格式，透明，就可以儲存成PNG的透明圖檔。

Step 05 /
素材製作完成後，開啟Flash軟體，選擇AS3.0的檔案模式。

Step 06 /
開啟檔案後，將舞台的尺寸設定為1003 x 599 pixel , 影格速率：30，設定完成後先行存檔。

 

Step 07 /
將素材的圖檔全部一起匯入至舞台 or 元件庫。

Step 08 /
將PNG圖檔設定：允許平滑化 & 不失真的設定。
方法：從元件庫裡選取PNG圖檔，點兩下進入編輯，即會跳出下面視窗，建議給各png都做此設定。

Tip 小叮嚀 /
若是圖檔要做動態移動，則是png or jpg都須設定：允許平滑化，以確保動態圖檔維持高品質的狀態。

Step 09 /
將素材轉換成元件(F8)。建議每一個素材包含文字都轉換成元件，以方便之後的補間動畫的製作與特效的設定。

方法：選取素材物件後，按F8 或按滑鼠右鍵 / 轉換成元件。

Tip：影片片段(mc)的元件可以作所有的特效，圖檔元件(graphic)只能做基礎特效。所以可以都將元素製作成影片片段的元件(movie clip)。

 

Step 10 /
轉換元件完成後，即會出現於元件庫裡，要使用時再拖拉到場景上。

Step 11 /
先在時間軸做好圖命名層後，再將相關的元件從元件庫裡拖至舞台上做Layout，並製作互動的按鈕等。(儲存為 index.swf)

Step 12 /
Layout完成後，進行時間軸的各單元標籤 label (以英文命名) & 停止的指令 stop(); 設定。

檔案製作可分成兩種模式進行：

01.All in one / 是和架構較小
即可在同一個flash檔案中將各單元的內容置入在該時間點上。

02.呼叫外部檔案 / 適合架構大的模式。(所有swf放在同一個檔案夾中)

互動流程：
動畫 --> 首頁(stop) -->等待指令，按下按鈕後發生什麼事件 --> 跳製單元頁 -->在單元頁進行相關的互動 --> 按回首頁 --> 回到首頁(stop) ---等待指令

 

Step 13 / 以下的範例，以呼叫外部檔案(swf)為例。
同樣的原理進行單元頁面的編排、按鈕設計與程式的互動。命名為about.swf

Step 14 /
單元about.swf製作完成後，回到index的檔案中進行程式設定：

再"home"的時間點寫入：

stop();

a_btn.addEventListener(MouseEvent.CLICK,button111);
function button111(e:MouseEvent):void{
    gotoAndPlay("about");
}

b_btn.addEventListener(MouseEvent.CLICK,button112);
function button112(e:MouseEvent):void{
    gotoAndPlay("news");
}
------------------------------------------------------------------------------------------------
按下a_btn跳至about的標籤位置，按下b_btn跳至news的標籤位置
若有五個按鈕則寫入五組，記得按鈕元件的實體名稱(ID)要先命名好。
以免程式找不到元件而出錯。
------------------------------------------------------------------------------------------------

Step 15 /
A.再"about"的時間點寫入：

stop();

//將about.swf載入myLoader1的容器中
var myLoader1:Loader=new Loader(); //建立載入容器myLoader1
var url1:URLRequest=new URLRequest("about.swf");  //指定要載入之檔案的URL
myLoader1.load(url1);  //將檔案載入myLoader1的容器中
load_mc.addChild(myLoader1);  //最後顯示於load_mc的影片片段裡


home_btn.addEventListener(MouseEvent.CLICK,close001);
function close001(e:MouseEvent):void{
    removeChild(load_mc); //移除load_mc的影片片段。
    gotoAndPlay("home") //跳至home的標籤位置
}
------------------------------------------------------------------------------------------------
呼叫about.swf的檔案到空白的load_mc裡頭。
當按下home_btn時，移除load_mc並跳回至home的時間點。------------------------------------------------------------------------------------------------

 

B.製作兩個元件 /
B-1：新增一個空白的影片片段元件至舞台，實體名稱：load_mc， 並將座標x,y=0
B-2：製作回首頁的按鈕，實體名稱：home_mc
------------------------------------------------------------------------------------------------
load_mc 用來放置about.swf的檔案
home_btn 用來移除load_mc裡面的swf &回到首頁home的位置
------------------------------------------------------------------------------------------------

Step 16 /
其它單元以同樣的原理即可完成。