Animate CC 匯入Illustrator 素材

更新 發佈閱讀 3 分鐘

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

1.直接拷貝貼上illustrator素材

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

raw-image

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

raw-image

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

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

raw-image

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

raw-image

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

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

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

留言
avatar-img
留言分享你的想法!
avatar-img
哩老師的沙龍
29會員
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
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
Step1. 在Illustrator開啟練習檔,右側同心圓圈與旋轉直線即是要建立3D物件使用,左側與上方數字是要成為3D立體轉盤的貼圖內容。請仔細複選到右側大圓與所有旋轉直線(不含內圓)執行『物件 > 即時上色 > 製作』,使用即時上色工具於扇型區域依序填上紅色與黑色相間。 Step2. 選取
Thumbnail
Step1. 在Illustrator開啟練習檔,右側同心圓圈與旋轉直線即是要建立3D物件使用,左側與上方數字是要成為3D立體轉盤的貼圖內容。請仔細複選到右側大圓與所有旋轉直線(不含內圓)執行『物件 > 即時上色 > 製作』,使用即時上色工具於扇型區域依序填上紅色與黑色相間。 Step2. 選取
Thumbnail
STEP1. 點取已經建立外框的文字,執行『效果 > 3D > 突出與斜角』,設定『突出深度:40 pt』,按下確定。點取建立的3D突出與斜角,執行『物件 > 擴充外觀』,將3D突出與斜角效果實體化。 STEP2. 使用魔術棒工具,點取文字正面部分,加上漸層填色,線性淺橘色至橘色。 使用漸層工
Thumbnail
STEP1. 點取已經建立外框的文字,執行『效果 > 3D > 突出與斜角』,設定『突出深度:40 pt』,按下確定。點取建立的3D突出與斜角,執行『物件 > 擴充外觀』,將3D突出與斜角效果實體化。 STEP2. 使用魔術棒工具,點取文字正面部分,加上漸層填色,線性淺橘色至橘色。 使用漸層工
Thumbnail
STEP1. 開啟範例檔,選取中央直線並執行『物件 > 變形 > 旋轉』設定旋轉角度:10按下拷貝,再繼續按下『Ctrl』+『D』複製變形複製出所有旋轉10度的直線。 STEP2. 複選所有物件執行『物件 > 即時上色 > 製作』建立即時上色狀態,使用即時上色油漆桶進行上色。 STEP3. 選
Thumbnail
STEP1. 開啟範例檔,選取中央直線並執行『物件 > 變形 > 旋轉』設定旋轉角度:10按下拷貝,再繼續按下『Ctrl』+『D』複製變形複製出所有旋轉10度的直線。 STEP2. 複選所有物件執行『物件 > 即時上色 > 製作』建立即時上色狀態,使用即時上色油漆桶進行上色。 STEP3. 選
Thumbnail
STEP1. 在PHOTOSHOP中開啟範例,使用『魔術橡皮擦』工具直接點取背景來去除背景,由圖層控制版上設定『透明鎖定』,在執行『編輯 > 填滿 > 黑色』將影像填滿黑色。 STEP2. 依序使用矩型選取工具框選影像並拷貝,至ILLUSTRATOR貼上,點取影像執行『視窗 > 影像描圖』,開啟
Thumbnail
STEP1. 在PHOTOSHOP中開啟範例,使用『魔術橡皮擦』工具直接點取背景來去除背景,由圖層控制版上設定『透明鎖定』,在執行『編輯 > 填滿 > 黑色』將影像填滿黑色。 STEP2. 依序使用矩型選取工具框選影像並拷貝,至ILLUSTRATOR貼上,點取影像執行『視窗 > 影像描圖』,開啟
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
以影像點陣圖為動畫素材時,除了一般的影像之外,還可以藉由Photoshop處理出去背景的影像素材,以及包含半透明效果的影像素材,也都是動畫中常需要的專業素材準備。 1.挖剪造型影像 影像素材外觀除了是直角矩型外,還需要圓角矩型甚至是其他的外觀造型,此時就需要使用Photoshop的路徑與選取範圍來處
Thumbnail
以影像點陣圖為動畫素材時,除了一般的影像之外,還可以藉由Photoshop處理出去背景的影像素材,以及包含半透明效果的影像素材,也都是動畫中常需要的專業素材準備。 1.挖剪造型影像 影像素材外觀除了是直角矩型外,還需要圓角矩型甚至是其他的外觀造型,此時就需要使用Photoshop的路徑與選取範圍來處
Thumbnail
動畫素材除了使用Animate CC工具繪製之外,搭配匯入自Illustrator繪製較精細的動畫素材,也是專業與必要的方式。而在搭配匯入自Illustrator繪製素材製作動畫時的各種方式與技巧,也是動畫素材準備的重點內容。 1.直接拷貝貼上illustrator素材 您可以在 Illustrat
Thumbnail
動畫素材除了使用Animate CC工具繪製之外,搭配匯入自Illustrator繪製較精細的動畫素材,也是專業與必要的方式。而在搭配匯入自Illustrator繪製素材製作動畫時的各種方式與技巧,也是動畫素材準備的重點內容。 1.直接拷貝貼上illustrator素材 您可以在 Illustrat
Thumbnail
無群組或是非基本矩形、非基本橢圓等繪圖物件,在物件重疊時隨即自動進行圖案間編輯處理,包括填色與外框筆畫間均會互相作用。 1.填色圖案之間相加 當繪製彼此重疊且無筆畫的填色相同形狀時,重疊的形狀將自動合併在一起。 2. 填色圖案之間上減下 當您繪製彼此重疊無筆畫的不同填色形狀時,最上層的形狀會截掉一
Thumbnail
無群組或是非基本矩形、非基本橢圓等繪圖物件,在物件重疊時隨即自動進行圖案間編輯處理,包括填色與外框筆畫間均會互相作用。 1.填色圖案之間相加 當繪製彼此重疊且無筆畫的填色相同形狀時,重疊的形狀將自動合併在一起。 2. 填色圖案之間上減下 當您繪製彼此重疊無筆畫的不同填色形狀時,最上層的形狀會截掉一
Thumbnail
1.設定環境 第一次開啟Animate cc新版本後,預設畫面為深色配色,對於深色介面,可以執行【編輯 > 偏好設定】,設定使用者介面。 2.開啟網頁動畫新檔 開新檔案請由開始畫面上選取【網頁】分類,所製作出來的動畫格式才是HTML5 Canvas+javascript的網頁格式,也可以執行[ 檔
Thumbnail
1.設定環境 第一次開啟Animate cc新版本後,預設畫面為深色配色,對於深色介面,可以執行【編輯 > 偏好設定】,設定使用者介面。 2.開啟網頁動畫新檔 開新檔案請由開始畫面上選取【網頁】分類,所製作出來的動畫格式才是HTML5 Canvas+javascript的網頁格式,也可以執行[ 檔
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News