1 of 76

Scratch

國小動畫組

簡良諭

liangyuh@gmail.com

2 of 76

研習資訊

3 of 76

4 of 76

5 of 76

小叮嚀

6 of 76

題目說什麼?

題目看清楚，別急著開始

  • 想一想這個主題，以前學的有那些可以套用?
  • 與眾不同，在精不在多(因為多就作不完)
  • 寫程式最重要的是正確性及完整性，有Bug及未完成的作品是不會得獎的
  • 註解是重要的，可以幫助理解程式

7 of 76

歷年得獎作品

  • 113
  • 112
  • 111

8 of 76

練習題目

請AI生題

  • 國小動畫組
    • 解題AI助教
    • 出題AI助教

​

9 of 76

動畫作品設計

10 of 76

動畫腳本流程

一般作品：120秒內(評審較會注意到精彩處)

  • 主題構思：15-20分鐘...(討論劇情架構、如何分工)
  • 動畫架構：(手工畫出來)
    • 標題首頁：封面、主題名稱、美工
    • 第1幕：
    • 第2幕：
    • 第3幕：
    • 第4幕：(至少4幕, 但也別作太多)
    • 結尾：要有教育性、啟發性、有重點
    • 其他注意事項：創用CC、錄音、音效、美工、特效

11 of 76

動畫角色

  • 動畫角色要動！....造型變換
    • 講話時要有動作或表情變化
    • 移動時要有動作變化(不要像僵屍漂)
  • 角色對話要錄！....錄音，不要變默劇
    • 平時就要練習錄音，否則臨時錄音的效果不好(會咬舌)
    • 練習一人飾多角配音，要能有角色區別感。
  • 美工畫面手繪！....場景、角色、有童趣
    • 角色繪製要平時就練習好, 比賽時才會畫得順、畫得好
    • 比賽時不管哪個題目就是拿準備好的角色來用
    • 現有的角色要挑幾個來利用、來修改(會較省時間)

12 of 76

動畫組分享3

  • 程式技巧要有！....音樂、音效、轉場、特效
    • 音樂、場景的程式最好有專屬角色控制，較好管理、除錯。
    • 變數可以直接用中文
  • 故事劇情設計要有料、有梗！
    • 要有腳本規劃，別太信任自己的記憶力，用紙寫下來。
    • 角色及背景變換都是用訊息控制，所以訊息的分類規劃要作好
    • 訊息要用紙記下來，依使用順序編號才好檢查前後判斷
  • 創用CC要加！.....有出現就好

13 of 76

使用AI協助設計Scratch動畫腳本

  • ChatGPT https://chat.openai.com/
  • Poe https://poe.com/
  • 腳本撰寫在平時就要練習，比賽時才能迅速產出(比賽無網路)
    • 出題目讓學生能迅速編出4~5幕的腳本(練習15分鐘完成)

14 of 76

提示詞應用

  • 腳本提示詞
    • 提供我5個動畫題目, 不限主題
    • 幫我作一個Scarctch程式動畫腳本，以海洋生態為主題，控制在500字以內，要有新奇的創意，並且以章魚的觀點來敘述。
    • 請改成1個開場, 4個場景, 1個結尾的方式來重新創作腳本
    • 在各場景的台詞下方, 加入角色的體感動作，放在()括號中
    • 場景4的內容再豐富一些(刪掉場景3內容, 把它配合場景4重新設計)(增加人類破壞海洋的情節)
    • 把場景4作為保護海洋主軸, 再重新設計腳本
    • 請加入一些宣導和務實的具體作法
    • 把具體宣導實務作法，作成順口的宣傳口號
  • 程式提示詞
    • 口號宣導我要出現在最後，並產生酷炫的字幕動畫，請幫我生成程式。

15 of 76

廣播控制

16 of 76

腳本順序圖

17 of 76

廣播訊息控制腳本流程進行

故事要分鏡成為腳本才能製作動畫，規劃哪些角色可以使用內建圖案，哪些要自己繪製。要知道如何除錯！

  • 場景變換： 舞台的背景變換（命名規則）
  • 角色登場及動作：預設隱藏，接到訊息時才顯示，結束時要隱藏。
    • 角色可以1_X表示第1幕的造型(也就是依不同幕規劃)
    • 訊息排列要有規則，統一由一個角色控制
  • 角色對話：改變角色表情及小動作，
    • 對話用語「幕_01對話」要有規則，記在紙上(撰寫)以方便除錯
    • 先播錄音、再顯示說話內容
  • 錄製對白及加入音效：依對話來錄製對白（檔名編號）
  • 廣播訊息控制背景及角色Demo

18 of 76

流程控制角色

19 of 76

背景設計

20 of 76

數字角色

21 of 76

貓咪

22 of 76

螃蟹

23 of 76

廣播控制單一角色多用途技巧

24 of 76

流程控制技巧

  • 建立一個控制流程角色
  • 所有流程均用「廣播訊息並等待」控制
  • 停止「這個物件的其他程式」
  • 流程控制角色(示範)
  • 音效、背景控制

25 of 76

流程控制角色

  • 流程控制角色(示範)

26 of 76

角色

27 of 76

開場動畫

28 of 76

開場動畫要萬用

  • 開場與結尾動畫Demo1

29 of 76

單一角色控制轉場技巧

30 of 76

角色作轉場效果

  • 尺寸慢慢變大/變小
  • 先右轉變大 / 再左轉變小
  • 在中間換背景

角色轉場示範

31 of 76

單一角色控制字幕效果

32 of 76

字幕單一角色處理

33 of 76

單一角色擔任多項用途

34 of 76

同一角色多種用途

35 of 76

一圖一動畫

36 of 76

橫幅飛行

37 of 76

橫幅飛行

示範範例

38 of 76

背景移動

  • 背景當角色
  • 角色變數
  • 區域變數

圖1=0

圖2=480

39 of 76

背景/角色繪製

40 of 76

滑鼠繪畫是你要練的基本功

繪圖有多種方法，但是參加比賽時，使用滑鼠繪圖是您必須的基本功, 如何使用Scratch繪製向量圖

  • 向量或點陣都可以，建議使用向量繪圖。
  • 繪製人物時，將人物拆成元件，就可以多次重複使用。
  • 人物Ｑ版較佳(因為好畫!)-手比腳長較可愛。
  • 利用身型來決定是男生或女生
    • 利用原圖來設計多個表情，喜怒哀樂表情(眼睛會說話)
    • 動作走動、上下
    • 眼睛左右(X軸移動)、上下(Y軸移動)
  • 示範

41 of 76

表情包

使用眼睛表達各種情緒(這個都要事先就練好怎麼畫！）

  • 喜、笑、生氣、驚訝、救命、無言
  • 換膚色、換髮型（男、女、老先生、小孩）
  • 眼睛、眼鏡造型
  • 要確認元件修改有被套用

動作設計概念

  • 不要一次作太多動作
  • 繪製人物時放大顯示會比較好修圖
  • 配合Shift鍵畫正圓、正方形

42 of 76

背景的繪製

採用向量繪圖

  • 善加利用節點控制形狀

Youtube教學影片-草地、海灘向量繪製

43 of 76

Inkscape

44 of 76

矩形

  • 頁面為240*180
  • Ctrl：限定比例，1:1、1:1.618(黃金比例)、1:2
  • Shift：由滑鼠指標處向外繪製

45 of 76

圓形

46 of 76

選取、移動、縮放、旋轉

  • 多重選取使用Shift鍵
  • 點選一次可以縮放，再點選一次可旋轉
  • Ctrl：限定角度
  • Shift：繞對角旋轉

47 of 76

填充與邊框

48 of 76

星形與多邊形

49 of 76

群組物件

  • 群取：Ctrl+G
  • 解散群組：Ctrl+U

50 of 76

物件的順序

  • 使用Home, End, PgUp, PgDn來調整

51 of 76

複製物件與樣式

  • 複製、貼上
  • 複製、貼在原處
  • 再製
  • 貼上樣式
  • 貼上尺寸

52 of 76

填色與邊框

53 of 76

實作範例-螃蟹

54 of 76

建立重複對齊物件

  • 啟用對齊節點、路徑及控制點
  • 使用　編輯/仿製/建立鋪排仿製物件�(使用Shift+D選取原物件)

55 of 76

米老鼠和小狗

56 of 76

組合功能

57 of 76

海星

58 of 76

物件的布林運算(路徑)

59 of 76

路徑功能

60 of 76

減去

61 of 76

相加

62 of 76

打字機式講話

63 of 76

先建函式再使用

實作範例

可以採物件控制

64 of 76

角色動作

65 of 76

角色搖動與晃動(震動)

舞台、角色的搖動與晃動常應用在災難發生或是遭受攻擊

技巧重點

  • 舞台搖動是使用舞台匯出、角色匯入來處理。
    • 上下震動: 改變Y值
    • 左右搖動: 改變X值
  • 角色晃動
  • 先要調整角色圖案上方對準中央點位置
  • 晃動採用右轉、左轉角度處理，需等待0.1秒
  • 示範

66 of 76

煙火及爆炸效果

煙火及爆炸效果常應用於子彈(炸彈)攻擊後的呈現。

技巧重點

  • 先畫好第1個未爆造型
  • 簡易版:繪製1張造型，使用圖像的顏色、幻影效果來變化。(建議)
  • 進階版:繪製多個爆炸造型，再逐一顯示。
  • 程式版: 簡單造型然後用程式控制(注意不能用迴圈)

進階範例

67 of 76

探照燈及地板燈效果

常用於舞蹈及搜索情境

  • 音效選擇 (舞蹈)Drum Machine (搜索)Dance Snare Beat
  • 使用私用變數(P_變數名)
  • 範例

​

​

68 of 76

由近到遠及由遠到近

角色由近到遠及由遠到近的技巧常用於角色移動。

  • 每走一步，變換走路的造型
  • 可以設定正面走或背面走
  • 向前(後)移動時，角色要變大(小)，這是視覺效果

示範

69 of 76

物件跟隨角色

物件跟隨角色常用於射擊遊戲，讓子彈(隱藏)隨角色武器移動

  • 抓取角色的X坐標、Y坐標
  • 物件隨時定位在角色旁邊
  • 遊戲射擊在遊戲篇介紹

​

  • 示範
    • 示範1

70 of 76

動畫補充概念

71 of 76

動畫的12項基本法則

01.擠壓與拉伸

02.預備動作

03.佈局

04.連續動作與姿勢對應

05.跟隨與重疊動作

06.漸進漸出

07.弧線運動

08.次要動作

09.時序節奏

10.誇張性

11.立體造型

12.吸引力

72 of 76

動畫應用原理

73 of 76

動畫運鏡

74 of 76

練習

動畫組

  • a組員：練習運鏡(遠->特寫->遠)
  • b組員：練習畫角色的各種表情動作

程式組

  • 練習修改範例CarDrive

75 of 76

參考

​

76 of 76

單元結束