Flash教學 主講人:蘇錦凌.

Presentation on theme: "Flash教學 主講人:蘇錦凌."— Presentation transcript:

1 Flash教學 主講人:蘇錦凌

2 簡介 常見的flash應用有哪些？製作小遊戲、動畫、美化網頁等等。 Eye-4u網頁

3 操作介面簡介 Flash操作環境的組成：各種面板(提供各種製作動畫的工具) 、選單、編輯區。
如何關閉不必要的面板：在選單的〔視窗〕中可選擇要關閉或要開啓的面板。 面板的展開與縮小：以面板左上角的小三角做調整。 常用的四個面板：工具面板、時間軸面板、屬性面板、元件庫面板。

4 操作介面簡介 工具面板：分為四個區塊，繪圖工具區、檢視工具區、色彩挑選區、選項區。 使用繪圖工具所畫的圖形會產生筆畫與填色區域。
簡介工具面板的各項功能。 實際畫一個人的臉。

5 範例一 移動補間動畫 請同學先下載上課所需的圖片 一段動畫的產生：由許多靜態的底片連續而快速的播放所產生。 Step1:放範例一結果
範例一　移動補間動畫 請同學先下載上課所需的圖片 一段動畫的產生：由許多靜態的底片連續而快速的播放所產生。 Step1:放範例一結果 Step2:讀入點陣圖至元件庫([檔案讀入至元件庫])，並以frame by frame方式製作動畫，並播放(控制播放)。

6 範例一 移動補間動畫 Step3:以補間動畫來做動畫，首先將點陣圖轉成元件(插入轉換成元件)，再插入關鍵影格，之後再做補間動畫。
範例一　移動補間動畫 Step3:以補間動畫來做動畫，首先將點陣圖轉成元件(插入轉換成元件)，再插入關鍵影格，之後再做補間動畫。 Step4:利用屬性面板設定元件旋轉次數。 Step5:存檔。

7 範例二 插入背景圖 Step1:以範例一的例子延續下去，並看一下範例二的flash動畫。 Step2:簡介時間軸的各個按鈕用法。
範例二　插入背景圖 Step1:以範例一的例子延續下去，並看一下範例二的flash動畫。 Step2:簡介時間軸的各個按鈕用法。 Step3:將layer1更名成鳥的泡泡，並插入layer2，並把layer2更名成背景。 Step4:讀入背景點陣圖至元件庫([檔案讀入至元件庫])，並由元件庫拉至編輯區。

8 範例二　插入背景圖 Step5:使用任意變形工具調整背景圖的大小，把layer2拉至最下層。 Step6:存檔。

9 範例三 淡入效果 Step1:以範例二的例子延續下去，並看一下範例三的flash動畫。
範例三　淡入效果 Step1:以範例二的例子延續下去，並看一下範例三的flash動畫。 Step2:先點選第一影格的小鳥泡泡元件，並且告訴同學圖像元件在屬性面板上面的icon 。 Step3:調整第一影格元件的alpha值為0，最後影格元件的alpha值不變 。 Step4:逐一檢視補間動畫為我們所做的。

10 範例三　淡入效果 Step5:存檔。

11 範例四 導引線 Step1:以範例三的例子延續下去，並看一下範例四的flash動畫，簡單說明一下導引線的功用。
範例四　導引線 Step1:以範例三的例子延續下去，並看一下範例四的flash動畫，簡單說明一下導引線的功用。 Step2:將第一影格的元件alpha值調回100。 Step3:按mouse右鍵[增加導引線] ，提示學生增加導引線後圖層會內縮表示 Step4:將除了導引線圖層外，其他的圖層都調成invisible。

12 範例四　導引線 Step5:以铅筆畫出導引線軌跡，並把元件所在圖層打開成visible後，調整第一影格元件的錨點，以及最後影格元件的錨點(可用方向鍵對得比較準)。 Step6:播放成果給學生看，並把最後影格的元件錨點移偏離導引線，再播放一次。

13 範例四 導引線 Ｓtep7:把所有圖層都設成visible，再放一遍發現有導引線的軌跡不美觀。 Step8:介紹〔控制〕[測試影片]。
範例四　導引線 Ｓtep7:把所有圖層都設成visible，再放一遍發現有導引線的軌跡不美觀。 Step8:介紹〔控制〕[測試影片]。 Step9:存檔。

14 範例五　遮色片 什麼是遮色片？Flash有一種稱為遮色片的圖層，它會遮住此圖層下的被遮色圖層內容，如果你在遮色片圖層上畫了一個圓，那這個圓移動到哪，其下的被遮片圖層就會顯示出該位置的內容。 Step1:開新檔案，先以矩形工具和文字工具建立被遮色圖層，並把被遮色圖層更名為“被遮色片”。

15 範例五 遮色片 Step2:建立一新圖層拉至最上層，並更名為“遮色片“。
範例五　遮色片 Step2:建立一新圖層拉至最上層，並更名為“遮色片“。 Step3:把被遮色片設成invisible，用橢圓形工具畫一個橢圓，畫好後轉換成元件(插入轉換成元件)。 Step4:在遮色片圖層上，將第40影格設成關鍵影格，並把元件移到定位後建立補間動畫。

16 範例五 遮色片 Step5:把被遮色片設成visible後，帶領學生一格一格的檢視影格發現需要補齊被遮色片的影格。
範例五　遮色片 Step5:把被遮色片設成visible後，帶領學生一格一格的檢視影格發現需要補齊被遮色片的影格。 Step6:把遮色片圖層設成遮色片後，播放一次，並把背景設成黑色後，再播放一次。 Step7：存檔

17 範例六 按鈕的製作 如何和自己所做的flash動畫做互動，對它下達指令？按鈕元件的使用是使用者和flash動畫互動最常用的方法之一。
範例六　按鈕的製作 如何和自己所做的flash動畫做互動，對它下達指令？按鈕元件的使用是使用者和flash動畫互動最常用的方法之一。 製作按鈕元件所需要的4個設定：1.一般狀態時按鈕所呈現出來的畫面（一般） 2.滑鼠移至按鈕上方時所呈現出來的畫面(滑入) 3.滑鼠在按鈕上方時按下左鍵時所呈現出來的畫面(按下) 4.按鈕的感應範圍(感應區)。

18 範例六 按鈕的製作 Step1:放範例六結果，並分4個狀態介紹自己所做的按鈕。
範例六　按鈕的製作 Step1:放範例六結果，並分4個狀態介紹自己所做的按鈕。 Step2:開新檔案，讀入點陣圖至元件庫([檔案讀入至元件庫])， 開始編輯按鈕元件(插入新增元件)。 Step3:開始編輯4個狀態，提醒學生紅色指標指向的是目前顯示在編輯區的影格。

19 範例六 按鈕的製作 Step4:回到場景一，把按鈕拉出來，告訴學生需用[控制][測試影片]播放。
範例六　按鈕的製作 Step4:回到場景一，把按鈕拉出來，告訴學生需用[控制][測試影片]播放。 Step5:開始寫action script，強調動作面板最上面是顯示button的名稱，進專家模式(自由度比較高)。 Step6:點[Actions][Movie Control][on]

20 範例六　按鈕的製作 Step7:完成後，測試影片。 Step8:存檔。