Teaching : 美勞作品與 Flash Animator 的結合

這學期的美勞有個單元叫「校園印象生活」，主要是讓孩子們可以在圖畫紙上表現兩人以上的主題，使他們可以體會出如利用人物前後左右的配置，構成一幅美麗的圖畫。進行的方式是先請孩子們畫一張以「校園生活」為主題的四開大圖畫，完成以後，另外在八開的圖畫紙上彩繪和主題相關的人物，最後將八開圖畫紙上的人物剪下來。剪下來的人物請孩子們在四張的圖畫紙上排排看，看看怎樣擺最完美。
孩子們不但動手排，有的嘴裡還說起故事來了，「很吵」但是我卻沒有馬上制止他們，畢竟，這個活動正在激發他們的創意與美學概念。自己的玩完了，讓他們也可以和別人交換人物玩一玩。當然不能只有玩而已，經過上個星期的彩繪與討論，這個星期要求他們先一個個上臺登記，發表自己決定如何安排作品上的人物，並解釋為什麼要那樣安排。最後才利用短短的時間將人物貼在四開的主題畫上。
兩年前我曾經利用 PhotoImpact 來解說不同位置會呈現出不同的效果，上週，在孩子們個個玩得不奕樂乎的時候，突然想到，其實利用一張背景圖和前景的人物，加上 Flash 的補間動畫，效果應該更好。
於是隨便找了一個人的兩張作品，先利用數位相機拍下來以後，再匯入 Flash 中做動畫。完成以後展示給孩子們看，個個是驚訝連連，直嚷著他們也要做。看他們的反應那麼熱烈，星期一在他們還沒有把剪下來的人物貼上去之前，我以數位相機一張張拍下來，準備當動畫的素材。而如何讓孩子可以在沒有 Flash 基礎下產出動畫的想法也在腦中醞釀著。
昨天晚上，動畫產生器的雛形出來了，只要先將前景的人物「去背」儲存成帶有「透明資訊」的圖形檔，再和背景圖片放在同一個資料夾，就可以利用網頁中設定的參數和我的 Flash 小程式來產出簡易的動畫。今天下午又增強了程式的功能，現在可以先在程式中以滑鼠拖曳人物決定動畫的「路徑」，程式會幫忙產生 HTML 語法，要做的工作就是剪貼後儲存成網頁檔案。

下面就來看看如何使用 animator.swf (下載:請按右鍵另存)

1.準備一張 800x600 的背景圖片和一張「去背」過的人物圖片。

2.將 animator.swf 和前一步驟的兩張圖放在同一個資料夾中。

3.執行 animator.swf 以後會自動進入「語法產生器」畫面

4.在「前景圖片」的輸入區中輸入前景圖片的檔案名稱。

5.在「背景圖片」的輸入區中輸入背景圖片的檔案名稱。

6.在「標題」 的輸入區中輸入作品的說明文字(會出現在動畫的最下向)。

7.都好了就按「Go」的按鈕，準備設定人物的「路徑」。

8.設定人物的「路徑」只要利用滑鼠先將人物「拖曳」到要出現的定點後放開滑鼠按鍵，畫面上會出現帶有數字的路徑定位點，我們可以再用同樣的方法將前景的人物拖曳到下一個位置......

9.完成最後一個位置以後，就按「Go」的按鈕。程式會先讓我們預覽一下動畫，最後會出現網頁語法的對話框。

只要將語法全選以後複製並儲存成網頁即可。如果對結果不滿意，再一次按「Go」的按鈕，即可重新設定路徑並產生新的語法。

當我們利用瀏覽器打開網頁以後，animator.swf 會先將背景和前景人物依序載入，然後剖析 「route」字串成為座標，將前景人物的依序移動到指定的座標。當動畫停止以後，我們可以用滑鼠來拖曳前景的人物移動位置。

如同我們班上的孩子在玩紙本的一樣，這個工具除了可以應用在美勞課，應該也可以應用在語文的說故事......，用自己的作品來當主角，相信孩子應該會更覺得有親切感，更投入教學活動。