19
壹、課程說明 單元名稱 Go!「IFyou do製作 gif 動畫好簡單 單元摘要 經常在網頁中看到許多動態影像,例如著名部落客-老吳的尪仔標所創作的「米 滷蛋」就廣受大眾的喜愛,主要都是透過 GIF Graphics Interchange Format)格 式讓影像間快速互換達到動態效果。因此要製作 GIF 動畫的要素就是要先蒐集 可被製作為動畫的圖片,除了學生本身自己拍攝的影像外,也要藉由這一門課 程引入「創用 CC」的概念,讓學生學習如何找到可用且合法之圖片來源。許多 網頁上呈現的 GIF 動畫不僅影像會動,甚至多數會去除背景,僅留下主角部分, 可使動畫的效果更為突顯。因此課程設計透過影像編輯軟體「Photo Impact」讓 學生學習「去背」的技巧,甚至包括多張圖片去背後的合成。最後指導學生在 Photo Impact 軟體中將影像儲存各種不同的方位,製造動畫的錯位移動效果,並 匯入動畫製作軟體「Ulead GIF Animator」。藉由調整影像間的錯位呈現及時間 差,輸出 GIF 動畫製作成果。 設計者 涂益郎 教師(國立臺南第二高級中學) 學習目標 1、瞭解創用 CC 的授權機制,進行搜尋網路資源取得合法授權的圖片來製作 GIF 動畫。 2、學會利用影像處理軟體 Photo Impact 將圖片去背。 3、學會以影像處理軟體 Ulead GIF Animator 變更影像方位,得以在動畫製作過 程中產生錯位效果。 4 、學會如何將不同方位之影像匯入動畫製作軟體中,並透過調整影像之錯位效 果與時間差產生 GIF 動畫。 課綱範圍 電腦軟體之應用軟體實作 教學節數 本次課程規劃製作 GIF 動畫共 2 節課。 1 節:介紹 GIF 動畫原理、簡介並示範如何使用創用 CC 資源、讓學生進行 影像素材之蒐集。接著介紹影像處理軟體 Photo Impact 以達到影像去 背及產生錯位效果之功能。 2 節:介紹如何將前置完成之影像匯入動畫製作軟體 Ulead GIF Animator 中, 並且學會調整影像間的錯位效果及時間差,最後匯出 GIF 動畫成果。 此外,也可進行學生成果分享,讓學生間相互觀摩優秀作品。 先備知識 1、熟悉網際網路及瀏覽器之使用。 2、熟悉搜尋及蒐集圖片的技巧。 評量方法 根據學生製作的 GIF 動畫圖片成果進行評量。 分享方式

G o!「IF you do 製作 gif - icerc.tnssh.tn.edu.twicerc.tnssh.tn.edu.tw/download/tm/102-1.pdf · 壹、課程說明 單元名稱 「G」o!「IF」 you do—製作gif動畫好簡單

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

壹、課程說明

單元名稱 「G」o!「IF」 you do—製作 gif動畫好簡單

單元摘要

經常在網頁中看到許多動態影像,例如著名部落客-老吳的尪仔標所創作的「米

滷蛋」就廣受大眾的喜愛,主要都是透過 GIF(Graphics Interchange Format)格

式讓影像間快速互換達到動態效果。因此要製作 GIF 動畫的要素就是要先蒐集

可被製作為動畫的圖片,除了學生本身自己拍攝的影像外,也要藉由這一門課

程引入「創用 CC」的概念,讓學生學習如何找到可用且合法之圖片來源。許多

網頁上呈現的 GIF動畫不僅影像會動,甚至多數會去除背景,僅留下主角部分,

可使動畫的效果更為突顯。因此課程設計透過影像編輯軟體「Photo Impact」讓

學生學習「去背」的技巧,甚至包括多張圖片去背後的合成。最後指導學生在

Photo Impact 軟體中將影像儲存各種不同的方位,製造動畫的錯位移動效果,並

匯入動畫製作軟體「Ulead GIF Animator」。藉由調整影像間的錯位呈現及時間

差,輸出 GIF動畫製作成果。

設計者 涂益郎 教師(國立臺南第二高級中學)

學習目標

1、瞭解創用 CC 的授權機制,進行搜尋網路資源取得合法授權的圖片來製作

GIF動畫。

2、學會利用影像處理軟體 Photo Impact 將圖片去背。

3、學會以影像處理軟體 Ulead GIF Animator 變更影像方位,得以在動畫製作過

程中產生錯位效果。

4、學會如何將不同方位之影像匯入動畫製作軟體中,並透過調整影像之錯位效

果與時間差產生 GIF動畫。

課綱範圍 電腦軟體之應用軟體實作

教學節數

本次課程規劃製作 GIF 動畫共 2節課。

第 1節:介紹 GIF動畫原理、簡介並示範如何使用創用 CC 資源、讓學生進行

影像素材之蒐集。接著介紹影像處理軟體 Photo Impact 以達到影像去

背及產生錯位效果之功能。

第 2節:介紹如何將前置完成之影像匯入動畫製作軟體 Ulead GIF Animator 中,

並且學會調整影像間的錯位效果及時間差,最後匯出 GIF動畫成果。

此外,也可進行學生成果分享,讓學生間相互觀摩優秀作品。

先備知識 1、熟悉網際網路及瀏覽器之使用。

2、熟悉搜尋及蒐集圖片的技巧。

評量方法 根據學生製作的 GIF動畫圖片成果進行評量。

分享方式

參考資源

1、中研院資訊科技創新研究中心之台灣創用 CC 計畫 http://creativecommons.tw/

2、高中資訊科資訊融入教學教材之簡易動畫製作

http://hsmaterial.moe.edu.tw/file/computer/7I64/courseviewer.htm

3、老吳的尪仔標 http://www.wretch.cc/blog/samwoo

4、彎彎的塗鴉日誌 http://cwwany.pixnet.net/blog

5、CC Searchhttp://search.creativecommons.org/

6、Open Clip Art Libraryhttp://openclipart.org/

貳、教學活動計畫

教學活動名稱:課程所需應用軟體之簡要說明。

一、前言(3分鐘)。

二、軟體功能簡要說明(3分鐘)。

時間:6分鐘

(第一節課)

教學活動說明:

我們在網路上瀏覽網頁時,時常會看到網頁中呈現許多動態影像,除了以影像軟體 Flash

(副檔名為「.swf」)製作之動態影像外,大部分都是以「GIF(Graphics Interchange Format)」

所製成。因此先透過學生的生活經驗並搭配課綱「電腦軟體之軟體實做應用」,讓學生學

習 GIF動畫的製作。

一、前言:

網路上許多有名的動畫圖片如米滷蛋(下【圖一】)或作家彎彎(下【圖二】)所繪製的

動畫圖片,經常被用作通訊軟體的貼圖或於網頁製作時增加畫面豐富性,而這些動畫圖

片全都是使用 GIF的格式呈現。

【圖一】米滷蛋 GIF動畫(擷取自老吳的尪仔標)

【圖二】彎彎 GIF動畫(擷取自彎彎的塗鴉日誌)

不僅是這些有名的作家或部落客繪製的 GIF動畫,以入口網站 Google搜尋關鍵字「GIF

動畫」時也有許多 GIF 動畫素材如下【圖三】,代表目前在網路上使用 GIF 動畫的機會

相當頻繁,且有許多都是使用者自行開發設計的動畫作品。因此透過軟體應用之課程設

計,不僅讓學生瞭解 GIF 的動畫概念,也要讓學生試著去製作 GIF動畫圖片。

【圖三】以 Google圖片搜尋 GIF動畫之搜尋結果

二、軟體功能簡要說明:

本課程所設計之 GIF動畫製作主要使用兩種應用軟體,分別為負責影像前置處理的 Photo

Impact 及用來匯入圖片製作動畫的 Ulead GIF Animator。以下是針對本課程設計使用上述

兩種應用軟體的簡要說明。

(一)Photo Impact:這款軟體操作容易,適合用於基本的影像處理。製作 GIF動畫需要

蒐集相關的影像素材,此外通常在製作時針對影像所需的前置處理就是去除背

景,僅保留影像中的主要角色。因此在課程的第一節課主要著重在影像的蒐集及

蒐集後的前置去背處理。

(二)Ulead GIF Animator:與 Photo Impact 同屬相同的軟體開發商,當影像素材製作完

畢後,可以透過簡單的匯入並調配影像出現的時間、位置等屬性製造動態圖片的

效果。

上述為教學過程會使用到的兩種應用軟體,因為在教學活動中有許多繁複的操作步驟,

需搭配學習單以利課程之進行,關於學習單內容請參閱「參、學習單」。

教學活動名稱:創用 CC概念介紹及應用於素材蒐集。

一、創用 CC授權概念介紹(10分鐘)。

二、應用創用 CC資源於素材蒐集之實作(4分鐘)。

時間:14分鐘

(第一節課)

教學活動說明:

一、創用 CC 授權概念介紹:

(一)什麼是「創用 CC」?

1、 CC(Creative Commons):一套簡便、彈性的開放性著作權授權契約,希望藉

由個人自願分享,打造知識的共用資源。並將「創作」、「創造」、「創意」容

納於「創」字,而「使用」、「公用」、「共用」容納於「用」字。

2、 「CC」的概念起源在 2002 年由美國的非營利組織 Creative Commons 提出,

台灣版創用 CC 在 2003年由中研院資訊科學研究所引進。

(二)創用 CC 授權的特色:

1、 一套對不特定人授權的開放性授權契約,減少觸法風險,任何人只要遵循著

作人所設的條件,即可自由利用。

2、 簡化授權過程:均無須一一取得著作人的授權,除非是要做超過授權條件的

使用,例如:想要將設定「非商業性」使用的作品商品化。

3、 著作人並未喪失著作權,而是設定授權條件,保留自己真正需要的部份權利,

其餘釋出給公眾使用。

(三)創用 CC 的四種核心授權要素:

1、 姓名標示:使用創用 CC 授權之素材時,若有標註姓名標示,則要在素材中

載明原作者的姓名。

2、 非商業性:若創用 CC 素材中標示非商業性,則使用者在使用素材時應儘量

避免觸及商業利益,使用上僅限非商業行為。

3、 禁止改作:若創用 CC 素材之作者標明禁止改作,代表其他使用者取用此素

材時,不得任意進行修改或編輯。

4、 相同方式分享:當原作者將創用 CC 素材標示以相同方式分享,則代表使用

者利用此素材製作之作品或對原始素材進行編輯、修改後,應該要仿照原版

作者的創用 CC 授權模式,讓新的素材繼續以相同授權方式與其他人分享。

將四種授權要素以圖示表示如下【圖四】:

【圖四】創用 CC 四種授權要素之圖示表示

(四)關於創用 CC 的腦力激盪時間:(需搭配「參、學習單」Part 1進行操作)

1、 題目說明:創用 CC 的四種核心授權要素組合出各種不同的授權方式,但觀

察各種授權要素的組合後,發現其中有兩種核心授權要素不能夠同時存在,

請問是哪兩種?原因為何?

2、 解答:「禁止改作」與「相同方式分享」無法同時並存在一個授權要素組合,

因為「禁止改作」是完全不允許使用者針對創用 CC 素材進行修改;但「相

同方式分享」卻是指使用者修改原始素材後要用相同方式分享。一個禁止修

改,而另一個是修改完畢以相同方式分享,兩者是矛盾的,因此不會同時存

在這兩種授權要素。

二、現存好用的創用 CC 資源:

(一)創用 CC 整合搜尋引擎:CC Search,網址 http://search.creativecommons.org/,是

一個整合多數創用 CC 資源的平台。如下【圖五】所示,在搜尋欄位中輸入關鍵

字,就可以找出包含影像、多媒體、音樂等相關的創用 CC 素材。

(二)插圖素材資料庫:Open Clip Art Library,網址 http://openclipart.org/,全部的圖

庫素材均由創作者採用「CC0」授權釋出,與 CC 不同之處在於 CC0 致力於營造

讓任何人得以任何目的,無條件自由的方式使用資源。最特別的是資料庫中所有

插圖不保留任何權利,在使用插圖時亦無須註明作者姓名,網站畫面如下【圖六】。

【圖五】CC Search 提供整合性的 CC 授權資源(圖片來源:CC Search 網站)

【圖六】Open Clip Art Library提供可無條件自由使用之插圖(圖片來源:Open Clip Art Library)

教學活動名稱:以 Photo Impact軟體進行影像資料前處理。

一、蒐集影像資料(8分鐘)。

二、利用 Photo Impact軟體進行影像背景之去除(22分鐘)。

時間:30分鐘

(第一節課)

教學活動說明:

一、影像素材蒐集之說明:

GIF 動畫主要是透過影像錯位的串連,能讓影像產生動態的效果。所以在製作上需要先

備齊影像素材,才可便於製作 GIF 動畫。由於前一個教學活動已經介紹「創用 CC」的

概念,因此在蒐集影像素材時,教師也可以鼓勵學生儘量透過創用 CC 的概念尋找可用

影像資源,如此一來也可避免學生作品侵害到他人著作權。

在本項教學活動中,主要希望藉由影像處理軟體 Photo Impact 的協助,將影像中過於複

雜甚至造成干擾的背景去除,可使 GIF 動畫的主角更加突顯。為了增加影像編輯的複雜

度,讓學生也可以更加熟稔影像處理軟體的運作,因此在影像處理的操作上,教師一開

始就必須說明主要的學習目標是「去除兩張影像資料的背景,並且將兩張影像合成以製

作 GIF 動畫」。所以在操作上共分為以下八個步驟,為避免一次示範過多操作步驟導致

學生無法吸收,建議教師可分階段示範。在本課程中以兩個操作步驟為一階段,當教師

示範完兩個步驟後,就讓學生進行操作,以達到促進學生學習之功效,並配合學習單(內

容請詳見「參、學習單」)讓學生可以隨時檢核自己的操作進度。

(一)步驟一:蒐集影像素材;在這個操作步驟中教師必須先讓學生瞭解影像資料挑選的原

則,因為影像必須透過 Photo Impact 去除背景,若影像背景過於複雜會增加去除背景

的困難度。因此教師可根據學生的基本能力,引導學生自行選擇「簡易版」(如下【圖

七】)或「進階版」(如下【圖八】)的影像進行去背動作。若無任何影像處理基礎之學

生,教師可建議儘量採取如下【圖七】之圖片,主角明確且背景單純,可快速將背景

影像去除。有些許影像處理基礎的學生,則可建議採取困難度較高的影像進行去背。

透過這樣的動作,也可展現十二年國教正積極推動「差異化教學」之精神。藉由難度

相異的去背過程,期盼讓製作簡單版影像的學生能有明確目標可學習以精進自身能力。

【圖七】簡易版的影像資料讓學生容易去除背景影像

【圖八】複雜版的影像資料在去除背景時難度較高

+ =

+ =

當學生瞭解兩種不同難度的影像去除背景之差異後,就讓學生利用約 8分鐘的時間蒐

集所需影像資料。

二、利用 Photo Impact 軟體進行圖片背景之去除:(以下步驟延續上述步驟一進行)

(一)步驟二:當影像資料蒐集完畢後,接著引導學生將影像匯入影像編輯軟體 Photo Impact

中(課程中使用之軟體版本為 X3 版)。匯入影像之方式相當容易,開啟 Photo Impact

環境後,以「拖曳」方式即可將影像匯入編輯視窗中,如下【圖九】。

【圖九】將圖片拖曳至 Photo Impact 編輯視窗中

(二)步驟三:影像資料插入 Photo Impact 後會被視為「基底影像」,但基底影像無法被修改,

因此為使操作便利,要去背前先複製相同影像並於原處貼上。換句話說,就是在影像

資料去背前應該先複製另一張一模一樣的圖片,並且張貼在與原圖相同的位置,讓兩

張圖片重疊在一起,如下【圖十】。如此一來,原始影像依舊為基底影像,但在「圖層

管理員」中的圖層就會因此增加一個如下【圖十一】所示,以便在不動原始檔案的前

提下,僅針對覆疊的影像進行去背。

【圖十】複製原圖並張貼於基底影像之上

【圖十一】除了基底影像外「圖層管理員」中會多一個影像物件

(三)步驟四:為使影像資料去除背景便利,在上一個步驟中將原始影像進行複製並疊覆在

基底影像上,但開始去背前,一定要記得將基底影像進行隱藏。除了避免修改到原始

影像外,將基底影像隱藏才可以真正看到影像去背後的效果。隱藏基底影像的方式就

是在「圖層管理員中」找到基底影像的位置,接著以滑鼠左鍵點擊該列前方的「眼睛

圖示」,即可將基底影像進行隱藏。隱藏前後之差異如下【圖十二】所示。

【圖十二】在圖層管理員中隱藏基底影像

(四)步驟五:在 Photo Impact 中有一個工具可以快速消除圖片中相連且顏色相似之像素,

該功能稱為「物件神奇橡皮擦工具」。擺放的位置就在左方工具列中,點選「橡皮擦」

圖示後即可看到,如下【圖十三】。除了物件神奇橡皮擦外,還有另一款「物件繪圖橡

皮擦工具」,Photo Impact 中共提供兩款橡皮擦,前者主要透過像素的顏色進行影像移

除之判斷;後者則以滑鼠模擬擦拭動作進行影像像素之刪除。以簡易版影像資料而言,

因背景單純且大多為顏色相似之像素,只要透過物件神奇橡皮擦工具,即可將大部分

的影像背景去除。當物件神奇橡皮擦移動至背景後,接著點擊左鍵即可將背景影像全

部去除且效果相當理想,如下【圖十四】所示。

【圖十三】左方功能列中的橡皮擦圖示提供兩種橡皮擦工具

【圖十四】以「物件神奇橡皮擦」去除影像背景之效果

去除影像背景除了使用物件神奇橡皮擦外,若遇到如下【圖十五】之狀況,雖然已經

將大部分背景去除,但影像主角的邊緣仍有部分影像沒有去除得很乾淨,則可透過另

一款「物件繪圖橡皮擦工具」,直接將影像中的像素透過點擊滑鼠左鍵進行消除。藉由

兩種橡皮擦工具之使用,可以讓影像資料在去除背景的過程更加精緻化。

【圖十五】物件繪圖橡皮擦工具將使去背之影像效果更精緻

(五)步驟六:在開始進行影像去背前,教師已明確說明課程的學習目標,為使學生更加熟

稔影像處理軟體之操作,需將兩張圖片去除背景後合成為單張影像。因此步驟六就是

將去除背景後的兩張影像合而為一。可從兩張影像中擇一,點選後直接將該影像拖曳

至另一個影像視窗中再繼續進行編輯如下【圖十六】。

【圖十六】將影像拖曳至同一個編輯視窗進行合成

通常拖曳完畢後會遇到的狀況就是兩張影像比例不同,需要重新調整影像大小才可能

呈現完美的成果。因此,可以選擇左方功能列中的「變形工具」(如下【圖十七】之圖

示),藉由影像大小之調整,讓影像合成的比例達到平衡。

【圖十七】變形工具可以調整影像大小達到畫面之平衡

(六)步驟七:上述六個步驟操作完畢後,課程時間也應該進行至尾聲。第一節課的主要概

念就是蒐集 GIF 動畫製作的影像資料並針對影像進行去除背景之前處理。第二節課將

延續第一節課的成果進行後續的動畫製作,為使下節課能繼續編輯或調整影像屬性,

因此在步驟七就是要引導學生儲存課程中製作的「影像編輯檔」,副檔名為「.UFO」。

(七)步驟八:蒐集學生成果作品的方式有許多種,最簡易的作法就是教師利用校內資源開

通上傳檔案的共用空間或利用如「MOODLE」等教學平台規劃的個人化上傳空間進行

影像編輯檔之蒐集。除了上述策略外,現存的免費網路儲存空間百家爭鳴,例如

Dropbox、Google Driver 雲端硬碟等,因為存取方式相當簡便,可讓學生利用此類型之

網路資源儲存影像編輯檔。

三、教學活動補充說明:

在教學過程中教師可搭配「參、學習單」中的 Part 2檢核表進行,學生透過檢核表中羅

列的步驟,來確認自己的操作是否有跟上進度。第一節課程結束後建議教師先回收學習

單,待下節課程開始時再發放。一來不用擔心學生會弄丟或忘記攜帶學習單;二來也可

讓教師瞭解學生目前的學習狀況,可為接下來的課程進行調整。如下【圖十八】,第一節

課結束後,學習單上的檢核表應該已經完成至第七項。

【圖十八】學習單上的檢核表需完成至第七項

教學活動名稱:利用 Photo Impact 軟體製作動畫所需素材。

一、影像編輯檔之細部調整與精緻化(5分鐘)。

二、利用改變影像位置、顏色等屬性產生 GIF 動畫製作所

需素材(10分鐘)。

時間:15分鐘

(第二節課)

一、影像去背細部調整與精緻化:

第一節的課程已大致將影像素材進行前置處理,包括去除背景、影像合成等。在第二節

課一開始,除了讓學生先開啟前一節課製作的影像編輯檔外,也再多給予學生約 5 分鐘

的時間去檢視自己的作品。主要進行細部的影像處理,尤其是影像主角與背景的接縫處,

透影像放大檢視,結合兩款內建橡皮擦工具讓影像的呈現更加精緻化。

二、利用改變影像位置、顏色等屬性產生 GIF動畫製作所需素材:

在講解操作步驟前,已針對 GIF 的製作原理進行說明,透過影像的錯位或顏色改變等屬

性之調整,接著快速的變換影像可以產生動態的視覺效果。換句話說,如果要讓靜態影

像變成動畫,就必須將動畫的每一個動作都另存成一張圖片,因此在開始製作動畫之前,

仍須透過 Photo Impact 產生 GIF動畫所需的素材。

V

V

V

V

V

V V

為使動畫效果顯著及豐富,又要考量學生多為初學者的學習狀況,所以在設計上以簡單

的「改變影像位置」入門,待學生精熟軟體操作後,可再更深入複雜的動畫設計。要改

變影像位置,最簡單的方法就是透過上方功能列的「變形工具」。先前在影像資料前處理

之步驟六中就有介紹過變形工具,當時是用來調整影像合成後的大小以符合整體的影像

比例,但變形工具中有另外一個功能如下【圖十九】,可以透過旋轉改變影像的位置。

【圖十九】透過影像旋轉改變影像出現位置

為使動畫效果得以顯著,建議需準備至少三張不同的影像,每一張影像在旋轉完畢後,

都需另存新檔,且儲存格式為「.PNG」。在課綱對應章節的「三、電腦軟體 1-1資料數

位化之圖像編碼」時便已談到,如果要使影像可呈現透明背景的效果僅能採取「.PNG」

或「.GIF」格式。但 GIF 的顏色呈現僅 256 色,雖然最後完成的動畫也是以 GIF 格式

儲存,但在此為確保製作素材顏色之完整度,仍建議在儲存去背後的影像時,以「.PNG」

格式儲存,操作過程如下【圖二十】所示。

【圖二十】每次旋轉影像位置後另存為 PNG格式圖片儲存

影像素材的數量越多,可以讓動畫的效果越豐富,不同旋轉角度的呈現結果如下【圖二

十一】,最左邊為原始圖片,中間則為逆時針旋轉 20度,最右邊為順時針旋轉 20度。

【圖二十一】不同旋轉角度呈現的影像資料

教學活動名稱:利用 Ulead GIF Animator製作 GIF動畫。

一、將影像資料匯入 Ulead GIF Animator調整影像屬性並完

成動畫之製作 (10分鐘)。

二、繳交 GIF動畫作品(5分鐘)。

時間:15分鐘

(第二節課)

一、影像資料前處理完畢後,只要照著以下幾個步驟,即可完成 GIF 動畫的製作。在操作的

過程中,教師一樣可以引導學生透過學習單中的檢核表,檢視自己的製作進度。

(一)步驟一:開啟 Ulead GIF Animator。點選執行檔「ga_main.exe」如下【圖二十二】

所示。

【圖二十二】開啟 Ulead GIF Animator

(二)步驟二:匯入起始影像資料。開啟軟體後會出現啟動精靈畫面如下【圖二十三】,

點選右方「開啟」中的「開啟現有的影像檔」,並且點選前述步驟製作的「.PNG」

格式影像資料,即可在編輯視窗中匯入動畫中的第一個影像。

(三)步驟三:匯入其他影像資料。經過步驟二開啟現有的影像檔後,Ulead GIF Animator

在下方編輯區會出現匯入的影像窗格。若要陸續匯入其他影像資料,只要以滑鼠

拖曳方式移動影像資料至下方編輯區即可。但匯入影像資料時,會出現一個提示

視窗「插入畫格選項」如下【圖二十四】。其中第一個選項為「插至目前畫格中」,

指的是將兩張圖片重複疊放至同一個畫格中;第二個選項為「插成新的畫格」,

代表另闢一個新的畫格,不將兩張圖片覆疊。因為在前一個教學活動中已經將每

一個畫格所需的影像資料都準備完畢,在此可直接選擇第二個選項「插成新的畫

格」進行後續的編輯。

【圖二十三】開啟 Ulead GIF Animator 時出現的啟動精靈視窗

【圖二十四】拖曳影像資料進入編輯視窗所出現的「插入畫格選項」

(四)步驟四:插入畫格後檢查動畫效果。動畫設計中最重要的就是影像資料之編排,

在先前教學活動中已經要求學生製作至少三張不一樣的影像資料,但如何將影像

資料透過編排產生動態效果是此刻最重要的課題。以【圖二十五】為例,現有的

素材為一張直立的原始影像,另外兩張各為順時針及逆時針旋轉 20 度的重製影

像。若要營造類似鐘擺擺盪的動畫效果,只單靠三張影像匯入而成的三個畫格仍

無法有效呈現。因此在編排的腳本上第一張為原始影像,第二張為順時針旋轉

20度,接著要先回到原始影像,最後才是逆時針旋轉 20度,如此編排才可正確

營造出鐘擺的擺盪效果。若想要預覽動畫結果,也可透過畫格下方的播放鍵觀看。

【圖二十五】製作 GIF 動畫產生鐘擺擺盪效果

(五)步驟五:修改影像顯示時間。若將影像資料匯入 Ulead GIF Animator後,單一畫

格預設的顯示時間為 0.1 秒(10/100 秒)。若為了動畫效果需調整畫格的顯示時

間,不管增加或減少只要以滑鼠左鍵點擊單一畫格兩下後,會出現如下【圖二十

六】的視窗,修改「延遲」的秒數即可調整影像的顯示時間。但需特別注意的地

方是若要使影像呈現 0.3 秒,應該將該數值修改為「30」,因為 0.3 秒是 30/100

秒,不可直填入 0.3。

【圖二十六】修改影像的顯示時間

(六)步驟六:匯出動畫。編排完動畫的畫格順序及顯示時間後,最後一個程序就是匯

出 GIF動畫。點選左上方「檔案」後,選擇「另存新檔」中的「GIF 檔」即可將

編輯視窗中的所有畫格以 GIF格式匯出成動畫,如下【圖二十七】。

二、繳交 GIF動畫作品:

製作完畢後,教師可規劃蒐集學生動畫作品的方式,不管是現成的教學平台或免費的網

路儲存空間等。蒐集學生作品後可於下一個教學活動中進行分享,透過「同儕互評法」

讓學生以互評的方式,除了學會欣賞他人作品並培養思考與洞察能力外,更可協助教師

補充觀察不足之處,也可以學生互評結果作為評分參考。

【圖二十七】匯出動畫時選擇 GIF檔儲存動畫作品

三、教學活動補充說明:

在這個階段的教學過程中,教師一樣可搭配「參、學習單」中的 Part 2檢核表進行學生

進度之掌控。若學生按照課程規劃之進度,檢核表上羅列的項目應該已全數完成,如下

【圖二十八】所示。

【圖二十八】檢核表中的所有項目應該全數完成

V

V

V

V

V

V V

V

V

V

V

V

教學活動名稱:成果分享與同儕互評。

分享學生 GIF 動畫作品並以同儕互評方式引導學生學會欣

賞他人作品。

時間:20分鐘

(第二節課)

一、分享學生 GIF動畫作品並以同儕互評方式引導學生學會欣賞他人作品:

蒐集學生動畫作品後,可以利用課程最後的 20分鐘,以作品分享的方式讓學生學會欣賞

同儕作品並自省自己在技術與創意層面上仍不足之處。在最後一個教學活動中,因時間

的關係將稍微簡化傳統「同儕互評教學法」的概念,學生可以省略相互給建議的步驟,

只要根據教師給定的以下三個評斷參考準則,選出除了自己的作品外,心目中覺得最優

秀的三個同儕動畫作品,本活動進行需搭配「參、學習單 Part 3」。

(一)影像處理的精細程度:這項參考準則探究的是技術層面上的細膩程度,包括影像

去背後主要角色與背景間的連接是否有殘餘影像、毛邊或邊緣不平整等狀況。合

成的效果包括影像比例、覆疊處理等是否會造成影像的突兀感,都是這個評斷參

考準則的範疇。

(二)GIF 動畫的豐富性:使用到課程中沒有教授的技法或是在動畫設計上展現複雜的

動畫編排技巧,而使呈現的作品在視覺感官上有高度之豐富性。

(三)創意表現及趣味性:發揮個人創意製作及富趣味性的動畫作品。

結合學習單 Part 3 的內容,在最後 20 分鐘的作品賞析過程中,透過同儕互評每位學生

都會評選出心目中優秀作品的前三名,如【圖二十九】。待課程結束後教師回收學習單,

可藉由學生的評選結果補足教師觀察不足之處並輔助教師評分參考,一舉數得。

【圖二十九】藉由學習單 Part 3進行簡化版的同儕互評法

參、學習單

GIF 動畫製作是著重在操作面的課程,雖然操作步驟不算繁複,但在編輯過程中仍有許

多細節需要注意。對授課教師而言,與其說利用學習單輔助教學,倒不如說是提供學生一份

檢核表,讓學生檢核自己的編輯內容是否切合教師教學的進度。

「G」o 「IF」 you do-製作動畫好簡單學習單

班級: 年 班 姓名: 座號:

Part 1、創用 CC 大哉問:

Q:請問創用 CC 的四種核心授權要素組合出各種不同的授權方式,但觀察各種授權要素

的組合後,發現有兩種核心授權要素不能夠同時存在,請問是哪兩種?原因為何?

A:創用 CC 四大核心授權要素中﹍﹍﹍﹍﹍﹍﹍與﹍﹍﹍﹍﹍﹍﹍不可同時並存。

因為:﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍

﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍

﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍。

Part 2、GIF 動畫編輯檢核表:請在編輯完成後,於該項目前的「□」處打勾以確認完成編輯。

□ 01、蒐集影像資料 □ 07、儲存影像編輯檔「.UFO」

□ 02、匯入影像至 Photo Impact □ 08、以「.PNG」格式儲存多張動

畫影像素材

□ 03、複製影像圖層 □ 09、匯入影像至 GIF Animator

□ 04、隱藏基底影像 □ 10、調整影像顯示時間及位置等

相關屬性

□ 05、去除影像背景 □ 11、輸出 GIF動畫

□ 06、合成影像 □ 12、上傳繳交成果作品

Part 3、除了你自己的作品外,請選出你心目中覺得製作最好的前三名動畫作品:

提供了評斷的參考依據如下:

影像處理的精細程度(包括去背的細膩度、影像合成是否突兀等考量)。

GIF動畫的豐富性(包括是否應用課程教學以外的技巧、動畫呈現的複雜程度)。

創意表現及趣味性。

綜觀以上的參考依據後:

我心目中的第一名是:﹍﹍﹍﹍號作品。

我心目中的第二名是:﹍﹍﹍﹍號作品。

我心目中的第三名是:﹍﹍﹍﹍號作品。