2010年3月26日 星期五

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」字串成為座標,將前景人物的依序移動到指定的座標。當動畫停止以後,我們可以用滑鼠來拖曳前景的人物移動位置。

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

5 則留言:

  1. 試成了, 謝謝您. 由於我的前景圖比較小, 又在圖片的下方,剛開始拉的動作不夠大,沒看到路徑, 以為不成, 再試試就好了. 十分感謝!

    回覆刪除
  2. 老師
    請問一下,唐詩迷宮我可以修改成論語迷宮嗎?
    因為我現在在請海外的學生背論語耶!如果可以可以傳授一下嗎?
    謝謝
    紐西蘭董JOY

    回覆刪除
  3. 雄老師好用心唷! 真棒!

    請問雄老師,這個語法產生器只能有一個移動物件嗎? 因為雄老師在文中提到這個美勞單元是希望小朋友們能表現兩人以上的主題,所以想確定一下這一點。

    謝謝雄老師!:D

    回覆刪除
  4. Erin :
    謝謝!
    當初只是要配合我們班的美勞單元,這個工具沒有花多少時間設計,功能還算陽春,因此只能放一張背景圖和一張前景圖片。
    兩人以上當初指的是,背景圖上有一個無法動的,前景上的則是會動的。

    回覆刪除

 
© 2009. Design by Pocket