互动程式设计(for

1、Flash Action Script 互動程式設計(for designer)洪偉肯明志科技大學 工業設計系Flash的發展歷程FutureSplash Animator (Flash前身)Flash3 (Action)Flash4 (Action Script簡單運算,變數、判斷邏輯以及執行時期控制物件的內容屬性, 由Gary Grossman發明 )Flash5 (物件導向Action Script 1.0, 支援XML與HTML文字-資料庫與購物網站)Flash MX (Action Script 2.0類似Java寫作方法, RIA導向, 支援Video WebCam, 搭配Flas

2、h Communication Server(FMS), 提供組件(compoment)與API方便介面使用.Flash 8 (增強影音轉換與最佳化, 如movavi, script助理,物件式繪圖、漸層及透明度運用, Adobe公司收購)19951996 19982000 20022005踏出學習的第一步 瞭解系統架構: 場景(scene), 圖層(layer), 影格(frame), 元件庫(library), 輸出入的格式. 瞭解元件類型: 圖像元件(graphic), 影片片段元件(MovieClip), 按鈕元件(button). 並.可載入聲音物件, 影片物件等 瞭解基本動畫技巧:

3、 繪圖, 移動補間與大小漸變, 加減速, 淡入淡出, 形變, 遮罩處理, 路徑動畫.元件內還可放其它元件 影片片段元件內, 可放另一個影片片段, 圖像元件或按鈕元件, 並同時載入聲音等 按鈕亦可, 以下是在按鈕中的”一般”, “滑入”, “按下”三個狀態下, 分別放置”扇頁旋轉”, “扇頁逐漸停止”, ”扇頁炸開”三段影片片段的效果 四種放置actionscript的地方1.影格（frame)2.按鈕(button)3.影片片段(movieclip)4.外部as檔案 將原本寫在時間軸的影格指令寫到外部的純文字檔裡, 如outside.as, 在影格則寫上： #include outside.a

4、s (注意若as檔有修改過,fla檔要重新發佈）必備基本語法 影格控制 play(); stop(); gotoAndPlay(); gotoAndStop(); nextFrame(); prevFrame(); nextScene(); prevScene(); stopAllSound(); 按鈕事件 on() press; release; releaseOutside; rollOver; rollOut, dragOver; dragOut; keyPress” 影片片段事件 onClipEvent()Load; unload; enterFrame; mouseDown; mou

5、seMove; mouseUp; keyDown; keyUp;三種actionscript程式執行方式1. 內建函數(一次性程式):用於控制與系統, 許多複雜的功能, 均已被寫為函數, 可直接呼叫, 或透過新增物件來運用.2. 循環程式： 用於1.產生動畫效果或 2.進行連續偵測, 一般寫在 movieclip上, 能不斷偵測是否已達某一分數, 或有碰撞. 3.事件驅動程式： 一般寫在按鈕(button)上, 按下按鈕後才執行內建函數一般寫在場景1的第一個影格上, 函數( )內可代入參數 例如: fscommand(fullscren,true); fscommand(showmenu,tr

6、ue); gotoAndPlay(“場景1”, 10); Stop();亦可透過新增物件, 即可直接運用該物件的屬性與方法(函數) 時間物件(能擷取系統時間, 包括年,月,日,時,分,秒,.等) 聲音物件(能控制聲音大小, 左右聲道等) 影片物件(可使用影片控制的常用功能) 麥克風物件, 攝影機物件(支援外接設備)也可自訂函數(如附程式,說明於後)循環程式之例 不斷偵測, 是否有鍵盤左右鍵被按下（此段程式寫在movieclip內）onClipEvent(enterFrame) If(Key.isDown(Key.LEFT) trace(you push the left key) If(Key

7、.isDown(Key.RIGHT) trace(you push the right key) 事件驅動程式之例 按下按鈕後即輸出一welcome訊息(程式寫在button上）on(release)trace(welcome);程式設計的四個基本結構由Edsgar Dijkstra所提出1.順序結構(sequences)-由前而後依序執行程式碼2.分支結構(branches)-ifelse-判斷何種條件下, 執行何種動作3.迴圈結構(loops)-while, for-常用於複製, 大量資料的一次計算或改變4.模組結構(modules)-function()-共同的功能, 供隨時取用1.順序

8、結構之例一個步驟接著一個步驟作x=10;y=20z=(x+y)*3answer=z;Trace(answer);在輸出面板會顯示結果為90計算兩個movieclip在x的距離, 再放到名為mcc的movieclip中var xpos;xpos=mca._x-mcb._xmcc._x=xpos;2.分支結構之例-比較以下兩者結果foo=45;if (foo10) trace (it is10);if (foo20) trace (it is30);if (foo30) trace (it is30);foo=45;if (foo10) trace (it is10);else if (foo20

9、) trace (it is30);else if (foo30) trace (it is30);判斷條件說明 分支結構所用的判斷條件, 是一些可為真(true)或假(false)的條件(condition) 常用判斷符號 , = , , = , = , != 邏輯運算子 and(&), or(|) , not(!(), %取餘數3.迴圈結構之例-比較以下兩種用法若要使畫面中十個movieclip(instance name由mc1mc10)能同時隱藏i1;while (i=10)thismc+i._visible=false;i+;for (var i=1; i則點選按鈕後即可執行

10、主場景跳下一影格的動作EX:按鈕控制在”場景”與”影格”移動 舉例在按鈕內寫入以下內容, 即可跳至場景2的第一個影格 on(release) gotoAndStop(“場景2”,1);EX:按鈕控制”影片片段”的”停止”與”撥放”在場景1的第一個影格內, 放置入一影片片段(movieClip), 並在”屬性”內設定”實體名稱”為”mp3movie”/讓第一個影格停止, 並設定一變數i的起始變數為0; stop(); i=0;/在按鈕中寫入 on (release) /每按一次按鈕,i就加1i=i+1;/若i除以2取餘數=1, 就告訴mp3movie影片片段-停止if(i%2=1)tellTar

11、get (mp3movie) stop(); /若i除以2取餘數=0, 就告訴mp3movie影片片段-撥放if(i%2=0)tellTarget (mp3movie) play(); EX:按鈕控制”影片片段”的”屬性” 以下舉例影片片段屬性, 可透過按鈕加以控制_x (影片片段在畫面中的x坐標值)_y (影片片段在畫面中的y坐標值)_xscale (影片片段在x方向的比例)_yscale (影片片段在y方向的比例)_alpha (影片片段的透明度)_rotation (影片片段的旋轉角度).在著手開始互動設計前 Input? interface? logic? output?截取系統時間

12、動態變化作品來源: 明志科大視傳系亂數(Random)的運用作品來源: 網路範例作品來源: 課程練習案例與滑鼠的互動作品來源: 明志科大工設系計時器(Timer)的應用與模擬作品來源: 明志科大工設系產品介面繪製 產品外形可用Coreldraw, Phoyoshop, Illustrator製作, 再分別匯入Flash中,轉換成向量元件, 再做去背. 各式開關與按鍵按鈕元件, 螢幕內狀態顯示影片片段常見實體介面組件範例 音量控制: 旋鈕; 拉桿; 按鍵 左右聲道控制: 旋鈕 單鍵開關(on/off共用) 定時開關(設定為5秒自動關閉) 手機的數字按鍵 短按與長按兩模式按鈕立體感的表現作品來源:

13、 明志科大工設科四年級 以Coreldraw繪製數位相機模擬作品來源: 明志科大工設系MP3撥放器模擬作品來源: 明志科大工設系 猜猜這是甚麼產品?Home Theater UPS Design(1)Home Theater UPS Design(2)使用需求? 防盜 電源管理 綠色家電需求 電源保護 耗電狀況瞭解 家庭劇院 電腦與週邊 1.Power Monitor:偵測家中插座電源的使用狀態.2.UPS:不斷電系統, 穩壓與於停電時供電.3.Timer:定時器, 控制插座電源的on/off.家用電源管理系統的可能功能架構背景技術PoE運用電源線傳輸網路訊號RF無線射頻傳輸Nielsen,J

14、 (1993)對系統評估的分類系統接受度社會性可接受度實用性可接受度有用性成本相容性可靠度容易學習使用效率 容易記憶錯誤少 主觀滿意度學習性的探討學習性(Learnability):使用者面對一個完全陌生的系統時, 可以在多短的時間內學會基本操作? 與瞭解介面的意義?個別功能與整合之學習性1. PowerMonitor2. UPS3. Timer4. powerMonitor+UPS5. powerMonitor+Timer6. UPS+Timer7. PowerMonitor+UPS+TimerComplexity?不同模擬介面人性化介面設計Bernhard(1991)對於人性化介面設計提出

15、兩點考量1.功能性結構: 減少複雜性, 提高功能的理解性及使用性, 一致性, 以幫助使用者操作介面, 簡單的系統流程及操作介面的提示與區隔, 來提升產品功能操作上的理解程度2.美學造形:考量造形法則, 操作元件的指示功能與象徵功能, 象徵功能須具時代性與通用性.其它介面型式運用LEDLCD符號型文字-數字型數位站牌介面?主要資訊: 即將到站的客運路線, 到站時間, 車內擁擠程度記憶氣泡益智玩具主要功能: 依記憶難易度亂數顯示, 需依順序按鈕解除, 並可兩人輪戰 吹泡泡的Flash, 用麥克風物件的互動http:/ 打火機-利用滑鼠滾輪的互動http:/ 阿修的部落格 Pac Man 畫對圖案的

16、話會跑走作品來源: 阿修的部落格 汽泡-利用影像辨識, 真實與虛擬物體互動作品來源: 台科大設計所良心建議 練習! 練習! 練習!實作是學會actionscript的不二法門, 現在該做的是, 開始動手! 踩在巨人的肩膀上參考網路相關社群論壇與他人的作品原始檔看對參考書!參考書籍1. 鄭伯鴻, 張智龍, 2004, Flash MX 2004 ActionScript語法參考辭典, 博碩文化, 台北2. Luar, 2004, Flash ActionScript2.0, RIA應用程式開發, 上奇科技, 台北 3. Kaye Jonathan., Castillo David., 2002, Fla