Adobe Animate CC 20分鐘速成課

Animate CC 是一款瘋狂的應用程式。 它是全球最受歡迎的動畫工具之一， 即使史蒂夫·賈伯斯親自試圖扼殺它，情況依然如此， Adobe幾乎從不更新它。 而且它最初是為了製作網站而設計的。 在這堂課的最初幾分鐘內， 我將向你展示你所需要知道的一切 開始製作並分享屬於你自己的動畫。 從那之後課堂上的每一分鐘， 我會向您展示一些新工具，這些工具將讓 Animate CC 更加強大。 更易使用且功能更強大。 我將提到許多快捷鍵， 並且我會在下方的描述中列出它們。 今天我將會談論許多想法， 但不要害怕暫停並倒帶重聽部分內容 或者嘗試一下小型支线任务的動畫 如果一個工具激發了你。 那我們開始吧。 所以我已經開啟了 Animate CC， 然後我會點選「建立新的」。 那我就立下我的決心吧。 目前，我將設定為 1920x1080。 你稍後如果願意，可以再做更改。 這不是什麼大事。 然後我將設定我的影格速率 每秒12幀。 你可以隨意設定任何幀率。 再一次，12 我發現對 2D 手繪動畫很有用。 我會點選「建立」。 現在我們面前擺著畫布。 這有時也稱為一個階段。 我們在底部有時間軸。 我就直接按 B 鍵來選取畫筆工具， 或者您可以選擇畫筆工具 在這裡的工具列上。 我要開始畫一個小球。 我正在使用壓力感應功能，因為我正在使用平板電腦。 您可以在此處的面板上開啟或關閉此設定。 你可以在這裡更改線條粗細。 所以如果你沒有壓力感應功能 而你正在使用滑鼠， 你可能會發現你的畫筆有點粗。 所以你可以使用這個滑桿 將線條寬度調得稍微細一點。 因此，我們有了動畫的第一幀。 是時候製作我們的第二個畫格了。 Animate CC 中的每一幀都稱為關鍵幀。 我可以透過「插入」功能建立新的關鍵影格， 時間軸，空白關鍵影格。 但正如你所能想像的，反覆這麼做 會變得相當令人厭煩。 你可以改為按一下鍵盤上的 F7 鍵， 你可以在下面看到。 它有一個新的空白關鍵影格。 顏色不一樣。 現在我看不到我舊的關鍵影格了。 所以我需要做的是點擊這裡這個小按鈕 針對洋葱皮效果， 這將會顯示給我之前的畫面 потер 以及我在動畫製作時的未來畫格。 所以我會快速地再描一次之前的圖。 然後我會按一下 V 來選擇它 或使用工具列中的這個小選取工具。 我會點選線條，然後拖曳它移動。 你其實可以使用箭頭按鈕 如果你想要更精確一點 當你移動它時。 所以我的第二個關鍵幀完成了。 現在我再按一次 F7 來建立一個新的關鍵影格， 我就直接動畫跳過了。 一幀一幀地。 在進行的過程中，逐步找出一些不錯的小段落間距。 如果我想讓球移動得慢一點， 我讓圖像靠得更近。 如果我想讓它快速移動， 我把它們稍微分開一點。 此時，你可能會想縮放檢視。 你完全可以輕鬆做到那件事 透過選擇側邊的小放大鏡工具， 或者您可以按 Z 鍵放大，按 Alt Z 鍵縮小 然後點擊您想要前往的位置。 然後如果你想在畫布上移動， 你可以按住空格鍵。 這將為你提供手形工具， 然後您就可以點擊並拖曳畫布來移動它 就像一張紙一樣。 我希望這個動畫能夠循環播放。 但我現在遇到一個問題 我看不到第一幀的位置 在我的洋葱皮層中。 所以我需要做的就是拖動這個 onion skin 滑桿 稍微往時間軸的起點再推後一點 所以我可以看到動畫的第一幀 我想要循環的。 現在我 juste 快速關閉透視圖功能， 而且如果我想玩點什麼， 我可以按這個小播放按鈕 按一下頂端的時間軸或按 Enter 键。 你會立刻注意到，它並沒有循環。 那我需要做什麼呢 按一下時間軸上的這個小循環按鈕， 但目前還沒有循環整個時間軸。 因此，我們需要拖動這個小滑塊 在時間軸的頂端， 哪個迴圈範圍一直往回延伸 到時間軸的起點。 現在我按下 Enter 鍵，我們就有一個很不錯的小迴圈。 我把它保持得非常粗糙。 但你可以隨意保持它乾淨整潔。 而且我也讓它的大小隨時間稍微改變了一些 所以感覺它在空間中移動了一點。 現在我們已經完成了線稿。 我想用顏色填滿這條線條。 這真的很簡單。 我們 juste 選擇這個油漆桶工具 或按 K 鍵使用捷徑。 現在我來選擇我們的顏色擷取工具。 我可以選擇其中一個現有的色樣 或者我可以到這裡的小色樣選擇器上去 並選擇我們的一種定制顏色。 我要選一個黃色 然後我只會點擊我們圓圈的中間。 在這個時刻， 您可能會發現您的填充工具什麼也無法執行。 那可能是因為你還沒有關閉 你畫作中的所有空白處。 解決此問題最簡單的方法是 是前往這裡的工具選單 按一下「關閉間隙」。 我經常使用緊密的大型間隔。 當然，還有另一種做法。 只是使用你的畫筆工具 填補其中任何一個小空隙 留在你繪圖中的那些。 現在我只會逐一檢視每一幀並填滿它。 您可以拖曳時間軸來執行此操作 或者你可以使用更快的方法， 正在逐步瀏覽關鍵幀 使用逗號和句號按鈕。 好的，現在我們完成了。 我可以按 Enter 鍵，並觀看我們的動畫回放。 現在看起來有點酷。 但我認為我們可以添加一些額外的想法。 那我接下來要做的是建立一個新圖層。 我將在這現有的圖層之上建立一個新圖層。 我會快速更換我的畫筆顏色 然後我會往下拉到我們的圖層面板這裡 按一下加號按鈕。 這將在上方建立一個新圖層 我還會點擊第一層的鎖定按鈕。 這將意味著我無法意外地進行編輯 我已經完成的動畫。 現在我來畫一些葉子並把它們塗滿。 我希望整個動畫過程中它都保持靜止。 你可以在時間軸上看到 這幀關鍵幀中沒有任何小的間斷。 這意味著它將在整個時間內都成立。 如果你有興趣進一步延伸 關鍵影格持續的時間有多長？ 你可以直接按一下 F5。 這將在關鍵幀中為你提供一點空間。 然後如果你想移動它們， 你只需點擊它們即可 然後按一下並拖曳到您想要的位置。 那樣只會重新調整他們前進的時間點。 同時也將它們放在不同的圖層上。 如果你想刪除其中一些關鍵幀， 您可以按住 Shift 選取它們，然後按 Shift + F5。 這樣只會刪除您的關鍵幀 或任何你已選取的暫留畫格。 所以我現在想要製作的這段動畫的最後一部分 是花朵的一小段花梗。 那我來建立一個新圖層 然後直接向前動畫一段小莖。 因此，每當我想要創建一個新畫面時， 我再按一次 F7 就好了， 這將會創建一個空白畫框 在我所處的時間軸上。 那我就用我的洋葱皮吧 並全力衝破這段動畫，直線前進 回到起點。 現在我們有一段漂亮的花的循環動畫 而且我想將它匯出，與他人分享。 因此，有兩種主要的方法可以做到這一點。 我們已經支援匯出至 Swift， 這是一種特殊的閃存文件， 或匯出影片。 匯出 Swift 時會將所有內容保持為向量格式， 但在網路上分享真的非常困難。 雖然匯出影片會更容易分享 在 Instagram 和類似平台上 你不會保留任何向量資訊。 當我提到向量資訊時 我是指與一般的影片軟體不同， Animate CC 使用數學線條來建立其圖像。 這意味著你可以隨意將其擴大到任何你喜歡的規模 不會變得模糊不清。 我將從匯出至 Swift 開始。 最好的方法就是按一下 Ctrl+Enter 或在 Mac 上按 Enter 鍵。 這將開啟一個新視窗 而且你會在頂部看到檔案名稱， untitled.swift 它會將其儲存至資料夾中 您的動畫檔案儲存的位置。 但由於我們的檔案並未儲存於任何位置， 現在看來正是個好時機 真正將檔案儲存到一個聰明的地方。 因此我們會前往「檔案」，選擇「另存新檔」，或按快捷鍵「Command S」。 然後我會把它存起來，並給它取個名字， 像花朵，然後是版本號。 現在你可以在電腦上看到這個檔案了。 不過正如我所說，Swifts 這種檔案格式有點好笑。 它們很適合用於 After Effects 或者只是預覽你的動畫。 不幸的是，它們更難在視頻平台上分享。 那我們來製作一個影片檔案，而不是 Swift 檔案。 我會前往「檔案」，選取「匯出」，然後匯出影片與媒體。 這將彈出一個對話方塊， 這將讓我們匯出 H.264 並直接傳送至媒體編碼器。 Media Encoder 實際上是與 Animate CC 分開的應用程式。 因此，如果你還沒有安裝的話， 您可以從您的 Creative Cloud 套件中安裝它。 好的，回到這個對話方塊。 H.264 只是一種編碼格式 而且這是一種常見的網絡視頻格式。 我正在使用所有提供的預設設定。 但如果你想要暫停它 並與您的設定進行核對，您應該這麼做。 不幸的是，Media Encoder 常常出現故障，問題不斷。 第一次做這件事時，我花了很大的功夫。 所以我實際上必須確保媒體編碼器已開啟。 一旦開啟，您就可以返回 Animate CC 按一下匯出按鈕。 一旦你完成那件事， 它會直接在媒體編碼器中執行。 而且，它會再次自動儲存 在您的主檔案儲存的資料夾目錄中。 此時我們才剛過八分鐘 而且你有一個可以分享的影片檔案 與你的朋友們以及你所需的所有技能 開始製作屬於自己的動畫。 接下來的15分鐘內， 我將向你展示如何製作這個動畫 再往前一點 使用 Animate CC 內一些功能更強大的工具。 那麼，讓我們回到正題，我來告訴你我接下來要做的事。 我們尚未探討過的 Animate CC 的一大部分 符號的概念。 因此，不如直接說明符號是什麼， 讓我來示範一下我可能會如何在這段動畫中使用它。 那我們來給這朵花加上一張臉吧， 但我並不想到處重新繪製每一幀。 我已經建立了一個新圖層來放置臉部 現在我正在將它繪製到該圖層上。 當然，我可以每次重新繪製這張臉。 或複製並貼上它， 但更靈活的方式是 創造一個臉部的象徵。 所以我按下 V 鍵，並選取臉部的所有元件 然後我會往上走進行修改，再轉換為符號。 然後我會將我的符號類型更改為圖形 我會給這張花臉重新起個名字。 現在我會按一下確定。 而當我現在選擇臉部時， 它周圍有一個藍色的框。 這正告訴我，臉現在已成為一個物件。 此情況下的物件是花臉符號。 我們剛才創造的。 因此它會將其視為一個整體。 現在我有了我的臉， 我可以直接瀏覽我的動畫 並將它移到花的上方 正是我想要的每一幀的位置。 因此，不如創建一個空的關鍵幀 每一幀畫面 我實際上要建立一個新的關鍵幀 根據之前的內容。 因此，不如按一下 F7， 我們將按 F6。 這將僅僅創建一個複製品 我們可以編輯的前一個關鍵幀。 所以你可以在此觀看我， 我只是在建立一個新的關鍵幀 然後按下 F6， 將臉部拖曳以適應花朵的形狀 然後再次按一下 F6 然後一遍又一遍地重複同樣的過程 直到我完成所有的動畫為止。 如果我把它回放的話， 我觉得這看起來相當酷。 但更酷的是，現在我們終於可以開始玩了 憑藉符號的力量。 所以，我們就說我對這張臉不太滿意。 我可以雙擊它 現在我們進到了符號內部。 我能感覺到我身在符號之中 因為文件中的其他所有內容 有點灰暗。 我們可以看到這裡有一個小小的流程圖 那寫著場景，然後是花容。 所以花臉在這裡這件事 意思是我们正處於花臉符號的內部。 現在我要重新畫這張臉。 接下來將發生的是 每次我們使用那個符號時 它將隨著這張新面孔進行更新。 所以一旦我對自己畫出的這張新臉感到滿意， 我再雙擊一次背景 這樣就會讓我們離開編輯符號的狀態。 現在我們可以看到這裡的舊時間軸。 如果我按下播放鍵， 你可以看到所有的畫格 已更新為這個新的難過表情。 我其實比較喜歡那個笑臉。 所以我會重新編輯這個符號 然後把那個快樂的臉孔丟回去。 那我就再雙擊一次背景。 然後我回到我的主時間線了。 所以我覺得我這裡好像犯了一個小錯誤。 我的動畫在畫面中做得相當小。 這組合並不太好看。 它沒有居中。 我想把它移動一下。 我可以做的是解鎖所有這些層次 然後拖曳選擇我所有的繪圖。 然後按 Q 鍵進行變換 並試著將整個情況徹底轉變。 那樣的缺點在於 當我們進入下一幀時， 我們又得再轉換一次。 而且要持續做到這一點將會非常困難 整個動畫過程中。 但幸運的是，Animate CC 提供了這個解決方案。 稱為編輯多個畫格。 所以如果我點擊這裡的這個圖示 然後拖曳這個小標題 here， 它向我顯示了我動畫的所有畫面 我所選擇的。 現在我可以選擇我能看到的所有圖片。 按 Q 鍵進入變形模式 然後按住 Shift 鍵以均勻變換 我所有的動畫。 現在我可以移動它了 而且我可以關閉編輯多個畫格的功能。 我們可以看到，我們的動畫已經全部被編輯過了。 同時。 解決此問題的另一種方法 將所有這些動畫結合起來 並將所有這些層次合併為一個符號。 那我們現在就試試看吧。 我來選擇我的最上層 然後按住 Shift 選取 然後選擇我的底層。 然後我會右鍵點擊並選擇「將圖層轉換為元件」。 我會將這個符號重新命名為「花」 我會確保圖形上的字型已設定好。 就像以前一樣。 現在我們可以看到所有的圖層都消失了 而且我們只有一層，稱為花朵。 我們的畫布上只有一個符號。 現在我可以按 Q 來進行翻譯和旋轉 並一次性將其全部變形。 我也可以按 Ctrl+D 來複製它 我可以用各自的方式開始編輯這些內容。 我就把這一個放這裡，再複製一次， 把這一個放這裡。 現在我們有了三個相同的符號 同時演奏。 就像之前一樣，如果我雙擊這個符號 我可以開始編輯了 我們會更新所有其他符號。 所以我會把這些葉子的填充顏色改為紫色 然後雙擊舞台 現在你可以看到所有的花都長出了紫色的葉子。 不過我注意到這一幕裡有件事 就只有這些花嗎 彼此完全同步 這感覺有點不自然。 所以我想要做的是開始抵消這些花朵 而且這真的很容易做到。 如果我們點擊該符號 然後前往這裡的物件屬性區域 我們可以使用幀選擇器 更改動畫的第一幀。 因此，不是從第一幀開始 它將從第三幀開始 然後我會走過去看另一個 並從第六幀開始啟動。 這裡還有幾個其他選項。 我們可以選擇不讓動畫循環播放 或者我們可以將動畫的循環方向反轉 但我會讓它只持續循環動畫 現在這個樣子。 如果你在疑惑我所指為何 從第六幀開始 你只需輕按一下該符號即可 然後你就能看到符號內的時間軸。 因此，當我說第三個畫框時 它指的是這個時間軸的第三個畫面 在符號內。 好的，我們的花花夥伴們就位了 這裡有點小跳動 但正如你可能已經注意到的 我用一條非常粗糙的線畫出了這些人。 因為我正在使用畫筆工具 我畫得相當隨意 但如果我想擁有更為受控的 向量查看我的動畫？ 我該怎麼做呢？ 我會雙擊我的符號 進入我的動畫。 我會找一層我想清理的 按下鎖定按鈕。 現在我將在上方建立一個新圖層 這將成為我們的清理層。 而且因為事情可能會有點混亂 我將透過雙擊名稱來重新命名圖層 然後輸入一個名字。 那我就把下面那個稱為葉子吧 以及最上面的葉片底線清除或 CU。 現在我將對粗略層進行右鍵點擊 並前往屬性 我將選擇 50% 的不透明度 這將降低整個圖層的不透明度 讓它稍微透明一點 而且稍微容易在上面繪製。 到目前為止，我向你展示過的唯一繪圖工具是 畫筆工具 但還有其他幾種。 這次我會使用線條工具 而不是畫筆工具 這便形成了一條向量線。 所以我會快速把顏色改成黑色 我會在開始和結束處按住點擊 這裡的葉子。 如你所見，它創造出了一條非常細的線。 這大概太薄了。 那我就不按 Ctrl+Z 了 我會更改線條粗細 在此功能表列中。 現在我將點擊並拖曳 葉片的全長 這就形成了一條漂亮的直線 而且顯然這不是我們想要的。 我們想要一條曲線。 那我按一下V 這就是我們的選擇工具 將游標懸停在線條上 然後按一下並拖曳 這將使線條彎曲成一條優美的曲線。 如果你曾經使用過向量繪圖軟體的話 你可能更習慣使用鋼筆工具 而 Animate CC 擁有鋼筆工具 而且我經常使用它。 情況是這樣的。 它會建立貝茲控制柄 但我覺得這稍微不那麼直觀。 而不僅僅是使用直線工具。 但你知道，儘管去嘗試吧 用你覺得最適合的方式。 我就用一條線工具 完成這片葉子上剩下的線條。 現在，如果你一直仔細留意的話 你可能已經注意到，這裡我犯了一個非常微小的錯誤。 莖的顏色與葉的顏色線 有不同的顏色。 一個是深灰色，一個是黑色。 所以我會來調整葉子周圍的線條。 我無法使用桶填法來完成那件事。 我需要更改線條顏色。 我先來選取這些線條 而且最簡單的方法就是這樣 實際上是雙擊該行 這將選取所有行 彼此相連的。 然後我會按住 Shift 鍵並選擇我漏掉的任何行。 然後我會去查看屬性 並在色彩與樣式選項中變更線條顏色。 當我點擊這個小方框時 它會自動切換到吸管工具 這意味著我可以將游標懸停在我們的 STEM 顏色上， 按一下它，顏色就會變更為該莖的顏色。 您也可以更改線條的粗細 還有此選項中的所有類似內容 不必重新繪製它們 這是一個非常強大的工具。 所以如果我按住 Ctrl + Enter 我們將用快速一瞥來預覽這一點。 而且如果你盯得非常仔细的話 你會發現我又犯了一個非常小的錯誤。 我已經在清理層下方的粗糙層上離開了。 一個奇怪的動畫CC特性 即使你關閉了圖層的可見性，也是如此。 它在渲染時仍然會顯示出來。 因此，你也需要將其轉換為指南層。 我們可以透過在圖層上按右鍵來執行此操作。 並點擊指南。 現在如果我再次預覽動畫 你可以看到，粗糙的圖層已不再可見。 這正是我們所希望的。 好的，我們已經學到了很多很多 但我會對留下這堂課感到不安 除非我再給你看一樣東西 這使用的是所謂的運動補間。 我自己的作品中不太常用運動補間。 但它確實是一種非常強大的技術。 那讓我來示範一下我們該如何使用它。 我先來添加一個額外的元素。 當我們得到一個新圖層時，我們把太陽放在最上面。 讓我們給他添點表情吧 然後用一些橙色填滿太陽。 那我按V键了 並選擇太陽的所有元素， 右鍵按一下他，然後說「轉換為符號」。 我會稱這個符號為太陽。 我會在有太陽的圖層上按右鍵 並說「建立運動補間」。 現在我們知道它已經奏效了 因為這層已經變黃了 這表示其上有一個運動補間。 如果我們一路走到這層的盡頭 並把太陽拖曳到我們想要它去的地方， 就像魔法一樣，太陽自己在螢幕上移動。 我們不需要再繼續動畫了 每一幀都由我們自己完成。 看著動畫卻是如此 我想的是太陽在螢幕上移動 有點快。 因此，我們需要為動畫增加更多時間。 因此，我們需要為所有圖層添加一些畫格。 所以我會點選頂部的一個空白畫格， 按住 Shift 鍵，然後點擊底部的空白框架 這將選取畫格 在所有層的正中央。 然後我就會不停地按幾下 F5 键 將此時間軸延長。 所以我已將其擴展到48幀。 現在，當我把它播放出來時， 你可以看到太陽的動畫要慢得多 但感覺有點怪怪的 以這種方式直線移動。 那我們來點刺激的吧。 我會去第一幀， 按 Q 鍵啟用我們的轉換工具。 我會把它翻譯得簡潔一點，同時也稍微縮小一點。 然後我會走到最後一幀，做同樣的事。 然後我會走到時間軸的中間。 按一下 V 鍵，並將游標懸停在此綠線之上。 這將為我們提供一個小小的指示 我們有了一個曲線工具。 那我就直接把這條曲線工具往上拖 讓我們的動作形成一個優美的弧線 我也會在中間部分將其放大。 現在，當我把它播放出來時， 它的動作具有優美的弧線。 並且隨著前進而改變比例。 我想為這個動畫再添加一個細節。 我想讓臉看起來像是在看著花。 因為它已經過頭了。 要做到這一點，我會讓符號中的臉部動起來。 使用完全相同的技術 我剛剛才動畫化了整個太陽。 那我便雙擊太陽 這將讓我們一窺該符號的內在含義。 然後你就能看到 這裡只有一幀動畫。 因此，我們需要將時間表延長 而且通常我會試著整理時間線 與我們主要動畫長度相同。 那我把它設定為48幀。 上次我延長了時間軸 不斷地按多次 F5 鍵。 這次我直接跳到第48幀， 按一次 F5 這將延長一個空白的關鍵幀 一路到第48幀都為我保留。 現在我 juste 把臉轉移到一個新的圖層上 按一下它並說出「控制 X」。 這樣就把它切掉了。 然後我會用桶裝填工具填補這些空白。 我將建立一個新的圖層 現在我將選擇我的新圖層 按一下 Control + Shift + B。 如果我按一下 Control V， 它會將貼上的物件置於圖層的中間。 事實上，我希望它能貼回原來的位置。 因此，按 Ctrl + Shift + V 就能將其貼到我們想要的位置。 現在選取了臉部， 我會把它轉換成一個符號。 我叫它小臉。 然後我將再次創建一個補間動畫。 這次我從頭部這邊開始。 然後把它移到頭的另一邊。 這將是反向旋轉。 這將使整個臉部看起來像是在轉動。 你可能已經注意到， 我將關鍵影格置於時間軸的中間，然後 而且我真的希望它出現在時間軸的末尾。 所以我剛才點了關鍵幀 然後只是把它拖曳到時間軸的結尾。 現在，如果我將這些內容回放， 作案者似乎正在轉動臉部。 當它經過花的上方時。 就這樣，事情就完成了。 一個絕對速通 如何使用 Animate CC 制作動畫。 我已經將一個月的教育內容壓縮了起來 大約20分鐘後到達。 所以不要害怕再次觀看這段影片的某些部分 並查看頻道中的其他影片 更多免費動畫課程。 對了，隨便問吧 或者甚至在評論區回答一些問題。 下次再見。