謝慧民_2D動畫設計108_2

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

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

第十八週期末考： (2020.06.23)

資多二A ：
- 期末考：請製作一個用中文自我介紹的2D動畫。

第十七週上課： (2020.06.16)

資多二A ：
- 期末考：請製作一個用中文自我介紹的2D動畫。
- 請開啟一個專案，加入場景及角色。
- 為角色的頭更改為你的臉，臉使用遮罩將脖子以下去除，將外面去除。
- 為角色加入適當的眼睛及牙齒。
- 使用balabolka安裝TTS語音平台及中文語音，將打好的中文字貼入，設定聲音頻率與CTA的相同，朗讀看看，存檔為mp3格式。
- CTA內使用在入音訊給角色開口說話，套角色動作為走路，從右邊走到左邊，一路講話，套一些表情。
- 攝影機錄製去調整觀察角度跟遠近，存檔。
- 範例：範例17
- 操作錄影：錄影17-1、錄影17-2、錄影17-3、錄影17-4。
- 加分練習：有操作軟體

第十六週上課： (2020.06.09)

資多二A ：
- 出差補課

第十五週上課： (2020.06.02)

資多二A ：
- 啟13周製作的川普頭像角色，進入組合模式，使用遮罩編輯器調整將外邊化成藍色去背。
- 試播放角色的動畫看看有沒有需要再調整，你可以調骨架連結圖片位置，讓動畫順暢。
- 更換角色衣服、各部分零件。頭部可以使用外掛的自己設定影像編輯器PS來編輯修改。
- 套幾段動作看看，打開時間軸看看影片片段的成果，操作縮放影格範圍。
- 加入場景，使用3D導覽方式看圖層的相對位置，使用物件底下的room in圖示拖拉調整物件前後位置。
- 套語音講話，也可以使用麥克風錄音加入講話，或從外面載入mp3或wav的聲音檔，使用循環鍵開啟，拖拉影片片段作重複動作，可以輸出視訊或影像。
- 範例：範例15
- 加分練習：有操作軟體

第十四週上課： (2020.05.26)

資多二A ：
- 角色設計：拉入一個二代的角色，到人物組合模式，點頭部更換頭像，有分10個角度，剛開始都放相同圖片，可以到各角度更換相關圖片。
- 更換角色各部分組件。
- 自訂按加號新增角色各部分組件調整結果。
- 套入3D動作看看各角度是否有問題。
- 真實人物的頭要套入卡通角色裡面通常要拍各種角度，有很大的困難，因此都使用製作變形型臉部，做完五官調整、加入適當的眼睛及牙齒就可以做3D表演，不須給10張圖片。
- 範例：範例14
- 加分練習：有操作軟體

第十三週上課： (2020.05.19)

資多二A ：
- CTA角色設計
- 下載一個臉，製作變形臉部，依照提示調整對應位置的點，完成後臉會取代原先設定的角色的臉。
- 觀看CTA角色動畫的介紹：https://www.youtube.com/watch?v=fa9fDBwcDOU
- 場景模式及組合模式切換。
- 時間軸檢查關鍵影格，說話輸入英文文字轉語音。
- 練習3D動作，轉角度讓角色可以側著走，轉角度可以走向你，完成後看時間軸的3D動作有一條影片片段，也有關鍵影格在裡面。
- 打開臉部，有臉部動態片段及TTS聲音片段。
- 加入場景及道具，打開3D視圖看看各物件在場景中的位置，均在Z方向不同層上面，可以在3D視圖中縮放及移動物件。
- 因此先拉物件進場景再調角色動畫會比較容易，不用事後再調物件位置已符合角色動態。
- 範例：範例13
- 加分練習：有操作軟體

第十二週上課： (2020.05.12)

資多二A ：
- Crazy Talk Animator pro 2.0動畫製作。
- Cartoon Animator 4.0是Reallusion公司新的名稱，功能與前幾代類似。
- CTA與iClone操作類似，有範本資料庫，各類素材很多，直接套用，新增角色，賦予動作，更換角色個部分配件，加入背景，加入道具等觀念及操作方式都與iClone相同，學會了這套，進入3D動畫就比較就輕駕熟。
- 有舞台模式及組合模式，是前台與後台的概念
- 時間軸是控制動畫重要的地方，有一根拉桿可以看到想看的影格區域。
- 顯示時間軸觀察舞台上的物件，在各個影格區是否有關鍵影格或影片片段。
- 軌道清單可以叫出你要看的物件，然後打開顯示要看的時間軸。
- 簡單快速做一個影片，加入場景、道具、角色跟動作，並輸出選AVI壓縮格式。
- 範例：範例12
- 加分練習：有操作軟體

第十一週上課： (2020.05.05)

資多二A ：
- 到網路上找一張角色動畫分解圖，最好有五張。
- 到Photoshop去把每個角色選取，另存新檔為png。
- 製作一個滑鼠移入就會播放角色動畫的專案。
- 先製作一個walkman的元件，然後將這些圖片按順序編號為1-5。
- 匯入第一張到舞台，然後選全部匯入，則此元件就有五個關鍵格塞入五張圖片
- 再加一個圖層action加入一個stop();讓動畫開始是停止的。
- 為一個按鈕命名，然後寫程式控制滑鼠及進入畫面讓角色播放動畫：
  import flash.events.Event;
  import flash.events.MouseEvent;
  Object(this).walkman_mc.addEventListener(MouseEvent.MOUSE_OVER, walkbegin)
  Object(this).cross_btn.addEventListener(MouseEvent.MOUSE_OVER, mybegin)
  
  function mybegin (e:MouseEvent) {
          Object(this).cross_btn.addEventListener(Event.ENTER_FRAME, mywalk);
  }
  function walkbegin (e:MouseEvent) {
          Object(this).walkman_mc.addEventListener(Event.ENTER_FRAME, mywalk);
  }
  
  Object(this).walkman_mc.addEventListener(MouseEvent.MOUSE_OUT, walkend)
  Object(this).cross_btn.addEventListener(MouseEvent.MOUSE_OUT, myend)
  
  function myend (e:MouseEvent) {
  
          Object(this).cross_btn.removeEventListener(Event.ENTER_FRAME, mywalk);
  }
  function walkend (e:MouseEvent) {
  
          Object(this).walkman_mc.removeEventListener(Event.ENTER_FRAME, mywalk);
  }
  
  function mywalk(e:Event)
  {
          if (Object(this).walkman_mc.currentFrame == Object(this).walkman_mc.totalFrames)
          {
                  Object(this).walkman_mc.gotoAndStop(1);
          }
          else
          {
                  Object(this).walkman_mc.nextFrame();
  
          }
  }
- 你可以使用替換將角色換掉，程式可以為新的角色服務。
- AS3範例：範例11
- 加分練習：有操作軟體

第十週上課： (2020.04.28)

資多二A ：
- 開一個新檔，背景設為灰色
- 用基本橢圓形工具畫一個圓球，修改參數變成小精靈1/4開口。
- 加入內外光暈及陰影濾鏡，讓物件變成一個發光的C字，轉成影片片段元件，命名為ball_mc。
- 新增text圖層，加入靜態文字stage.mouseX=、stage.mouseY=，及動態文字，設為mx_txt及my_txt代表滑鼠在場景內的座標。
- 複製前面四個物件到右邊，靜態文字分別改為ball_mc.x=、ball_mc.y=，動態文字改名為bx_txt及by_txt代表球在場景內的座標。
- 新增一個圖層action，寫入程式碼：
  - stage.addEventListener(Event.ENTER_FRAME, mousetrace)
    function mousetrace(e:Event) {
            Object(this).mx_txt.text = String(stage.mouseX)
            Object(this).my_txt.text = String(stage.mouseY)
            Object(this).bx_txt.text = String(Object(this).ball_mc.x)
            Object(this).by_txt.text = String(Object(this).ball_mc.y)
            Object(this).ball_mc.x = Object(this).ball_mc.x + (stage.mouseX-Object(this).ball_mc.x)/10
            Object(this).ball_mc.y = Object(this).ball_mc.y + (stage.mouseY-Object(this).ball_mc.y)/10
        Object(this).ball_follow.x = Object(this).ball_follow.x + (Object(this).ball_mc.x - Object(this).ball_follow.x)/10
        Object(this).ball_follow.y = Object(this).ball_follow.y + (Object(this).ball_mc.y - Object(this).ball_follow.y)/10
        Object(this).ball_mc.rotation = Object(this).ball_mc.rotation + 1
            Object(this).ball_follow.rotation = Object(this).ball_follow.rotation + 2
    }
    
    //displace = mouse position - ball positopn
    // ball position = ball position + displace/10
    //               = ball position + (mouse position - ball positopn)/10
- 則滑鼠移動到哪裡球會跟到哪裡，有點像列車進站緩緩進入。
- AS3範例：範例10
- 加分練習：有操作軟體

第九週期中考： (2020.04.21)

資多二A ：
- 期中考題目：2A_2danimation2_1082middle
- 使用第6次上課成果，將其他次上課的互動操作製作成影片片段元件，取代原來每一頁的內容，重複做三次，另外可以再新增一個按鈕做超連結網頁開啟。
- 完成後存成你的學號.fla繳交

第八週期中考操作上課： (2020.04.14)

資多二A ：
- 開啟一個新的Flash檔案是Actionscript 3.0。
- 期中考題目：2A_2danimation2_1082middle
- 使用第6次上課成果，將其他次上課的互動操作製作成影片片段元件，取代原來每一頁的內容，重複做三次，另外可以再新增一個按鈕做超連結網頁開啟。
- 完成後存成你的學號.fla繳交
- 操作錄影：錄影8-1、錄影8-2、錄影8-3。
- AS3範例：範例8
- 加分練習：

第七週上課： (2020.04.07)

資多二A ：
- 開啟一個新的Flash檔案是Actionscript 3.0。
- 與學生演練google meet及Google Classroom，使用Line群組加入修課學生，通知上課及超連結、課程代號等。
- 期中考題目：2A_2danimation2_1082middle
- 使用場景偵測按鍵，顯示按鍵的字元碼、字元、按鍵碼，右邊的動畫當按鍵切換時也切會成動或不動。解說做法，沒有時間操作練習，下星期直接做期中考題目，開放一些資源給下載運用。
- 操作錄影：。
- AS3範例：範例7
- 加分練習：有操作軟體

第六週上課： (2020.03.31)

資多二A ：
- 開啟一個新的Flash檔案是Actionscript 3.0。
- 改文件大小為800x600，要做網頁設計
- 建立幾個圖層：bg、menu_bg、page 、button、level、action
- 在場景使用基本矩形工具拉一個背景800寬，有導角設定，點矩形成填色狀態，然後使用鋼筆工具畫選單與內容的切割曲線，畫完切成兩塊各放到圖層bg及menu_bg內。
- 在level標籤的第1、5、10格命名為_home、_product、_contract
- 到預設按鈕找有文字的拉到場景的按鈕背景區，不同顏色按鈕共三個，分別改字為home、product、contract
- 然後按鈕各自命名為home_btn、product_btn、contract_btn
- Page圖層的第1、5、10影格均為關鍵影格，加入放大文字home、product、contract，以表示來到該頁面內容。
- Action第1格加入stop();
- 選按鈕home_btn套用程式片段為播放到影格停止，然後修改function名稱，及標籤”_home”。其他按鈕則複製修改相關內容。修改文件高度
- 操作錄影： 6-1。
- AS3範例：範例6
- 加分練習：有操作軟體

第五週上課： (2020.03.24)

資多二A ：
- 開啟一個新的Flash檔案是Actionscript 3.0。
- 製作一個六個圖層從下到上分別命名為bg, animation, mask, text, level, action,
- 在Bg圖層使用基本矩形工具畫一個類似按鈕的矩形，將圓角及外線寬度設大，然後對圖形做解散群組、形狀_將線段轉換成填色，填色可區分為外框填色跟內填色。選取內填色複製到上面兩個圖層，然後在mask圖層按右鍵選遮色片，鎖定bg圖層，擴展到25影格。
- 切到level圖層，第1 影格標籤名稱設為_home，第5影格標籤名稱設為_begin，第20影格標籤名稱設為_end。
- 切到animation的第5影格加入關鍵影格，將內填色塊拖拉到mask左邊，改變為漸層填色，右邊吸取黃色，左邊為藍色。到第9個影格加入關鍵影格，將內填色再拉回原位置，然後製作形狀漸變，有綠色背景的箭頭。到第20個影格加入關鍵影格，第25 格加入關鍵影格，將第5格內容複製貼上，然後製作形狀漸變，然後可以觀察一進一出的結果。
- 再來切換到text圖層，在第一格打入文字Home，25格加入影格。
- 切換到action，第1及第9格打入stop();
- 然後在action第1格加入程式碼：
  this.addEventListener(MouseEvent.MOUSE_OVER, mybegin)
  function mybegin(e:MouseEvent) {
          this.gotoAndPlay("_begin")
  
  }
  this.addEventListener(MouseEvent.MOUSE_OUT, myend)
  
  function myend(e:MouseEvent) {
          this.gotoAndPlay("_end")
  
  }
  複製所有影格，再製作一個新的元件為影片片段，貼上影格。把場景的東西刪到剩一個圖層的空影格，將元件拉入，執行看看滑鼠移入跟移出的動畫效果，拖拉幾個按鈕進來，同樣具有剛剛的效果。
- AS3範例：範例5
- 加分操作練習：跟著操作

第四週上課： (2020.03.17)

資多二A ：
- 開啟一個新的Flash檔案是Actionscript 3.0。
- 請找一張550X400的背景影像，加入場景中當背景圖層。
- 新增一個圖層，從預設按鈕選一個有文字的，然後重製為三個，個別修改文字為AS、JAVA、PHP放到這個新圖層排好位置
- 新增一個圖層寫問題(文字輸入：請問Flash支援哪一種語言？)
- 再來新增一個圖層在第2影格加入空白關鍵影格，然後加入你答對了，還有一個按鈕”再一次”。這個按鈕可以重製剛剛的按鈕改名再拉進來。這四個按鈕分別命名為a_btn、b_btn、c_btn、d_btn。
- 第3個按右鍵加入關鍵影格，將文字改為你答錯了。
- 在a_btn處按右鍵加入預設程式碼的播放到影格停止，把影格改為2，這時會自動增加一個Actions的圖層，其他兩個按鈕做法差不多，把影格改為3。
- 在第2格的d_btn也是設定播放到影格停止，把影格改為1。方法可以剪下貼到第一個影格。
- 第3格就複製第2個的程式碼，這樣直行到第3個才會執行程式碼跳回第1格
- AS3範例：範例4
- 加分操作練習：跟著操作

第三週上課： (2020.03.10)

資多二A ：
- 開啟一個新的Flash檔案是Actionscript 3.0。
- 請找一張背景550X400的圖，放入圖層命名為bg
- 請找一張400X300的圖像9張，當作播放的內容，新增一個元件為影片片段，將1-9格都設為空白關鍵影格，依序放入各張圖到各影格，使用與舞台對齊，將所有圖片置中對齊，拖拉影格看到輪流播放。
- 加一個圖層打TSU的文字logo。
- 在圖片圖層上方加一個圖層拉一個基本矩形工具，設定導角，按右鍵設為遮罩。
- 在最上面新增一個圖層按右鍵動作打入stop();
- 場景中將此元件拉入調整位置置中，命名為photo_mc。
- 新增兩個按鈕，一個向左，一個向右，各命名為prev_btn，next_btn
- 按鈕裡面加入新圖層在滑入跟按下各設定一個聲音(視窗_內建元件庫_聲音)
- 新增一個圖層按右鍵動作，打入以下程式碼：(可以使用上方輔助工具叫出相關指令)
  import flash.events.MouseEvent;
  Object(this).next_btn.addEventListener(MouseEvent.CLICK , mynext);
  Object(this).prev_btn.addEventListener(MouseEvent.CLICK , myprev);
  
  function mynext(event:MouseEvent){
  Object(this).photo_mc.nextFrame()
  }
  
  function myprev(event:MouseEvent){
  Object(this).photo_mc.prevFrame()
  }。
- 按ctrl+Enter執行看看，按兩個鍵會向前播放及向後播放圖片。
- AS3範例解說：範例3
- 加分操作練習：跟著操作

第二週上課： (2020.03.03)

資多二A ：
- CTA介紹
- AS3範例解說：範例2
- Help及搜尋。
- 加分操作練習：跟著操作

第一週上課： (2020.02.25)

資多二A ：
- 介紹TQC+ Flash證照及ACE證照
- 介紹Flash的Actionscript 3.0的歷史
- 英文教材包括手冊介紹
- AS3工作環境投影片：投影片連結
- 課程進度安排介紹、使用教科書及參考書(大部分時間會使用Flash CS5)。