FlashActionScript互動程式設計(fordesigner).pptVIP

FlashActionScript互動程式設計 fordesigner 洪偉肯 明志科技大學工業設計系 Flash的發展歷程 FutureSplashAnimator Flash前身 Flash3 Action Flash4 ActionScript簡單運算 變數 判斷邏輯以及執行時期控制物件的內容屬性 由GaryGrossman發明 Flash5 物件導向ActionScript1 0 支援XML與HTML文字 資料庫與購物網站 FlashMX ActionScript2 0類似Java寫作方法 RIA導向 支援VideoWebCam 搭配FlashCommunicationServer FMS 提供組件 compoment 與API方便介面使用 Flash8 增強影音轉換與最佳化 如mov avi script助理 物件式繪圖 漸層及透明度運用 Adobe公司收購 199519961998200020022005 踏出學習的第一步 瞭解系統架構 場景 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 youpushtheleftkey If Key isDown Key RIGHT trace youpushtherightkey 事件驅動程式之例 按下按鈕後即輸出一welcome訊息 程式寫在button上 on release trace welcome 程式設計的四個基本結構 由EdsgarDijkstra所提出順序結構 sequences 由前而後依序執行程式碼分支結構 branches if else 判斷何種條件下 執行何種動作迴圈結構 loops while for 常用於複製 大量資料的一次計算或改變模組結構 modules function 共同的功能 供隨時取用 1 順序結構之例 一個步驟接著一個步驟作x 10 y 20z x y 3answer z Trace answer 在輸出面板會顯示結果為90 計算兩個movieclip在x的距離 再放到名為mcc的movieclip中varxpos xpos mca x mcb xmcc x xpos 2 分支結構之例 比較以下兩者結果 foo 45 if foo 10 trace itis 10 if foo 20 trace itis 30 if foo 30 trace itis 30 foo 45 if foo 10 trace itis 10 elseif foo 20 trace itis 30 elseif foo 30 trace itis 30 判斷條件說明 分支結構所用的判斷條件 是一些可為真 true 或假 false 的條件 condition 常用判斷符號 邏輯運算子and or not 取餘數 3 迴圈結構之例 比較以下兩種用法 若要使畫面中十個movieclip instancename由mc1 mc10 能同時隱藏 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就加1i 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撥放器模擬 作品來源 明志科大工設系 猜猜這是甚麼產品 HomeTheaterUPSDesign 1 HomeTheaterUPSDesign 2 使用需求 防盜電源管理綠色家電需求電源保護耗電狀況瞭解家庭劇院電腦與週邊 1 PowerMonitor 偵測家中插座電源的使用狀態 2 UPS 不斷電系統 穩壓與於停電時供電 3 Timer 定時器 控制插座電源的on off 家用電源管理系統的可能功能架構 背景技術 PoE運用電源線傳輸網路訊號 RF無線射頻傳輸 Nielsen J 1993 對系統評估的分類 系統接受度 社會性可接受度 實用性可接受度 有用性 成本 相容性 可靠度 容易學習 使用效率 容易記憶 錯誤少 主觀滿意度 學習性的探討 學習性 Learnability 使用者面對一個完全陌生的系統時 可以在多短的時間內學會基本操作 與瞭解介面的意義 個別功能與整合之學習性 PowerMonitorUPSTimerpowerMonitor UPSpowerMonitor TimerUPS TimerPowerMonitor UPS Timer Complexity 不同模擬介面 人性化介面設計 Bernhard 1991 對於人性化介面設計提出兩點考量1 功能性結構 減少複雜性 提高功能的理解性及使用性 一致性 以幫助使用者操作介面 簡單的系統流程及操作介面的提示與區隔 來提升產品功能操作上的理解程度2 美學造形 考量造形法則 操作元件的指示功能與象徵功能 象徵功能須具時代性與通用性 其它介面型式運用 LED LCD 符號型 文字 數字型 數位站牌介面 主要資訊 即將到站的客運路線 到站時間 車內擁擠程度 記憶氣泡益智玩具 主要功能 依記憶難易度亂數顯示 需依順序按鈕解除 並可兩人輪戰 吹泡泡的Flash 用麥克風物件的互動 作品來源 阿修的部落格 PacMan 畫對圖案的話會跑走 作品來源 阿修的部落格 汽泡 利用影像辨識 真實與虛擬物體互動 作品來源 台科大設計所 良心建議 練習 練習 練習 實作是學會actionscript的不二法門 現在該做的是 開始動手 踩在巨人的肩膀上參考網路相關社群論壇與他人的作