Flash教學 主講人:蘇錦凌
簡介 常見的flash應用有哪些?製作小遊戲、動畫、美化網頁等等。 Eye-4u網頁
操作介面簡介 Flash操作環境的組成:各種面板(提供各種製作動畫的工具) 、選單、編輯區。 如何關閉不必要的面板:在選單的〔視窗〕中可選擇要關閉或要開啓的面板。 面板的展開與縮小:以面板左上角的小三角做調整。 常用的四個面板:工具面板、時間軸面板、屬性面板、元件庫面板。
操作介面簡介 工具面板:分為四個區塊,繪圖工具區、檢視工具區、色彩挑選區、選項區。 使用繪圖工具所畫的圖形會產生筆畫與填色區域。 簡介工具面板的各項功能。 實際畫一個人的臉。
範例一 移動補間動畫 請同學先下載上課所需的圖片 一段動畫的產生:由許多靜態的底片連續而快速的播放所產生。 Step1:放範例一結果 範例一 移動補間動畫 請同學先下載上課所需的圖片 一段動畫的產生:由許多靜態的底片連續而快速的播放所產生。 Step1:放範例一結果 Step2:讀入點陣圖至元件庫([檔案讀入至元件庫]),並以frame by frame方式製作動畫,並播放(控制播放)。
範例一 移動補間動畫 Step3:以補間動畫來做動畫,首先將點陣圖轉成元件(插入轉換成元件),再插入關鍵影格,之後再做補間動畫。 範例一 移動補間動畫 Step3:以補間動畫來做動畫,首先將點陣圖轉成元件(插入轉換成元件),再插入關鍵影格,之後再做補間動畫。 Step4:利用屬性面板設定元件旋轉次數。 Step5:存檔。
範例二 插入背景圖 Step1:以範例一的例子延續下去,並看一下範例二的flash動畫。 Step2:簡介時間軸的各個按鈕用法。 範例二 插入背景圖 Step1:以範例一的例子延續下去,並看一下範例二的flash動畫。 Step2:簡介時間軸的各個按鈕用法。 Step3:將layer1更名成鳥的泡泡,並插入layer2,並把layer2更名成背景。 Step4:讀入背景點陣圖至元件庫([檔案讀入至元件庫]),並由元件庫拉至編輯區。
範例二 插入背景圖 Step5:使用任意變形工具調整背景圖的大小,把layer2拉至最下層。 Step6:存檔。
範例三 淡入效果 Step1:以範例二的例子延續下去,並看一下範例三的flash動畫。 範例三 淡入效果 Step1:以範例二的例子延續下去,並看一下範例三的flash動畫。 Step2:先點選第一影格的小鳥泡泡元件,並且告訴同學圖像元件在屬性面板上面的icon 。 Step3:調整第一影格元件的alpha值為0,最後影格元件的alpha值不變 。 Step4:逐一檢視補間動畫為我們所做的。
範例三 淡入效果 Step5:存檔。
範例四 導引線 Step1:以範例三的例子延續下去,並看一下範例四的flash動畫,簡單說明一下導引線的功用。 範例四 導引線 Step1:以範例三的例子延續下去,並看一下範例四的flash動畫,簡單說明一下導引線的功用。 Step2:將第一影格的元件alpha值調回100。 Step3:按mouse右鍵[增加導引線] ,提示學生增加導引線後圖層會內縮表示 Step4:將除了導引線圖層外,其他的圖層都調成invisible。
範例四 導引線 Step5:以铅筆畫出導引線軌跡,並把元件所在圖層打開成visible後,調整第一影格元件的錨點,以及最後影格元件的錨點(可用方向鍵對得比較準)。 Step6:播放成果給學生看,並把最後影格的元件錨點移偏離導引線,再播放一次。
範例四 導引線 Step7:把所有圖層都設成visible,再放一遍發現有導引線的軌跡不美觀。 Step8:介紹〔控制〕[測試影片]。 範例四 導引線 Step7:把所有圖層都設成visible,再放一遍發現有導引線的軌跡不美觀。 Step8:介紹〔控制〕[測試影片]。 Step9:存檔。
範例五 遮色片 什麼是遮色片?Flash有一種稱為遮色片的圖層,它會遮住此圖層下的被遮色圖層內容,如果你在遮色片圖層上畫了一個圓,那這個圓移動到哪,其下的被遮片圖層就會顯示出該位置的內容。 Step1:開新檔案,先以矩形工具和文字工具建立被遮色圖層,並把被遮色圖層更名為“被遮色片”。
範例五 遮色片 Step2:建立一新圖層拉至最上層,並更名為“遮色片“。 範例五 遮色片 Step2:建立一新圖層拉至最上層,並更名為“遮色片“。 Step3:把被遮色片設成invisible,用橢圓形工具畫一個橢圓,畫好後轉換成元件(插入轉換成元件)。 Step4:在遮色片圖層上,將第40影格設成關鍵影格,並把元件移到定位後建立補間動畫。
範例五 遮色片 Step5:把被遮色片設成visible後,帶領學生一格一格的檢視影格發現需要補齊被遮色片的影格。 範例五 遮色片 Step5:把被遮色片設成visible後,帶領學生一格一格的檢視影格發現需要補齊被遮色片的影格。 Step6:把遮色片圖層設成遮色片後,播放一次,並把背景設成黑色後,再播放一次。 Step7:存檔
範例六 按鈕的製作 如何和自己所做的flash動畫做互動,對它下達指令?按鈕元件的使用是使用者和flash動畫互動最常用的方法之一。 範例六 按鈕的製作 如何和自己所做的flash動畫做互動,對它下達指令?按鈕元件的使用是使用者和flash動畫互動最常用的方法之一。 製作按鈕元件所需要的4個設定:1.一般狀態時按鈕所呈現出來的畫面(一般) 2.滑鼠移至按鈕上方時所呈現出來的畫面(滑入) 3.滑鼠在按鈕上方時按下左鍵時所呈現出來的畫面(按下) 4.按鈕的感應範圍(感應區)。
範例六 按鈕的製作 Step1:放範例六結果,並分4個狀態介紹自己所做的按鈕。 範例六 按鈕的製作 Step1:放範例六結果,並分4個狀態介紹自己所做的按鈕。 Step2:開新檔案,讀入點陣圖至元件庫([檔案讀入至元件庫]), 開始編輯按鈕元件(插入新增元件)。 Step3:開始編輯4個狀態,提醒學生紅色指標指向的是目前顯示在編輯區的影格。
範例六 按鈕的製作 Step4:回到場景一,把按鈕拉出來,告訴學生需用[控制][測試影片]播放。 範例六 按鈕的製作 Step4:回到場景一,把按鈕拉出來,告訴學生需用[控制][測試影片]播放。 Step5:開始寫action script,強調動作面板最上面是顯示button的名稱,進專家模式(自由度比較高)。 Step6:點[Actions][Movie Control][on]
範例六 按鈕的製作 Step7:完成後,測試影片。 Step8:存檔。