Animate CC 匯入Illustrator 素材

更新 發佈閱讀 3 分鐘

動畫素材除了使用Animate CC工具繪製之外,搭配匯入自Illustrator繪製較精細的動畫素材,也是專業與必要的方式。而在搭配匯入自Illustrator繪製素材製作動畫時的各種方式與技巧,也是動畫素材準備的重點內容。

1.直接拷貝貼上illustrator素材

您可以在 Illustrator 中建立具豐富圖像的圖稿,並簡單、快速且完美地拷貝及貼入 Animate CC中。對於在Illustarator繪製完成的一般物件,可以在二軟體同時開啟時,直接選取並拷貝至Animate CC上直貼上,當您將 Illustrator 圖像貼入Animate CC時,會保留下列屬性:路徑和形狀、筆畫寬度、漸層、文字等,在貼上對話框中一般選擇【使用AI檔案匯入工具的偏好設定貼上】、【套用建議的匯入設定以便解決不相容性】即可保持向量格式,勿勾選【貼上為點陣圖】。

vocus|新世代的創作平台

若直接貼上時有發現無法完整支援的內容,請在Illustrator中使用工作區域工具調整好檔案範圍,再執行【檔案>轉存>儲存為網頁用】選擇儲存PNG24透明背景檔,回到Animate CC再以檔案>匯入>匯入至舞台,完成匯入即可。

vocus|新世代的創作平台

2.匯入分圖層AI檔的設定

當您想要在 Illustrator 中建立完整的動畫素材,然後以一個步驟將它們匯入Animate CC時,您可以將圖稿儲存成原生 Illustrator 格式 (AI),並將各部位物件整理至各別獨立圖層上。

vocus|新世代的創作平台

在Animate CC中執行『檔案 > 匯入至舞台』,選取要匯入的AI檔,匯入時將首先顯示匯入選項設定視窗,在左側圖層區為顯示AI檔內的原始圖層與群組,可先收起每個圖層並勾取要匯入的圖層。

vocus|新世代的創作平台

在下方的『將圖層轉換成』可選擇設定原來AI圖層的匯入方式:『Animate圖層』將匯入文件中的每一個圖層轉換成Animate CC文件中的圖層。『將物件放回原始位置』AI檔案的內容會保留這些內容原本在 Illustrator 中的確切位置。『將舞台設成 Illustrator 工作區域大小』Animate舞台大小會調整為用來建立 AI 檔案的 Illustrator 工作區域 (或作用中裁切區) 大小。『匯入未使用的元件』 如果沒有選取這個選項,未使用的元件就不會匯入。『匯入為單一點陣圖影像』將 AI 檔案匯入為單一點陣圖影像。請選擇『將物件放回原始位置』、『將舞台設成 Illustrator 工作區域大小』

若匯入時有發現無法完整支援的內容,請回到Illustrator中使用工作區域工具調整好檔案範圍,再分圖層依序執行【檔案>轉存>儲存為網頁用】選擇儲存PNG24透明背景檔,回到Animate CC再以檔案>匯入>匯入至舞台,完成匯入即可。

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果

留言
avatar-img
哩老師的沙龍
30會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
哩老師的沙龍的其他內容
2020/02/05
以影像點陣圖為動畫素材時,除了一般的影像之外,還可以藉由Photoshop處理出去背景的影像素材,以及包含半透明效果的影像素材,也都是動畫中常需要的專業素材準備。 1.挖剪造型影像 影像素材外觀除了是直角矩型外,還需要圓角矩型甚至是其他的外觀造型,此時就需要使用Photoshop的路徑與選取範圍來處
Thumbnail
2020/02/05
以影像點陣圖為動畫素材時,除了一般的影像之外,還可以藉由Photoshop處理出去背景的影像素材,以及包含半透明效果的影像素材,也都是動畫中常需要的專業素材準備。 1.挖剪造型影像 影像素材外觀除了是直角矩型外,還需要圓角矩型甚至是其他的外觀造型,此時就需要使用Photoshop的路徑與選取範圍來處
Thumbnail
2020/02/05
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
Thumbnail
2020/02/05
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
Thumbnail
2020/02/05
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍
Thumbnail
2020/02/05
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍
Thumbnail
看更多
你可能也想看
Thumbnail
STEP1. 點取已經建立外框的文字,執行『效果 > 3D > 突出與斜角』,設定『突出深度:40 pt』,按下確定。點取建立的3D突出與斜角,執行『物件 > 擴充外觀』,將3D突出與斜角效果實體化。 STEP2. 使用魔術棒工具,點取文字正面部分,加上漸層填色,線性淺橘色至橘色。 使用漸層工
Thumbnail
STEP1. 點取已經建立外框的文字,執行『效果 > 3D > 突出與斜角』,設定『突出深度:40 pt』,按下確定。點取建立的3D突出與斜角,執行『物件 > 擴充外觀』,將3D突出與斜角效果實體化。 STEP2. 使用魔術棒工具,點取文字正面部分,加上漸層填色,線性淺橘色至橘色。 使用漸層工
Thumbnail
STEP1. 在PHOTOSHOP中開啟範例,使用『魔術橡皮擦』工具直接點取背景來去除背景,由圖層控制版上設定『透明鎖定』,在執行『編輯 > 填滿 > 黑色』將影像填滿黑色。 STEP2. 依序使用矩型選取工具框選影像並拷貝,至ILLUSTRATOR貼上,點取影像執行『視窗 > 影像描圖』,開啟
Thumbnail
STEP1. 在PHOTOSHOP中開啟範例,使用『魔術橡皮擦』工具直接點取背景來去除背景,由圖層控制版上設定『透明鎖定』,在執行『編輯 > 填滿 > 黑色』將影像填滿黑色。 STEP2. 依序使用矩型選取工具框選影像並拷貝,至ILLUSTRATOR貼上,點取影像執行『視窗 > 影像描圖』,開啟
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
以影像點陣圖為動畫素材時,除了一般的影像之外,還可以藉由Photoshop處理出去背景的影像素材,以及包含半透明效果的影像素材,也都是動畫中常需要的專業素材準備。 1.挖剪造型影像 影像素材外觀除了是直角矩型外,還需要圓角矩型甚至是其他的外觀造型,此時就需要使用Photoshop的路徑與選取範圍來處
Thumbnail
以影像點陣圖為動畫素材時,除了一般的影像之外,還可以藉由Photoshop處理出去背景的影像素材,以及包含半透明效果的影像素材,也都是動畫中常需要的專業素材準備。 1.挖剪造型影像 影像素材外觀除了是直角矩型外,還需要圓角矩型甚至是其他的外觀造型,此時就需要使用Photoshop的路徑與選取範圍來處
Thumbnail
Step1. 在Illustrator開啟練習檔,右側同心圓圈與旋轉直線即是要建立3D物件使用,左側與上方數字是要成為3D立體轉盤的貼圖內容。請仔細複選到右側大圓與所有旋轉直線(不含內圓)執行『物件 > 即時上色 > 製作』,使用即時上色工具於扇型區域依序填上紅色與黑色相間。 Step2. 選取
Thumbnail
Step1. 在Illustrator開啟練習檔,右側同心圓圈與旋轉直線即是要建立3D物件使用,左側與上方數字是要成為3D立體轉盤的貼圖內容。請仔細複選到右側大圓與所有旋轉直線(不含內圓)執行『物件 > 即時上色 > 製作』,使用即時上色工具於扇型區域依序填上紅色與黑色相間。 Step2. 選取
Thumbnail
STEP1. 開啟範例檔,選取中央直線並執行『物件 > 變形 > 旋轉』設定旋轉角度:10按下拷貝,再繼續按下『Ctrl』+『D』複製變形複製出所有旋轉10度的直線。 STEP2. 複選所有物件執行『物件 > 即時上色 > 製作』建立即時上色狀態,使用即時上色油漆桶進行上色。 STEP3. 選
Thumbnail
STEP1. 開啟範例檔,選取中央直線並執行『物件 > 變形 > 旋轉』設定旋轉角度:10按下拷貝,再繼續按下『Ctrl』+『D』複製變形複製出所有旋轉10度的直線。 STEP2. 複選所有物件執行『物件 > 即時上色 > 製作』建立即時上色狀態,使用即時上色油漆桶進行上色。 STEP3. 選
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
動畫素材除了使用Animate CC工具繪製之外,搭配匯入自Illustrator繪製較精細的動畫素材,也是專業與必要的方式。而在搭配匯入自Illustrator繪製素材製作動畫時的各種方式與技巧,也是動畫素材準備的重點內容。 1.直接拷貝貼上illustrator素材 您可以在 Illustrat
Thumbnail
動畫素材除了使用Animate CC工具繪製之外,搭配匯入自Illustrator繪製較精細的動畫素材,也是專業與必要的方式。而在搭配匯入自Illustrator繪製素材製作動畫時的各種方式與技巧,也是動畫素材準備的重點內容。 1.直接拷貝貼上illustrator素材 您可以在 Illustrat
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News