謝慧民_2D動畫設計108_1

課程名稱：2D動畫設計(一)(資多二A)

謝慧民的網站 > 課程網站 > 首頁 >台首大多媒體_謝慧民_108_1_2D動畫設計(一)資多2A

第十八週上課： (2020.01.13)

資多二A ：
- 期末考題目說明：期末考題下載。

第十七週上課： (2020.01.06)

資多二A ：
- 期末考題目說明：期末考題下載。
- 使用actionscript 2.0的版型繼續製作超連結設定：請看flashmo的連結程式碼，複製程式碼，貼到你的新按鈕當程式碼，修改程式碼的超連結為正確的位置。
- Bannar按鈕：進入Bannar的視窗，刪除按鈕圖層，到版型首頁新增一個圖層，將Bannar按鈕拉入，調整大小再按右鍵動作進入貼剛剛的程式碼，改超連結為你網站網址。
- 轉動Logo：開啟月球自轉檔案，將moon_mc拉到場景，進入圖片將人臉展開圖拉進來條大小覆蓋原來月球表面圖即可，播放看看Logo的人臉圖是否正常轉動。
- 操作錄影：錄影17-1、錄影17-2、錄影17-3
- 加分操作練習：範例17a

第十六週上課： (2019.12.30)

資多二A ：
- 期末考題目說明：期末考題下載。
- 從flashmo網站下載一個web版型，在Flash開啟Fla檔，另開Actionscript 3.0檔，將這些網格複製，貼到新檔案，執行看看結果。
- 找出版型裡面的按鈕，獨立成按鈕元件，加入三個到版型內，另存新檔為你的學號.fla。
- 為按鈕元件加入名稱，也加入預設動作，開啟一個新網址視窗，設定程式碼內的超連結目標網址。
- 將以前做過的Bannar載入成為元件修改，使用SwishMax製作一個你的姓名的網站的動畫，匯出後取代Bannar主要的文字，放到版型的上方。
- 執行看看是否正常連結開啟新網頁，無法開啟則終止Actionscript 2.0程式運作。
- 操作錄影：錄影16-1、錄影16-2、錄影16-3、錄影16-4、錄影16-5、錄影16-6
- 加分操作練習：範例16a

第十五週上課： (2019.12.23)

資多二A ：
- 到網路找一張太陽去背圖，再去找一張月球貼圖及一張地球貼圖
- 開啟Flash，將三張圖匯入元件庫，太陽圖拉進場景，轉為影片片段元件，然後製作濾鏡光暈，並製作光暈參數的移動補間動畫，影格全選複製，另開元件貼上命名為sun_light_ani。
- 左側工具列墨水瓶、鉛筆工具、筆刷工具、噴刷工具、裝飾工具、滴管工具、尺規開啟、橡皮擦、套索等工具練習。
- 將太陽物件從場景刪除，拉入月亮貼圖，複製一份到右側對齊，選兩張圖轉為元件圖，然後開新圖層，加一個沒有框的橢圓，放左側，在圖層上按右鍵選遮色片，然後拉尺規輔助線定位，設定動畫時間30，製作圖片移動的補間動畫。
- 開新圖層，複製遮色片的橢圓，貼到原地，改貼圖為輻射黑底，然後設起點為透明度0，70%位置為20，100%位置為70。然後選貼圖變形工具縮小一些往左上移，然後看到重疊區域右下有半透明陰影。將這些另存元件為moon_ani。
- 再來複製一個這個元件，將月球貼圖改為地球貼圖，然後動畫時間調到100，另存為earth_ani。
- 製作月球繞太陽轉的動畫：載入這兩個元件，適當縮放，新增一個圖層，畫一個扁的橢圓，用橡皮擦去除橢圓一小段，然後設定為導引線，將月球拉進去底下，然後月球動畫影格100處加入關鍵影格，影格1拉月球到導引線起點，100處拉月球到導引線終點。播放時月球應該到太陽後方經過，所以再加一個圖層複製太陽貼原地，將顯示時間調整到月亮繞道後面出現的時間段。所以月亮自轉，繞地球自轉另做元件，再做地球繞太陽自轉，則可完成太陽系軌道運轉的2D模擬動畫。
- 操作錄影：錄影15-1、錄影15-2、錄影15-3、錄影15-4、錄影15-5、錄影15-6、錄影15-7、錄影15-8、錄影15-9
- 加分操作練習：範例15a

第十四週上課： (2019.12.16)

資多二A ：
- 載一個Bannar的圖片，開啟actionscript 3.0的新檔，將文件大小改為800x200，到Photoshop將圖片切割為800x200,載入到元件庫，拉入場景，置中對齊當背景，新增一個元件為按鈕，感應區增加舉行區域也是800x200，新增一個圖層拉到場景，設定按鈕名稱為button1，加入按下時開啟新網頁，將資多系的連結置換成是裡的超連結文字。
- 載入台首大Logo的AI檔，一樣匯入到元件庫，轉為元件後，將兩個圖分別轉完個別元件，新增一個圖層將彩色Logo元件拉進來場景。
- 將背景轉為元件，拉近取代原背景圖層，新增濾鏡的斜角及陰影功能，讓背景看起來有立體感。
- 使用Swishmax 3製作”資訊與多媒體設計學系”的動畫特效，轉出為swf檔，到Flash匯入元件庫，新增圖層將這段影片片段加入場景。
- 將影格移到50，按下加入關鍵影格，對背景製作顏色色系轉換的動畫，然後做傳統補間動畫。
- 製作一個長方形，填入白色，設兩端透明度為0，中間80，然後製作左向右，再快速回到左的快閃傳統補間動畫。
- 再來調整Logo出現的時間在長方形滑回來時，做最後放大的傳統補間動畫，在50影格加入stop();停止播放。最後將台灣首府大學透空的圖片做3D補間旋轉動畫。並將資訊與多媒體設計學系的字做一些動畫。如此完成一個本系的Flash Bannar。
- 操作錄影：錄影14-1、錄影14-2、錄影14-3、錄影14-4、錄影14-5、錄影14-6
- 加分操作練習：範例14a

第十三週上課： (2019.12.09)

資多二A ：
- 蝴蝶群亂飛動畫：
  1. 找一個蝴蝶圖片載入到場景，開一個新圖層，在場景中使用鋼筆工具描出蝴蝶外型，然後再選取狀態調整形狀，再填入圖片，去掉選外型框。關掉底圖
  2. 利用尺規拖拉出尺規線在蝴蝶翅膀兩側，在第3影格處加入關鍵影格，選取左邊翅膀縮放，選取右邊翅膀縮放，如此可以製作蝴蝶飛的動作。
  3. 選取這些影格複製影格，新增一個影片片段元件，貼上影格，清除場景的影格，再拉入這隻蝴蝶元件。
  4. 製作一個新圖層，然後劃一條繞一圈沒有封閉的曲線，設為導引線，將蝴蝶圖層拉到導引線圖層下，然後在蝴蝶圖層150格處設關鍵影格，拖拉到線的終點，影格1的蝴蝶拖拉到線的起點，並設定蝴蝶方向沿路徑，再調整起始跟終了蝴蝶的方向，試播看看是否蝴蝶正常沿路徑走，中間可以加入關鍵影格縮放蝴蝶以符合遠近的大小。
  5. 一樣將這些影格選取複製，新增一個影片元件，貼上影格，刪除場景的影格，拉進這個沿路徑飛的元件，按Alt複製幾個，改變方向及縮放，就可以製造多隻蝴蝶飛舞的景象。
  6. 其中一隻蝴蝶要不同路徑，需要複製一個沿路徑的元件修改路徑，拉入場景後可以加入濾鏡、透明度等與其他蝴蝶有所區別。
- 網路免費向量資源：adobe flash symbol free,下載解壓縮，匯入AI檔，然後建立新元件為影片片段，找兩個太極圖，拉入打散到最底層，製作形狀漸變動畫
- 影片匯入：網路上到youtube找一個short film下載(網路有免費轉檔工具)，到Flash匯入影音材料，在場景內縮放影片物件。播放時可以看到影片在場景中播放。
- 操作錄影：錄影13-1、錄影13-2、錄影13-3、錄影13-4
- 加分操作練習：範例13a

第十二週上課： (2019.12.02)

資多二A ：
- 製作一個圓形，按住Alt鍵拖拉，複製成三個，上下對齊均分
- 分散到圖層，每一個圖層有一個圓，然後在第10影格加入關鍵格加入形狀漸變，製作從開始透明到不透明的動畫。
- 在新圖層打入MOD三個字，打散再打散，分散到圖層，然後依順序移到圈圈上面，再拖拉到圓圈圈的圖層第20格，然後加入形狀漸變，然後在30影格加入關鍵影格，設定不透明定放大文字，在加入形狀漸變。
- 全選移動影格，錯開出現的時間，在第45格加入影格。
- 在內建元件庫button選一個按鈕圖，在空白圖層第45格處加入空白關鍵影格，將按鈕拖拉進去。然後修改按鈕的移入及按下的顏色不同。
- 針對按鈕加入一個程式碼，視窗_程式碼片段開啟後，選時間軸瀏覽的按一下前往影格並播放，修改為第1影格。加入stop();指令，讓動畫執行到45格停止以等待按鈕事件。
- setup_flash_slideshow_maker試做幻燈片展示及互動網頁效果
- flashmo提供免費Flash原始檔範本，有興趣可以下載開起來看看，有些可以解鎖換圖片及修改文字，快速以一個版型製作Flash網頁變得簡單，且都有原始程式碼可參考，有助於了解Actionscript 的運作。
- 操作錄影：錄影12-1、錄影12-2、錄影12-3、錄影12-4、錄影12-5
- 加分操作練習：範例12a

第十一週上課： (2019.11.25)

資多二A ：
- 按鈕設定練習：
  1. 場景建立一個文字，轉為按鈕元件，影格有四格，在2-4格加入關鍵影格，然後更改字的顏色。
    選擇物件，在視窗選單選程式碼片段，加入動作展開的按一下前往網頁的片段。
  2. 按ctri+enter執行看看滑鼠移入點按開啟網頁效果是否可用。
  3. 下載一個按鈕圖案，到Photoshop去背，然後複製圖層選取中間的顏色區塊，以色調飽和度明度等功能調參數讓色調變化，做三個圖層，存為psd檔。
  4. 到Flash匯入這個資源到元件庫，選所有圖層，匯入後依序取代按鈕元件四格內的文字，執行看看，按鈕可否使用。
  5. 到Photoshop自建按鈕：開一個300x300的透明圖層，用橢圓工具建立按鈕外框區，然後加入圖層混合的陰影及斜角與浮雕，做出立體樣子的按鈕，然後一樣更換顏色另存新檔為.png格式。匯入Flash步驟與前面相同。
- 操作錄影：錄影11-1、錄影11-2、錄影11-3、錄影11-4、錄影11-5、錄影11-6、錄影11-7、錄影11-8、錄影11-9、錄影11-10
- 加分操作練習：範例11a

第十週上課： (2019.11.18)

資多二A ：
- 延續之前教過功能的運用：
  1. 殘影動畫：新元件圖像打你的姓名，到場景拉入，做從小變大的傳統補間動畫，做一個新的圖層將這個動畫複製(Alt拖拉)到新圖層的第5格位置，修改前後透明度為20及50，同樣在新增一個圖層，拖拉複製前面的動畫近來在第10個影格位置，播放看看是否有殘影。
  2. 從場景的動畫轉為元件：從場景中選取要轉元件的圖層影格，複製影格，新增元件為影片片段，再貼上影格，則可以把剛剛的圖層及影格搬入這個元件，你可以在場景中新增圖層，再拖拉這個元件進去，播放時跟原來的動畫一樣。
  3. 製作文字亮光動畫：先製作一個文字元件，TLF,選一個V開頭的字體，大小100，打入Flash，然後新增一個圖層加入矩形，在顏色方塊選漸層，並將黑色調為白色，然後中間做一個控制點，兩端的alpha設定為0，就可以看到拉出的矩形為開始透明轉白在透明的漸層效果，將形狀旋轉一個角度，在最後影格加入關鍵影格拉矩形到字的右端，製作形狀漸變，再將文字圖層再製，拖拉到最上面，按右鍵加入遮罩，則底下的矩形動畫就變成上方文字的遮罩，動畫經過的區域才會有字型亮亮的出現。
  4. 製作打字機動畫：先製作文字「台灣首府大學歡迎您！」，按右鍵打散，再按右鍵選打散到圖層，再將影格移動到第5格，然後分別將影格移到要顯示的位置，最後在後面5個影格位置選全部圖層的該影格按右鍵新增影格，波看看有沒有一個字一個字播放。再來到第一個圖層新增一條線代表游標，然後轉為元件，在這個元件第3個插入關鍵影格，再清除影格，第5格加入空白關鍵影格，播放時就是閃爍，到場景中在各字出現的位置加入關鍵影格，再來調整游標到字後方，播放時就像打字機這樣播放了。
- 操作錄影：錄影10-1、錄影10-2、錄影10-3、錄影10-4
- 加分操作練習：範例10a

第九週期中考： (2019.11.11)

資多二A ：
- 期中考題目解說：期中考題
- 利用導線路徑動畫加入角色動畫元件，然後重新將角色加入路徑中。
- 在此檔案中加入從你的學號變到你的姓名的顏色形狀動畫(請將文字轉為形狀後再做)
- 做期中考第四題的錄影
- 做期中考第五題的錄影
- 操作錄影：期中考錄影4、期中考錄影5
- 加分操作練習：範例9a

第八週上課： (2019.11.04)

資多二A ：
- 期中考題目解說：期中考題
- 說明如何從其他檔案將元件載入這個檔案，運用在此專案的場景(靠元件庫切換)
- 利用導線路徑動畫加入角色動畫元件，然後重新將角色加入路徑中。在此檔案中加入從你的學號變到你的姓名的顏色形狀動畫(請將文字轉為形狀後再做)
- 做期中考第一題的錄影
- 做期中考第二題的錄影
- 做期中考第二題的錄影
- 操作錄影：錄影8-1、錄影8-2、期中考錄影1、期中考錄影2、期中考錄影3
- 加分操作練習：範例8a

第七週上課： (2019.10.28)

資多二A ：
- 英文與中文功能區對照說明
- Flash 發展演變：Flash維基百科
- 角色套骨架動畫的結構，角色一加入骨架就被綁進去一體成形，不能再編輯。
- 匯入一張透明角色(Stick figure)，加一個元件(Symbol)將圖拉進去按右鍵解散，使用橡皮差工具擦去不要的部分，拉骨架套入，當進行拉動骨架動畫時，圖形立即散開，所以點陣圖不適合套入骨架，圖必須重描，可以使用鋼筆工具、鉛筆工具、畫線工具，把筆畫條粗，進行繪製。
- 觀看很炫的火柴人動畫的製作流程，他是一格一格繪製的動畫，不是骨架套入的。
- 新增一個元件，使用鋼筆工具拖拉製作一個人型，再使用形狀_將線條轉為形狀的功能轉為shape，這樣就可以用剛剛套骨架的方式進行加入骨架，並進行動畫關鍵格設定。
- 下載動作分解圖，按照動作分解圖將不同影格處的關節調成與該動作相同，然後播放看看，如果是要播完停止動畫，則在該元件新增一個圖層，然後在最後一格新增空白關鍵影格，按右鍵加入動作指令stop();，則可以將元件拖拉到場景，ctrl+enter測試播放看看動畫有沒有停止在最後一格。
- 你可以在元件庫使用重製元件，改名後修改影格的動作，按Alt鍵拖拉影格則可以複製該影格的資訊到其他影格成為新的關鍵影格。你也可以使用場景圖層套用預設動畫如水波動畫來增加動畫趣味。
- 加分操作練習：範例7a

第六週上課： (2019.10.21)

資多二A ：
- Flash CS5教學投影片：投影片
- 遮色片：載入一張背景圖放入場景，圖層在第40格插入影格，再新增一個圖層，第一個畫一個星形，第40格插入關鍵影格，將星形放大到蓋住背景，再來製作形狀補間動畫，在此圖層按右鍵加入遮色片，然後播動畫可以看到轉場動畫效果。
- 加入一個圖層，在第20格插入空白關鍵影格，載入另一張圖片，在第40格處加入影格，拉到遮色片底下。則播完第一張圖後再播第二張圖。
- 製作一個元件(Symbol),加入一個Bannar的圖片，將元件屬性改為影片片段，套預設動畫效果的翻轉，再將這個元件拉入場景排到兩圖上方，則bannar也在場景裡面跟著轉場出現。
- 新增一個圖層，在最後一格新增空白關鍵影格，在動作輸入stop();，則ctrl+enter後不會重複播放。
- Bannar元件製作移動補間動畫，使用3D旋轉及3D轉譯，在相關的影格改變物件的方向及位置，然後可以另存成移動預設效果，提供給另一個物件套用。
- 不同檔案之間元件與圖片的切換使用，利用元件庫的下拉選單選檔案再選元件拖拉到場景即可。
  加分操作練習：範例6a

第五週上課： (2019.10.14)

資多二A ：
- Flash CS5教學投影片：投影片
- 下載小綠人的圖片資料
- 先開啟新檔選actionscript 3.0，然後建一個元件是影片片段命名為小綠人，匯入圖片到元件庫。
- 這時影片片段的元件沒有東西，再做一次匯入影像檔案到元件庫選第一個檔，對話出現選全部影像導入，然後出現一個對話選取代原來元件，則小綠人的元件出現了18張有關鍵影格的動畫。將元件拉入場景，Ctrl+enter測試影片，可以跑，太快的話修改速度為6fps。
- 重製一個小綠人元件命名為向右，然後修改每個關鍵影格的圖片為水平翻轉，測試動畫則是向右走的小綠人，這些圖片都可以事先用Photoshop處理為透空貼圖。
- 場景新增背景圖層，加入背景圖調成畫布大小，將背景圖層拉到最下層。
- 把向左走、向右走的兩個角色拉入，各放在路徑的末端，然後在中間做關鍵影格將角色位移向前，最後兩個碰在一起，請在關鍵格間按右鍵做傳統補間動畫。然後測試播放看看動畫順不順。
- 建立一個影片片段元件，拉入一個角色照片(如熊讚)，新增圖層使用鋼筆工具描繪邊框，再做細部調整，再使用油漆桶工具填滿黑色。再新增一個圖層，使用鋼筆工具描嘴巴，填滿白色，然後選取兩個圖層按右鍵轉換為元件，命名為熊讚ok，再來去掉邊線。在場景新增圖層，拉入熊讚ok的元件，解散元件，在第18格加入關鍵影格，把熊讚刪除，拉一個橢圓填不同顏色，去掉邊線，然後製作之間的形狀漸變動畫，則熊讚慢慢轉變成橢圓。
  加分操作練習：範例5a

第四週上課： (2019.10.07)

資多二A ：
- Flash CS5教學投影片：投影片
- Flash導引線：圖層放入物件，在40影格新增關鍵影格，加入傳統捕間動畫，在該圖層按右鍵選增加導引線，然後使用畫線工具拉出路徑位置，影格1的位置再拖拉物件到路徑起點，影格40的位置拖拉物件到路徑終點。可以用選取工具修改路徑，可以再關鍵影格處用縮放工具修改物件。
- 放入有道路的背景圖，文件修改尺寸，背景圖修改尺寸為文件尺寸，再調整路徑及物件的位置，ctrl+enter預覽動畫。
- 形狀補間動畫：新增圖層，使用繪圖工具做出封閉區間，去掉外邊緣線，在40影格處增加關鍵影格，刪除原有物件，新繪一個不同形狀的物件，然後製作形狀補間動畫，可以移動40影格物件的位置，則除了形狀變外，也會有移動補間動畫。
- 新增圖層打入文字，按右鍵打散，同樣的在40影格增加關鍵影格，刪除字，再打相同的字換字型打散，製作形狀補間動畫。外來圖片無法製作想要的形狀補間效果。
- YouTube有許多教學影片，關鍵字打對就可以找到很多並下載(使用4kvideo downloader)
  加分操作練習：範例4a

第三週上課： (2019.09.30)

資多二A ：
- Flash CS5教學投影片：投影片
- Flash的移動補間動畫說明
- 下載一個多拉A夢的圖片，新增一個元件，將圖片載入拉進去，然後再從元件庫拉此元件到場景內，在影格20處按右鍵產生影格後插入移動補間，起始格到20格之間變成淺藍色的填色
- 請在20格處選物件拖拉到第二個位置，並將綠色線拖拉成想要移動的曲線軌跡
- 右手邊有補間動畫的屬性值可以調整。
- 使用選取工具可以改變路徑的形狀，按右鍵可以全部轉換成關鍵影格，也可以獨立插入關鍵影格的位置、縮放等部分資料
- 使用Photoshop處理圖片透空存檔，然後載入之後更換元件，則場景內的角色就會變透空了，過切換描圖紙按鈕看到影格物件重疊的情況，也可以直接選到對應影格的物件直接編輯。
- 下載一個背景是天堂下來階梯的圖，然後拉到場景，設定與圖大小相同
- 依序調整每個影格的物件到階梯上，ctrl+enter可以預覽執行狀況並產生.swf檔。存檔及發布設定，成果執行網頁瀏覽。
- 加分操作練習：範例3a

第二週上課： (2019.09.23)

資多二A ：
- Flash CS5教學投影片：投影片
- Flash功能表、工具列位置，切到傳統介面，時間軸在上方，工作區在下方、工具列在左方
- 場景繪圖，有筆畫與填滿，可更換顏色、筆刷大小、重疊處會蓋住下方圖片，移開時變空白區域，改用元件建立則不會影響下方的圖片。
- 建立一個影像的元件，練習泰迪熊圖片複製貼入元件中，並在元件庫中拖拉進場景並調位置及大小。
- 開啟一個範例，載入Flash中成為另一個場景，開啟該檔元件庫，直接拖拉到起始場景變成該場景的物件，元件也可以由檔案匯入。
- 加分操作練習：範例2a

第一週上課： (2019.09.16)

資多二A ：
- 3D軟體(Adobe)與3D軟體(Autodesk)市場上區別，二年級主要以2D為主，三年級則上3D相關軟體
- 2D動畫軟體：向量式圖形及影像式圖形
  1. Adobe Flash(CC版的Animate)
  2. Comic Studio
  3. Clip Studio Paint(正式版提供動畫功能)
  4. CrazyTalk Animator
- 課程進度安排介紹、使用教科書及參考書(大部分時間會使用Flash CS5)。
- 2D座標系統及2.5D的深度方向多層差異
- 運鏡及腳本概念
- 證照說明、專題製作