[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.77,0:00:03.29,Default,,0000,0000,0000,,要畫出類似動畫的方法有很多種
Dialogue: 0,0:00:03.29,0:00:05.07,Default,,0000,0000,0000,,但是基本原理都是一樣
Dialogue: 0,0:00:05.07,0:00:07.07,Default,,0000,0000,0000,,如果你拿一堆圖畫或圖片
Dialogue: 0,0:00:07.07,0:00:09.46,Default,,0000,0000,0000,,每張與下一張間只有一點不同
Dialogue: 0,0:00:09.46,0:00:11.39,Default,,0000,0000,0000,,然後快速地翻過
Dialogue: 0,0:00:11.39,0:00:13.24,Default,,0000,0000,0000,,圖片看起來就像在動的樣子
Dialogue: 0,0:00:13.24,0:00:14.37,Default,,0000,0000,0000,,古時候
Dialogue: 0,0:00:14.37,0:00:16.22,Default,,0000,0000,0000,,這些圖畫都是用手畫的
Dialogue: 0,0:00:16.22,0:00:19.47,Default,,0000,0000,0000,,畫很久也只能做出3秒鐘的動畫
Dialogue: 0,0:00:19.47,0:00:21.91,Default,,0000,0000,0000,,幸運的我們，活在未來！
Dialogue: 0,0:00:22.14,0:00:26.07,Default,,0000,0000,0000,,用些程式代碼就能畫出簡單的動畫
Dialogue: 0,0:00:26.07,0:00:27.57,Default,,0000,0000,0000,,現在我就教你怎麼做
Dialogue: 0,0:00:27.68,0:00:31.59,Default,,0000,0000,0000,,螢幕的右手邊，你會看到在可愛的黃色背景上\N有一台可愛的小車車
Dialogue: 0,0:00:31.59,0:00:34.26,Default,,0000,0000,0000,,是的！這台小車是我自己設計的。\N謝謝讚美！
Dialogue: 0,0:00:34.69,0:00:38.33,Default,,0000,0000,0000,,總之，在這你可以看到\N我們設定了美麗的背景顏色，
Dialogue: 0,0:00:38.33,0:00:42.12,Default,,0000,0000,0000,,這台車並沒有任何的邊框，\N這種函數叫做{\i1}noStroke(){\i0}
Dialogue: 0,0:00:42.12,0:00:46.04,Default,,0000,0000,0000,,這裏，我們寫了一個新的變數「x」，\N這是小車的位置
Dialogue: 0,0:00:46.04,0:00:47.31,Default,,0000,0000,0000,,給它個數值: 10
Dialogue: 0,0:00:47.31,0:00:51.76,Default,,0000,0000,0000,,如果我們改變這個變數的數值，\N你就會看到小車來回地移動。
Dialogue: 0,0:00:51.76,0:00:53.13,Default,,0000,0000,0000,,把它寫回10. . .
Dialogue: 0,0:00:53.13,0:00:55.71,Default,,0000,0000,0000,,這個是用來設定車子的顏色，
Dialogue: 0,0:00:55.71,0:00:57.66,Default,,0000,0000,0000,,然後畫兩個矩形當作車身，
Dialogue: 0,0:00:57.66,0:00:59.96,Default,,0000,0000,0000,,看起來，這第一個矩形是下面的，
Dialogue: 0,0:00:59.96,0:01:02.01,Default,,0000,0000,0000,,這個是上面的那個。
Dialogue: 0,0:01:02.01,0:01:05.03,Default,,0000,0000,0000,,接著，車輪也是這樣做。
Dialogue: 0,0:01:05.03,0:01:06.98,Default,,0000,0000,0000,,先設顏色，然後畫兩個橢圓形:
Dialogue: 0,0:01:06.98,0:01:08.65,Default,,0000,0000,0000,,一個在 「 x＋25」的位置，
Dialogue: 0,0:01:08.65,0:01:10.19,Default,,0000,0000,0000,,另一個在 「 x＋75」的位置。
Dialogue: 0,0:01:10.19,0:01:12.68,Default,,0000,0000,0000,,然後！我們終於要來學點新東西了。
Dialogue: 0,0:01:12.68,0:01:15.10,Default,,0000,0000,0000,,這個新東西叫做「函數定義」
Dialogue: 0,0:01:15.10,0:01:16.56,Default,,0000,0000,0000,,後面你會學到。
Dialogue: 0,0:01:16.56,0:01:19.58,Default,,0000,0000,0000,,目前，只要看著學，\N然後記住它的樣子就可以了。
Dialogue: 0,0:01:19.58,0:01:24.13,Default,,0000,0000,0000,,要注意的重點是 「畫」這個字，\N還有這些大括號 「 { } 」。
Dialogue: 0,0:01:24.13,0:01:26.74,Default,,0000,0000,0000,,這個是左括號（開始），這個是右括號（結束）。
Dialogue: 0,0:01:26.75,0:01:30.21,Default,,0000,0000,0000,,這一整段我們叫它做 「 繪圖迴圈，或是 「動畫迴圈」。
Dialogue: 0,0:01:30.21,0:01:32.41,Default,,0000,0000,0000,,而我們放進的這些大括號中的指令，\N
Dialogue: 0,0:01:32.41,0:01:34.98,Default,,0000,0000,0000,,會被一遍又一遍地\N快速地重複被執行。
Dialogue: 0,0:01:34.98,0:01:36.55,Default,,0000,0000,0000,,這就是為什麼它被叫做 「迴圈」。
Dialogue: 0,0:01:36.55,0:01:38.49,Default,,0000,0000,0000,,而這些大括號以外的所有的東西，
Dialogue: 0,0:01:38.49,0:01:41.48,Default,,0000,0000,0000,,只有在程式開始時\N被執行一次。
Dialogue: 0,0:01:41.48,0:01:45.48,Default,,0000,0000,0000,,所以！製作動畫的第一步就是\N把所有的圖形編碼放進這些大括號裡。
Dialogue: 0,0:01:45.48,0:01:47.74,Default,,0000,0000,0000,,這樣你的圖案就會被一遍遍地畫出。
Dialogue: 0,0:01:47.74,0:01:50.86,Default,,0000,0000,0000,,來做吧！我現在把所有的圖形編碼拉出來，
Dialogue: 0,0:01:50.86,0:01:54.26,Default,,0000,0000,0000,,然後把它放到這個迴圈裡。
Dialogue: 0,0:01:54.26,0:01:57.92,Default,,0000,0000,0000,,為了提醒我自己這組編碼\N是在這組大括號裡，
Dialogue: 0,0:01:57.92,0:02:02.25,Default,,0000,0000,0000,,我把它全部反白選起來後按 「tab」鍵，\N把它們往內縮，
Dialogue: 0,0:02:02.25,0:02:05.18,Default,,0000,0000,0000,,這樣我才記得這些程式碼在這些大括號裡。
Dialogue: 0,0:02:05.18,0:02:08.73,Default,,0000,0000,0000,,你會發現所有的東西看起來都很像；
Dialogue: 0,0:02:08.73,0:02:10.03,Default,,0000,0000,0000,,它們一點都沒變。
Dialogue: 0,0:02:10.03,0:02:12.16,Default,,0000,0000,0000,,因為我們第一次跑這些圖形迴圈時，
Dialogue: 0,0:02:12.16,0:02:13.35,Default,,0000,0000,0000,,電腦會告訴它自己說：
Dialogue: 0,0:02:13.35,0:02:16.51,Default,,0000,0000,0000,,「喔！好！畫個新變數『x』，\N把它設成10，畫兩個矩形，
Dialogue: 0,0:02:16.51,0:02:17.56,Default,,0000,0000,0000,,畫兩個橢圓形...」
Dialogue: 0,0:02:17.56,0:02:19.52,Default,,0000,0000,0000,,接著它會回到最開始，\N然後再告訴自己說：
Dialogue: 0,0:02:19.52,0:02:24.03,Default,,0000,0000,0000,,「畫個新變數『x』，把它設成10，畫兩個矩形，畫兩個橢圓形。」
Dialogue: 0,0:02:24.03,0:02:26.68,Default,,0000,0000,0000,,然後「畫個新變數『x』，把它設成10，畫兩個矩...」
Dialogue: 0,0:02:26.68,0:02:29.14,Default,,0000,0000,0000,,一模一樣！什麼都沒變。
Dialogue: 0,0:02:29.14,0:02:31.06,Default,,0000,0000,0000,,啊...看起來沒有動畫啊！
Dialogue: 0,0:02:31.06,0:02:34.66,Default,,0000,0000,0000,,它就只是在舊的矩形跟橢圓形上\N畫同樣的圖形。
Dialogue: 0,0:02:34.66,0:02:37.52,Default,,0000,0000,0000,,記得我們說過，如果你要它看起來像動畫，
Dialogue: 0,0:02:37.52,0:02:40.15,Default,,0000,0000,0000,,你必須在你上一次的圖上改一點點。
Dialogue: 0,0:02:40.15,0:02:42.55,Default,,0000,0000,0000,,所以，如果我要我的小車往前走，
Dialogue: 0,0:02:42.55,0:02:45.04,Default,,0000,0000,0000,,我得改變變數「x」的變數值，對吧?!
Dialogue: 0,0:02:45.04,0:02:47.71,Default,,0000,0000,0000,,來把它改成...11 吧！
Dialogue: 0,0:02:47.71,0:02:51.12,Default,,0000,0000,0000,,啊！等等！這樣就只是每次都是在11跑了啊
Dialogue: 0,0:02:51.12,0:02:53.80,Default,,0000,0000,0000,,那要怎樣才能讓電腦\N在跑同一段程式碼時，
Dialogue: 0,0:02:53.80,0:02:57.02,Default,,0000,0000,0000,,讓這個「x」不斷的變呢?!
Dialogue: 0,0:02:57.02,0:02:59.49,Default,,0000,0000,0000,,好！來看這個奇技！
Dialogue: 0,0:02:59.49,0:03:02.48,Default,,0000,0000,0000,,記得這個「var x 」能變出一個新變數吧!
Dialogue: 0,0:03:02.48,0:03:04.75,Default,,0000,0000,0000,,當我們把它像這樣放在圖形迴圈裏，
Dialogue: 0,0:03:04.75,0:03:07.74,Default,,0000,0000,0000,,它會一次又一次地\N生成一個叫做「x」的新變數。
Dialogue: 0,0:03:07.74,0:03:10.76,Default,,0000,0000,0000,,我們要做的是把它放到圖形迴圈的外面。
Dialogue: 0,0:03:10.76,0:03:13.26,Default,,0000,0000,0000,,這樣它就只會做一次。
Dialogue: 0,0:03:13.26,0:03:17.49,Default,,0000,0000,0000,,接著，每次電腦跑程式碼時，\N看到變數「x」，
Dialogue: 0,0:03:17.49,0:03:22.48,Default,,0000,0000,0000,,它就會再使用上一次輸入的那個變數值
Dialogue: 0,0:03:22.48,0:03:25.08,Default,,0000,0000,0000,,現在就來做吧！\N我現在把這個變數
Dialogue: 0,0:03:25.08,0:03:27.33,Default,,0000,0000,0000,,放到這個圖形迴圈的外面。
Dialogue: 0,0:03:27.33,0:03:30.27,Default,,0000,0000,0000,,現在開始，它就只會執行變數一次。
Dialogue: 0,0:03:31.08,0:03:33.48,Default,,0000,0000,0000,,每次它跑到變數「x」時，
Dialogue: 0,0:03:33.48,0:03:35.40,Default,,0000,0000,0000,,它就會再使用同個變數。
Dialogue: 0,0:03:35.40,0:03:38.12,Default,,0000,0000,0000,,我們指定的上一個變數值是11，
Dialogue: 0,0:03:38.12,0:03:39.49,Default,,0000,0000,0000,,那麼那就永遠是11。
Dialogue: 0,0:03:39.49,0:03:41.49,Default,,0000,0000,0000,,好了！要變魔術了！
Dialogue: 0,0:03:41.49,0:03:44.38,Default,,0000,0000,0000,,在圖形迴圈的某處，\N我們會改變「x」值，
Dialogue: 0,0:03:44.38,0:03:46.72,Default,,0000,0000,0000,,比上一個多一點點。像這樣：
Dialogue: 0,0:03:46.72,0:03:51.99,Default,,0000,0000,0000,,x 等於舊的x 數值加上，比如說，「1」。
Dialogue: 0,0:03:52.59,0:03:54.11,Default,,0000,0000,0000,,耶！成功了！
Dialogue: 0,0:03:54.76,0:03:56.89,Default,,0000,0000,0000,,是說... 看起來...滑溜溜的...
Dialogue: 0,0:03:56.89,0:03:59.16,Default,,0000,0000,0000,,如果你想知道為什麼看起來會這樣，
Dialogue: 0,0:03:59.16,0:04:02.38,Default,,0000,0000,0000,,那是因為我們忘了\N在圖形迴圈裏畫上背景
Dialogue: 0,0:04:02.38,0:04:04.45,Default,,0000,0000,0000,,所以它不斷地在畫這台車，
Dialogue: 0,0:04:04.45,0:04:07.07,Default,,0000,0000,0000,,但是還是看的到新車底下疊著的舊車，
Dialogue: 0,0:04:07.07,0:04:11.74,Default,,0000,0000,0000,,如果我把這行拉到圖形迴圈的最前面，像這樣，
Dialogue: 0,0:04:12.04,0:04:15.70,Default,,0000,0000,0000,,然後按「重新啟動」，\N才能再看到我的車...
Dialogue: 0,0:04:15.98,0:04:17.74,Default,,0000,0000,0000,,耶！太讚了！
Dialogue: 0,0:04:18.03,0:04:19.85,Default,,0000,0000,0000,,如果我要讓車子跑地快一點，
Dialogue: 0,0:04:19.85,0:04:22.52,Default,,0000,0000,0000,,只要改變每次增加 x 的數值就可以了。
Dialogue: 0,0:04:22.52,0:04:24.83,Default,,0000,0000,0000,,如果讓它是10... 呼！\N跑出螢幕外了！
Dialogue: 0,0:04:24.83,0:04:28.50,Default,,0000,0000,0000,,我也可以讓它是負數。\N如果 x －10 那麼...
Dialogue: 0,0:04:28.50,0:04:29.78,Default,,0000,0000,0000,,回來了...
Dialogue: 0,0:04:30.02,0:04:32.20,Default,,0000,0000,0000,,把它變回正值
Dialogue: 0,0:04:33.42,0:04:34.54,Default,,0000,0000,0000,,又能跑了！
Dialogue: 0,0:04:34.54,0:04:36.55,Default,,0000,0000,0000,,所以要重點是：
Dialogue: 0,0:04:36.55,0:04:39.22,Default,,0000,0000,0000,,這裏的這些東西叫做「圖形迴圈 」。
Dialogue: 0,0:04:39.22,0:04:41.33,Default,,0000,0000,0000,,你要把畫圖程式碼放進這裡。
Dialogue: 0,0:04:41.33,0:04:43.49,Default,,0000,0000,0000,,這樣它就會重複地畫。
Dialogue: 0,0:04:43.49,0:04:46.29,Default,,0000,0000,0000,,然後把變數放在圖形迴圈外面。
Dialogue: 0,0:04:46.29,0:04:49.33,Default,,0000,0000,0000,,把變數寫在迴圈外這件事超級重要。
Dialogue: 0,0:04:49.33,0:04:51.50,Default,,0000,0000,0000,,這樣才能重複使用同一個變數。
Dialogue: 0,0:04:51.50,0:04:53.47,Default,,0000,0000,0000,,在這個迴圈裡面，
Dialogue: 0,0:04:53.47,0:04:55.89,Default,,0000,0000,0000,,我們得改這個變數一點點，
Dialogue: 0,0:04:55.89,0:04:58.24,Default,,0000,0000,0000,,通常就是把它設成上一個數值，
Dialogue: 0,0:04:58.24,0:05:01.49,Default,,0000,0000,0000,,再加上一個特定的數字－\N加或是減一個數字。
Dialogue: 0,0:05:01.95,0:05:05.50,Default,,0000,0000,0000,,最後，在你的程式碼裏的某處使用這個變數，
Dialogue: 0,0:05:05.50,0:05:07.74,Default,,0000,0000,0000,,這樣你的圖形每次看起來都會不一樣。
Dialogue: 0,0:05:07.74,0:05:10.05,Default,,0000,0000,0000,,這樣\N就完成了！！