Animate CC 匯入Illustrator 素材

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

1.直接拷貝貼上illustrator素材

您可以在 Illustrator 中建立具豐富圖像的圖稿,並簡單、快速且完美地拷貝及貼入 Animate CC中。對於在Illustarator繪製完成的一般物件,可以在二軟體同時開啟時,直接選取並拷貝至Animate CC上直貼上,當您將 Illustrator 圖像貼入Animate CC時,會保留下列屬性:路徑和形狀、筆畫寬度、漸層、文字等,在貼上對話框中一般選擇【使用AI檔案匯入工具的偏好設定貼上】、【套用建議的匯入設定以便解決不相容性】即可保持向量格式,勿勾選【貼上為點陣圖】。
若直接貼上時有發現無法完整支援的內容,請在Illustrator中使用工作區域工具調整好檔案範圍,再執行【檔案>轉存>儲存為網頁用】選擇儲存PNG24透明背景檔,回到Animate CC再以檔案>匯入>匯入至舞台,完成匯入即可。

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

當您想要在 Illustrator 中建立完整的動畫素材,然後以一個步驟將它們匯入Animate CC時,您可以將圖稿儲存成原生 Illustrator 格式 (AI),並將各部位物件整理至各別獨立圖層上。
在Animate CC中執行『檔案 > 匯入至舞台』,選取要匯入的AI檔,匯入時將首先顯示匯入選項設定視窗,在左側圖層區為顯示AI檔內的原始圖層與群組,可先收起每個圖層並勾取要匯入的圖層。
在下方的『將圖層轉換成』可選擇設定原來AI圖層的匯入方式:『Animate圖層』將匯入文件中的每一個圖層轉換成Animate CC文件中的圖層。『將物件放回原始位置』AI檔案的內容會保留這些內容原本在 Illustrator 中的確切位置。『將舞台設成 Illustrator 工作區域大小』Animate舞台大小會調整為用來建立 AI 檔案的 Illustrator 工作區域 (或作用中裁切區) 大小。『匯入未使用的元件』 如果沒有選取這個選項,未使用的元件就不會匯入。『匯入為單一點陣圖影像』將 AI 檔案匯入為單一點陣圖影像。請選擇『將物件放回原始位置』、『將舞台設成 Illustrator 工作區域大小』
若匯入時有發現無法完整支援的內容,請回到Illustrator中使用工作區域工具調整好檔案範圍,再分圖層依序執行【檔案>轉存>儲存為網頁用】選擇儲存PNG24透明背景檔,回到Animate CC再以檔案>匯入>匯入至舞台,完成匯入即可。
為什麼會看到廣告
29會員
161Content count
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍
使用鉛筆、鋼筆工具繪製線稿後,藉由完善的修整筆畫功能整理好所有需要的線稿,最後使用油漆桶、墨水瓶填色,搭配物件管理與編輯,完成漸層背景、石頭、水中魚與海草。 STEP1. 使用鋼筆工具與直接選取工具繪製調整出基本構成筆畫,使用『轉換錨點工具』轉換轉折角成平滑曲線,再使用鉛筆工具繪製其他黑線稿(選擇
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍
使用鉛筆、鋼筆工具繪製線稿後,藉由完善的修整筆畫功能整理好所有需要的線稿,最後使用油漆桶、墨水瓶填色,搭配物件管理與編輯,完成漸層背景、石頭、水中魚與海草。 STEP1. 使用鋼筆工具與直接選取工具繪製調整出基本構成筆畫,使用『轉換錨點工具』轉換轉折角成平滑曲線,再使用鉛筆工具繪製其他黑線稿(選擇
你可能也想看
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。