by: adminPosted on:

สอนใช้ Motion Canvas + AI เสกแผนผัง Flowchart เรืองแสงวิ่งอัตโนมัติ (EP.4)

🔥 คอร์สจับมือทำ EP.4🏆 เครื่องมือทำแอนิเมชันระดับโลก (18,800+ ⭐ บน GitHub)

สอนใช้ Motion Canvas + AI เสกแผนผัง Flowchart เรืองแสง วิ่งอัตโนมัติ (ไม่ง้อ After Effects!)

อยากได้แอนิเมชันแผนผังระบบ AI Agent ที่ยิงเส้นแสงเลเซอร์วิ่งจากกล่องหนึ่งแตกแขนงไปอีก 3 กล่องแบบสมูทกริบไหมครับ? บทเรียนนี้คุณต้นพาใช้ Motion Canvas คู่กับ AI สั่งงานด้วยภาษาไทย พร้อมหน้าต่าง Timeline Editor ระดับสตูดิโอ!

💡 แนะนำ: เปิดดูคลิปควบคู่ไปกับการกดปุ่ม คัดลอกคำสั่ง ด้านล่างเพื่อทำตามทีละขั้นได้เลยครับ⬇️ ดูคำสั่งทั้งหมดด้านล่าง

❌ วาดแอนิเมชันแผนผังใน After Effects

  • ต้องดัดเส้น Path และตั้งค่า Trim Paths ทีละเส้น ใช้เวลาหลายชั่วโมง
  • ขยับตำแหน่งกล่องทีเดียว เส้นลูกศรที่เชื่อมไว้เบี้ยวต้องแก้ใหม่ทั้งหมด
  • กินสเปกเครื่องสูงมาก พรีวิวกระตุกและเรนเดอร์นาน

⚡ ใช้ Motion Canvas + AI (วิธีในคลิปนี้)

  • เขียนแอนิเมชันแบบ Procedural ลำดับเหตุการณ์ต่อเนื่องลื่นไหล 60fps
  • สั่ง AI ด้วยภาษาไทยให้สร้างกล่อง Node ยิงลูกศรเรืองแสงแตกแขนงได้ใน 1 นาที
  • มีหน้าเว็บ Motion Canvas Studio (localhost:9000) พร้อมไทม์ไลน์ควบคุมและกด Export วิดีโอได้ทันที!

💰 เอาไปต่อยอดทำเงินยังไงได้บ้าง?

  • ทำคลิปสอนเทคโนโลยี ระบบ AI, Automation, Blockchain หรือการเงิน
  • ทำวิดีโอ Pitching นำเสนอสถาปัตยกรรมระบบให้ลูกค้าองค์กรดูเข้าใจใน 30 วินาที
  • ทำ B-Roll กราฟิกเรืองแสงใส่ในคลิป YouTube ยาว เพื่อเพิ่มมูลค่าโปรดักชัน
STEP-BY-STEP

ขั้นตอนการทำตามคลิป (จับมือทำทีละคลิก)

ขั้นตอนที่ 1 คัดลอกลิงก์คลังโค้ด Motion Canvas จาก GitHub
⏱️ ดูในคลิปนาทีที่ 00:08

พระเอกของ EP.4 คือ Motion Canvas เครื่องมือสร้างเวกเตอร์แอนิเมชันระดับท็อปที่มียอดดาวบน GitHub กว่า 18,800 ดวง จุดเด่นคือการสร้างกราฟิกแบบลำดับขั้นตอน (Procedural Animation) ที่มีหน้าต่างไทม์ไลน์ให้ดูสดๆ กดคัดลอกลิงก์ด้านล่างนี้ได้เลยครับ:

🔗 ลิงก์ GitHub ของ Motion Canvas
https://github.com/motion-canvas/motion-canvas
ขั้นตอนที่ 2 เปิด Antigravity แล้วสั่งติดตั้ง Motion Canvas พร้อมเปิด Studio
⏱️ ดูในคลิปนาทีที่ 00:20

เปิดโปรแกรม Antigravity แล้ววางคำสั่งด้านล่างนี้ลงในช่องแชท AI จะสร้างโปรเจกต์ Motion Canvas ติดตั้งแพ็กเกจทั้งหมด และรันเซิร์ฟเวอร์เปิดหน้าเว็บ Motion Canvas Studio (localhost:9000) ขึ้นมาให้ทันทีครับ:

💬 คำสั่งติดตั้งโปรเจกต์ Motion Canvas (วางในช่องแชท AI)
ช่วยโคลนโปรเจกต์จากลิงก์ https://github.com/motion-canvas/motion-canvas.git ลงในโฟลเดอร์นี้ ติดตั้งแพ็กเกจและเครื่องมือที่จำเป็นทั้งหมดตามขั้นตอน (npm init @motion-canvas@latest) จากนั้นรันเซิร์ฟเวอร์เปิดหน้าโปรแกรม/หน้าเว็บขึ้นมาให้ผมใช้งานพร้อมบอกลิงก์ Localhost ที่ต้องกดเปิดด้วยครับ
ขั้นตอนที่ 3 สั่ง AI เขียนฉากแผนผังระบบ AI Agent พร้อมลูกศรเรืองแสงแตกแขนง
⏱️ ดูในคลิปนาทีที่ 00:46

เมื่อหน้าต่าง Studio พร้อมแล้ว ให้คัดลอกคำสั่งจริงที่คุณต้นใช้ในคลิปด้านล่างนี้ไปวางในช่องแชท AI ได้เลยครับ AI จะเขียนโค้ดลงในไฟล์ src/scenes/example.tsx สร้างกล่อง User Prompt ยิงลูกศรเรืองแสงไปหา LLM Brain แล้วแตกแขนงออกเป็น 3 เครื่องมือพร้อมตัวหนังสือภาษาไทยให้อัตโนมัติ:

🎬 คำสั่งสร้างแอนิเมชันแผนผัง AI Agent (คำสั่งจริงในคลิป)
ช่วยเขียนโค้ดใน src/scenes/example.tsx ของ Motion Canvas ให้แสดงแผนผังการทำงานของระบบ AI Agent: เริ่มจากกล่อง ‘User Prompt’ สีฟ้าด้านซ้าย ยิงลูกศรเรืองแสงวิ่งไปหา ‘LLM Brain’ ตรงกลาง แล้วแตกแขนงออกเป็น 3 กล่องด้านขวาคือ ‘Search Web’, ‘Run Code’, ‘Save File’ พร้อมแอนิเมชันกระพริบและตัวหนังสืออธิบายภาษาไทย
ขั้นตอนที่ 4 กด Play พรีวิวบนไทม์ไลน์ localhost:9000 และกด Render วิดีโอ!
⏱️ ดูในคลิปนาทีที่ 02:18

เปิดหน้าเว็บ http://localhost:9000 จะเห็นแอนิเมชันแผนผัง AI Agent วิ่งอย่างสวยงามพร้อมแถบ Timeline ด้านล่าง สามารถกดปุ่ม Video Settings → Render บนหน้าเว็บเพื่อส่งออกเป็นไฟล์วิดีโอความละเอียดสูงได้ทันทีครับ!

PROMPT LIBRARY

แจกฟรี! 8 ตัวอย่าง Prompt สำหรับสั่ง AI ทำแอนิเมชันใน Motion Canvas

🧠 หมวดแผนผัง AI & Automation

1. แผนผังการทำงาน Multi-Agent 3 ตัวช่วยกันทำงาน

แสดงภาพ AI ตัวที่ 1 ค้นหาข้อมูล ส่งต่อให้ตัวที่ 2 เขียนบทความ และตัวที่ 3 ทำภาพปก

Prompt พร้อมใช้
ช่วยเขียนโค้ดใน src/scenes/example.tsx ของ Motion Canvas ให้แสดงแผนผัง Multi-Agent Workflow เรียงจากซ้ายไปขวา: กล่อง ‘คำสั่งผู้ใช้’ ยิงแสงไปหา ‘AI นักวิจัย’ → ส่งข้อมูลต่อให้ ‘AI นักเขียน’ → ส่งต่อให้ ‘AI นักออกแบบปก’ และรวมผลลัพธ์ออกเป็นกล่องสีทอง ‘โพสต์ลงโซเชียลอัตโนมัติ’ พร้อมคำอธิบายภาษาไทย
💸 หมวดแผนผังกระแสเงินสด & รายได้

2. แผนผังการกระจายรายได้เป็น 4 กองทุนอัตโนมัติ

เห็นภาพการแบ่งเงินเดือนเข้ากระเป๋าค่าใช้จ่าย เงินออม ประกัน และการลงทุนแบบเข้าใจง่าย

Prompt พร้อมใช้
ช่วยเขียนโค้ดใน src/scenes/example.tsx ของ Motion Canvas แสดงแผนผังการบริหารเงินเดือน: เริ่มจากกล่อง ‘รายได้ต่อเดือน 100%’ ด้านซ้าย ยิงเส้นแสงสีทองแตกออกเป็น 4 กล่องด้านขวา ได้แก่ ‘ค่าใช้จ่ายจำเป็น 50%’, ‘ลงทุนต่อยอด 20%’, ‘เงินออมฉุกเฉิน 20%’ และ ‘ให้รางวัลตัวเอง 10%’ พร้อมแอนิเมชันตัวเลขวิ่ง
💻 หมวดสอนเขียนโปรแกรม & Tech

3. แอนิเมชันไฮไลท์โค้ดทีละบรรทัดพร้อมกล่องอธิบายผลลัพธ์

จุดเด่นที่สุดของ Motion Canvas คือการทำแอนิเมชันซูมและไฮไลท์โค้ดแบบช่องสอนโปรแกรมมิ่งระดับโลก

Prompt พร้อมใช้
ช่วยเขียนโค้ดใน src/scenes/example.tsx ของ Motion Canvas ด้านซ้ายแสดงหน้าต่างโค้ดสีมืดที่ค่อยๆ ไฮไลท์ทีละบรรทัด ส่วนด้านขวาแสดงแผนผังกล่องข้อมูลที่เปลี่ยนสถานะตามบรรทัดโค้ดที่กำลังทำงาน พร้อมลูกศรชี้เชื่อมโยงและคำอธิบายภาษาไทย
🌳 หมวดสรุปความรู้ Mind Map

4. แผนผังกิ่งก้าน Mind Map ขยายตัวจากแกนกลาง

เหมาะสำหรับคลิปสรุปหนังสือ สรุปบทเรียน หรือแตกไอเดียธุรกิจ

Prompt พร้อมใช้
ช่วยเขียนโค้ดใน src/scenes/example.tsx ของ Motion Canvas สร้างแอนิเมชัน Mind Map โดยเริ่มจากวงกลมเรืองแสงตรงกลางคำว่า ‘4 เสาหลักสร้างรายได้ยุค AI’ แล้วค่อยๆ ลากเส้นแสงแตกออกเป็น 4 มุมของหน้าจอ พร้อมเด้งการ์ดสรุปแต่ละเสาหลักขึ้นมาทีละมุมอย่างสมูท
🔄 หมวดวงจรธุรกิจ (Flywheel)

5. แอนิเมชันวงล้อธุรกิจ Flywheel หมุนต่อเนื่องเรืองแสง

ใช้อธิบายโมเดลธุรกิจที่ยิ่งทำยิ่งโตเหมือน Amazon หรือช่องคอนเทนต์

Prompt พร้อมใช้
ช่วยเขียนโค้ดใน src/scenes/example.tsx ของ Motion Canvas แสดงวงจร Growth Flywheel 4 ขั้นตอนเรียงเป็นวงกลม: ‘ทำคอนเทนต์คุณค่าสูง’ → ‘คนดูแชร์และติดตาม’ → ‘สร้างความน่าเชื่อถือ’ → ‘เปลี่ยนเป็นยอดขายต่อยอด’ โดยมีลูกศรแสงสีฟ้าวิ่งวนเชื่อมทั้ง 4 กล่องอย่างต่อเนื่อง
📅 หมวดไทม์ไลน์แผนงาน (Roadmap)

6. เส้นไทม์ไลน์ Roadmap 4 ไตรมาส วิ่งเปิดจุดสำคัญทีละขั้น

ใช้ทำคลิปพรีเซนต์แผนงานบริษัท หรือขั้นตอนการเรียนในคอร์ส

Prompt พร้อมใช้
ช่วยเขียนโค้ดใน src/scenes/example.tsx ของ Motion Canvas สร้างแอนิเมชันเส้น Timeline แนวนอน 4 ขั้นตอน (Step 1 ถึง Step 4) ให้เส้นแสงสีเขียวมรกตค่อยๆ วิ่งจากซ้ายไปขวา เมื่อวิ่งถึงจุดไหนให้จุดนั้นสว่างขึ้นและเด้งการ์ดรายละเอียดภาษาไทยขึ้นมา
⚖️ หมวดเปรียบเทียบโครงสร้าง

7. เปรียบเทียบการทำงานแบบ Manual vs ระบบอัตโนมัติ AI

ให้เห็นความต่างระหว่างขั้นตอนที่ซับซ้อนยุ่งเหยิง กับเส้นทางตรงที่รวดเร็วของ AI

Prompt พร้อมใช้
ช่วยเขียนโค้ดใน src/scenes/example.tsx ของ Motion Canvas แบ่งครึ่งจอบน-ล่าง ครึ่งบนแสดงแผนผังการทำงานแบบเดิมที่มี 6 กล่องซับซ้อนและลูกศรวิ่งช้าสีแดง ส่วนครึ่งล่างแสดงการทำงานด้วย AI ที่ยิงเส้นแสงสีทองพุ่งตรงจากต้นทางไปสู่ผลลัพธ์สำเร็จในขั้นตอนเดียว
🎯 หมวดกราฟคณิตศาสตร์ & ฟิสิกส์

8. แอนิเมชันคลื่นสัญญาณและกราฟเส้นโค้งสไตล์ 3Blue1Brown

สร้างกราฟเส้นโค้งเคลื่อนไหวแบบเรียลไทม์สำหรับอธิบายสถิติหรือวิทยาศาสตร์

Prompt พร้อมใช้
ช่วยเขียนโค้ดใน src/scenes/example.tsx ของ Motion Canvas สร้างกราฟแกน X และ Y บนพื้นหลังสีมืดพร้อมเส้นตารางเรืองแสง จากนั้นวาดเส้นกราฟการเติบโตแบบ Exponential สีทองที่ค่อยๆ พุ่งทะยานขึ้นพร้อมจุดเรืองแสงวิ่งนำหน้าเส้นกราฟและแสดงตัวเลขค่าปัจจุบันแบบเรียลไทม์

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *