動畫入門（影片版）
-
0:01 - 0:03要畫出類似動畫的方法有很多種
-
0:03 - 0:05但是基本原理都是一樣
-
0:05 - 0:07如果你拿一堆圖畫或圖片
-
0:07 - 0:09每張與下一張間只有一點不同
-
0:09 - 0:11然後快速地翻過
-
0:11 - 0:13圖片看起來就像在動的樣子
-
0:13 - 0:14古時候
-
0:14 - 0:16這些圖畫都是用手畫的
-
0:16 - 0:19畫很久也只能做出3秒鐘的動畫
-
0:19 - 0:22幸運的我們，活在未來！
-
0:22 - 0:26用些程式代碼就能畫出簡單的動畫
-
0:26 - 0:28現在我就教你怎麼做
-
0:28 - 0:32螢幕的右手邊，你會看到在可愛的黃色背景上
有一台可愛的小車車 -
0:32 - 0:34是的！這台小車是我自己設計的。
謝謝讚美！ -
0:35 - 0:38總之，在這你可以看到
我們設定了美麗的背景顏色， -
0:38 - 0:42這台車並沒有任何的邊框，
這種函數叫做noStroke() -
0:42 - 0:46這裏，我們寫了一個新的變數「x」，
這是小車的位置 -
0:46 - 0:47給它個數值: 10
-
0:47 - 0:52如果我們改變這個變數的數值，
你就會看到小車來回地移動。 -
0:52 - 0:53把它寫回10. . .
-
0:53 - 0:56這個是用來設定車子的顏色，
-
0:56 - 0:58然後畫兩個矩形當作車身，
-
0:58 - 1:00看起來，這第一個矩形是下面的，
-
1:00 - 1:02這個是上面的那個。
-
1:02 - 1:05接著，車輪也是這樣做。
-
1:05 - 1:07先設顏色，然後畫兩個橢圓形:
-
1:07 - 1:09一個在 「 x＋25」的位置，
-
1:09 - 1:10另一個在 「 x＋75」的位置。
-
1:10 - 1:13然後！我們終於要來學點新東西了。
-
1:13 - 1:15這個新東西叫做「函數定義」
-
1:15 - 1:17後面你會學到。
-
1:17 - 1:20目前，只要看著學，
然後記住它的樣子就可以了。 -
1:20 - 1:24要注意的重點是 「畫」這個字，
還有這些大括號 「 { } 」。 -
1:24 - 1:27這個是左括號（開始），這個是右括號（結束）。
-
1:27 - 1:30這一整段我們叫它做 「 繪圖迴圈，或是 「動畫迴圈」。
-
1:30 - 1:32而我們放進的這些大括號中的指令，
-
1:32 - 1:35會被一遍又一遍地
快速地重複被執行。 -
1:35 - 1:37這就是為什麼它被叫做 「迴圈」。
-
1:37 - 1:38而這些大括號以外的所有的東西，
-
1:38 - 1:41只有在程式開始時
被執行一次。 -
1:41 - 1:45所以！製作動畫的第一步就是
把所有的圖形編碼放進這些大括號裡。 -
1:45 - 1:48這樣你的圖案就會被一遍遍地畫出。
-
1:48 - 1:51來做吧！我現在把所有的圖形編碼拉出來，
-
1:51 - 1:54然後把它放到這個迴圈裡。
-
1:54 - 1:58為了提醒我自己這組編碼
是在這組大括號裡， -
1:58 - 2:02我把它全部反白選起來後按 「tab」鍵，
把它們往內縮， -
2:02 - 2:05這樣我才記得這些程式碼在這些大括號裡。
-
2:05 - 2:09你會發現所有的東西看起來都很像；
-
2:09 - 2:10它們一點都沒變。
-
2:10 - 2:12因為我們第一次跑這些圖形迴圈時，
-
2:12 - 2:13電腦會告訴它自己說：
-
2:13 - 2:17「喔！好！畫個新變數『x』，
把它設成10，畫兩個矩形， -
2:17 - 2:18畫兩個橢圓形...」
-
2:18 - 2:20接著它會回到最開始，
然後再告訴自己說： -
2:20 - 2:24「畫個新變數『x』，把它設成10，畫兩個矩形，畫兩個橢圓形。」
-
2:24 - 2:27然後「畫個新變數『x』，把它設成10，畫兩個矩...」
-
2:27 - 2:29一模一樣！什麼都沒變。
-
2:29 - 2:31啊...看起來沒有動畫啊！
-
2:31 - 2:35它就只是在舊的矩形跟橢圓形上
畫同樣的圖形。 -
2:35 - 2:38記得我們說過，如果你要它看起來像動畫，
-
2:38 - 2:40你必須在你上一次的圖上改一點點。
-
2:40 - 2:43所以，如果我要我的小車往前走，
-
2:43 - 2:45我得改變變數「x」的變數值，對吧?!
-
2:45 - 2:48來把它改成...11 吧！
-
2:48 - 2:51啊！等等！這樣就只是每次都是在11跑了啊
-
2:51 - 2:54那要怎樣才能讓電腦
在跑同一段程式碼時， -
2:54 - 2:57讓這個「x」不斷的變呢?!
-
2:57 - 2:59好！來看這個奇技！
-
2:59 - 3:02記得這個「var x 」能變出一個新變數吧!
-
3:02 - 3:05當我們把它像這樣放在圖形迴圈裏，
-
3:05 - 3:08它會一次又一次地
生成一個叫做「x」的新變數。 -
3:08 - 3:11我們要做的是把它放到圖形迴圈的外面。
-
3:11 - 3:13這樣它就只會做一次。
-
3:13 - 3:17接著，每次電腦跑程式碼時，
看到變數「x」， -
3:17 - 3:22它就會再使用上一次輸入的那個變數值
-
3:22 - 3:25現在就來做吧！
我現在把這個變數 -
3:25 - 3:27放到這個圖形迴圈的外面。
-
3:27 - 3:30現在開始，它就只會執行變數一次。
-
3:31 - 3:33每次它跑到變數「x」時，
-
3:33 - 3:35它就會再使用同個變數。
-
3:35 - 3:38我們指定的上一個變數值是11，
-
3:38 - 3:39那麼那就永遠是11。
-
3:39 - 3:41好了！要變魔術了！
-
3:41 - 3:44在圖形迴圈的某處，
我們會改變「x」值， -
3:44 - 3:47比上一個多一點點。像這樣：
-
3:47 - 3:52x 等於舊的x 數值加上，比如說，「1」。
-
3:53 - 3:54耶！成功了！
-
3:55 - 3:57是說... 看起來...滑溜溜的...
-
3:57 - 3:59如果你想知道為什麼看起來會這樣，
-
3:59 - 4:02那是因為我們忘了
在圖形迴圈裏畫上背景 -
4:02 - 4:04所以它不斷地在畫這台車，
-
4:04 - 4:07但是還是看的到新車底下疊著的舊車，
-
4:07 - 4:12如果我把這行拉到圖形迴圈的最前面，像這樣，
-
4:12 - 4:16然後按「重新啟動」，
才能再看到我的車... -
4:16 - 4:18耶！太讚了！
-
4:18 - 4:20如果我要讓車子跑地快一點，
-
4:20 - 4:23只要改變每次增加 x 的數值就可以了。
-
4:23 - 4:25如果讓它是10... 呼！
跑出螢幕外了！ -
4:25 - 4:28我也可以讓它是負數。
如果 x －10 那麼... -
4:28 - 4:30回來了...
-
4:30 - 4:32把它變回正值
-
4:33 - 4:35又能跑了！
-
4:35 - 4:37所以要重點是：
-
4:37 - 4:39這裏的這些東西叫做「圖形迴圈 」。
-
4:39 - 4:41你要把畫圖程式碼放進這裡。
-
4:41 - 4:43這樣它就會重複地畫。
-
4:43 - 4:46然後把變數放在圖形迴圈外面。
-
4:46 - 4:49把變數寫在迴圈外這件事超級重要。
-
4:49 - 4:51這樣才能重複使用同一個變數。
-
4:51 - 4:53在這個迴圈裡面，
-
4:53 - 4:56我們得改這個變數一點點，
-
4:56 - 4:58通常就是把它設成上一個數值，
-
4:58 - 5:01再加上一個特定的數字－
加或是減一個數字。 -
5:02 - 5:06最後，在你的程式碼裏的某處使用這個變數，
-
5:06 - 5:08這樣你的圖形每次看起來都會不一樣。
-
5:08 - 5:10這樣
就完成了！！
|
Yi Yi Hsieh edited Chinese, Traditional subtitles for Intro to Animation (Video Version) | |
|
Isabel Lin edited Chinese, Traditional subtitles for Intro to Animation (Video Version) | |
|
|
Isabel Lin edited Chinese, Traditional subtitles for Intro to Animation (Video Version) | |
|
|
Isabel Lin edited Chinese, Traditional subtitles for Intro to Animation (Video Version) | |
|
|
Isabel Lin edited Chinese, Traditional subtitles for Intro to Animation (Video Version) | |
|
|
Isabel Lin edited Chinese, Traditional subtitles for Intro to Animation (Video Version) | |
|
|
Isabel Lin edited Chinese, Traditional subtitles for Intro to Animation (Video Version) | |
|
|
Isabel Lin edited Chinese, Traditional subtitles for Intro to Animation (Video Version) |