一鍵自動將手繪流程圖轉為動畫影片,免費工具製作生動解說影片



當老師在教學時要介紹一段歷史源流、一個知識概念,講師在演講中要解釋一個方法系統、一段邏輯推論,或是專案經理在會議報告上要說明整個工作架構,乃至於 YouTube 內容創作者要解釋主題的多個重點,這時我們可能會畫出一張流程圖。這張流程圖很完整,但解說時如果可以像是「動畫」一樣,讓流程圖逐步展示,更容易讓聽眾看出前因後果、演化改變的關係。而今天要介紹的這個小工具:「 Excalidraw Animate 」,就可以讓手繪風格的流程圖自動轉成動畫圖檔,用影片方式重現繪製流程圖的每一步過程。

「 Excalidraw Animate 」應該可以成為上述工作者一個很實用的輔助工具,無論是要製作一段動畫簡報,還是要在 YouTube 中穿插一段解說影片,都能快速生成需要的動態流程圖檔案

並且這個製作流程使用的工具,都是完全免費可用的。首先我們只要在「 Excalidraw 」中先逐步繪製出想要的流程圖,然後將檔案匯入「 Excalidraw Animate 」,就能製作成可播放的動畫影片。

下面就來示範分享整個製作流程,可以先看看完成的影片效果。





先在「 Excalidraw 」繪製流程圖

電腦玩物中介紹過幾次「 Excalidraw 」,這也是我目前依然愛用的流程圖繪製工具:
免費、免註冊帳號的情況下,就能繪製出需要的流程圖,並且可以分享、可以匯出成檔案。

我以之前在《防彈筆記法》一書中繪製的流程圖架構為例,回到「 Excalidraw 」流程圖檔案位址,打開左上方選單,選擇「匯出圖片」。




匯出圖片時,要勾選「嵌入場景」,這樣流程圖的繪製細節會包含在檔案中,然後匯出成 PNG 或 SVG 圖檔。





透過「 Excalidraw Animate 」製作成動畫

接著來到「 Excalidraw Animate 」網站,選擇左方的「 Load File 」,載入剛剛的流程圖圖檔,然後按下「 Animate! 」。




這樣一來,網頁中就會開始用動畫播放這張流程圖的完整繪製過程囉!






匯出影片檔案

那麼要如何把這樣的動畫,轉換成可以更自由在簡報、影片中使用的內容呢?

「 Excalidraw Animate 」本身有提供了一個「 Export to WebM 」的選項,按下後,透過允許螢幕錄製的方式,可以直接利用 Chrome 的螢幕錄影功能,把剛剛的動畫播放過程錄製下來,轉成 WebM 影片。




同樣的原理,如果要轉出效果更好的動畫,我們也可以使用自己慣用的螢幕錄影工具,錄製剛剛的動畫播放過程即可。

例如我目前使用 Chrome 套件:「Screencastify 螢幕錄影與教學影片軟體,多年後依然是我首選」,可以隨時進行網頁分頁的錄影,就能輕鬆錄下動畫播放過程了。




Excalidraw Animate提供了一種簡潔而有效的方式,讓我們的思維和概念通過動態流程圖得以生動呈現。無論是在教學、演講還是專案管理中,這樣的工具不僅能幫助我們更好地組織和表達思想,也使得信息的接收者能夠更直觀地理解和記憶。

有興趣的朋友可以試試看。



大家好,我是電腦玩物站長 Esor ,歡迎參考我的系列課程與書籍:


我的電子郵件是 esorhjy@gmail.com ,如果你有任何關於筆記術、時間管理、提升工作效率的問題,歡迎寫信跟我討論。

(歡迎社群分享。但全文轉載請來信詢問,禁止修改上述內文,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang 異塵行者,及附上原文連結:一鍵自動將手繪流程圖轉為動畫影片,免費工具製作生動解說影片

留言

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Readwise Reader 如何自訂 AI 中文摘要指令?我的 prompts 分享

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

待辦清單到底有用無用?避開完成焦慮,符合人性的使用待辦清單

Google 表單自動關閉回覆教學:時間人數到達就過期

Evernote 大綱收合、目錄連結、錨點連結,整理超長筆記應用案例分享

Google 表單的 10 個專業問卷調查設計秘密教學

Draw.io 中文線上製作流程圖首選!專業水準完全免費