自由軟體與電腦動畫

課程總覽


單元一:自由軟體與開源運動/3

單元二:互動玩科學/3

單元三:電腦動畫/4

單元四:中文快打高手/4

單元五:小貓踢足球/4


學校日簡報


學校日簡報三年級下學期

單元一:自由軟體與開源運動

什麼是自由軟體?

自由軟體(英語:free software),根據自由軟體基金會(1985)對其的定義,是一尊重使用者自由的軟體。與自由軟體相對的是專有軟體(英語:proprietary software,或譯為私有軟體、封閉軟體),專有軟體與自由軟體並非完全相反的,例如:自由軟體也可以收費(free 不是免費)自由軟體可以提供商業服務(維護或諮詢服務)、自由軟體作者也擁有「著作權」保護

所謂使用者的自由是指:

專有軟體的不自由(限制)

為了達到以上自由使用的目的,「開放原始碼」(簡稱「開源」)是自由軟體的必要條件。另外為了達到在使用上不受軟體限制的目的,使用「開放格式」也是自由軟體的條件之一(非必要),然而自由軟體也會支援封閉格式,目的是要協助使用者從封閉格式轉換成開放格式。

教育部自由軟體數位資源」彙整了適合學生使用,並且已經中文化的自由軟體,分為辦公、美工、影音、網路、程式、教育六大類,有興趣的同學請自行點擊連結瀏覽。也可以自己用「自由軟體」關鍵字搜尋其他沒有介紹到的自由軟體。

開源遊戲也是自由軟體的一種,在這裡可以找到「開源遊戲列表」,當然你也可以自己用關鍵字搜尋更多新的開源遊戲。

開源運動

開源運動是為了推廣自由軟體而興起的一項社會運動,隨著開源運動的推展這項觀念也影響了各個不同的社會領域的專業人士,他們也發起了類似於自由軟體的運動,例如:開源硬體、開放內容、開放資料、開放課程、開放政府、開放貨幣......等等,這些運動的發起皆遵循著「開源」的精神。

開源硬體自由釋放詳細資訊的硬體設計,如電路圖材料清單電路板布局數據,任何人都可以取得這些資訊並製造出相同的設備。

開放內容可以自由複製或修改的原創著作,例如:文字、圖片、音樂、影片、教材....等等內容,任何人都可以取得並修改再利用。

開放資料是一種經過挑選與許可的政府資料。這種資料不受著作權專利權以及其他限制,可以開放給社會公眾,任何人都可以自由使用。

開放課程將課堂學習的內容網路化,對所有人公開以滿足全民終身學習求知的慾望

開放政府:是指透過公共政策參與平臺,讓全民都能自由地對國家政策發表意見並參與制定決策。是民主社會發展的一項重要工具。

開放貨幣沒有中央機構或銀行的控制,而是通過整網路來協力發行與營運的數字貨幣。任何人都可以自由參與。

創用 CC 授權

傳統的著作權中有兩種極端,一端是「保留所有權利」(All Rights Reserved),另一端則是「不保留任何權利」(即公有領域,public domain)。然而開放內容需要更有彈性的做法,使得創作者可以「保留部分權利」(Some Rights Reserved),開放部份權利給社會大眾,以便促進資訊的流通

創用 CC 授權允許作者選擇不同的授權條款,授權條款包含以下四個條件:

混合搭配這些條件,產生了16種可能的組合,其中 11 種是有效的創作共享授權,5 個是無效組合。由於 98% 的作者要求要有姓名標示,因此 11 種有效組合中,只剩下 6 種為目前常用的創用 CC 授權:

課後測驗

參考答案

單元二:互動玩科學

PhET 是一個延伸教育研究專案計畫,透過動畫模擬遊戲的方式吸引學生探索與發現數學、科學方面的各種知識。它是於 2002 年由諾貝爾經濟學獎得主,科羅拉多大學的 Carl Wieman 教授所發起的。


在課堂上將遊玩以下單元:


執行離線版,需要在電腦裡面先安裝「JAVA 執行函式庫」,下載的連結在:

https://www.java.com/zh-TW/download/manual.jsp

單元三:電腦動畫

動畫的原理視覺暫留

眼睛看到的景物會在大腦記憶中停留一段時間。而利用這項因素,可以讓人感覺看到動態畫面。

卡通的製作通常一秒中出現 16 張以上的畫面,就可以讓人產生動態畫面感覺。

電視節目所制定的動畫規格有三種:NTSC 是每秒30張,PAL 和 SECAM 則是每秒 25 張。因此如果卡通影片要在電視上播出(或製作 DVD),就不能只有 16 張。

紙動畫幕後製作紀錄片:Honda "Paper" - Behind the Scenes with PES

火柴人動畫軟體

Windows 請使用 Pivot animator,Mac 請使用 Stykz,請點擊下方連結下載。如果使用平板的話,請下載 Stick Nodes,功能比 Stykz 更強大。  

電腦動畫概念

在「火柴人動畫軟體」中所有的動畫物件都是由點、線、圓三種元件組成的,而且動畫物件直接被當成是骨架來操作,因為只有骨頭沒有肌肉和皮膚,看起來很像小朋友畫的火柴人,因此稱為「火柴人動畫」。

Pivot Animator 主選單:

動畫物件模型編輯選單:

以下為所有工具箱圖示的解說,注意事項:

將動畫物件移到舞臺中央


將動畫物件左右交換


修改動畫物件顏色


連結不同動畫物件(讓物件連動)


將動畫物件往上移一層


將動畫物件往下移一層


複製動畫物件


貼上動畫物件

加入圓圈


加入直線


加入多邊形



複製線段


在線段與圓圈之間切換


切換圓圈的樣式


切換直線的樣式


改變線段粗細

切換節點的樣式(關節或固定)


將指定節點變更為中心點


在線段中間插入新節點


移除線段



改變線段顏色


將動畫物件左右交換


將線段往上移一層


線段往下移一層

操作練習

然後點選「File」選單中的「New」,清空預設模型

2. 點擊工具箱「禁止符號」圖示,將直線修改成圓圈,當作鳥頭


3. 點擊工具箱「圓圈」圖示,在中心點上按滑鼠左鍵,往右下移動到適當的位置點一下。這是鳥的身體。

4. 選擇「線條」工具,從其它的紅點延伸畫出鳥和鳥,注意鳥尾不需要最後一條直線。

5. 使用「選擇」工具,調整鳥身體各個部位的位置。

6. 點擊節點 1和「顏色選擇」工具,挑選適當的色彩,然後點擊節點 2和「顏色選擇」工具,改成同一個顏色,最後點擊 3 的位置將整個多邊形選起來,修改成一樣的顏色。

7. 點擊節點 1,從工具箱中找到「切換圓圈樣式」按鈕,將圓圈從空心改成實心,然後點擊「顏色選擇」工具,挑選自己喜歡的顏色

8. 鳥頭的顏色修改步驟與前一個步驟一樣。

9. 點擊「File」選單中的「Add to Animation」選項,將製作好的物件模型,新增到舞臺上。

匯出動畫檔

在「File」選單中選擇「Export Animation」可以匯出成自動播放的動畫檔,如果選擇「Save Animation」則是儲存成可編輯的 .piv 檔案。匯出格式如下:


建議匯出成 GIF 格式,可以節省硬碟空間。

優秀作品

單元四:中文快打高手

繁體中文輸入法的歷史可溯及自1976年由朱邦復發明之倉頡輸入法開始。

目前繁體中文輸入法主要有:

中文鍵盤

早期的中文鍵盤是在英文鍵盤上面貼上中文輸入法的貼紙,現在則是在鍵盤上直接印刷,不過幾乎所有的鍵盤印刷的輸入法都是倉頡輸入法和注音輸入法,如果需要其他輸入法的鍵盤配置,就只能自己買貼紙回來 DIY。

中英文切換

注音輸入法操作步驟

輸入標點符號的方式

請連結 https://typing.tw 或是 https://e.meps.tp.edu.tw/typing/ 開始練習中打。

目標是每分鐘 12 個中文字或 36 個注音符號,正確率需達 90% 以上。測驗以三分鐘平均值是否達標來計算。

詞語輸入練習

嘗試中文輸入法輸入以下「繞口令」,由於拼音相似度高容易造成輸入軟體誤判,需要進行事後校對和選字。

單元五:小貓踢足球

互動式電腦動畫

本單元介紹另外一種電腦動畫:「互動式電腦動畫」,這種動畫常常出現在遊戲軟體中,使用者可以透過輸入裝置(例如:觸控筆、滑鼠、鍵盤、搖桿...等等)操控遊戲中的主角,主角則會依據指示展現動畫效果。

要達成「互動」的目標就必須藉助「動畫程式」的幫助。如果把電腦動畫依照動畫程式的運算方式來分類,可分為四種:

角色動畫

移動動畫

背景動畫

鏡頭動畫

Scratch 介紹

Scratch是麻省理工媒體實驗室終身幼稚園組開發的一套電腦程式開發平台,旨在讓程式設計語言初學者不需先學習語言語法便能設計產品。開發者期望通過學習Scratch,啟發和激勵用戶在愉快的環境下經由操作(如設計互動故事、多人遊戲)去學習程式設計數學計算知識,同時獲得創造性思考邏輯編程,和協同工作的體驗。

Scratch 提供免費註冊帳號,擁有帳號的小朋友可以將作品上傳並儲存於 Scratch 提供的雲端硬碟,也可以線上編輯程式或下載到自己的電腦裡。Scratch 會根據網路票選和點擊率,推薦雲端硬碟裡的熱門作品或優秀作品,讓小朋友線上試玩,還可以觀摩學習別人寫的程式。

請先連結 Scratch 官方網站 https://scratch.mit.edu/  註冊帳號,以取得網路硬碟空間。

登入後,按左上角的「創造」,就可以在瀏覽器裡直接寫程式。

線上寫程式:https://scratch.mit.edu/projects/editor

下載 Scratch Desktop:https://scratch.mit.edu/download,Mac 電腦的使用者還可以透過 App Store 安裝。

操作步驟

步驟一

打開 scratch desktop,然後在視窗右下角找到「舞台」,點擊舞台下方的圓形按鈕二下,出現「範例背景」畫面後,選擇「Playing Field」背景圖。

步驟二

點選舞台右邊的小貓圖示,然後將角色名稱從「Sprite1」改成「小貓」,尺寸從「100」改為「60」

在這個窗格中,可以觀察小貓的位置:x 代表水平位置,y 代表垂直位置,移動小貓時,可以看到這兩個數字會變化。

按「眼睛」圖示可以切換角色是否要顯示還是隱藏。

方向是指小貓臉朝哪一個角度,0 度是朝上,90 度是朝右,-90度朝左,180 度朝下。點擊「角度」數字後可以修改,試試看小貓是否會旋轉到你要的方向。

步驟三

透過左上角的「造型」分頁,查看角色小貓的造型,總共有兩個,只要快速切換這兩個造型就可以產生角色動畫。

切回「程式」分頁,從左側的程式積木分類中找到「外觀」裡面的「造型換成下一個」積木,將這個積木拖曳到右邊的窗格。

用滑鼠持續快速點擊這個積木,然後觀察舞台上的小貓是否會動。

步驟四

為了讓動畫自動展示,我們需要組合以下三個積木:

組合方式如右圖,按右上角的「綠旗子」按鈕,觀察小貓是否會自動切換造型。

步驟五

剛剛的程式因為造型切換速度太快,我們加上「控制」分類中的「等候 秒」積木,時間設定為 0.2

按右上角的「綠旗子」按鈕,觀察小貓動畫跟剛剛有什麼不同?

到這裡小貓的「角色動畫」(原地踏步)製作完畢。

步驟六

接下來製作小貓的「移動動畫」,讓小貓可以真正在舞台上走動。

拉出底下三個積木,組合如右圖:

按「綠旗子」按鈕之後,發現小貓會往前走,碰到舞台邊緣時會停下來。必須把小貓拖回原來的位置,才會再走一次。

步驟七

加入「動作」分類中的「碰到邊緣就反彈」積木,放在「移動 點」積木的下方。

按「綠旗子」按鈕之後,發現小貓碰到舞台邊緣時會往回走。但是往回走時會上下顛倒。

步驟八

為了解決造型顛倒的問題,請從「動作」分類中的「旋轉方式設為」積木

這個積木只需要執行一次,因此放在「重複無限次」積木的上面

三種旋轉方式分別是:

按下「綠旗子」按鈕之後,觀察「往回走時會上下顛倒」的問題是否已經解決。

到這裡小貓的「移動動畫」(向前移動)製作完畢。

步驟九

要讓玩家可以控制小貓才會有「互動」的感覺,控制方式主要有「滑鼠」和「鍵盤」兩種,這裡示範的是「滑鼠」控制,從「動作」分類中找到「面朝鼠標向」積木,放在「移動 點」積木的上面,也就是說先轉方向然後再移動,這樣比較合理。

按下「綠旗子」按鈕之後,移動滑鼠游標,觀察小貓是否會朝著滑鼠走過來。在小貓還沒到達滑鼠位置時移動滑鼠游標,看看小貓是否會立刻改變成新方向。


步驟十

按「角色」窗格右下角的圓形按鈕兩次,加入新的角色「Soccer Ball」

將角色名稱改為「足球」,尺寸改為「40」

切換到「造型」分頁,發現足球角色只有一個造型

想想看:只有一個造型可以製作出「角色動畫」嗎?

步驟十一

我們要自行製作足球角色的其他造型:

反覆上述步驟製作 7 個造型,加上原來的造型共 8 個,剛好可以讓足球轉一圈。

步驟十二

點選「角色」窗格中的小貓角色,然後切換到「程式」分頁,小貓的兩支動畫程式將會顯示在分頁畫面上。

用拖曳方式將這兩支程式丟到「足球」角色裡,點選足球角色並且進行以下修改:

想想看小貓踢出足球的一瞬間,是小貓跑得比較快還是足球跑得比較快?

當然是足球快吧!

想像一下,當小貓踢出足球時,足球會一直往前跑永遠不會停嗎?還是跑一段時間後會停下來?

因為足球會摩擦地面,所以速度越來越慢,最後會停下來。

想一想小貓往右踢足球,足球會往哪邊跑?小貓往下踢足球,足球又會往哪裡跑?

足球的運動方向會跟小貓的方向一樣。

步驟十三

依照以上的討論修改足球角色的「移動動畫」程式:

「面朝 向」和「面朝 度」這兩個積木很相似,但略有不同:

「面朝 度」積木原本放在「重複 次」積木的上面,如果將它移到「移動 點」積木的上面會怎樣?

足球踢出去後會跟著小貓一起轉彎,這是不合理的運動方式,足球應該要走直線才對。

你可以在完成步驟十五以後進行測試,觀察兩種不同順序的程式執行時的差異。

注意:積木排列的順序會影響程式執行的結果。有時候執行結果跟我們想的不一樣時,試著調整順序說不定就解決問題了!

步驟十四

接下來要把小貓角色的動畫和足球角色的動畫串連起來,一開始足球不動,只有小貓會動,當小貓「踢」到足球時,足球才開始動。也就是說足球角色的動畫是由小貓角色觸發的,要從一個角色下指令給另一個角色時,可以使用「事件」分類中的「廣播訊息」和「當接收到訊息」這一對積木。

首先我們要在小貓角色中新增一支「碰撞偵測」程式:

使用「重複無限次」積木將「如果 那麼」積木包起來,目的是讓「碰撞偵測」程式可以持續不斷的偵測。

「廣播訊息 並等待」和「廣播訊息」積木略有不同:

步驟十五

將兩支足球動畫程式的「當綠旗子被點擊」積木替換成「當收到訊息」,也就是說按下「綠旗子」按鈕後,足球會停在原地不動,直到被小貓「踢」到時才會開始滾動。

因為「碰撞偵測」程式裡的「廣播訊息 並等待」積木的作用,在足球滾動過程中,小貓「碰」到足球時是不算數的,直到足球停下來後才能再「踢」一次。

如果改成「廣播訊息」積木會怎麼樣呢?

請自己修改「碰撞偵測」程式然後試試看。

步驟十六

為了讓遊戲更好玩,我們要複製一隻貓咪修改成「黑貓」,黑貓由電腦控制,比賽看誰能搶到控球權。

步驟十七

修改「黑貓」的動畫程式:


按「綠旗子」玩玩看,你是否能打敗電腦控制的「黑貓」呢?


遊戲太難嗎?

使用平板,如何繳交 scratch 作業到 classroom 裡面?

ipad繳交scratch作業.mov