Flash Action Script 互動程式設計(for designer).ppt

,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, 搭配Flash Communication Server(FMS), 提供組件(compoment)與API方便介面使用. Flash 8 (增強影音轉換與最佳化, 如movavi, script助理,物件式繪圖、漸層及透明度運用, Adobe公司收購),1995 1996 1998 2000 2002 2005,踏出學習的第一步,瞭解系統架構: 場景(scene), 圖層(layer), 影格(frame), 元件庫(library), 輸出入的格式. 瞭解元件類型: 圖像元件(graphic), 影片片段元件(MovieClip), 按鈕元件(button). 並.可載入聲音物件, 影片物件等 瞭解基本動畫技巧: 繪圖, 移動補間與大小漸變, 加減速, 淡入淡出, 形變, 遮罩處理, 路徑動畫.,元件內還可放其它元件,影片片段元件內, 可放另一個影片片段, 圖像元件或按鈕元件, 並同時載入聲音等 按鈕亦可, 以下是在按鈕中的”一般”, “滑入”, “按下”三個狀態下, 分別放置”扇頁旋轉”, “扇頁逐漸停止”, ”扇頁炸開”三段影片片段的效果,四種放置actionscript的地方,影格（frame) 按鈕(button) 影片片段(movieclip) 外部as檔案 將原本寫在時間軸的影格指令寫到外部的純文字檔裡, 如outside.as, 在影格則寫上： #include “outside.as“ (注意若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; mouseMove; mouseUp; keyDown; keyUp;,三種actionscript程式執行方式,1. 內建函數(一次性程式): 用於控制與系統, 許多複雜的功能, 均已被寫為函數, 可直接呼叫, 或透過新增物件來運用. 2. 循環程式： 用於1.產生動畫效果或 2.進行連續偵測, 一般寫在 movieclip上, 能不斷偵測是否已達某一分數, 或有碰撞. 3.事件驅動程式： 一般寫在按鈕(button)上, 按下按鈕後才執行,內建函數,一般寫在場景1的第一個影格上, 函數( )內可代入參數 例如: fscommand(“fullscren“,“true“); fscommand(“showmenu“,“true“); gotoAndPlay(“場景1”, 10); Stop(); 亦可透過新增物件, 即可直接運用該物件的屬性與方法(函數) 時間物件(能擷取系統時間, 包括年,月,日,時,分,秒,等) 聲音物件(能控制聲音大小, 左右聲道等) 影片物件(可使用影片控制的常用功能) 麥克風物件, 攝影機物件(支援外接設備) 也可自訂函數(如附程式,說明於後),循環程式之例,不斷偵測, 是否有鍵盤左右鍵被按下（此段程式寫在movieclip內） onClipEvent(enterFrame) If(Key.isDown(Key.LEFT) trace(“you push the left key“) If(Key.isDown(Key.RIGHT) trace(“you push the right key“) ,事件驅動程式之例,按下按鈕後即輸出一welcome訊息(程式寫在button上） on(release) trace(“welcome“); ,程式設計的四個基本結構,由Edsgar Dijkstra所提出 順序結構(sequences)-由前而後依序執行程式碼 分支結構(branches)-ifelse-判斷何種條件下, 執行何種動作 迴圈結構(loops)-while, for-常用於複製, 大量資料的一次計算或改變 模組結構(modules)-function()-共同的功能, 供隨時取用,1.順序結構之例,一個步驟接著一個步驟作 x=10; y=20 z=(x+y)*3 answer=z; Trace(answer); 在輸出面板會顯示結果為90,計算兩個movieclip在x的距離, 再放到名為mcc的movieclip中 var xpos; xpos=mca._x-mcb._x mcc._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) trace (“it is30“); else if (foo30) trace (“it is30“); ,判斷條件說明,分支結構所用的判斷條件, 是一些可為真(true)或假(false)的條件(condition) 常用判斷符號 , = , , = , = , != 邏輯運算子 and(&), or(|) , not(!(), %取餘數,3.迴圈結構之例-比較以下兩種用法,若要使畫面中十個movieclip(instance name由mc1mc10)能同時隱藏,4.模組結構之例-副程式,若按鈕後, 固定執行某一動作時, 即可透過副程式進行 在場景1的第一格中寫入一個自訂(命名為jump)的全域函數 _global.jump = function() nextFrame(); 之後在按鈕中寫入: on(release) Jump(); 則點選按鈕後即可執行主場景跳下一影格的動作,EX:按鈕控制在”場景”與”影格”移動,舉例在按鈕內寫入以下內容, 即可跳至場景2的第一個影格 on(release) gotoAndStop(“場景2”,1); ,EX:按鈕控制”影片片段”的”停止”與”撥放”,在場景1的第一個影格內, 放置入一影片片段(movieClip), 並在”屬性”內設定”實體名稱”為”mp3movie” /讓第一個影格停止, 並設定一變數i的起始變數為0; stop(); i=0; /在按鈕中寫入 on (release) /每按一次按鈕,i就加1 i=i+1; /若i除以2取餘數=1, 就告訴mp3movie影片片段-停止 if(i%2=1) tellTarget (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?,截取系統時間 動態變化,作品來源: 明志科大視傳系,亂數(Random)的運用,作品來源: 網路範例,作品來源: 課程練習案例,與滑鼠的互動,作品來源: 明志科大工設系,計時器(Timer)的應用與模擬,作品來源: 明志科大工設系,產品介面繪製,產品外形可用Coreldraw, Phoyoshop, Illustrator製作, 再分別匯入Flash中,轉換成向量元件, 再做去背. 各式開關與按鍵按鈕元件, 螢幕內狀態顯示影片片段,常見實體介面組件範例,音量控制: 旋鈕; 拉桿; 按鍵 左右聲道控制: 旋鈕 單鍵開關(on/off共用) 定時開關(設定為5秒自動關閉) 手機的數字按鍵 短按與長按兩模式按鈕,立體感的表現,作品來源: 明志科大工設科四年級 以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 (1993)對系統評估的分類,系統接受度,社會性可接受度,實用性可接受度,有用性,成本,相容性,可靠度,容易學習,使用效率,容易記憶,錯誤少,主觀滿意度,學習性的探討,學習性(Learnability):使用者面對一個完全陌生的系統時, 可以在多短的時間內學會基本操作? 與瞭解介面的意義?,個別功能與整合之學習性,PowerMonitor UPS Timer powerMonitor+UPS powerMonitor+Timer UPS+Timer PowerMonitor+UPS+Timer,Complexity ?,不同模擬介面,人性化介面設計,Bernhard(1991)對於人性化介面設計提出兩點考量 1.功能性結構: 減少複雜性, 提高功能的理解性及使用性, 一致性, 以幫助使用者操作介面, 簡單的系統流程及操作介面的提示與區隔, 來提升產品功能操作上的理解程度 2.美學造形:考量造形法則, 操作元件的指示功能與象徵功能, 象徵功能須具時代性與通用性.,其它介面型式運用,LED,LCD,符號型,文字-數字型,數位站牌介面?,主要資訊: 即將到站的客運路線, 到站時間, 車內擁擠程度,記憶氣泡益智玩具,主要功能: 依記憶難易度亂數顯示, 需依順序按鈕解除, 並可兩人輪戰,吹泡泡的Flash, 用麥克風物件的互動 /works/bubble/ 打火機-利用滑鼠滾輪的互動 /works/lighter/,作品來源: 阿修的部落格,Pac Man 畫對圖案的話會跑走,作品來源: 阿修的部落格,汽泡-利用影像辨識, 真實與虛擬物體互動,作品來源: 台科大設計所,良心建議,練習! 練習! 練習! 實作是學會actionscript的不二法門, 現在該做的是, 開始動手! 踩在巨人的肩膀上 參考網路相關社群論壇與他人的作品原始檔 看對參考書!,參考書籍,鄭伯鴻, 張智龍, 2004, Flash MX 2004 ActionScript語法參考辭典, 博碩文化, 台北 Luar, 2004, Flash ActionScript2.0, RIA應用程式開發, 上奇科技, 台北 Kaye Jonathan., Castillo David., 2002, Flash MX for Interact